GeminiでHTMLゲームを作るときの進め方と向き・不向きの判断基準
遊びをつくる執筆にClaudeを使用しています。
「GeminiでゲームのコードをAIに書いてもらいたいが、どこまで頼れるのかわからない」という疑問は、ブラウザゲームを作り始めようとしているひとが最初にぶつかる壁のひとつです。ChatGPTやClaudeとの使い分けも気になるところですが、まずGeminiがゲーム制作においてどういう場面で力を発揮し、どこで限界を見せやすいかを知っておくと、制作の組み立て方が変わってきます。 この記事では、GoogleのGeminiをHTMLゲーム制作に使うときの具体的な進め方と、プロンプトの設計・コードの受け取り方・行き詰まりやすいポイントを整理します。「やってみたら動かなかった」という状況に陥りにくくするための判断基準を中心に置いています。
この記事の目次
GeminiにHTMLゲームのコードを頼むとはどういうことか
GeminiはGoogleが提供する生成AIで、テキスト・コード・画像の処理をひとつのモデルで扱えます。コード生成の精度はモデルのバージョンによって異なるため、公式サイトで現在提供されているモデルを確認するのが確実です。
ゲーム制作でGeminiに頼めるのは、大きく分けて次の三つです。
- HTML・CSS・JavaScriptの初期コード生成：「カーソルキーで動くキャラクターとブロック衝突判定のある横スクロールゲームのベースをHTML一枚で書いてください」のように頼むと、動作するひな型を返してくれます。
- 既存コードの修正・機能追加：書いてもらったコードを貼り直して「スコアが毎秒1ずつ増えるようにしてください」と追記指示を出す使い方です。
- エラー原因の説明と修正案の提示：コンソールに出たエラーメッセージとコードをセットで貼ると、原因と修正箇所を説明してくれます。
一方、Geminiがそのままでは対応しにくいのは、複数ファイルにまたがる大きな構成の管理と、画像・音声などのバイナリアセットの生成です。テキストとコードの往復には向いていますが、「プロジェクト全体をまとめてリファクタリングして」という粒度の大きい依頼は回答がぶれやすくなります。
進め方：小さい単位で積み上げる
AIにゲームのコードを頼むとき、最初から完成形を求めると失敗しやすいです。「全部入りのゲームをHTML一枚で」という指示は、AIが返すコードの量が増えるほどバグが混入しやすく、どこで何が起きているか追いにくくなります。
効果的な進め方は、機能を最小単位に分けて一つずつ確認することです。
- コアループだけを作る キャラクターの描画と移動だけが動く状態をまず作ります。当たり判定もスコアもない、最小のゲームループです。
- 一機能ずつ追加する 敵の出現、当たり判定、スコア表示、ゲームオーバー処理、の順に一つずつ追加します。各ステップでブラウザを開いて動作を目で確認します。
- コードをそのつど貼り直す 追加指示を出すときは、直前の完成コードを丸ごと貼り直してから「ここに〇〇を追加してください」と伝えます。Geminiはチャット履歴が長くなると前のコードを正確に参照できなくなることがあるため、コードの現在地を毎回明示することが重要です。
このサイクルを守ると、「どの追加で壊れたか」が特定しやすくなります。
プロンプトの書き方：あいまいさを減らす三つの要素
Geminiへの指示の質は、返ってくるコードの品質に直結します。あいまいな指示はあいまいなコードを生みます。ゲーム制作のプロンプトに入れておくべき要素は次の三つです。
対象環境の明示
「HTML・CSS・JavaScriptのみで、外部ライブラリなし、単一ファイル」のように環境を最初に書きます。何も言わなければGeminiがReactやCanvasライブラリを使ったコードを返すこともあり、環境が違うとそのまま動きません。ブラウザゲームをZIPなしで公開するなら単一HTMLが基本になります。
ゲームの状態とルールの定義
「プレイヤーはスペースキーでジャンプし、地面に着地できる。敵に触れるとゲームオーバー」のように、ルールを箇条書きで列挙します。「RPGを作って」のように抽象的なジャンル名だけ伝えると、AIが独自に解釈して予想外の仕様になります。
出力の範囲を限定する
「当たり判定の部分だけを書いてください」「この関数だけを修正してください」のように、出力してほしいコードの範囲を絞ります。全体を返させると不要な部分まで書き換えられることがあります。
行き詰まりやすい三つの場面と対処
コードが動かない・エラーが出る
ブラウザの開発者ツール（F12）でコンソールを開き、エラーメッセージをコピーしてGeminiに「このエラーが出ています。コードのどこに問題がありますか」と貼ります。エラーメッセージなしで「動きません」とだけ送ると、原因の特定が難しくなります。コードと症状とエラー文の三点セットを渡すのが最短ルートです。
修正のたびに別の箇所が壊れる
これはコードが大きくなってきたときに起きやすいです。原因の一つは、Geminiが修正対象以外の関数を少しずつ書き換えてしまうことです。「この関数だけを変更し、それ以外のコードには一切触れないでください」と明示すると頻度が下がります。それでも発生する場合は、機能ごとにコードをファイルに保存しておき、壊れたときに前の状態に戻せるようにしておく習慣が有効です。
望む動きにならない
「キャラクターがふわふわしすぎる」「敵の動きが単調」という感覚的な問題は、数値で伝え直すと改善しやすいです。「重力加速度の値を下げて、ジャンプの初速を1.5倍にしてください」のように、コードの変数や計算式に対応した言葉で指示します。感覚を数値に変換することが、AIとのやり取りを続けるうえで身につけておきたいスキルです。
Geminiの特徴と他のAIとの使い分けの考え方
GeminiはGoogleのサービスとの連携を前提に設計されており、Google AI StudioからAPIを呼び出してゲーム内に組み込む用途にも使えます。チャット形式でコードを生成するだけでなく、「AIが返答するNPCをゲーム内に組み込みたい」という発展的な用途ではGemini APIを直接使う選択肢が出てきます。
一方、コード生成の安定性や長いコンテキストの扱いはモデルのバージョンや更新状況によって変わります。「どのAIが最強か」という比較より、「自分が今作っているものに何が必要か」で選ぶ視点が実用的です。シンプルなミニゲームのコード生成だけが目的なら、使い慣れたツールを選ぶほうが制作速度は上がります。複数のAIを使い分ける場合は、最初にどれか一つに慣れてから広げるほうが混乱しにくいです。
次の行動
Geminiでゲームを作り始めるなら、まず「キャンバスに四角を描いてキーボードで動かすだけ」の最小コードを一枚のHTMLで作ることから始めてください。動く状態を確認してから機能を追加するサイクルが身につくと、どのAIを使っても制作が安定します。完成したHTMLファイルはアソバースにそのまま投稿して公開できるため、動くものができたら一度アップロードしてブラウザで確認する習慣をつけると、公開前の想定外の表示崩れを早期に発見できます。
参考資料
- Google Gemini 公式ドキュメント（Google AI for Developers）
- Google AI Studio 公式サイト
