ブラウザで動く海辺のサウンドノベルゲーム「ことつぎの星」は、星が堕ちて言葉のかけらが浜に打ち上がる島を舞台にした作品です。プレイヤーは拾った言葉を文章の欠けに継ぎ、物語を自分の手で編み直していきます。
この記事では、この作品を生成AIエージェント（Claude Code等）とともにどのように設計・実装したのか、開発の裏側と技術的挑戦を紹介します。
1. なぜブラウザでサウンドノベルなのか？
インストールや会員登録をせず、URLを開くだけで数秒後には物語へ入れること。ブラウザゲームには、作品との最初の接点を軽くできる大きな魅力があります。スマートフォンやPCのブラウザで、WebGLによる3D演出と音声を組み合わせ、短い時間でも世界観に触れられる体験を目指しました。
2. 物語と一体化する「言葉を継ぐ」システム
「ことつぎの星」の中心にあるのは、物語の途中で空白になった文章へ、探索で集めた「ことば」を当てはめる仕組みです。選択肢を選ぶだけでなく、どの言葉を継ぐかによって、文章の意味と登場人物との距離が変化します。
- 文章の書き換え：言葉そのものを嵌め込むことで、世界のトーンと物語の進み方が変わります。
- 音と演出：声、環境音、画面の揺らぎをひとつの出来事として設計しています。
- 立体的な入口：トップページの夜の海や、Three.jsで作った飛び出す絵本からも物語へ入れます。
3. AIエージェントとの協働開発
本作では、構想の整理、フロントエンドの実装、デバッグ、パフォーマンス調整、SEOの整備まで、AIエージェントを開発パートナーとして活用しています。人間が作品の方向性と体験の基準を決め、エージェントがコードの探索・変更・検証を反復することで、試作から改善までの速度を高めました。
- 高速なプロトタイピング：UI、演出、音声再生ロジックを小さく試してから統合。
- 壊れにくい修正：ページめくりのフリーズや、立体オブジェクトとの大きさのずれを、実際の動作確認とともに調整。
- 発見されるための設計：JSON-LD、canonical、OGP、サイトマップ、DevLogを作品制作と並行して整備。
4. これから
「ことつぎの星」は、章の追加とインタラクティブ性の向上を続けます。ブラウザゲームの手軽さを保ちながら、声と音と文章がひとつの記憶になる物語体験を届けるための挑戦です。