バイブコーディングで「おでんのコンニャクが主役のゲーム」を個人開発してみた― AIと進める個人ゲーム開発 ―【前編】

いつもはLTの紹介などを挙げている本ブログですが、たまには技術ブログ的なことも書いてみようかなと思いました。

今回は、現役エンジニア×ライターとして活動している管理人が、バイブコーディングで憧れのゲーム開発にチャレンジした記録をお届けします。

バイブコーディングでブラウザゲームを作りました

PHPエンジニアとして仕事を続ける一方で、ずっと心のどこかに「いつか個人でゲームを作ってみたい」という憧れがありました。テーマは決まっていて、主役はおでんのコンニャク。子どものころからおでんのコンニャクが大好物で、「いつかコンニャクが主役のゲームを作りたい」と考えていたからです。

私の中では、ゲーム開発＝3Dゲーム。UnityのC#を勉強しながら取り組む予定でしたが、仕事や家庭のことに追われ、まとまった時間を確保するのが難しく、長らく構想止まりのままでした。

そんな中、ですよ。生成AIブームが到来し、あれよあれよという間に、いわゆるバイブコーディングが市民権を得るようになりました。「……もしかして、AIにコードを書いてもらったら作れるんじゃね？」と思えたことが、今回のチャレンジにつながりました。

「バイブコーディングって何ぞや？」という方は、私がお仕事で書いたこちらの記事をご参照ください。

私が作成したゲーム「ROAD TO ODEN」はこちら

完成したゲームは、コードをGitHubで公開し、GitHub Pagesを使ってブラウザからそのまま遊べる形にしています。インストール不要で、URLを開くだけで試せる点も、個人開発として意識したポイントの一つです。お時間のある方はぜひプレイしてみてください。

「個人ゲーム開発はハードルが高い」という先入観がありましたが、実際に手を動かしてみると、完璧を目指さなくても形にはできると実感しました。

今回の技術スタック

今回の個人ゲーム開発では、「短期間で、とにかく最後まで完成させて公開する」ことを最優先に技術選定を行いました。

私は普段の業務ではPHPを中心に扱っていますが、学習コストと実装スピードを重視すると、わざわざ開発環境を作る必要もなく、ブラウザだけで完結するものを使う方が良さそうです。

そこで選択肢として挙がったのがJavaScript。生成されたコードをそのまま検証・修正しやすく、試行錯誤の回転も速くなると考えました。

使用したAIについて

今回の開発では、コードの実装をほぼAIに任せる形を取りました。利用したのは、ChatGPT、Gemini、Claudeの3つ。

あわせて、VS Codeに組み込まれたGitHub Copilot（無料版）も使用しました。エディタ上でそのまま補完や提案を受けられる点は便利でしたが、無料版ということもあり、利用回数や提案内容に制限がある点はやや気になりました。複雑な仕様をまとめて投げたい場面では、途中で打ち切られてしまうこともあります。

そのため、実際の開発では、課金しているChatGPT（Plus）やGemini（Pro）をメインに使用しました。チャット上で仕様や要件をまとめて伝え、生成されたコードをコピー＆ペーストして検証する、という進め方が中心です。体感としては、コード量の多い指示や段階的な修正依頼に対しては、チャット型AIのほうが安定している印象でした。

この方法だと、AIがどのような前提でコードを書いているのかを把握しやすく、動かなかった場合の修正指示もしやすくなります。

結果として、バイブコーディングにありがちな「何が起きているのか分からないまま進む」状態を、ある程度避けられたと感じています。

ゲームライブラリPhaserを選んだ理由

今回、ゲームライブラリとしてPhaserというものを選びました。Phaserはデスクトップおよびモバイル向けのHTML5ゲームを作成するための2Dゲームフレームワークです。

ChatGPTと壁打ちしながら複数の選択肢を比較したのですが、いくつか挙げてもらった2Dゲーム向けライブラリのうち、特徴や学習コスト、実装イメージをもとに考慮しました。

実際に触ってみると、シーン構成や当たり判定、入力処理などが比較的シンプルで、AIが生成したコードもそのまま読み解きやすい印象です。

バイブコーディングという進め方において、「実装が想像しやすい」「動かしながら調整しやすい」という点は非常に重要で、その点でもPhaserは相性が良いライブラリでした。

画像を歩いているように動かしたり、効果音やBGMを出すのも比較的簡単に実装出来たので、完成してみて「Phaserを選んで良かった！」と感じています。

今回のゲーム開発でやりたかったこと

今回の個人ゲーム開発では、「どこまでAIに任せて一本のゲームを完成させられるのか」を明確なテーマとして設定しました。

仕様設計からコーディングまでをすべてAIに任せ、人間である自分は主にテストと指示出しに徹する、という進め方を意識しています。コードの細部を逐一読み込むのではなく、実際に動かして確認し、期待した挙動と違えば修正指示を出す、というスタイルです。

あわせて、画像や音楽といったアセット類も、できる限り自作することを目標にしました。画像については生成AIを活用して用意できましたが、音楽生成については今回は断念しています。

というのも、当初はSUNOを使ってBGMを作成する予定でしたが、無料プランでは商用利用ができないことが分かったのです。このゲームはGitHub Pagesで一般公開する想定だったため、利用条件を考えるとそのまま使うのは難しく、かといって「このためだけに課金するのもな…」と感じ、見送る判断をしました。

すべてを無理にやり切るのではなく、「完成させて公開する」ことを優先し、音楽生成は次回以降の課題としました。その代わり、ゲーム体験として最低限必要なBGMや効果音の実装自体は重視し、プレイ感を損なわない構成を意識しています。

今回のゲーム開発ではやらなかったこと

今回の個人ゲーム開発では、限られた時間の中で最後まで完成させることを最優先にし、あえて取り組まなかったこともいくつかあります。

まず、ゼロから自分でコードを書くことは行いませんでした。仕様設計から実装までをAIに任せる、という方針を最初に決めていたためです。自分は主に動作確認と指示出しに徹し、細かな実装ロジックを一つひとつ作り込むことはしませんでした。

テストについても、業務開発のように網羅的な確認は行っていません。実際にプレイしてみて、致命的に止まらない、進行不能にならないことを最低限の基準とし、多少の挙動の違和感については目をつぶる判断をしています。完璧さよりも、まず「遊べる状態で公開する」ことを優先しました。

また、スマートフォン対応も今回は本格的には行っていません。こちらも途中まで対応を試みたものの、操作方法の設計やUI調整に想像以上の工数がかかることが分かり、今回は断念しています。その代わり、スマートフォンからアクセスした場合は操作できないことが分かるよう、あらかじめ制御を入れています。

各ステージ構成

せっかくなので、各ステージがどんな感じかもざっくりとご紹介します。

Stage1∶縦移動ゲーム

Stage1は、目覚めのステージ。土の中で生まれたコンニャクイモが、おでんのコンニャクになることを夢見て地上を目指すというものです。

操作は上下左右の移動のみで、ジャンプや攻撃といった要素は入れていません。まずはゲームに慣れてもらうため、「敵に当たらずにゴールへ向かう」ことだけに集中できる構成にしています。

敵は左右どちらかの画面外からランダムに出現し、一定の速度で横方向に移動します。種類は2パターンあり、地面付近を動くモグラ系の敵と、少し高い位置を動く虫系の敵をランダムで生成。出現位置や移動速度も毎回少しずつ変えているため、完全に同じ展開にはなりません。

ステージ内には、進行を妨げる障害物として岩を配置しています。岩は複数種類の画像からランダムに選び、サイズも6つのパターンを用意しました。ただし、すべてを完全ランダムにすると理不尽になりやすいため、中央付近には必ず通れる隙間ができるよう調整しています。「避けられるけど油断すると当たる」くらいの難易度を意識しました。

当たり判定については、見た目より少し小さめに設定しています。グラフィック通りの判定にするとストレスが溜まりやすいため、実際にプレイしてみて「このくらいなら納得できる」という感覚を優先しています。敵に一度でも触れるとゲームオーバー、画面上部まで到達できればステージクリアです。

Stage2∶横スクロールゲーム

Stage2は、工場の生産ライン。捕らえられたコンニャクイモは切り刻まれてコンニャクへと加工されてしまう…！コンニャクにはなりたいけど、切り刻まれるのは嫌だ！こうしてコンニャクイモは、四方八方から襲い来る敵を必死に避けつづけるのでした…！

「いやいや、コンニャクになりたいのか、なりたくないのか、どっちやねん」というツッコミ待ち。

プレイヤーは自動的に右へ流れていくコンベアの上を進み、ジャンプ操作だけで障害物を避け続けます。Stage1とは異なり、移動操作を減らして「判断とタイミング」に集中させる構成にしました。

ステージは時間（＝進んだ距離）によって前半・中盤・後半の3フェーズに分かれています。前半ではカッターなど比較的シンプルな障害物が中心ですが、進むにつれて箱や火花、蒸気といった種類が増え、徐々に忙しくなっていきます。どの障害物が出るかはランダム要素も入れているため、毎回少しずつ展開が変わります。

ジャンプは最大3回までできるようにしており、いわゆる多段ジャンプの仕組みを採用しました。これにより、単純な1回ジャンプでは避けられない配置にも対応でき、プレイヤー側にある程度の自由度を持たせています。着地したタイミングでジャンプ回数がリセットされるため、操作自体は直感的です。

Stage2ではHP制を導入しています。敵に当たると即ゲームオーバーではなく、障害物の種類ごとにダメージ量が異なる仕組みです。途中で回復アイテムも出現するため、「多少のミスは許容されるが、無理はできない」バランスを意識しました。これにより、Stage1よりも長く遊べるステージになっています。

後半には、工場の主のような巨大な敵が登場します。このボスは倒すものではなく、やり過ごす存在として実装しました。ボスが画面外へ去り、プレイヤーが無事に着地できればステージクリアとなります。

Stage3∶耐久ゲーム

Stage3は、打って変わってスーパーの売り場。コンニャクイモ改めコンニャクはスーパーの売り場に出されますが、運命に抗い、何とか買われないように時間制限いっぱい逃げ切るというステージです。

「結局コンニャクになったんかい！」「いやだから、おでんのコンニャクになりたいんじゃないの！？」というツッコミ待ち。コンニャクも複雑な心境なんです、きっと多分…。

プレイヤーは左右移動のみで操作し、上から次々と落ちてくる買い物カゴを避けながら、60秒間生き残ることを目指します。ゴール地点はなく、時間を耐え切れたらクリアというシンプルな構成です。

敵となる買い物カゴは、画面上部のランダムな位置から落下します。出現位置や落下速度は毎回ランダムで、少しだけ横方向にもブレるようにしています。これにより、「同じ場所に立っていれば安全」という状態が生まれにくくなっています。

時間経過に応じて、難易度が自然に上がるよう調整しました。開始から30秒程度までは比較的ゆっくりした速度で落下しますが、それ以降は速度レンジを引き上げています。さらに、買い物カゴの出現間隔自体も徐々に短くなるため、後半になるほど画面が忙しくなります。

当たり判定はシンプルで、買い物カゴに一度でも触れると即ゲームオーバーです。HP制などはあえて入れず、「避け続ける」ことに集中できるルールにしています。落下した買い物カゴは、地面に当たるか画面外に出たタイミングで削除し、処理が重くならないようにもしています。

Stage4∶シューティングゲーム

ラストステージは、今までよりちょっと難易度を上げてシューティング。ジャンプと左右移動、そしてSpaceキーによる発射（何をかは不明）を使い分けて敵を倒していくステージです。

ちなみに仕様を詰めていた時ChatGPTが考えたストーリーでは、「スーパーの売り場からは逃げ延びたコンニャクだったが、結局見切り品ゾーンに持っていかれて買われてしまった…」というものでした。ひどいんだが。

これまでのステージで使ってきた要素をすべて詰め込んだ最終ステージです。左右移動とジャンプに加えて、弾を撃つシューティング要素を導入し、操作難易度を一段階引き上げています。プレイヤーは敵を避けつつ攻撃し、最終的におでん鍋へ飛び込むことを目指します。

このステージでは、時間経過によってフェーズが切り替わる仕組みを採用しました。最初は牛すじやちくわといった比較的シンプルな敵が出現し、徐々にもち巾着や卵など、動きの読みにくい敵が追加されていきます。敵の種類ごとに動き方や出現位置を変えているため、後半になるほど画面が賑やかになります。（夫から「敵が多すぎ」と指摘されたのでバランスは今後調整予定）

シューティングについては、弾を一定間隔で発射できるようにし、撃ちっぱなしにならないようクールタイムを設けました。雑魚敵は1発で倒せますが、弾の管理と回避を同時に行う必要があり、意外と忙しい操作になります。ここで初めて「攻撃するか、避けるか」という判断が求められます。

終盤にはダイコンのボスが登場します。このボスはHPを持っており、複数回弾を当てないと倒せません。ボスは画面内を前後に動きながら弾を撃ってくるため、単純に連射するだけでは対応できず、タイミングを見て攻撃する必要があります。この「何発当てたら倒れる敵」を実装する部分は、今回の開発で特に苦労したポイントでした。

なぜかボスまで1発で消えちゃうんですよ。。。あれこれ試したけど結局解決せず。「3つのAIに頼っても無理ならもう無理だ」と潔く諦め、いったん該当処理を全削除→新規作成をしました。結局どこがおかしかったのはか謎。

一定時間が経過するとゴールであるおでん鍋が出現し、鍋の中にジャンプできればステージクリアです。鍋自体は表示されていても、当たり判定は鍋の「中」にだけ設定しており、近づいただけではクリアにならないよう調整しています。見た目と判定のズレを少し意識することで、「ちゃんと飛び込んだ感」を出しました。

後編へ続く

ここまで、バイブコーディングを前提とした個人ゲーム開発の背景や技術スタック、そしてStage1からStage4まで、それぞれのステージでどんな仕組みを実装したのかを紹介してきました。完璧な設計や洗練されたコードを目指すのではなく、「まず一本、最後まで作って公開する」ことをゴールにした開発です。

実際に手を動かしてみると、AIに任せられる部分と、人間が判断しなければならない部分の境界も少しずつ見えてきました。バイブコーディングは魔法ではありませんが、個人開発のハードルを確実に下げてくれる手法だと感じています。

後編では、今回のゲームをどのような手順で作り進めたのか、実際の開発フローをもう少し具体的に振り返ります。また、ボス戦の実装やステージ統合など、特にハマったポイントや試行錯誤した部分についてもまとめる予定です。

個人ゲーム開発や、AIを活用した開発スタイルに興味がある方にとって、何か一つでも参考になれば嬉しいです。後編も引き続き、ぜひ読んでいただければと思います！