VibeCity - あなたの感情を包み込む対話空間
(vibecity.chat)こんにちは！
バイブコーディングでいったいどこまでできるのか？と考えているうちに作ることになった、ゲームのような感覚を取り入れた仮想キャラクターチャットサービスです。
2Dピクセルアートを使ってVibeCityの中にクラシックなミッドナイトバーを実装し、仮想の客たちがこの場所に滞在しています。今日の感情状態を選び、飲み物をおすすめしてもらったら、気に入った客と会話してみることができます。
3人の仲間と一緒にサイドプロジェクトとしてさまざまな試みをしているのですが、これまで作っていたものから離れて、はたして「私たちは癒やし、共感、楽しさを人々に届けられるのか？」という問いに対するスプリントプロジェクトとして見ていただければと思います。
このサービスは、2週間のデザインスプリントを通じて作られました。
[使用したAIツールの組み合わせ]
VibeCityらしく、できるだけ多くの生成AIサービスを使ってみました。
- キャラクタープロンプト (ChatGPT, Silly Tavern)
- キャラクター画像、背景 (Midjourney, Whisk(Imagen4), Imagen3)
- 背景世界観、画像生成プロンプト (ChatGPT 4o, Gemini 2.5 Pro)
- プロジェクト実装 (Claude Sonnet 4, ChatGPT 4.1)
- BGM (SunoAI)
プロトタイプは1日、2日で満足できるレベルに仕上げてくれました。しかし案の定、機能を追加するほどバイブの反復回数が増え、連続性が大きく落ちるのが顕著だったため、IDEではできるだけAgentモードよりAskモードを多く使い、1ファイルあたりの行数を少なく保つことにかなり重点を置きました。
特にゲームに適用されるシーンという概念を初めて実装したこともあり、明確な設計指示が不足していたため、難しい部分がより多かったように思います。
キャラクタープロンプトを作る際には、Silly TavernやWrtnを使っている方々のコツを参考にしました。
飲み物の画像を作るときに使った簡単なプロンプトは以下の通りです。
"A detailed pixel art masterpiece, 16-bit retro style, vibrant colors, white background, depicting: mojito. Ensure clear outlines and a distinct pixelated aesthetic."
デザイナーがいないチームなので、必要なアセットを本当に生成AIだけで十分に作り出せるのかと思っていましたが、プロトタイプ用途としては非常に満足度の高い体験でした。
[開発関連]
- IDE (Cursor, Github Copilot)
- API (ChatGPT 4.1)
- サーバーレスバックエンド (Vercel)
- データベース (サーバーレス SQLite)
React環境は初めてだったのですが、Vercelの無料プランであるHobbyの段階でも、手軽なデプロイから統計、Speed Insightsの確認、サーバーレスDB接続、カスタムドメイン接続まで、非常に満足度の高いデプロイ体験でした。
ゲームの雰囲気を活かすため、現在はデスクトップ環境のみでテストを進めていますが、ご質問やフィードバックはいつでも歓迎です！ありがとうございます。
3件のコメント
面白そうなプロジェクトですが、モバイルに対応していないのが残念ですね。家に帰ってから試してみようと思います。^^;
おお、とても興味深いですね！ おいしいマルガリータを一杯、しっかりいただきました（笑）
体験ありがとうございました！ 昼飲みは大丈夫でしたでしょうかhaha