はじめに
私はこの約2週間、Google Antigravity（Gemini系AIコーディングエージェント）と共に、React + TypeScript + Viteを使ったブラウザベースのサウンドノベルゲームをはじめて作りました。その過程で得た成功・失敗・学びを共有します。
🎯 本記事のゴール
- AIペアプログラミングのリアルな体験を共有する
- サウンドノベル開発の技術的チャレンジを解説する
- 読者がAI駆動開発に挑戦するためのきっかけを提供する
🎭 対象読者
- AIコーディングツールに興味のあるエンジニア
- React/TypeScriptでゲーム開発をしてみたい方
- ノベルゲーム・ビジュアルノベル制作に興味のあるクリエイター
- 「AIって実際どこまでできるの？」と思っている方
📖 プロジェクト概要：Project Equity
完成したもの
| 機能 | 説明 |
|---|---|
| 📖 マルチチャプター | 4章分のストーリーを実装 |
| 🎨 キャラクターレンダリング | 左/中央/右の3スロット配置、スケール・透明度・フィルター対応 |
| 🎵 オーディオシステム | BGM + 効果音のフルサポート |
| 💾 セーブ/ロード | オートセーブ含む複数スロット |
| ⚙️ 設定画面 | テキスト速度・音量調整 |
| 🌐 バイリンガル | 日英両対応 |
| 📱 モバイル対応 | スマートフォン向けUI最適化 |
技術スタック
React 19 + TypeScript + Vite + Zod
🚀 開発タイムライン：17日間の軌跡
以下は実際の会話ログから抽出した開発フローです：
💡 成功体験：AIがもたらした加速
1. ボイラープレートからの解放
従来なら半日かかるプロジェクト初期設定が、AIとの対話で30分以内に完了。
// AIが生成した型定義の一例
interface Scene {
id: string;
text: BilingualText | string;
backgroundId?: string;
characters?: CharacterConfig;
bgmId?: string;
seId?: string;
nextSceneId?: string;
}
2. コンポーネント設計の迅速な反復
「タイプライターエフェクトを追加したい」と伝えるだけで、AIがTypewriterText.tsxコンポーネントを設計・実装。私の役割はレビューと微調整に集中できました。
3. ワークフローの自動化
AIが.agent/workflows/にカスタムワークフローを作成。新チャプター追加やアセット管理の手順書が自動化されました：
-
/add_new_chapter- 新しいチャプターの追加手順 -
/manage_assets- 画像・音声アセットの管理 -
/refine_ui- UI/UXの反復改善 -
/troubleshoot_build- ビルドエラーのトラブルシューティング
⚠️ 失敗と学び：つまずいたポイント
失敗1: Viteビルドエラーの沼
状況: npm run buildが突然失敗。エラーメッセージが曖昧。
原因: AIが提案した設定変更がViteのバージョンと非互換だった。
学び:
✅ AIの提案を盲信しない
✅ 変更前にビルド確認を徹底する
✅ トラブルシューティング用のワークフローを事前に作成しておく
失敗2: アセットパスの罠
状況: ローカルでは動くが、Netlifyデプロイ後に画像が表示されない。
原因: 相対パスと絶対パスの混在、Viteのビルド時のアセット処理の理解不足。
学び:
// ❌ 動かないパターン
<img src="/assets/images/bg.png" />
// ✅ Viteで正しく動くパターン
import bgImage from '../assets/images/bg.png';
<img src={bgImage} />
失敗3: 曖昧な指示の代償
状況: 「UIをモダンにして」と指示した結果、期待と異なるデザインに。
学び:
✅ 具体的なデザイン参照を提示する
✅ 「グラスモーフィズム」「ダークモード」など明確なキーワードを使う
✅ 反復的なレビューサイクルを確立する
🔧 技術的チャレンジ詳解
チャレンジ1: キャラクター配置システム
3人のキャラクターを左・中央・右に配置しつつ、個別にスケール・透明度・フィルターを適用する必要がありました。
// CharacterLayer.tsx の設計
interface CharacterSlotConfig {
image: string;
scale?: number; // 0.1 ~ 2.0
opacity?: number; // 0.0 ~ 1.0
xOffset?: number; // ピクセル単位
yOffset?: number;
filter?: string; // CSS filter (例: "grayscale(50%)")
}
type CharacterPositions = {
left?: CharacterSlotConfig | string;
center?: CharacterSlotConfig | string;
right?: CharacterSlotConfig | string;
};
ポイント: 後方互換性のため、単純な文字列IDとオブジェクト形式の両方をサポート。
チャレンジ2: バイリンガル対応
日本語原文を活かしつつ、英語圏ユーザーにも楽しんでもらえる設計を実現。
// BilingualText型の設計
type BilingualText = {
ja: string;
en: string;
};
// 言語切り替えコンテキスト
const LanguageContext = createContext<{
language: 'ja' | 'en';
setLanguage: (lang: 'ja' | 'en') => void;
}>({ language: 'ja', setLanguage: () => {} });
チャレンジ3: セーブ/ロードシステム
ブラウザのlocalStorageを活用しつつ、オートセーブ機能も実装。
// SaveLoadUI.tsx の概要
const SAVE_SLOTS = ['auto', 'slot1', 'slot2', 'slot3'];
const saveGame = (slotId: string) => {
const saveData = {
currentSceneId,
currentChapterId,
gameState,
timestamp: Date.now()
};
localStorage.setItem(`save_${slotId}`, JSON.stringify(saveData));
};
📊 AI駆動開発の効率評価
開発速度の比較（私の主観的評価）
| タスク | 従来手法 | AI駆動 | 効率化率 |
|---|---|---|---|
| 初期設計・構造策定 | 8時間 | 2時間 | 4x |
| コンポーネント実装 | 4時間/個 | 1時間/個 | 4x |
| デバッグ・トラブルシューティング | 2時間 | 1.5時間 | 1.3x |
| ドキュメンテーション | 4時間 | 0.5時間 | 8x |
注意: デバッグはAIの提案が的外れな場合、逆に時間がかかることも。
🎓 AIとの協働で得た専門性
この開発を通じて、以下のスキルが身につきました：
-
AIプロンプトエンジニアリング
- 具体的で反復可能な指示の出し方
- コンテキストの適切な提供方法
-
React + TypeScript の深い理解
- カスタムフック設計
- Context APIの実践的活用
- Zodによるランタイム型検証
-
ゲームエンジン設計
- シーン管理とステートマシン
- アセットパイプライン
-
DevOps基礎
- Netlify自動デプロイ
- GitHub Actions連携
🔮 今後の展望
| 優先度 | 機能 |
|---|---|
| 高 | 第5章以降のストーリー追加 |
| 中 | 分岐シナリオシステム |
| 中 | BGMフェードイン/アウト |
| 低 | プレイヤー統計ダッシュボード |
📝 まとめ：AI駆動開発の所感
良かった点
- ドキュメント作成が圧倒的に楽 — README、CREDITS、ワークフローが高品質で生成される
- 反復速度が爆速 — 「こうしたい」を言語化すれば、即座にプロトタイプが出る
- 学習コストの低減 — 知らない技術も、AIとの対話で使い方を学べる
注意点
- AIの出力は必ず検証する — 特にパス、依存関係、ビルド設定
- コンテキストを適切に与える — 曖昧な指示は曖昧な結果を生む
- バージョン管理を徹底する — 変更前のコミットが命綱
🙏 謝辞
本記事で紹介したプロジェクトは、以下のオープンソース・フリー素材を活用しています：
- BGM: DOVA-SYNDROME、Music Note、VSQ
- SE: OtoLogic、Pixabay、SoundDino
リンク
この記事について
Antigravityに書いてもらったものを推敲しています。
##補遺
Coming Soon