ChatGPTでHTMLゲームを作る手順：一つのファイルから始める

一つのHTMLファイルに絞る理由

外部サーバーもライブラリも不要というのは、単なる簡便さの話ではありません。最初のゲーム制作でつまずきやすい箇所——依存関係のエラー、ファイルパスの設定ミス、ローカルサーバーの起動——をまとめて回避できます。HTMLファイルの中にCSSとJavaScriptをそのまま書き込む形式は、ブラウザさえあれば動きます。完成したファイルを誰かに渡すのも、ウェブ上に公開するのも、ファイル一つで完結します。

HTMLのCanvas要素を使えば、キャラクターが動くアクションゲームやボールが跳ね返るシューティング、タイルを並べるパズルなど、見た目のあるゲームを外部素材なしに描画できます。Canvas APIは2015年からモダンブラウザで広くサポートされており、追加のインストールは不要です（出典：MDN Web Docs）。画像もサウンドも省いた「動くだけ」の状態からスタートすることで、ChatGPTとのやりとりで何が変わるかを直接確認できます。

ただし、この形式でできるゲームには限界があります。3Dレンダリングや大量の画像アセット、外部APIとの連携が必要なゲームは、単一HTMLで完結させるには複雑になりすぎます。まず「画面上で何かが動き、プレイヤーの操作に反応する」という最小限の動作を確かめることが、ChatGPTとの協働でも現実的な出発点です。

ゲームの仕様を先に言葉にする

ChatGPTにプロンプトを送る前に、作りたいゲームを自分の言葉で整理します。この段階を省くと、出力されたコードが想定と異なったときに何を修正すべきかわからなくなります。「面白くして」「もっとゲームっぽく」という指示は要件として機能しません。

整理するのは次の四点を目安にします。

1. ゲームの目的：何をすれば「クリア」「失敗」になるか
2. 操作方法：キーボード（矢印キー、スペースなど）、マウス、タッチのどれか
3. 見た目の方向性：背景色、キャラクターの形や色、テキストの有無
4. 難易度や変化：時間経過でスピードが上がる、ステージが変わるなど

たとえば「矢印キーで動く白い丸が、ランダムに現れる赤い四角を避けるゲーム。黒背景で、10秒生き残ればクリア。衝突したらゲームオーバー」という記述は仕様として機能します。ゲームの目的、操作、見た目、終了条件の四点がすべて含まれています。

この言語化のプロセス自体をChatGPTに手伝ってもらうことも可能です。「シンプルな避けゲームを一つのHTMLファイルで作りたい。仕様を一緒に決めてください」と問いかけると、選択肢を提示してくれることがあります。ただし、最終的にどんなゲームを作るかは自分で決める必要があります。仕様が曖昧なまま進むと、後の修正コストが大きくなります。

最初のプロンプトの組み立て方

仕様が固まったら、プロンプトに落とし込みます。依頼文には仕様に加えて「一つのHTMLファイルにまとめる」という指定を明示することが重要です。これを省くと、ChatGPTがCSS・HTML・JavaScriptを別ファイルに分割したり、CDNで外部ライブラリを読み込む構成を出力することがあります。

以下は説明用のテンプレートです。【仕様】の部分を自分のゲームの内容に書き換えて使ってください。

以下の仕様で動くゲームを、一つのHTMLファイルとして書いてください。
CSSとJavaScriptはHTMLファイルの中にまとめてください。
外部ライブラリや外部ファイルは一切使わないでください。

【仕様】
- ゲームの目的：（例：障害物を10秒間避け続けたらクリア。衝突したらゲームオーバー）
- 操作方法：（例：矢印キーでキャラクターを上下左右に動かす）
- 見た目：（例：黒背景・白い丸のキャラクター・赤い四角の障害物）
- その他の動作：（例：残り秒数を画面上部にカウントダウン表示する）

「外部ライブラリを使わないでください」という一文は、Three.jsやPhaser等のCDN読み込みをChatGPTが自動的に追加するのを防ぐために有効です。CDNはネットワーク接続が必要になり、ファイル単体での完結性が損なわれます。

ChatGPTが生成するコードの品質はモデルや会話の文脈によって変わります。どのモデルを使った場合でも、出力されたコードを必ずブラウザで開いて動作を確かめることが手順の核心です。プロンプトの工夫よりも、「送る→確かめる→修正を依頼する」というループを繰り返すことの方が、完成に近づく確実な方法です。利用できるモデルやプランの詳細は、ChatGPTの公式ヘルプで最新情報を確認してください。

出力されたコードをブラウザで確かめる

ChatGPTがHTMLコードを出力したら、テキストエディタ（メモ帳でも構いません）に貼り付けて .html の拡張子で保存し、ブラウザで開きます。WindowsならブラウザのメニューからCtrl+O、macOSではFinderからドラッグするかCmd+Oで開けます。

確認するのは次の三点です。

• ページが表示されるか（白紙のままになっていないか）
• 操作したときに期待通り動くか
• エラーが出ていないか（開発者ツールのConsoleタブを確認する）

開発者ツールは、ChromeやEdgeではF12キーまたは右クリック→「検証」で開きます。Consoleタブに赤いエラーメッセージが表示されていれば、その文字列をそのままChatGPTに貼り付けて「このエラーを修正してください」と依頼できます。エラーメッセージは制作を止める壁ではなく、次の修正依頼の材料です。

ページは表示されるのに動かない場合は、コードそのものにエラーはないが動作のロジックに問題があることが多いです。このときは「ページは表示されますが、○○キーを押しても何も起きません」と現象を具体的に伝えます。「動きません」だけでは、何が問題なのかChatGPTが特定しにくくなります。

修正を頼む：よくあるつまずきと伝え方

最初の出力で完成することは少なく、修正のやりとりが制作の本体と考えてください。修正を依頼するときに効果的なのは、「何が起きているか（現象）」と「どうなってほしいか（期待）」の両方を伝えることです。どちらか一方だけでは、意図しない変更が加わることがあります。

状況別の伝え方の例

• 動かない場合：「ページは表示されますが、矢印キーを押してもキャラクターが動きません。コードを確認して修正してください」
• エラーが出る場合：「コンソールに〔エラー文をそのまま貼り付け〕と表示されます。修正をお願いします」
• 見た目を変えたい場合：「背景を白から黒に変えてください。文字色は白にして、フォントサイズを現在の1.5倍にしてください」
• 機能を追加したい場合：「現在のコードに、敵キャラクターとぶつかったらゲームオーバー画面を表示する処理を追加してください」

会話が長くなると、ChatGPTが以前のコードを正確に参照できなくなることがあります。そのときは最新の動くコードを会話に貼り直してから「このコードを踏まえて○○を修正してください」と依頼すると、ずれが生じにくくなります。

一度の依頼で多くの変更を求めると、意図しない部分が変わることがあります。変更は一つずつ依頼し、そのたびにブラウザで動作を確認する習慣をつけると、どの変更で問題が起きたかを特定しやすくなります。

完成したファイルをアソバースに公開する

動作を確認したHTMLファイルは、アソバースのスタジオからアップロードして公開できます。アップロード前にもう一度ブラウザで開いてすべての操作を試し、エラーなく動くことを確かめておきます。ゲームのタイトルと簡単な説明も事前に考えておくとスムーズです。

最初のバージョンは機能を絞ることで、修正や改善のサイクルを短くできます。一つのファイルで動く小さなゲームは、制作の全体像を把握するのにちょうどよい規模です。公開後は実際に遊んだ人の反応をもとに、次のバージョンで何を変えるかを決められます。

仕様を決める → プロンプトを送る → ブラウザで確かめる → 修正を頼む——この四つのループが、ChatGPTを使ったゲーム制作の基本の流れです。ChatGPTとのやりとりを重ねることで、プロンプトの伝え方、コードの読み方、ブラウザでの確認方法を少しずつ体得していけます。最初の一ファイルを動かしたとき、次に何を作るかが見えてきます。