AIでゲームを作るには？アイデアから公開までの道筋

全体を4段階でつかむ

AIを使ったゲーム制作も、手順の大枠は従来と大きく変わらない。変わったのは、コードを書く工程をAIチャットツールに委ねられるようになったことだ。これにより、プログラミングの経験が浅い人でも、「何を作るか」と「ちゃんと動くか」に集中しやすくなった。

1. 企画——何を作るかを一文で決める
2. 試作——AIにコードを出力させ、HTMLファイルを作る
3. 動作確認——ブラウザで動かし、問題を直す
4. 公開——完成したファイルをアソバースに投稿する

この流れは、作品の規模に関わらず共通する。最初の一本は「ひとつの遊びが成立する」ことを目標にする。追加したい機能は公開後に足せばいい。

企画：作るものを一文に絞る

企画の目標は、AIへの最初の依頼をひとことで言える状態にすることだ。「何かおもしろいゲーム」ではなく、「左右キーで動く自機が上から落ちてくる隕石を避け続けるゲーム」のように、操作・目的・主役の三点が入ったひと文になると依頼として機能する。この一文で言えることが、企画の完成の目安になる。

最初に決めるのは次の三点だけでいい。

• 操作手段——マウス・キーボード・タップのどれか
• クリア・終了の条件——何をしたら終わるか
• 画面の主役——何が動くか、何が画面を占めるか

例として「1分間、画面上部から降ってくるコインをキャラクターで拾い、できるだけ多く集める」という一文があれば、AIへの依頼として必要な情報はそろっている。「操作はキーボードか、マウスか」といった細部はAIが合理的な選択をする。気に入らなければ後から「左右キーに変えてください」と一行伝えれば直せる。

「音楽もほしい」「ハイスコアを保存したい」「難易度を選べるようにしたい」——アイデアが次々出てくるのはよいことだ。それらは別のメモに書いておき、最初の一本には入れない。機能を絞るほど、AIが出力するコードは短くなり、動作確認の手間も減る。どこで絞るかを判断する力は、ゲーム制作において初心者とベテランで変わらず重要なものだ。

試作：AIにコードを出力させる

ClaudeやChatGPTなどのAIチャットツールは、自然言語のテキストからコードを生成する機能を持つ（AnthropicはClaudeの主要機能として「テキストとコードの生成」を公式ドキュメントに明記している）。ゲームの説明を入力し、「HTMLファイル1枚で動くようにしてください」と条件を添えると、HTML・CSS・JavaScriptがひとつにまとまったファイルを出力させることができる。ブラウザ以外に何も必要ない形になる。

AIへの依頼文は、以下のような形を参考にするとよい。

次の仕様のHTMLゲームを作ってください。
・操作：左右の矢印キーでキャラクター（四角形）を動かす
・ルール：画面上部から一定間隔でコインが落ちてくる。
  キャラクターに触れると得点が1増える。
  60秒後にゲームオーバーになり、スコアを表示する。
・画像や音声など外部ファイルは使わず、
  すべてコードの中で描画してください。
・HTML・CSS・JavaScriptを1ファイルにまとめてください。

AIが出力したコードをコピーし、テキストエディタ（Windowsのメモ帳、macOSのテキストエディット、VS Codeなど何でもよい）に貼り付けて、ファイル名を `game.html` のように `.html` 拡張子で保存する。これが試作品になる。

以下のコードは、AIが出力するHTMLの構造を示す説明用の骨格であり、このままでは動作しない。実際に動くコードはAIが生成する内容によって異なる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コイン集めゲーム</title>
  <style>
    body { margin: 0; background: #111; display: flex; justify-content: center; }
    canvas { display: block; }
  </style>
</head>
<body>
  <canvas id="game" width="400" height="500"></canvas>
  <script>
    const ctx = document.getElementById('game').getContext('2d');
    // プレイヤー位置、コイン配列、スコア、タイマーをここで管理
    // キーボードイベントでプレイヤーの水平位置を更新
    // requestAnimationFrame() でゲームループを回す
    // 当たり判定と得点加算もここに入る
  </script>
</body>
</html>

HTMLの `<canvas>` 要素は、JavaScriptで2Dグラフィックスを描画するためのWeb標準仕様で、2015年以降のすべての主要ブラウザで利用できる（MDN Web Docs参照）。AIツールはこの仕様に基づいたゲームコードを生成できる。コードが長くて読み切れなくても、この段階では問題ない。次のステップで実際に動かして確かめる。

動作確認：ブラウザで遊んで直す

保存したHTMLファイルをブラウザのウィンドウにドラッグするか、ファイルをダブルクリックして開く。インターネット接続は不要で、ローカルのファイルをそのまま確認できる。

1. ファイルをブラウザで開く（Chrome、Safari、Firefoxなど何でもよい）
2. ゲームが画面に表示されるか確認する
3. 設定した操作（矢印キーなど）で意図通りに動くか確認する
4. 開始から終了まで一通り遊べるか確認する

問題が見つかったら、AIに「どこが問題か」ではなく「どう見えているか」を伝える。「コインが画面の外に出たまま消えない」「キャラクターが左には動くが右には動かない」のように、起きていることを具体的に書くと、修正指示として伝わりやすい。コードのどこを直せばいいか分からなくても問題ない——AIが修正済みのコード全体を再出力してくれる。

1. AIに「〇〇という問題がある。修正したコード全体を出力してください」と伝える
2. 出力されたコードでHTMLファイルを上書き保存する
3. ブラウザのページを再読み込みして再確認する

この往復を数回繰り返すと、遊べる状態に到達する。「完璧に動く」ことを目標にするより、「最初から最後まで一通り遊べる」かどうかを基準にすると、公開の判断がしやすい。スマートフォンでの見え方も、この段階で確かめておくと後の修正が減る（ブラウザの開発者ツールでモバイル表示を模擬できる）。

よくあるつまずきとして、AIが「外部ファイルを参照するコード」を出力することがある。たとえば `<img src="player.png">` のように、別途画像ファイルが必要な形になっている場合、そのファイルがなければ画面に何も表示されない。依頼の段階で「外部ファイルは使わず、すべてコードの中で描画してください」と条件を加えておくと、こうした問題を最初から回避できる。

公開：ファイルをアソバースに投稿する

遊べる状態になったら、アソバースのスタジオ（/studio/new）からファイルを投稿する。外部ファイルを参照していないHTMLゲームはHTMLファイル単体で、画像や音など複数ファイルを使っている場合はZIP形式にまとめて投稿する（詳細は投稿画面の案内を確認のこと）。

投稿前に確認しておくこと。

• ゲームが最初から最後まで一通り遊べるか
• タイトルと説明文（何ができるゲームか30〜50字程度）を用意しているか
• 外部素材（画像・音・フォント）を使った場合、その素材の利用条件を確認したか
• AI生成コードを使っていることを、投稿時の説明欄に任意で記載するか検討したか

「いつか完璧にしてから公開しよう」と考えると、作品は長く手元に残ったままになる。遊べる状態になった時点で公開し、プレイヤーの反応を見ながら更新するほうが、実際の改善につながりやすい。「操作方法がわからなかった」「クリア後に何も起きない」といった具体的な反応は、次の修正の手がかりになる。

2作目・3作目と作るうちに、企画の絞り方も試作の頼み方も変わっていく。最初の一本の目的は完成度ではなく、4つの段階を一周し切ることにある。「公開した」という事実が、次のゲームを作るときの具体的な参照点になる。