ChatGPTでゲームを作る完全ガイド：最初の30分でやること
遊びをつくる執筆にClaudeを使用しています。
「ChatGPTにゲームを作らせてみたいけど、何から始めればいいかわからない」という状況は、多くの人が最初にぶつかる壁です。ネットで調べると「プロンプトを工夫しよう」「反復改善が大事」といった話は出てきますが、具体的に最初の30分で何をどの順番でやるのかを示した情報は意外と少ないものです。 この記事では、ChatGPTを使ってブラウザゲームのHTMLファイルを生成するまでの最初の30分を、判断基準つきで具体的に説明します。コードを書いたことがなくても読み進められるように書いていますが、生成されたコードをそのまま信頼するリスクについても正直に触れます。
まず「30分で何が完成するか」を正確に把握する
ChatGPTで30分あればゲームが完成する、というイメージは半分正しく半分誤解です。30分で「動く試作品のHTMLファイル一つ」は十分作れます。一方で、スコア保存・キャラクターの見た目・複数画面の遷移・スマートフォン対応といった要素を同時に仕上げるのは難しく、欲張るほど最初の出力が壊れやすくなります。
最初の30分でやることは、次の三段階に絞ると整理しやすいです。
- 作るゲームの仕様を一段落の日本語に凝縮する（5分）
- ChatGPTに初回出力を生成させ、ブラウザで動作確認する（15分）
- 動かない部分を一箇所ずつ修正依頼する（10分）
この順番を守ると、最初の30分で「少なくとも一つの機能が動いているHTMLファイル」を手元に置けます。
仕様を一段落に凝縮するコツ
ChatGPTへの最初のプロンプトに何を書くかで、出力の質が大きく変わります。長い箇条書きより、「何をするゲームか・操作方法・勝敗条件」の三点を一段落の日本語で伝えるほうが、モデルが構造を把握しやすい傾向があります。
たとえば「十字キーで動く、障害物を避ける、30秒生き残れば勝ち」といった形です。これに加えて「HTMLとJavaScriptだけで書いてください。外部ライブラリは使わないでください」という制約を一文添えると、後で動かないケースが減ります。外部ライブラリ（p5.jsやPhaser.jsなど）はCDNリンクが変わったり自分の環境で読み込めなかったりすることがあり、初回はトラブルの原因になりやすいためです。
反対に避けたほうが良いのは、最初から「サウンドも付けて」「キャラクターを3種類から選べるようにして」と機能を重ねることです。ChatGPTは一度のプロンプトで多機能なコードを出力できますが、複雑なコードほど動作確認のステップが増え、どこで止まっているかを追うのが難しくなります。最初の出力はシンプルに保ち、動いてから機能を足していく方針が、30分で結果を出すうえで最も有効です。
初回出力をブラウザで確認する手順
ChatGPTが出力したコードは、次の手順でブラウザで確認できます。
- ChatGPTの返答からコード部分全体をコピーする。<!DOCTYPE html> から </html> までが一つのHTMLファイルの全体です。
- テキストエディタ（メモ帳、VSCode、どちらでも可）を開き、コードを貼り付けて game.html という名前で保存する。拡張子が .html になっていることを確認します。
- 保存したファイルをブラウザ（ChromeやEdge）にドラッグ＆ドロップするか、ファイルをダブルクリックして開く。
- 画面が真っ白・真っ黒・何も起きない場合は、ブラウザの開発者ツール（F12キー）のConsoleタブを開き、赤いエラーメッセージを確認する。
エラーメッセージが出た場合、そのメッセージ全文をChatGPTに貼り付けて「このエラーを修正してください」と送るのが最速の対処法です。エラーの意味を自分で調べるより先に、エラー文をそのまま渡すほうが修正の精度が上がります。
一方、画面は表示されているが意図した動きをしない場合は、「〇〇をしたとき△△になってほしいのですが、□□になります」という形で具体的に伝えると、修正の的が絞れます。「うまく動かない」だけでは、ChatGPTは何を直せばいいか推測に頼るため、ズレた修正が返ってくることがあります。
30分で詰まりやすい三つのパターン
経験上、最初の30分で多くの人が止まる場面は以下の三つに集中しています。
キーボード操作が反応しない：HTMLファイルをブラウザで開いたとき、ページのフォーカスがゲームの<canvas>要素ではなくブラウザのアドレスバーにある状態です。一度ゲーム画面をクリックしてからキーを押すと解決することが多いです。それでも動かない場合は「canvas要素にfocusを当ててキー入力を受け取るようにしてください」とChatGPTに依頼します。
コードが長すぎて途中で切れる：ChatGPTの出力が途中で止まった場合は「続きを書いてください」と送ると続きが出力されます。ただしコードの連結時に同じ変数名が重複するなど構造がずれることがあるため、切れたコードを無理につなぐより「もう一度最初から書いてください」とリセットするほうが速いケースもあります。
スマートフォンで動かない：PC向けに生成されたコードはスマートフォンのタッチ操作に対応していないことがほとんどです。最初からスマートフォン対応を求める場合は、初回プロンプトに「タッチ操作にも対応してください」と明記します。後から追加すると修正範囲が広がるため、必要なら最初に指定するほうが効率的です。
生成コードを信頼する範囲と限界
ChatGPTが出力するコードは「動く可能性が高い出発点」であり、「完成品」ではありません。この区別は重要です。
特に気をつけたいのは、生成されたコードに意図しないセキュリティ上の問題が含まれる場合があるという点です。個人でローカル環境で動かして遊ぶだけなら影響は限られますが、ゲームをウェブ上に公開する場合は、他者から入力を受け取る機能（名前入力・スコア送信など）を含むコードは特に注意が必要です。コードの内容を理解していない状態でサーバーに置く前に、セキュリティの基本的な考え方を確認することを勧めます。
また、ChatGPTが生成するコードの著作権については、利用規約や法的な整理が進行中の領域であり、この記事で断定的なことは書けません。公開や商用利用を考える場合は、OpenAIの利用規約と関連する法的情報を個別に確認してください。
次の行動
まず今日の30分で、「矢印キーで動く丸がいくつかの障害物を避けるゲーム」という一行仕様をChatGPTに渡し、HTMLファイルをブラウザで動かしてみてください。動いたファイルはそのままアソバースにHTMLファイルとして投稿でき、他の人にプレイしてもらうことができます。最初の一本を動かしてから、機能を一つずつ足していくのが最も早く前進できる道です。
参考資料
- OpenAI 公式ドキュメント（ChatGPT利用規約・API仕様）
- MDN Web Docs（HTML・JavaScript・Canvas API リファレンス）
