みなさまこんにちは。
現在、未経験からフリーランスエンジニアを目指して学習中のコーヒー屋です。
昨年の夏ごろからAIコーディングをスタートし、個人開発を頑張っています。
今回はAIエージェント（Antigravity）とペアプロしながら、24時間タイムアタックで新しい個人開発プロダクトを作り切りました。走り抜けたなあ〜。
よくあるECサイトに「没入感」と「遊び心」を詰め込んだ**「2D Webshop Salva」**というアプリを開発したので紹介します。
🎮 アプリの概要：2D Webshop Salva
普段はBASEを使ってオンラインショップを運営しています。
今回は、「買い物は、対話だ。」 をテーマに、1つの画面に「全商品」「店主とのコミュニケーション」「遊び心」「店内BGM」などを詰め込んだ2Dゲーム風の没入型Webショップを開発しました。
従来の「ただの商品リストが並ぶだけのECサイト」ではなく、店主との会話を楽しみながら商品を選べる、推し活EC体験です。
主な機能
- インタラクティブな2D店舗: 札幌にある実店舗をNanoBananaProで再現し、Pixi.jsを用いて2D空間にしました。背景の棚に並んだコーヒー豆パッケージをタップすると商品詳細とリンクが展開します。
- AI店主 サルバさん: 別プロジェクト(AI サルバさんチャット)で開発した知識特化型生成AIの外部APIを搭載した店主アバターが、あなたの好みに合わせてコーヒーを提案してくれます。「おすすめは？」と聞けば、棚の商品を指差して（ハイライトして）教えてくれます。コーヒー以外の話にも対応しており、AIとは思えないレベルの対話が実現しています。
- 隠し機能「ときめきモード」: ここが遊びポイント。店主との会話がある特定の展開（恋愛フラグ）に進むと、画面の雰囲気が一変！BGMやキャラクターの表情が変わり、突然恋愛シミュレーションゲームが始まります。
- 分析ログ: チャットの履歴はGoogleスプレッドシートに自動保存され、エラーやバグの修正に使われます。また、ユーザーの質問傾向を分析することで、AIの受け答えや商品ミックスを改善します。
🛠 技術要件
モダンなフロントエンド技術と、サーバーレスな構成で「リッチな表現」を実現しました。
- Frontend: React + Vite
- 2D Engine: Pixi.js (v8)
- State Management: Nanostores (ReactとPixi.jsの繋ぎ込みに使用)
- Styling: Tailwind CSS + Framer Motion (アニメーション)
- Backend/Log: Google Apps Script (GAS)
- AI Interaction: Gemini
- Deployment: Vercel
💦 苦労したポイント
1. Mobile Safari × Pixi.js の落とし穴
一番ハマったのが、iPhone (Mobile Safari) 特有の挙動です。
ちみにSafariはPCでもモバイルでも、ちょっと特殊なUIなのでしょうか？Antigravityのブラウザ検証では自動でChromeを使用するため、エージェント目線では問題が解消していても、実際の環境では改善していないという事象が多発します。
今回は、PCでは快適に動くのに、スマホ実機で確認すると**「商品の点滅（ハイライト）が止まらない」「リセットボタンが押せない」**という致命的なバグに遭遇しました。
解決策:
-
点滅問題: ストア（Nanostores）の購読解除漏れが原因でメモリリークしていました。
useEffectのクリーンアップ関数で、購読を確実に解除する処理を徹底しました。また、商品選択時に明示的に「点滅終了」のシグナルを送ることで解決しました。 -
タップ無効問題: ReactのUIレイヤーとPixi.jsのキャンバスレイヤーが重なっており、
pointer-eventsの制御が競合していました。モーダル等をオーバーレイ専用のコンテナ外に出すなど、DOM構造を見直すことで解決しました。 - これらの問題の原因をコードレビューで探し出し、一発修正してくれるのがエージェントの素晴らしいところですね。
2. 2DシーンとReact UIの同期
Pixi.jsで描画される「ゲーム内世界」と、Reactで描画される「チャットUI」をどう同期させるかが課題でした。 例えば、チャットで「ときめきモード」に突入した瞬間、Pixi.js側のキャラクター画像を実写版アセットに差し替える必要があります。
解決策: 軽量な状態管理ライブラリ Nanostores を採用しました。
gameStore.ts を介して、ReactコンポーネントとPixi.jsのシーンが疎結合に連携できるように設計。チャットの履歴を監視し、特定のキーワード（フラグ）が立ったら即座にPixi側のテクスチャを更新する仕組みを構築しました。
💡 画期的なポイント
「恋愛シミュレーション × EC」というありそうでなかった体験
普通、ECサイトに「攻略要素」なんて入れませんよね。笑
しかし、コーヒーショップのようなコミュニティ型の実店舗の良さは「顧客と店主の関係性」にあります。これをWebで表現するために、あえて**「店主を攻略できる」というゲーム性を導入しました。 店主と仲良くなれば（ハッピーエンド）、実際の来店時にも会話が弾むかもしれません。実際、私を知る顧客は実写版を見て大爆笑です。「機能性」よりも「体験」を重視した**、個人開発ならではの尖った仕様にしてみました。
既存資産（特化型AI）のAPI化による爆速開発
これが、最近のブレイクスルーでした。自分で開発した機能をAPI化し、外部ソースとして連携できる。 これは衝撃の発見でした。(エンジニアさん的には常識すぎるかもしれませんがw)
以前開発した「AIサルバさん」の機能をAPI化して再利用することで、プロダクトの核となるチャット対話型コマースの実用パーツをゼロから作って育てる手間がなく、不要なやり取りは外部API限定でOffにするコードを入れることで、2Dコマース版に最適化したAIチャット機能を爆速で実装することができました。 「作る」だけでなく「繋げる」ことで、開発スピードを最大化できるのも個人開発の醍醐味です。
GASによるサーバーレス・ロギング
個人開発でDBサーバーを立てるのはコストも手間もかかります。 そこで、Google Apps Script (GAS) をAPIエンドポイントとして利用しました。
- チャットログを送信 → GASが受け取り → スプレッドシートに行を追加 というシンプルな構成にすることで、完全無料でログ分析基盤を構築しました。CORSエラーには
mode: 'no-cors'で送信のみ行うハックで対応しています。 - スプレッドシートにはGeminiが組み込まれていて、その日のチャットログをキュレーションし、自分宛に12時間ごとに新着ログをメール配信させることも可能です。
Stripeのカート連携機能を内蔵
今後さらにUI/UXを発展させ、おすすめされた商品をカートに追加して決済するところまでを実装していくつもりです。そうすることで、流入した顧客がAI店主に商品紹介されて決済に至るまでの体験を、ひとつの画面で完全自動化することが可能になります。そのため、要件定義の段階で、後からStripeの決済カートを実装するためのコードを仕込んであります。
🚀 今後の目標
現在わたしは札幌でコーヒーショップを8年ほど経営しています。
趣味でAIコーディングによる個人開発を行っていますが、今後はどこかで実務経験を積んでフリーランスエンジニアとして、兼業ではありますが活躍したいと考えています。
店を持っているため、未経験SESとしてフルコミットで現場に入ることができず、「実務経験」というニワトリタマゴな問題に、ぶち当たっているところです。
- 現在のステータス: 独学でPython/TypeScript/React/Pixi.jsなど開発中。
-
探している環境:
- モダンな技術スタック（TypeScript/React/Next.js/Goなど）に触れられる
- 未経験者のAIコーディング活用に理解がある
- 兼業・副業からでも実務経験を積める
今回 2D Webshop Salva の開発を通して、フロントエンドのリッチな表現や、AIと連携したUX設計の楽しさを再確認しました。
もし、「一緒に働いてみないか？」と興味を持っていただける企業様やチームがいらっしゃれば、ぜひお声がけいただけると嬉しいです！
ここまで読んでいただきありがとうございました！
記事にいいねをいただけると励みになります！☕️