ChatGPT・Geminiでゲームを作る手順【2026年】プロンプト例と公開方法
ChatGPTやGeminiでゲームを作るなら、ブラウザで動くHTMLのゲームから始めるのが近道です。ファイル1枚で動くので、インストールもサーバーもいりません。2026年10月時点ではどちらのサービスも、書いてもらったコードをその場でプレビューして遊べます。
この記事では、ChatGPTとGeminiでブラウザゲームを作る手順を準備から順番に説明します。プロンプトの書き方とシューティングゲームを3段階で作る実践例のあと、エラーが出たときの伝え方と公開の方法までが範囲です。プロンプトはすべて、コピーしてそのまま使える形です。
サービスの画面や機能の名前は2026年10月時点の公式情報をもとにしています。更新の多い分野なので、表示が違うときは各サービスのヘルプも確認してください。
この記事の目次
ChatGPTとGeminiでゲームが作れる仕組み
ブラウザゲームは、HTMLとCSSとJavaScriptという3種類のコードでできています。HTMLが画面の骨組み、CSSが見た目、JavaScriptが動きを受け持ちます。この3つは1つのHTMLファイルにまとめて書けるため、AIに「ファイル1つで作って」と頼めば、そのファイルをブラウザで開くだけで遊べるゲームの完成です。
Geminiは「Canvas」で作る
GeminiにはCanvasという作業画面があります。入力欄のツールからCanvasを選んで頼むと、右側にコードとプレビューが並んで表示されます。Googleの公式ページでは、CanvasはすべてのGeminiユーザーが使えると案内されており、無料プランでも利用可能です。有料のGoogle AI ProやUltraでは、より性能の高いモデルでCanvasを使えます。
ChatGPTは「コードブロック」で作る
ChatGPTにも以前はCanvasという作業画面がありました。2026年5月28日の更新で新しいモデルからCanvasが外れ、代わりに回答の中のコードブロックで編集やプレビューができるようになりました。HTMLのコードブロックは「コード」と「プレビュー」を切り替えられるので、書いてもらったゲームをチャット画面の中で遊べます。
補足
ChatGPTの機能や画面の名前は更新が多く、プランや選んだモデルによって表示が違うこともあります。プレビューが見当たらない場合は、コードをコピーしてファイルに保存し、ブラウザで開けば同じように遊べるので心配いりません。
始める前の準備
必要なものは多くありません。次の4つがそろっていれば始められます。
- パソコン（スマホでも作れるが、保存や公開の作業はパソコンのほうが楽）
- ChatGPTまたはGeminiのアカウント（無料プランで可）
- ChromeやEdgeなどのブラウザ
- テキストエディタ（Windowsのメモ帳でも可。Visual Studio Codeがあると便利）
有料プランは必須ではありません。2026年10月時点の主な有料プランは、ChatGPTがGo（月8ドル）とPlus（月20ドル）です。GeminiにはGoogle AI Plus（月725円）とGoogle AI Pro（月2,900円）があります。無料プランで回数の上限に何度も当たるようになったら、切り替えを考えれば十分です。無料で作る方法全般は無料・スマホでAIゲームを作る方法にまとめています。
そのまま使えるプロンプトの型
AIにゲームを作ってもらうプロンプトは、5つの項目に分けて書くと抜けが出にくくなります。
| 項目 | 書く内容 | 例 |
|---|---|---|
| 概要 | どんなゲームか1行で | 敵をよけながら弾を撃つ縦スクロールのシューティング |
| 遊び方 | 操作、得点、終わる条件 | 矢印キーで移動、スペースで発射、3回当たると終了 |
| 見た目 | 色づかい、画面の向き、雰囲気 | 暗い宇宙の背景、自機は水色の三角形 |
| 条件 | 使ってよいもの、使わないもの | 1ファイル、外部ライブラリなし、画像ファイルなし |
| 出力 | 答え方の指定 | コード全体を省略せずに出す、日本語のコメントを付ける |
この型に当てはめたひな形が次のプロンプトです。【】の中を書き換えれば、ほかのゲームにも使えます。
ブラウザで遊べるゲームを、HTMLファイル1つで作ってください。
【概要】
（どんなゲームかを1行で）
【遊び方】
・操作方法：
・得点の入り方：
・ゲームが終わる条件：
【見た目】
・（色づかい、画面の向き、雰囲気）
【条件】
・HTML、CSS、JavaScriptを1ファイルにまとめる
・外部のライブラリ、画像ファイル、音声ファイルは使わない
・PCのキーボードとスマホのタッチの両方で遊べるようにする
【出力】
・コード全体を省略せずに出す
・主な処理に日本語で短いコメントを付ける条件の「外部のライブラリや画像ファイルは使わない」は、最初の段階では特に大切です。外部のファイルを読み込むコードは、プレビューでは動いても手元に保存すると動かない、という食い違いが起きやすいからです。
作るものが決まらないときは企画から相談する
何を作るか決まっていない段階でも、ChatGPTやGeminiに相談できます。いきなりコードを頼まず、まずアイデアを複数出してもらい、選んだものを仕様のメモにまとめてもらう流れが便利です。
ブラウザで遊べるミニゲームのアイデアを5つ出してください。
条件は次のとおりです。
・1回のプレイが1〜3分で終わる
・操作はクリックかタップ、または矢印キーだけ
・画像を使わず図形だけでも成り立つ
それぞれ「遊び方」「おもしろさの中心」「作る難しさ（易・中・難）」を1行ずつ書いてください。気に入ったアイデアが見つかったら、「3番を、さっきの5項目の型に沿った依頼文に書き直して」と頼みます。AIが書いた依頼文を自分で読み直し、遊び方や終わる条件が思いどおりかを確かめてから、新しいチャットでゲーム作りを頼むと話が混ざりません。
この段階で決めた内容は、テキストファイルに保存しておくと役立ちます。あとで新しいチャットに移るときや、別のAIに同じゲームを直してもらうときに、そのまま貼って前提を伝えられるからです。
シューティングゲームを3段階で作る実践例
ここからは、縦スクロールのシューティングゲームを例に、最小版から少しずつ育てていく流れを紹介します。プロンプトはChatGPTでもGeminiでも同じものが使えます。
第1段階は動く最小版
最初は自機が動いて弾を撃て、敵に当たると消えるところまでに絞ります。
ブラウザで遊べる縦スクロールのシューティングゲームを、HTMLファイル1つで作ってください。
【遊び方】
・自機は画面下にあり、左右の矢印キーで動く。スマホでは画面の左右をタッチして動かす
・スペースキー（スマホでは自動）で上に弾を撃つ
・敵は画面上からランダムな位置に現れて下に進む
・弾が敵に当たると敵が消えて10点
・敵が自機に当たるとゲームオーバー。得点と「もう一度」ボタンを表示する
【見た目】
・背景は濃い紺色、自機は水色の三角形、敵は赤い四角形
・画面サイズは縦長（幅360×高さ640を基準に、画面に合わせて拡大縮小）
【条件】
・外部のライブラリや画像ファイルは使わない
・コード全体を省略せずに出すコードが出てきたら、プレビューで実際に遊んで次の3点を確かめます。1つ目は自機が画面の外に出ないか、2つ目は弾が敵に当たったときに点が入るかです。3つ目に、ゲームオーバーのあと「もう一度」で最初から遊べるかを見ます。
第2段階で機能を足す
最小版が動いたら、1回に1〜2個ずつ機能を足します。一度に多く頼むと、どの変更で不具合が出たのか分からなくなるためです。
いまのゲームに次の2つを追加してください。ほかの部分は変えないでください。
1. 自機のライフを3にする。敵に当たるとライフが1減り、1.5秒間は点滅して無敵になる
2. 画面の左上に得点、右上に残りライフを表示する
変更後のコード全体を省略せずに出してください。次の機能を追加してください。ほかの部分は変えないでください。
・30秒ごとに敵の出現間隔を短くし、少しずつ難しくする
・倒した敵の位置に、小さな四角形が飛び散る爆発の演出を出す「ほかの部分は変えないでください」と添えるのは、頼んでいない箇所まで書き換えられるのを防ぐためです。
第3段階で遊びやすさを調整する
機能がそろったら、遊んだときの感触を整えます。ここは数字で伝えるのがコツです。「もっと速く」より「自機の移動速度を1.5倍に」と書くほうが、狙いどおりに直ります。
遊びやすさを調整してください。
・自機の移動速度を今の1.5倍にする
・敵の当たり判定を見た目より一回り小さくする
・ゲーム開始から最初の5秒は敵を出さない
・ハイスコアをブラウザに保存し、ゲームオーバー画面に表示する
調整に使う数値は、コードの先頭に定数としてまとめてください。最後の一文で数値を先頭にまとめてもらうと、そのあとは自分でコードの数字を書き換えて微調整できます。毎回AIに頼まなくて済むので、無料プランの回数の節約にもつながる方法です。
効果音を付けるときの頼み方
音のファイルを用意しなくても、ブラウザに備わっているWeb Audio APIを使えば簡単な効果音を鳴らせます。弾を撃つ音や爆発の音くらいなら、この方法で十分です。
Web Audio APIを使って、次の効果音を追加してください。音声ファイルは使わないでください。
・弾を撃ったとき：短く高い「ピッ」という音
・敵を倒したとき：低めの「ボン」という音
・ゲームオーバー：音程が下がっていく音
画面の右上に音のオンとオフを切り替えるボタンも付けてください。スマホのブラウザは、利用者が画面に一度触れるまで音を鳴らさない仕組みになっています。スタートボタンを押したときに音の準備をするよう頼んでおくと、スマホで音が出ない不具合を防げます。
エラーが出たときの伝え方
AIが書いたコードでも、動かないことは普通にあります。直してもらうときは、何をして何が起きて、本当はどうなってほしいのかを分けて伝えるのが基本です。
次の不具合を直してください。
・やったこと：ゲームオーバー後に「もう一度」を押した
・起きたこと：前の回の敵が画面に残ったまま始まる
・期待する動き：敵と弾がすべて消え、得点0・ライフ3から始まる
・コンソールのエラー：（エラー文をそのまま貼る。なければ「なし」）
直した部分を説明してから、コード全体を出してください。エラー文の見つけ方
Gemini Canvasでは、プレビューの右上にある「コンソールを表示」からエラーやログを確認できます。手元に保存したファイルの場合は、ブラウザでゲームを開いてF12キーを押し、開発者ツールの「Console」タブを見ます。赤い文字で出ているのがエラーです。英語のまま全文をコピーして貼ると、原因の場所を特定してもらいやすくなります。
よくある症状と頼み方
| 症状 | よくある原因 | 頼み方の例 |
|---|---|---|
| 画面が真っ白 | コードの途中に書き間違いがある | コンソールのエラー文を貼り「このエラーを直して」 |
| コードが途中で切れている | 回答が長すぎて出力が止まった | 「省略せずに全体を出して」または「JavaScriptの部分だけ出して」 |
| キーを押しても動かない | キー入力を受け取る処理の設定がずれている | 「矢印キーを押しても自機が動かない。押したときの動きを確認して直して」 |
| スマホで操作できない | タッチ操作が実装されていない | 「スマホのタッチ操作に対応させて。画面の左半分で左、右半分で右に動く」 |
| 直すたびに別の所が動かなくなる | やり取りが長くなり指示が混ざっている | 新しいチャットにコードを貼り直してから頼む |
ポイント
同じ不具合が3回直らないときは、いまのコード全体を新しいチャットに貼り、「このコードの不具合を直して」と頼み直すと解決することがあります。古いやり取りに引きずられなくなるためです。うまく動いた段階のコードは、ファイル名に日付を付けて保存しておくと安心です。
ChatGPTとGeminiの比較
どちらを使ってもブラウザゲームは作れます。違いは作業画面の使い勝手と、すでに使っているサービスとの組み合わせです。
| 比べる点 | ChatGPT | Gemini |
|---|---|---|
| 作業画面 | 回答の中のコードブロック | Canvas（コードとプレビューを横に並べる） |
| プレビュー | コードブロックでプレビューに切り替え | Canvasの右側に表示 |
| エラーの確認 | 手元に保存してブラウザの開発者ツールで確認 | Canvasの「コンソールを表示」で確認 |
| 共有 | チャットの共有リンク、またはファイルを保存して公開 | 「公開リンクをコピー」で共有できる |
| 主な有料プラン | Go（月8ドル）、Plus（月20ドル） | AI Plus（月725円）、AI Pro（月2,900円） |
| 次の段階 | 同じプランに含まれるCodexで本格的に作れる | Google AI StudioのBuildでアプリとして作れる |
無料のまま作るなら、コードとプレビューとエラーを1つの画面で見られるGemini Canvasが扱いやすい選択です。ChatGPTを契約しているなら、そのまま使えば十分です。どちらかで行き詰まったときに、同じコードをもう一方に貼って直してもらうという使い分けもできます。
ゲームが大きくなって1ファイルで扱いきれなくなったら、開発エージェントに移る時期です。ChatGPTのプランにはCodexが含まれています。進め方はClaude Code・Codexでゲームを作る方法で紹介しています。
作ったゲームを公開する方法
できあがったゲームを人に遊んでもらう方法は、手軽な順に3つあります。
Geminiの公開リンクで共有する
Gemini Canvasで作った場合は、Canvasの共有ボタンから「公開リンクをコピー」を選ぶとURLが手に入ります。リンクを知っている人なら誰でも開けるので、個人情報を含む内容は入れないでください。
itch.ioに置く
- ファイルを保存するコード全体をテキストエディタに貼り、文字コードをUTF-8にして「index.html」という名前で保存します。
- ZIPにまとめるindex.htmlをZIPに圧縮します。ほかのファイルがある場合も、index.htmlはZIPの一番上に置きます。
- プロジェクトを作るitch.ioで新しいプロジェクトを作り、「Kind of project」でHTMLを選びます。
- ブラウザで遊べるようにするZIPをアップロードし、「This file will be played in the browser」にチェックを入れて保存します。
GitHub Pagesで公開する
- リポジトリを作るGitHubにログインし、公開設定の新しいリポジトリを作ります。
- ファイルを上げる「Add file」から「Upload files」を選び、index.htmlをアップロードします。
- Pagesを有効にするリポジトリの「Settings」から「Pages」を開き、公開元にmainブランチを選んで保存します。
- URLを確かめる数分待つと、「ユーザー名.github.io/リポジトリ名」のURLでゲームが遊べるようになります。
GitHub Pagesは無料で使えますが、規約で商取引を主な目的とするサイトには使えないと決められています。広告収入を狙うなら、収益化の仕組みがある公開先を選びます。
注意
既存の有名なゲームのタイトルやキャラクター名をプロンプトに入れて「〇〇そっくりに」と頼むのは避けてください。文化庁のガイダンスでは、作品名やキャラクター名を入力すると既存作品に依拠したと認められやすくなるとされています。公開前の確認項目はAIで作ったゲームの著作権と規約チェックリストにまとめました。
よくある質問
無料プランでもゲームを作れますか
作れます。Gemini CanvasもChatGPTのコードブロックも無料プランで使えます。ただし無料プランは送れる回数に上限があるので、修正を要点に絞って頼むのが長く作業を続けるコツです。
スマホだけで作れますか
プロンプトを送ってプレビューで遊ぶところまではスマホでもできます。コードを保存してitch.ioやGitHub Pagesに上げる作業は、パソコンのほうが確実です。
画像や音を入れることはできますか
できます。最初は図形と簡単な効果音で作り、動きが固まってから画像や音のファイルに差し替えるのがおすすめです。ファイルを使う場合は、index.htmlと同じフォルダに置いて相対パスで読み込むよう頼みます。
作ったゲームのコードは自由に使えますか
OpenAIやGoogleの規約では、生成した出力を利用者が使うことが認められています。ただし規約は更新されることがあるため、販売などに使う前には最新の利用規約を確認してください。既存作品に似せて作ったものは、著作権の問題が別に生じるおそれがあります。
長いゲームを作ろうとすると途中でコードが切れます
回答の長さに限りがあるためです。「JavaScriptの部分だけ出して」のように分けて出してもらうか、機能を減らした版を先に完成させます。ファイル1つで収まらない規模になったら、Claude CodeやCodexのような開発エージェントを使う時期です。
まとめ
ChatGPTとGeminiを使えば、HTMLファイル1つで動くブラウザゲームを無料で作れます。プロンプトは概要・遊び方・見た目・条件・出力の5つに分けて書き、最小版を作ってから1〜2個ずつ機能を足すのが確実な進め方です。動かないときは症状とエラー文をそのまま伝え、完成したらitch.ioやGitHub Pagesに置いて遊んでもらいましょう。
この記事のまとめ
- GeminiはCanvas、ChatGPTはコードブロックでゲームを作ってプレビューできる
- プロンプトは概要・遊び方・見た目・条件・出力の5項目に分ける
- 最小版を作り、機能は1〜2個ずつ足す
- 不具合は「やったこと・起きたこと・期待する動き・エラー文」で伝える
- 公開はGeminiの公開リンク、itch.io、GitHub Pagesが手軽
