AIゲームの作り方:ChatGPTやClaudeに指示して動くブラウザゲームを自分で作る手順

「AIゲーム」という言葉には、大きく分けて二つの意味があります。ひとつは、AIキャラクターと会話しながら遊ぶアプリそのもの。もうひとつは、AIに指示してゲームを自分で作ることです。この記事が扱うのは後者です。ChatGPTやClaudeのようなチャットAIに、遊びたいゲームの内容を日本語で説明するだけで、ブラウザで動くコードが返ってきます。難しいのはコードを書くことではなく、返ってきたコードが実際に動くかどうかを自分で確かめる作業のほうです。

現実的に作れる範囲

• —クイズゲーム:問題と答えのペアをいくつか用意し、正解・不正解を判定する。
• —簡単なクリッカーゲーム:クリックするたびに数字が増えていく。
• —〇×ゲーム(三目並べ):盤面の状態管理と勝敗判定だけで完結する。
• —神経衰弱のようなカードめくりゲーム:同じ絵柄を当てる。

いずれも画面ひとつ、状態管理が単純なゲームです。複数の画面をまたぐ複雑なゲームや、セーブ機能つきの本格的なゲームは、この手順の延長線上にはありません。まずは単純なものを最後まで完成させることが、遠回りのようで一番早い道です。

実際の手順

1. 01作りたいゲームを具体的に説明する。ルール、勝敗の条件、見た目のイメージを箇条書きで伝えると、AIが余計な想像で補う部分が減ります。
2. 02HTML・CSS・JavaScriptが一つのファイルにまとまった、単体で動くコードを頼む。ファイルを分けて頼むと、後で自分でつなぎ合わせる手間が増えます。
3. 03返ってきたコードをそのままブラウザで開いて、実際に触ってみる。読んで判断せず、必ず動かして確かめます。
4. 04動かない部分やおかしい挙動があれば、症状をそのまま伝える。ブラウザの開発者ツールにエラーメッセージが出ていれば、それをそのまま貼り付けるのが一番早い伝え方です。
5. 05最初から全部を頼まず、少しずつ機能を足していく。「クリックで得点が増える」が動いてから、「制限時間をつける」を次に頼みます。

具体例:クイズゲームを作ってみる

弱い頼み方:「クイズゲームを作って」。これだけでは問題の数も、正解した後の表示も、AIが適当に決めることになります。返ってくるコードは動きはしますが、自分がやりたかった内容とはたいてい違うものになります。

具体的な頼み方:「日本の都道府県の県庁所在地を当てる4択クイズを作って。問題は5問、選択肢は4つ、正解したら緑色で正解と表示、不正解なら赤色で正しい答えを表示。全問終わったら正答数を表示して。HTML1ファイルで、外部ライブラリなしで動くようにして」。ルールと表示内容を具体的に指定した分だけ、最初から意図に近いコードが返ってきます。

AIに作らせたゲームが思った通りに動かないのは、AIの性能の問題であることより、遊びたいゲームの内容を自分がまだ具体的に決めきれていないことのほうが多いです。

起きやすい失敗

• —存在しない関数やライブラリを使ったコードが返ってくることがあります。そのまま動かしてエラーが出たら、そのエラー内容を伝えて直してもらうのが最短の対処です。
• —ゲームの内容が複雑になるほど、バグが増えやすくなります。画面数や条件分岐が増えたら、機能をさらに小さく分けて一つずつ確認します。
• —スマートフォンではタップの反応がパソコンのクリックと違う挙動をすることがあります。公開する前にスマートフォンでも一度触っておきます。
• —有名な既存ゲームの絵柄やルールをそのまま真似るよう頼むと、著作権上の問題につながる可能性があります。自分で決めたお題やオリジナルの見た目で作るのが安全です。

AIが生成したコードをそのまま信頼しない理由

AIはコードを実際に実行して確認しているわけではありません。もっともらしく見えるコードを予測して返しているだけなので、動かしてみるまで正しいかどうかは分かりません。生成AIの性能がどこまで伸びているかは、Stanford HAIが毎年のAI Indexで測定していますが、性能が上がっても「人が動作を確認してから使う」という前提は変わりません。OECDのAI原則も、生成された結果を人が検証する責任を明記しています。

生成されたコードの品質や安全性を確認する考え方については、IPA(情報処理推進機構)がソフトウェア開発者向けに継続的に情報を出しています。趣味で作る簡単なゲームであっても、動かす前に中身をざっと確認する習慣は同じです。

国内での広がり

国内での生成AI利用の広がりは、総務省の情報通信白書が毎年、国際比較を含めて公表しています。企業でのAI活用の実態と、コードを書ける人材とAIを使いこなせる人材の両方が必要になっている状況については、経済産業省が継続的に調査しています。

月曜日に試すこと

1. 01〇×ゲームか簡単なクイズゲームのどちらかを選び、ルールを箇条書きで書き出す。
2. 02その箇条書きをそのままAIに渡して、HTML1ファイルのコードを頼む。
3. 03ブラウザで開いて実際に触り、動かない部分やおかしい部分をメモする。
4. 04メモした内容をそのままAIに伝えて直してもらい、直ったら一つだけ機能を追加してみる。

ここで使った「具体的に指示して、結果を実際に確認する」という進め方は、AIの使い方で扱った基本と同じです。文章の代わりにコードを頼む場面についてはAIコーディングで、画像を生成して確認する場面についてはAIイラスト生成で、それぞれ別の作業に当てはめて説明しています。ゲームの中で使う画像素材を検索して確認する場合はAI画像検索が参考になります。

こうした「具体的に頼んで、出てきた結果を自分で確かめる」という力は、Coursiumがスマホの短いレッスンで練習できるようにしています。AIの一歩先へ、実際の作業に近い練習から始めてみてください。詳しくはCoursiumについて。