マガジン

AIにゲームを作らせるときの「最初の一文」テンプレート集

遊びをつくる

執筆にClaudeを使用しています。

色鉛筆の線やゲームのスケッチが描かれたノートとカード。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

AIにゲームを作ってもらうとき、最初の一文を何と書くかで、出てくるコードの質がまるで変わります。「シューティングゲームを作って」と書いたのに、自機も敵も弾もない骨格だけのHTMLが返ってきた——そんな経験がある人は、プロンプトの「入口」を見直すと状況が改善します。 この記事では、ChatGPT・Claude・Geminiなどのテキスト生成AIに対して、ブラウザゲームのコードを依頼するときの「最初の一文(オープニングプロンプト)」を目的別にまとめます。テンプレートをそのままコピーして使えるよう、文の構造と変数部分を分けて示します。

この記事の目次
  1. なぜ「最初の一文」がそれほど重要なのか
  2. テンプレートの読み方
  3. 目的別テンプレート
  4. テンプレートを組み合わせるときの判断基準
  5. 次の行動

なぜ「最初の一文」がそれほど重要なのか

AIへの依頼は会話の積み重ねで修正できます。しかし、最初のメッセージで渡した前提条件はその後の返答全体に影響を与え続けます。一文目で「技術スタックを指定しなかった」「動作環境を伝えなかった」「ゲームの完成形を示さなかった」場合、AIは都度もっとも一般的な選択をします。その結果、後から「CanvasじゃなくてDOMで作り直して」と頼むと、コードを根本から書き直すことになりがちです。

最初の一文で決めるべき情報は大きく三つあります。①完成形のイメージ(何が画面に出て、プレイヤーが何をするゲームか)、②技術的な制約(ライブラリの有無、単一HTMLか複数ファイルか)、③品質の基準(完成品として動くものか、学習用のひな型か)。この三つが最初のメッセージに揃っていると、AIは余分な確認なしにコードを出してきます。

テンプレートの読み方

以下に示す各テンプレートは、【 】で囲まれた部分が差し替え変数です。文の構造はそのまま使い、変数だけを自分のゲームに合わせて書き換えてください。テンプレートの後には、その文が何を伝えているかの補足と、よくある失敗パターンも添えます。

目的別テンプレート

一から完成品を作らせたいとき

単一のHTMLファイルで動く【ゲームジャンル】を作ってください。
プレイヤーは【操作方法】で【目的・勝利条件】するゲームです。
外部ライブラリは使わず、HTML・CSS・JavaScriptだけで書いてください。
スマートフォンでも遊べるよう、タッチ操作にも対応させてください。

補足: 「外部ライブラリは使わず」と書くだけで、CDN読み込みが発生するコードを避けられます。ブラウザでHTMLを直接開けば動く形が保証されるため、環境依存のエラーが起きにくくなります。「タッチ操作にも対応」は書き忘れがちですが、スマートフォンでテストしたときにまったく動かないという状況を防ぐために最初から含めておくと安全です。

失敗パターン: 【ゲームジャンル】を「RPG」と書くと、AIは戦闘・ショップ・マップ移動まで含む規模のコードを出そうとし、途中で出力が途切れることがあります。「ランダムな敵と一対一で戦うターン制バトル」のように、スコープを一画面分に絞ると確実に完成したコードが返ってきます。

既存のゲームを元に改造させたいとき

以下のHTMLゲームのコードを元に、【追加・変更したい機能】を加えてください。
変更するファイルの範囲は【変更対象のファイル名または関数名】に限定してください。
動作確認済みの部分は書き換えないでください。

[ここにコードを貼り付け]

補足: 「動作確認済みの部分は書き換えないでください」という一文が重要です。AIはコードを全体的に整理しようとする性質があり、依頼していない変数名の変更やロジックの書き換えが混入することがあります。変更範囲を明示することで、差分が小さく保たれ、デバッグが楽になります。

失敗パターン: コードを貼り付けずに「さっきのコードに追加して」と書くと、AIは前の出力を参照できないことがあります(会話の長さや実装による)。改造依頼は必ずコードを再貼り付けするほうが安定します。

学習用のひな型を作らせたいとき

【ゲームの仕組みや概念】を学ぶための、最小限のサンプルコードを作ってください。
単一HTMLファイルで、コメントを日本語で丁寧に書いてください。
機能はできる限りシンプルにして、一つの概念だけが確認できる形にしてください。

補足: 「最小限」「一つの概念だけ」という言葉がひな型依頼の核心です。これを書かないと、AIは親切心からエラー処理や装飾を追加し、学習の焦点が分散したコードを出してくることがあります。日本語コメントを指定すると、コードを読みながら動作を理解しやすくなります。

グラフィックのないテキストゲームから始めたいとき

HTMLとCSSだけで動くテキストベースの【ゲームの種類】を作ってください。
画像・Canvasは使わず、テキストとボタンだけで進行するゲームにしてください。
ゲームの状態は【変数の管理方針:グローバル変数 or オブジェクト】で管理してください。

補足: テキストゲームはCanvas処理が不要なため、AIが出すコードが短く、全体を読んで把握しやすいです。ゲーム制作を始めたばかりの人が「コードを理解しながら改造したい」という場合には、グラフィックなしで始めるほうが学習効率が上がります。状態管理の方針を指定すると、コードの構造が予測しやすくなり、後から変数を追加しやすくなります。

複数ファイル構成で本格的に作りたいとき

ブラウザで動く【ゲームジャンル】をHTML・CSS・JavaScriptの3ファイル構成で作ってください。
JavaScriptは【ゲームロジック担当のファイル名.js】と【UI担当のファイル名.js】に分けてください。
ファイルごとに役割を分けて、互いの依存関係をコメントで示してください。

補足: 単一HTMLに慣れたあと、コードが長くなってきたタイミングで複数ファイルに移行する人が多いです。移行時に指定しておきたいのが「ファイルごとの役割」と「依存関係の明示」です。これを書かないと、どのファイルに何を書けばいいかが曖昧なまま生成され、修正時に迷います。

テンプレートを組み合わせるときの判断基準

上記のテンプレートは単体でも使えますが、二つ組み合わせると精度が上がる組み合わせがあります。

「一から完成品」+「学習用ひな型」の要素を混ぜたいとき: 完成品として動くようにしてください。ただし、コードの各セクションにどんな処理をしているか日本語でコメントを書いてください。と末尾に添えると、動くコードとコメントが両立します。

「改造」を繰り返す予定があるとき: 最初の依頼から関数ごとに処理を分けて、後から個別に差し替えやすい構造にしてください。を加えると、後の改造依頼で変更範囲を指定しやすくなります。

テンプレートを使っても思った通りの結果が出ないときは、「完成形のイメージ」「技術的な制約」「品質の基準」のどれかが抜けていないかを確認してください。抜けている情報を補った形で同じ会話内で再送すると、多くの場合は改善します。

次の行動

作ったHTMLファイルやZIPファイルは、アソバースに直接投稿して公開できます。まずは上記テンプレートのどれか一つを選び、実際にAIへ送って動くゲームを一本出力してみてください。完成したら、そのコードを手元のブラウザで開いて動作を確認し、投稿の準備を進めてみましょう。