AIでゲーム開発を始める方法｜遊べる作例と修正手順を紹介

2026年10月21日

こんにちは。AIあれこれ散歩道、運営者のもっちゃんです。

AIでゲーム開発を始めるなら、まずはブラウザで動く小さなゲームを一つ作り、遊んで直すところまで進めるのがおすすめです。最初から大きなRPGやオンライン対戦を目指すより、「2枚めくって同じ絵柄を探す」くらいの仕組みなら、何ができて何ができていないかを自分で確かめられます。

この記事では、当サイトで制作した12枚のペア探しゲームを作例に、AIへの依頼、HTMLファイルの開き方、修正の伝え方を紹介します。作例はダウンロードしてPCで開ける1ファイル構成です。追加のAPI契約や有料の公開サーバーを使わず、まず手元で遊ぶところまで試せます。

見本の画像を作っただけではありません。カードの連続操作、途中の再スタート、全組クリア、キーボード操作を確認しました。スマートフォンについては幅390pxのブラウザ上の再現環境で確認しており、実機のiPhoneやAndroidで試した結果ではない点も、あわせてお伝えします。

初めてのゲームを小さく決める方法
そのまま応用できるAIへの依頼文
遊べる作例の開き方と動作確認
不具合とスマホ表示の直し方

AIでゲーム開発を始める準備

準備で大切なのは、道具をたくさんそろえることより、完成させる範囲を決めることです。今回の作例を見ながら、遊び方、必要なファイル、AIへ渡す条件を順に考えていきましょう。

最初は遊び方を一つに絞る

ゲームのアイデアを考えるのは楽しいですよね。敵を増やしたい、音を付けたい、得点を競いたい、と次々に思いつくかもしれません。ただ、最初から全部入れると、画面が表示されないときにどの部分を直せばよいか分からなくなります。

そこで、最初の完成形を一文にしてみましょう。今回なら「裏返しのカードを2枚選び、同じ記号なら残し、6組見つけたら終わる」です。この一文に入っていない機能は、基本の動きが確認できてから考えます。遊び方を短く言えると、AIへの最初の依頼も書きやすくなります。

初心者向けの題材としては、今回のペア探し、選択肢を選ぶクイズ、短い時間でボタンを押す反応ゲームなどが考えられます。どれも、開始と終了、正解と不正解が見た目で判断しやすい作りにできます。物理演算や複雑な3D空間を扱う前に、ボタンを押すと何が変わるかを体験する題材です。

逆に、オンライン対戦、ユーザー登録、課金、ランキングの共有まで含めると、ゲーム画面の外側にも仕組みが必要になります。今すぐ避けなければならないという話ではありませんが、最初の小さな作品とは別の段階として考えると進めやすいです。

今回の完成形

1人で遊ぶ12枚・6組のペア探しです。試行回数と経過時間を表示し、全部そろったら終了。途中でも「もう一度あそぶ」で最初から始められます。会員登録、通信、広告、課金は入れていません。

作例の仕組みと必要なもの

作例には、HTML、CSS、JavaScriptというWebページの基本技術を使いました。HTMLは画面の部品、CSSは色や配置、JavaScriptはカードをめくるなどの動きを担当します。今回はそれらを一つのHTMLファイルにまとめてあるため、専用の開発環境を導入せずに、PCのブラウザで開けます。

Web技術によるゲーム制作の位置付けは、MDNのWebゲーム開発入門でも紹介されています。HTMLそのものが初めてなら、MDNのHTML基礎で、見出しや本文をタグで表す考え方を読むと、コードを眺めるときの手掛かりになります。

手元で必要なのは、ファイルを保存できるPC、ブラウザ、文字を編集できるテキストエディターです。自分でもAIにコード作成を頼む場合は、コードを扱えるAIチャットを用意します。ただし、利用できる機能や上限はサービスや契約によって違います。このゲームを遊ぶこと自体には、AIへの継続接続は必要ありません。

12枚のカードと試行回数・経過時間を表示したペア探しゲームのPC画面 — 当サイトで制作した「いろとかたちのペア探し」の実画面。記号が同じ2枚を探す、1人用の小さなゲームです。

見た目の素材は、星、丸、三角などの記号を使いました。最初から画像ファイルを何枚も読み込む構成にしないため、画像の保存場所や読み込み失敗でつまずく箇所を減らせます。音声も付けていません。まず動きを確認してから、必要なら表現を増やす順番です。

コード生成とゲーム内AIの違い

「AIゲーム」という言葉は、二つの意味で使われることがあります。一つは、制作中にAIへプログラムを書いてもらうこと。もう一つは、完成したゲームの中でAIが会話や物語を作ることです。今回行っているのは前者で、遊ぶたびにAIサービスへ問い合わせる仕組みではありません。

この違いは費用や動作にも関わります。今回のゲームは、HTMLファイルを開いた後、カードをめくるたびに外部APIを呼びません。カードの並び、ペアの判定、時間の計測は、ファイルに入ったプログラムで処理しています。遊んでいる間の生成AI利用料は発生しない構成です。

一方、プレイヤーに合わせて登場人物が自由に返事をするゲームなら、AIを呼び出す設計が必要になる場合があります。応答待ちや費用だけでなく、どんな内容を送るかも考える必要があるため、今回の完成条件には含めていません。

専用サービスを使う方法もあります。たとえばWillBoosterのAIゲームビルダーは、日本語の指示からの制作や公開を案内しています。サービス上で作る方法と、手元のHTMLファイルを育てる方法では、保存先や公開方法が異なります。今回はファイルの中身と動きを自分で確かめやすい、後者の作例に絞ります。

AIへお願いする際にも、「制作の手伝いとしてコードを書いてほしい。ゲームの実行中にはAIや外部通信を使わない」と伝えると、必要以上に大きな仕組みを提案されにくくなります。欲しい遊びと、欲しくない仕組みの両方を短く書くのがコツです。

完成条件を文章にする

AIにコードを書いてもらう前に、できたかどうかを判断する条件を書きます。専門用語を使う必要はありません。「2枚が違ったら少し待って裏に戻る」「その間に3枚目は選べない」のように、遊ぶ人の操作として書けば大丈夫です。

今回なら、カードは全部で12枚、同じ記号が2枚ずつで6組です。1枚目と2枚目が一致したら表のまま残り、不一致なら短い待ち時間の後に戻ります。同じカードを続けて押しても、1組そろったことにはしません。こうした細かな条件が、遊べる状態を作ります。

12枚のカードに6種類の記号を2枚ずつ配置する
2枚を選ぶたびに試行回数を1増やす
一致しない2枚を戻す間は次のカードを選べない
6組そろったら終了を知らせ、時間を止める
再スタートでは回数・時間・選択状態をすべて戻す

画面の条件も加えましょう。色だけで見分けるのではなく、記号でも区別する。ボタンは指でも押しやすくする。キーボードだけでも順番に選べるようにする。これらは特別な飾りではなく、遊ぶ人が操作できるかに関わる条件です。

完成条件は、長い願い事の一覧にするより、試せる文章にします。「楽しいゲームにする」だけでは確認が難しいですが、「全部そろった後にもう一度始められる」なら実際に押して確かめられます。最初の作品では、この小さな確認を積み重ねる方が達成感も得やすいと思います。

最初の依頼文を作る

依頼文には、遊び方、ファイルの形、完成条件、見た目の希望を入れます。長い肩書きを付けるより、何を作るかを具体的に書く方が、返ってきたものを評価しやすいです。以下は今回の作例に合わせて使える、練習用の依頼文です。

最初の依頼文の例

PCのブラウザで動く、1人用のペア探しゲームを作ってください。HTML・CSS・JavaScriptを一つのindex.htmlにまとめてください。外部ライブラリ、画像の外部読み込み、ログイン、API、広告、通信は使いません。

カードは12枚、6種類の記号が2枚ずつです。2枚めくって一致すれば残し、不一致なら少し待って戻します。同じカードの連続選択と、戻す途中の3枚目の選択を防いでください。試行回数と時間を表示し、6組そろったら時間を止めます。

途中でも再スタートでき、前のゲームの待ち処理が新しいゲームに影響しないようにしてください。白を基調に、濃い文字と見やすいボタンを使います。幅390pxでも横にはみ出さず、マウス・タッチ・キーボードで操作できる形にしてください。完成コードと、開き方、確認する操作を教えてください。

一度の返答で完成するとは限りません。返ってきたコードが途中で切れている、画像の置き場所が別途必要、外部サービスへの登録が含まれている、といった場合は、最初の条件と比べます。別の仕組みを追加する前に「1ファイルだけで動く条件を保ってください」と戻せばよいのです。

また、「テストしました」という文章だけで判断せず、何をどの環境で確認したかを尋ねます。AIがブラウザを実際に操作できない環境なら、動作確認はあなたが行う必要があります。コードを作ることと、動いた証拠があることを分けて考えてください。

AIでゲーム開発を進める手順

条件が決まったら、ファイルを開き、普通の遊び方と少し変則的な操作を試します。うまくいかないときは、押した順番と期待した結果を伝えると、修正のやり取りが具体的になります。

受け取ったHTMLを開く

当サイトの作例は、以下のZIPファイルに入っています。PCへダウンロードして展開し、中にあるindex.htmlをブラウザで開いてください。説明書も同梱しています。展開せずに圧縮ファイルの中から開くより、一度フォルダーへ取り出した方が、保存場所を把握しやすいです。

ペア探しゲームの作例をダウンロードする（ZIP）

内容：index.htmlとREADME.txt。遊ぶための会員登録や追加API契約は不要です。制作時のAIサービス利用料は、それぞれの契約条件によります。

自分でAIからコードを受け取った場合は、テキストエディターに貼り付けて保存します。ファイル名はindex.html、文字コードはUTF-8を選びます。チャットのコード枠を囲む記号までコピーしてしまうと、画面に不要な文字が出ることがあるため、HTML本体だけを保存しましょう。

Windowsでは、拡張子が隠れているとindex.html.txtのような名前になっていても気づきにくい場合があります。ブラウザでコードが文字として表示されたら、まず保存したファイル名を確認してください。「プログラムが全部間違っている」と決める前に、開いているファイルがHTMLなのかを見る順番です。

修正版を保存したのに表示が変わらないときは、元のファイルと別のフォルダーのコピーを開いていないかを確かめます。ファイルの場所を一つに決め、保存してからブラウザを再読み込みすると、今どの版を試しているか分かりやすくなります。

この作例の動作確認はPCのChromeで行っています。スマートフォンでダウンロードしたHTMLを直接開く操作は、OSやファイルアプリによって違います。まずPCで動かし、スマートフォンで他の人に遊んでもらう段階では、公開先の選定と実機確認を別に行うのがよいでしょう。

遊んで動きを確かめる

最初は説明どおりに遊びます。2枚を選び、違う記号なら裏へ戻る、同じ記号なら表に残ることを見ます。その後、全部の組を見つけて、終了の表示と時間の停止を確認します。ここまでで基本の遊びが成立しているか判断できます。

次は、少し変則的な押し方を試しましょう。同じカードを2回押す、2枚が戻る前に3枚目を押す、待っている途中で再スタートする、といった操作です。遊ぶ人は、作り手が想定した順番だけで操作するわけではありません。連続クリックでも状態が崩れないことが大切です。

試した操作	期待する動き	作例での確認
同じカードを続けて選ぶ	1組として数えない	確認済み
不一致の表示中に3枚目を選ぶ	3枚目は開かない	確認済み
待ち時間中に再スタート	前の待ち処理が新しい盤面を変えない	確認済み
6組すべてそろえる	完了を表示し時間が止まる	確認済み
キーボードでカードを選ぶ	Enterキーで選択できる	確認済み

当サイトでは2026年10月14日に、Chrome 154.0.8037.98でこれらを確認しました。PC画面は幅1280px、スマートフォン表示は幅390pxの再現環境です。テストでのJavaScriptエラーは記録されず、390px表示でも横へのはみ出しはありませんでした。これは今回の環境での結果で、すべての端末での動作保証ではありません。

全組クリアの確認では、同じ条件を再現できる並びで操作しました。通常の配布版は開始時にカードを並べ替えます。確かめたいのは、作者が速く解けるかではなく、どの組が最後になっても終了の処理に進めるかです。

あなたが試すときも、最初は記録を短く残すだけで十分です。「普通に遊べた」「再スタートで回数が0に戻った」「最後に時間が止まった」と書くと、次の修正後にも同じ確認を繰り返せます。

直したい点を具体的に伝える

修正を頼むときの基本は、操作、実際の結果、期待した結果の3点です。「動きがおかしい」だけだと、AIは色や配置まで変えてしまうかもしれません。「違うカードを2枚開いた直後に再スタートすると、次のゲームの表示が変わる」のように、再現する順番を伝えましょう。

次の文章は、待ち処理に関する不具合が起きた場合の伝え方の例です。今回の作例でこの不具合が発生したという報告ではありません。作例には、再スタート時に待ち処理を取り消し、前の回の処理が新しい回へ影響しないようにする対策を入れ、その動きを確認しています。

不具合が起きた場合の依頼例

違うカードを2枚開いた後、裏に戻る前に再スタートしました。期待するのは、新しい12枚がすべて裏向きで、回数と時間が0になることです。実際には、しばらくして前の処理が動いているように見えます。再スタートで以前の待ち処理を取り消してください。色、文言、枚数、採点方法は変えず、変更した箇所と再確認の手順を教えてください。

機能の変更と見た目の変更も、一度にまとめない方が確かめやすいです。まず不具合を直して再テストし、その後にボタンの色や余白を調整します。見た目だけを直したつもりで動きまで変わった場合も、変更を小さくしていれば原因を探しやすくなります。

コードに慣れていなければ、「変更箇所だけ」では貼り付ける位置が分からないことがあります。その場合は「修正済みのHTML全体を省略せずに出してください」と依頼できます。ただし、全体を受け取ったら、以前動いていた再スタートやクリアももう一度確認してください。

◆もっちゃんのワンポイント

直したい場所を一つに絞ると、AIへの説明も、直ったかの確認も短くなります。「もっとよくして」より、「この操作の後も回数が0のままであること」と伝える方が、完成へ近づきやすいですよ。

スマホ向けに枚数を変える

PCで見やすくても、細い画面では下のボタンが遠くなったり、カードが小さくなったりします。今回は12枚版に加えて16枚の比較版も作り、幅390pxで盤面の大きさを比べました。どちらも4列で、12枚は3段、16枚は4段になります。

同じ設定で測った盤面の高さは、12枚版が約248.5px、16枚版が334pxでした。12枚にすると1段分が減り、開始や再スタートの操作も見通しやすくなります。この数字は今回の画面幅とデザインでの測定値で、他のデザインにもそのまま当てはまるわけではありません。

幅390pxで12枚のカードを4列3段に配置したペア探しゲームの表示確認画面 — 幅390pxのブラウザ再現環境で確認した12枚版。実機の写真ではありません。タップ操作と横にはみ出さないことを確認しました。

枚数を変えるときは、見た目のカード数だけ減らさないようにします。記号の種類、2枚ずつの組、クリアに必要な組数が一緒に変わらないと、最後まで遊んでも終了しない状態になりかねません。「16枚から12枚に、8組から6組に変更し、終了判定と説明文も合わせる」と伝えます。

カードを単純に小さくする以外にも、見出しの余白を少し減らす、説明を短くする、盤面の段数を減らす、といった選択肢があります。最初にボタンを押しにくくしてしまうより、画面全体で必要な高さを考えた方が遊びやすくなります。

今回のカードは色に加えて記号でも区別しています。それでも、小さな記号が読み取りやすいか、指で隣を押してしまわないかは、実機で試す価値があります。ブラウザの再現環境で問題がなければ完成と決めず、公開する段階で自分のスマートフォンでも一巡遊ぶことを、次の確認にしてください。

保存と公開の範囲を決める

動いたファイルは、修正する前にコピーを残しましょう。「最初に動いた版」「枚数を変えた版」「見た目を変えた版」と分ければ、変更後に動かなくなっても戻せます。ファイル名かフォルダー名に日付や短い変更内容を入れると、後から見分けやすくなります。

たとえば、game-original、game-12cards、game-designというフォルダーを作り、それぞれにindex.htmlを置く方法です。難しい管理ツールを導入する前でも、動いた状態を一つ残すだけで安心して試せます。どれが配布用なのかはREADMEなどの説明書に書いておきましょう。

今回の配布ファイルは、ローカルで遊ぶ範囲の見本です。得点を保存せず、名前やメールアドレスも入力させません。ブラウザを閉じると、その回の状態は残りません。ランキングや途中保存が必要になったときは、何をどこに残すかを新しい条件として考えます。

他の人へ渡す場合は、HTMLと説明書をZIPにまとめる方法があります。インターネット上のURLから遊べるようにしたいなら、HTMLを公開できる置き場所が別に必要です。公開サービスの条件、ファイルの置き方、スマートフォンからの動作を確かめてから進めましょう。この記事では公開ホストへの設置までは行っていません。

また、見本に後から画像や音を加えるなら、自分で作った素材か、使い方を確認できる素材を選びます。他のゲームのキャラクターや音楽を、似た雰囲気にしたいという理由だけで入れないようにしてください。最初の作品なら、自分で決めた色と記号だけでも、十分に遊びの仕組みを表現できます。

説明書には、遊び方、操作方法、動作を確認した環境、保存されない情報を書いておきます。作った本人には当たり前でも、初めて開く人には分からないことがあります。カードをめくるところから再スタートまで、一人で迷わず試せる状態が、配布用の完成形です。