「難しいコードは書けない、でも作りたいもののイメージ（バイブス）はある！」 そんな想いをAIに投げかけ、対話を重ねながら直感的に開発を進めるスタイルがVibe Coding（バイブコーディング）です。
この記事では、ふとした思いつきから始まったゲーム「Chrono Botanist」が数々の試行錯誤を経て、自動化されたポータルサイトと共に公開されるまでの、私とAIのやり取り（プロンプトと回答）を振り返りながら、紹介していきます。
Vibe Codingにより構想から制作まで全てをAI頼みで実現
私がVibe Coding（バイブコーディング）を知ったのは、2025年11月21日でした。GeminiやChatGPTなどは既に使っていましたが、たまたまバイブコーディングに関する記事を読んだことがきっかけです。
その記事がこちら。
そして、たまたま、同じタイミングでGoogleからAntigravityというものがリリースされたことも知りました。
何ができるんだろうか？本当に自分でも初見でできるのだろうか？
そんな想いを胸に、調べながらAntigravityをインストールしてみたのです。そこから実践が始まりました。
1.ゲームの企画はGeminiで壁打ち
私はまず、漠然とした「作りたいもの」をGeminiに投げかけました。人気アプリのように凝ったものではなく、実験的に作ることができれば十分でしたので、こんなふうにを聞いてみました。
オリジナルのWEBゲームを制作したいと考えています。次の条件は必須としてその条件をもとにどのようなゲームが良いかアイデアを出してください。
- PC,スマートフォンなどどんなデバイスでも快適に操作可能
- ウェブに記録が保存されること
- ゆったりとした進行が可能なこと
- 継続性があること
- ウェブサイトでゲームが行われること
- ストーリー性があること
- 楽しくて適度に中毒的であること
- 落ち着いて考えながらできること
- 24時間365日いつでもできること
- 男女問わず楽しめること
- 日本語または英語どちらでも楽しめること
- 制作難易度は個人で実現可能なもの
その結果、返ってきたレポートがこちら。
次に、こんな指示をしてみました。
では、ここで出たアイデアでゲームをAIツールで制作します。これを実現するためにはプロンプトが重要です。今回示されたアイデアとヒントをもとに推奨されるゲームの制作プロンプトを作成してください。
そうすると、私のリクエストに最も近い形を実現できるのが、「コンセプトA：クロノ・ボタニスト（時をかける植物学者）」を推奨されました。自分でもイメージしやすかったので初見で試すにはちょうど良いレベルだと判断しました。
推奨理由はこのような感じです。
テキストとロジックが主体: アクションゲームのような複雑な物理演算が不要で、AIがコードを生成しやすい。
アセット生成が容易: 植物の画像をAIに描かせる必要がなく、「CSSとSVG（コードで書ける図形）」だけで美しいビジュアルを作れるため、AIの得意分野と合致します。
データ構造が明確: 「メンデル遺伝」という既存の科学法則を使うため、AIにルールを説明しやすい。
以下に、このゲームをAIと共同制作するための「開発フェーズ別プロンプトセット」を作成しました。これらを順番にAI（Claude 3.5 SonnetやGPT-4o推奨）に入力していくことで、着実に開発を進められます。
正直なところ、初見でうまくいくなんて思っていませんでしたので、試しにこれと同時に返ってきた要件定義やコンセプトをコピーして、Google Antigravityに貼り付けてみたところ、会話するかのようにプログラムが実行され、チャットで会話するかのように、コードの提案、プレビュー画面を使った操作体験ができてしまいました。
2.ゲームシステムの構築
実際に動かしてみたことで、どのように進められるのかがわかりました。指示だけでなく、普通の対話のように質問や確認を交え、チャット会話しながら具体的な「遊び方」を詰めていきます。
最初にできたものは、「種を植えてしばらく待ったら花が咲き、枯れるまでに交配させると新しい種を貰える」という単純なものでした。
その段階から、「こんなことがしたい」というのをどんどんリクエストしていきます。
私待ち時間が長いのは退屈だからその間、別ページに移動しても進行できるようにできないかな？
AIページから離脱してもゲームの進行状況が維持されるようにしました。
リクエスト→体験、この繰り返しにより「Chrono Botanist（時の植物学者）」のコアシステム（機能や遊び方）を固めていきました。
そして、なんとゲームが完成するまで、1文字も自分でコードを書くことなく終わってしまいました。
ゲーム公開方法とサイト構築の指示
ゲーム本体は数日で軽く遊べるレベルにまで到達しました。
構築中はローカル環境と仮想ブラウザでゲームを遊べていましたが、これを実際にウェブ上に公開する方法を知らなくて、とても迷いました。
ゲームの公開方法をGeminiに聞いて、具体的に候補にしたのはこの3つの方法です。
- GitHub Pages
- サブドメイン
- サブディレクトリ
この中で一番有力だったのがGitHub Pagesでの公開でした。無料で簡単に公開できて、バージョン管理もできるから開発者には一般的なものなのだとか。
でも、同時にこんなこともしたかったんです。
KOU自分のサイトでゲームできないか？
KOUなんかできそうだから複数のゲームやツール作ってみたいな。
KOU複数作ったらゲームやツールをジャンルわけしたいな。
KOU作ったゲームの遊び方とか開発過程を記事にして同じサイトに公開したいな。
このような願望をAIに伝えながら、自分の理想に合う方法を探していき、たどり着いたのが独自ドメインで専用のWEBサイトを作る方法です。
WordPressでサイトや記事を作り、ゲームはドメインのWordPressとは別フォルダに追加していく形を選びました。
こうすることで、WordPressが干渉しないので更新してもゲームファイルに影響が出るリスクが無いようです。
1.既存サイトとの融合は失敗しました
実際にこの方法を試すときに、「ゲームジャンルで分ける」ことを考えてしまったため、余計な課題が出てきました。
普通にドメイン直下にゲームフォルダをアップロードすれば問題にならなかったのが、/games/simulation/のように階層を作ったために、中間になるページが空っぽの状態に（笑）
パンくずリストを付けたために導線が存在し、移動できるけど404エラーが表示されました。
最初は、WordPressサイトのデザインをそのまま使うことや、リダイレクトで何とかすることも考えましたが、どうせならとゲームポータルページを生成することにしました。
KOUhttps://app.cs-d.jp/games/ に、WordPressサイトとデザインが統一された一覧ページを作成してください。
しかし、これで出来上がったのはレイアウトが崩れたページでした。
AIWordPressのCSSを直接リンクしましたが、レイアウトが大幅に崩れています。独立したページとして適切に機能していません。
さすがに指示がダイレクト過ぎたのか、「TOPページを基にして同じ仕様を作れ」は流石に無理でした（笑）
ここで私は方針を転換します。
KOU一般的なゲームサイトのような、見やすく崩れにくいレイアウトで作り直してください。
AIWordPressのスタイルに依存せず、カスタムのHTMLとCSSで独立したゲームポータルレイアウトを構築します。カード形式のグリッドレイアウトを採用し、レスポンシブでモダンなデザインにします。
これで無事に解決し、ページの構築が完了しました。
2.せっかくなので自動化してみた
シンプルですが、ポータル的に使えそうなページができました。しかし、この先程の指示でできあがったページは静的なサイトですので、ゲームのジャンルやゲームが追加されるごとに毎回ページを制作する必要があります。
そこで、WordPressのようにテンプレート化して自動運用ができないかと考えました。
KOUWordPressで作成するように、サーバー内にあるgamesフォルダ内に新たなゲームフォルダを追加しても同じ一覧ページのデザインが表示されるようにレイアウトやデザインをテンプレート化できませんか？
AIサーバーのファイルマネージャーでの操作を即座に反映させるため、静的なHTMLではなく、PHPを使って動的にページを生成する方法に変更します。これにより、サーバー上にフォルダを追加するだけで、自動的に一覧ページに表示されるようになります。
こうして、メンテナンスフリーな「自動更新型ゲームポータルページ」が誕生しました。
完成したページがこちらです。シンプルですし本サイトと全く同じにはしていませんが十分使える範囲ですね。
3.GTMのタグ設置とSEO対策
各ページがテンプレート化したので計測用タグも設置できないかと考えました。
WordPressとゲーム用ではフォルダが違うので、それぞれにタグを設置しなければなりません。複数のタグを毎回入れるのは面倒なので、GTMのタグを両方入れてGA4とSearchconsoleを稼働させることにしました。
KOUGA4やサーチコンソールで解析するために共通したタグを全てのページに埋め込む必要もあります。このレイアウト内に下記指示の通り、Googleタグマネージャーの設置タグを埋め込んでください。
さらに、簡単なSEO対策のための設定についても指示を出しました。
KOU公開したページそれぞれでdescription、canonical、title、keywordタグを自動で追加できるようにしてください。タイトルタグは、『ページ名 | サイト名』になるようにしてください。
AIゲームプレイ画面のGTMタグを修正し、全ページにSEOタグ（タイトル、description、keywords、canonical）を追加しました。 また、今後の運用のために、新しいゲームを追加する際のSEOタグの記述方法をまとめたガイドも更新しました。 再度ファイルをサーバーにアップロードしてご確認ください。
AIはこれに応え、PHPスクリプトを修正し、各ゲームフォルダから情報を読み取って自動的にSEOタグを出力する機能を実装しました。
不具合によるホワイトアウトの恐怖と代替案
AIで生成したファイルをサーバーにアップしていくのですが、時々致命的な不具合が発生します。
誰も見ていないサイトなので公開しながら作業を進めていたのですが、GTMタグ等を追加したゲームファイルをアップロードしたところ、ゲーム画面が真っ白になってしまいました。
でも、AIさんは自分で問題の原因を発見して修正してくれるところがすごいんです。
KOU今回の更新をアップロードしたところ、ゲーム画面だけホワイトアウトしてしまいました。エラーを特定し修正してください。
AI大変申し訳ありません。ゲーム画面がホワイトアウトしたのは、私が作成した『タグ設置用のサンプルファイル（中身が空のファイル）』で、サーバー上の『実際のゲームファイル』を上書きしてしまったことが原因です。
AIは即座に原因を特定し、復旧手順を提示しました。
AIまず、元のゲームの index.html を再度サーバーにアップロードして復旧させてください。次に、そのファイルを上書きせず、サーバーの編集機能を使って、必要なタグだけを追記してください。
この失敗は、「本番環境へのデプロイ（公開作業）は慎重に」という、開発者としての重要な教訓を私に教えてくれました。更新前にバックアップを取っているのですぐに戻せました。
AIが開発担当者に置き換わる可能性はあるのか
今回のゲーム制作企画では、アイデア出し、ゲーム構築、サイト作り、修正、ほとんどのプロセスにおいて私がコードを書くことはありませんでした。
私がしたことは、「どんな体験をユーザーに届けたいかという情熱（バイブス）を、AIというパートナーに語り続けたこと」だけです。私自身、これまで手が届かなかった職域に触れられて、しかも自然な会話だけでものづくりができる面白さを体験はとても有意義でした。
AIで置き換えられる仕事もあるとは思いますが、そう単純なものでもないように感じます。
例えば、AIから具体的な回答を引き出せるように、指示の伝え方を工夫する必要はあるように感じています。また、指示通りに実行できているか確認する作業は欠かせません。
「構想を伝え、ゲームを体験してレビューを伝え、機能をリクエストする」一連の流れがありましたが、利用するのが人間だからこそ、どの部分においても人間らしいレビューとリクエストが必要なのだと思います。あくまで、現時点で私が知る範囲の感想です。
解析等も同じで、解析してレポートを出し、施策を提案することはできますが、実行に向けた調整は現状の企業では人間同士が行う必要性を外すことはできないのではないでしょうか。その調整も自動で行ってくれるのであればとっても嬉しいんですけどね。担当者と上司の両方ともAIに置き換えられると実現する気がします。
私にとって「Chrono Botanist」は、「作りたいという想いさえあれば誰でも形にできる」という可能性を体現したアイテムです。
よかったら遊んでみてくださいね。
