なぜ今、ゲームブックなのか？
昭和の時代、鉛筆とサイコロを片手にページを行ったり来たりした「ゲームブック」。
あの独特の没入感と、自分の選択で物語が変わるワクワク感を、AIコードエディターで再現できないかと考えました。
今回は、GoogleのAIコードエディター「Antigravity」を使い、AIが製作者、私は編集者というポジションで、HTML/CSS/JavaScriptを駆使した「デジタルゲームブック」の開発記録をご紹介します。
最後に完成品へのリンクを貼っていますので、実際に触っていただけると嬉しいです。(プレイ時間10分程度)
開発のコンセプトとゴール
- ブラウザさえあれば遊べる: 特別なアプリのインストールは不要。
- シングルファイルで配布: HTMLファイル1つに全て（画像もデータも）詰め込み、友人に送りつけるだけで遊んでもらえる手軽さ。
- シナリオ管理のしやすさ: プログラムの中に文章を埋め込むのではなく、外部データとして管理しやすくする。
技術スタックとアーキテクチャ
非常にシンプルですが、拡張性を考慮した構成にしました。
ちなみにこれら構成やタスクは、すべてAntigravityにお任せで決定されたものです。私は制作中に修正を促すのみです。
① データ構造：シナリオはJSONで管理
物語の進行や選択肢のデータは、すべて scenario.json というJSONファイルに分離しました。
各シーンにIDを割り振り、image_src（画像パス）、text（本文）、choices（選択肢と飛び先ID）を定義しています。
これにより、プログラムを触らなくてもシナリオの追加・修正が容易になります。
② ビルドツール：Node.jsで「1枚のHTML」に凝縮
今回の肝となるのが、自作のビルドスクリプト builder.js です。
配布用の game_dist.html を生成するために、以下の処理を自動化しました。
- HTML/CSS/JSのインライン化: 外部ファイルを読み込む形式から、
<style>や<script>タグの中に中身を直接展開。 - 画像のBase64エンコード:
scenario.jsonで参照されている画像ファイルを読み込み、Base64文字列に変換してJSON内に埋め込み。
これにより、画像フォルダなどを気にすることなく、生成されたHTMLファイル1つをダブルクリックするだけでゲームが起動するようになります。
③ ゲームエンジン：軽量なJavaScript
script.js が担うゲームエンジン部分は、JSONデータを読み込んでDOMを書き換えるだけのシンプルな作りです。
デバッグ用に、任意のシーンへ即座にジャンプできる「デバッグ機能」も実装しました。
開発中の工夫と課題(AI目線の課題)
開発中、特にこだわったのは「画像の扱い」です。
最初は外部読み込みでしたが、配布の手軽さを優先してBase64埋め込み方式に切り替えました。
ファイルサイズは大きくなりますが、「ファイルを渡すだけ」という体験の良さは代えがたいものがあります。
開発中の工夫と課題(人間目線の課題)
ここからは私が編集者に徹して、ゲームブック制作をするうえで苦労したした点などをまとめます。
① シナリオの整合性を取ることとネタバレ防止
今回、制作の縛りとして直接シナリオを修正はせず、AIに希望を伝えて修正をしてもらう開発形式としました。
制作をはじめる際に、基本的な世界観や設定は人間からAIへ伝えて開始したのですが、物語の終盤で登場するはずの設定が、序盤のセリフの中にそれとなく入ってしまったり、妙に説明口調のセリフになったりと、全体の整合性を取ることが意外に難しかったです。
自分で書き直した方が断然早いなと思うことが多々ありました。
② キャラクタの一貫性を保つのが難しい
最初にメインとなるキャラクターのデザイン決定から始めたのですが、最初に決めたキャラクターが制作を進めるうちに別人になってしまうことがありました。
前に行った設定を忘れてしまうことが多々あり、都度修正を促すことがありました。
③ Antigravityの挙動や画像生成エラーによる苦労
製作過程での苦労というかツールの挙動による苦労もありました。修正指示に対して、関係のない部分まで修正してしまうこともありました。
特に、最近多かったのが、画像生成時のエラー多発です。Antigravityでの画像生成は、画像生成APIでNanobananaProに接続して生成するような動作になっているのですが、画像生成の制限がかかったり、サーバー側のエラーか何かで生成ができなくなることが頻発しました。
Antigravityのアップデートに伴ってか、1枚生成をお願いしても、複数枚生成してその中から1枚良いものを選択するようなアルゴリズムになっており、画像エラーが発生することが増えたような気がします。(2026年2月14日時点)
画像生成に関しては改善してほしいところです。仕方がないので開発終盤はAntigravityに画像生成プロンプトを出力してもらい、それをGeminiに連携しそちらで画像生成するというかたちで対応していました。非常に面倒でした。
最終的にゲームブック風小説になりました
昔、遊んだような選択肢で物語が分岐する、ゲームブックを制作したいということでスタートしましたが、AI側で物語の分岐をうまく作ることができず、最終的にはゲームブック風小説になりました。
最終の一部だけ選択肢を設けましたが、私の実力では一本道のデジタル小説が精一杯でした。
シナリオを分岐させようとしても、最初の設定などに引っ張られて、整合が取れなくなったりしました。最初から複数の設定やシナリオで別プロジェクトして進めて、最後に分岐でつなげるような進め方が良かったかもしれません。
まとめ：苦労しましたがAntigravityすごい
それなりに苦労したゲームブック風小説「Awakening Ark」とタイトルを付けました。これもAIとともに考えたタイトルです。
軽くエンディングまでたどりつけると思いますので、Antigravityだけで素人がどの程度のものが作れるのか参考にしていただければと思います。
2026年もエージェントAIが盛り上がる年になると思いますが、Antigravityと開発をしてみると時代の変化を感じます。本当にすごいツールですので、興味持たれた方はご自身でも開発してみて下さい。
