ゲームを作るなら
公開 9 分で読めます
遊び方を文章で伝えると、ブラウザで動く小さなゲームを AI に作ってもらえます。この記事では、YOBITSUGI AI に実際に頼んで、落ちてくる隕石をよけて星を集めるゲームを、絵・効果音・BGM つきで作りました。依頼は 2 回、待った時間は合わせて約 10 分、使ったのは約 287 クレジットです(2026 年 10 月時点)。
できたゲームは、取り出して手元のブラウザで実際に動かし、PC の幅とスマホの幅で確かめました。その結果をもとに頼んだ直しもあわせて紹介します。
向いている AI・道具
YOBITSUGI AI では、会話の相手をする AI(今回は既定の Claude Opus 5.5)がゲームのプログラムを書き、絵と音はそれぞれの生成 AI に頼み、作業用の環境(ワークスペース)で実際に動かして確かめます。AI を指定せずに頼んだところ、アプリの表示では、絵に OpenAI の GPT-Image-2.5 Flare、効果音と BGM に ElevenLabs が使われました。
| 作るもの | 今回使われた AI | 公式に書かれている主な特徴 |
|---|---|---|
| キャラクター・背景の絵 | GPT-Image-2.5 Flare(OpenAI) | 文章と画像を入力にできる。背景が透明な PNG や WebP を出力できる |
| 効果音 | ElevenLabs の効果音 | 文章から効果音を作る。長さは 0.1〜30 秒で指定できる。形式は MP3(繰り返し用でない音は WAV も選べる) |
| BGM | ElevenLabs の音楽(Eleven Music) | 歌ありも歌なしも作れる。長さは 3 秒〜5 分 |
BGM は、Google の Lyria 3.5 でも作れます。音楽と読み上げの AI の頼み方は お店の BGM やナレーションを作るなら にまとめています。
頼み方の例
今回、YOBITSUGI AI のアプリで実際に送った依頼文です。
ブラウザで遊べる小さなゲームを作ってください。上から落ちてくるものをよけるゲームです。
- 題: 「ほしひろいロボ」(架空のゲームです)
- 遊び方: 画面の下にいる小さなロボットを左右に動かして、落ちてくる隕石をよけながら、星を集めます。星を取ると 10 点。隕石に 3 回当たるとゲームオーバー。時間がたつほど、落ちてくる速さと数が増えます
- 操作: キーボードの左右の矢印キー(A・D キーでも)。スペースキーかボタンで始める・やり直す
- 絵: ロボット(丸い体・水色・頭にアンテナが 1 本)、隕石、星、宇宙の背景を、AI で作ってください。ロボット・隕石・星は背景を透明にしてください。絵柄は、やわらかい色のかわいい絵にそろえてください
- 音: 星を取った音、隕石に当たった音、ゲームオーバーの音(効果音)と、ループして流せる明るい BGM を、AI で作ってください。音のオン・オフのボタンも付けてください
- 作り方: HTML・CSS・JavaScript だけ(外部のライブラリなし)。game というフォルダに index.html・画像・音をまとめてください
- できたら、ワークスペースの中で実際に動かして、遊んでいる途中の画面を PC の幅で撮って見せてください
既存のゲームやキャラクターには似せないでください。
ポイントは次の 3 つです。
- 遊び方を決まりとして書く: 何をよけて何を集めるか、何点入るか、どうなったら終わるかを書きます。
- 絵は「背景を透明に」と書く: キャラクターや落ちてくる物を、背景の絵に重ねて動かすためです。
- 「実際に動かして、画面を撮って見せて」と書く: YOBITSUGI AI がワークスペースの中でゲームを動かし、途中の画面を見て直すようになります。
実際にやってみた
絵と音を作り、ゲームにまとめる
依頼から約 6 分 3 秒で、ゲームができました。最初に絵 4 枚、効果音 3 つ、BGM 1 曲が作られ、続けてプログラム(index.html)が書かれています。
できたファイルは次のとおりです。
| 種類 | 中身 | 形式 |
|---|---|---|
| 絵 | ロボット・隕石・星 | PNG(背景は透明・1 辺 256 ピクセル以内) |
| 絵 | 宇宙の背景 | JPEG(720×1080 ピクセル) |
| 効果音 | 星を取った音(約 0.8 秒)・隕石に当たった音(約 0.7 秒)・ゲームオーバーの音(約 2.5 秒) | MP3 |
| BGM | 繰り返して流す曲(約 40 秒) | MP3 |
| プログラム | index.html(HTML・CSS・JavaScript。約 440 行) | HTML |
画面には、YOBITSUGI AI が途中で確かめて直した経過も出ていました。絵のふちに残った薄い光を消して切り抜き直す、ゲームを動かして撮った画面で背景のつなぎ目に気づいて直す、といった作業です。
取り出して、手元で遊んで確かめる
ゲームのフォルダを取り出し、手元の PC の Chrome で動かしました。index.html を開くだけで動き、キーボードの左右の矢印キーでロボットが動いて、星を取ると 10 点が入り、隕石に 3 回当たるとゲームオーバーになります。ブラウザにエラーは出ませんでした。
一方で、気になる点が 2 つありました。
- スマホの幅で、画面の左右が切れる: Chrome でスマホの画面(幅 390・高さ 844 ピクセル)を再現して開くと、ゲームの画面が横にはみ出し、スコアの表示やロボットが画面の外に出ました。最初の依頼には、スマホの画面のことを書いていませんでした。
- 1 分ほどで終わる: 落ちてくる物の位置を読み取ってよけるだけの簡単なプログラムを書き、人の代わりに 10 回遊ばせたところ、ゲームオーバーまでの時間は平均で約 63 秒(55〜75 秒)でした。
スマホの操作と難しさを直してもらう
そこで、同じ会話で次のように頼みました。
ありがとうございます。遊んでみて気になった所を 2 つ直してください。
- スマホで開くと、画面の左右が切れます(幅 390 ピクセルの画面で、スコアの表示や左右のボタンが画面の外に出て、ロボットが見えなくなることがあります)。縦長のスマホの画面に、ゲームの全体が収まるようにしてください。操作は、左右のボタンではなく、画面に指を置いて左右に動かすと、ロボットが指の位置についてくる形にしてください。
- 1 分ほどで、よけきれない数の隕石が落ちてきて終わってしまいます。最初の 20 秒は隕石を少なくしてやさしく、そのあとはゆっくり難しくして、慣れた人なら 2 分くらい遊べるようにしてください。
PC のキーボードの操作は変えないでください。直したら、スマホの幅(390×844)で遊んでいる途中の画面を撮って見せてください。
約 4 分 1 秒で、直した版ができました。絵と音は作り直さず、プログラムだけが変わっています。
直した版を、同じ方法で確かめた結果です。
- スマホの幅: ゲームの全体が画面の幅に収まりました。画面に指を置いて左右に動かすと、ロボットが指の位置へ動きます。縦長の画面では、ゲームの上と下に余白が残ります。
- PC: キーボードの操作は、前と同じように動きました。
- 難しさ: 同じプログラムで 10 回遊ばせると、ゲームオーバーまでの時間は平均で約 2 分 43 秒(2 分 15 秒〜3 分 21 秒)になりました。
プログラムの中の設定は、次のように変わっていました。
| 始めてからの時間 | 直す前 | 直した後 |
|---|---|---|
| 10 秒 | 約 0.8 秒ごとに 1 つ落ちる。隕石は 44% | 1 秒ごとに 1 つ落ちる。隕石は 25% |
| 60 秒 | 約 0.3 秒ごとに 1 つ落ちる。隕石は 72% | 約 0.8 秒ごとに 1 つ落ちる。隕石は 45% |
| 2 つ同時に落ちる | 20 秒から | 60 秒から |
うまくいかないとき
今回、実際に起きたことと、その直し方です。
- スマホで画面が切れる・操作しにくい: 最初の依頼に「スマホでも遊べるように」と書いておきます。あとから直すときは、試した画面の幅と高さ、起きたこと(何が画面の外に出たか)を書くと伝わります。
- 難しさが合わない: 「もっとやさしく」ではなく、「最初の 20 秒は」「2 分くらい遊べるように」のように、時間で書きます。
- 絵のつなぎ目やふちが気になる: 「実際に動かして、画面を撮って見せて」と頼んでおくと、YOBITSUGI AI が画面を見て直します。今回も、背景のつなぎ目と、絵のふちの薄い光は、頼む前に直されていました。
- 音が鳴らない: ブラウザには、利用者が操作する前には音を鳴らさない決まりがあります。Chrome では、クリックやタップなどの操作のあとに、音つきの再生が許可されます。今回のゲームも、スタートのボタンかキーを押したあとに音が鳴る作りです。
音が実際にどう聞こえるかは、人が遊んで確かめる必要があります。YOBITSUGI AI も「音は、ファイルがあることと鳴らす作りを確かめただけ」と答えており、BGM は繰り返しの所で一瞬、間が空くことがあると説明しています。この記事でも、音はファイルの長さと形式を確かめるところまでです。
YOBITSUGI AI でできること・できないこと
- プログラム・絵・効果音・BGM を 1 つの会話で作り、1 つのフォルダ(と zip)にまとめられました。ワークスペースの中でゲームを動かし、画面を撮って確かめるところまで進みます。
- できたゲームは、ファイルを取り出して使います。index.html をブラウザで開くと遊べます。Web で公開するには、自分のサーバーなどにフォルダを置きます。
- 操作の手ごたえや音の聞こえ方、実物のスマホでの動きは、人が遊んで確かめます。この記事でスマホについて確かめたのは、PC の Chrome でスマホの画面と指の操作を再現した範囲です。
料金の目安
YOBITSUGI AI は月額の費用がなく、使った分だけクレジットが減る仕組みです。モデルごとの金額は 料金とシミュレーション で確認できます。
この作例で、アプリに表示された待ち時間とクレジットは次のとおりです(2026 年 10 月時点)。
| 依頼 | 待った時間 | クレジット |
|---|---|---|
| ゲームを作る(絵 4 枚・効果音 3 つ・BGM 1 曲・プログラム) | 約 6 分 3 秒 | 約 154 |
| スマホの操作と難しさの直し | 約 4 分 1 秒 | 約 128 |
ワークスペースの稼働の分を合わせて、会話全体では約 287 クレジットでした。YOBITSUGI AI の報告では、このうち絵と音の生成の分は約 28 クレジット(絵 4 枚で約 9、効果音 3 つで約 1.4、BGM で約 17.6)です。費用の大半は、会話の相手をする AI がプログラムを書き、動かして確かめる作業の分でした。
関連する記事
- お店の BGM やナレーションを作るなら
- 画像生成 AI の比較
- 音声・音楽の AI の比較
- AI でアプリを作って、ストアに出すまで 日数・費用・審査でつまずく所(ハック！でAI)
- Google、文字の指示でゲームを作って遊ぶ「Playground」を発表(TECHNOVA)
出典
- Image generation(OpenAI・2026-10-14 確認)
- GPT-Image-2.5 Flare Model(OpenAI・2026-10-14 確認)
- Sound effects(ElevenLabs・2026-10-14 確認)
- Eleven Music(ElevenLabs・2026-10-14 確認)
- Generate music with Lyria 3.5(Google・2026-10-14 確認)
- Autoplay policy in Chrome(Google・2026-10-14 確認)
- 料金とシミュレーション | YOBITSUGI AI(呼継AI)(株式会社Game・2026-10-14 確認)
