「AIって色々できるみたいだけど、実際のビジネスや開発現場でどこまで使えるの?」
そんな疑問を持っているビジネスパーソンやクリエイターの方は多いのではないでしょうか。
今回は、Webディレクターである私が、GoogleのAI「Gemini」を相棒にして、今話題の「バイブコーディング(AIと対話しながら直感的に開発を進める手法)」に挑戦!ブラウザ上で動く本格的な「3Dゲーム」をゼロから作ってみました。
結論から言うと、AIのサポートがあれば、専門的な3Dプログラミングの経験がなくてもゲームは作れます。 しかし、その過程では「AI時代だからこそ必要な人間のスキル」も浮き彫りになりました。
本記事では、実際の開発プロセスや、私がつまずいたポイント、そしてAIとうまく協働するためのコツをお届けします。
🎮 ブラウザで手軽に3D空間を作れる「Three.js」
今回、ゲームの描画エンジンとして採用したのは「Three.js(スリージェイエス)」というJavaScriptのライブラリです。
通常、3Dゲームを作るには専用の重いソフトが必要だと思われがちですが、Three.jsを使えば、みなさんが普段使っているGoogle ChromeやSafariなどの「Webブラウザ」上で、リッチな3Dグラフィックをサクサク動かすことができます。
特別なアプリのインストールをユーザーに要求しないため、Webプロモーションやブラウザゲームとの相性が抜群の技術です。
今回はGeminiに「Three.jsを使って、キャラクターが野原を駆け回り、ネズミから逃げながら木の実を集めるゲームを作りたい」とテキストで指示(プロンプト)を出し、コードを生成してもらいました。
🛠️ 開発環境の構築:モダンなツール「Vite」を活用
AIがどれだけ優秀でも、そのコードを動かす「土台(開発環境)」は自分のPCに用意する必要があります。Geminiの提案で、今回は「Vite(ヴィート)」という最新の開発ツールを使用しました。
Viteを使うと、コードを書き換えた瞬間にブラウザの画面が自動で更新される(ホットリロード)ため、AIが書いたコードをコピペして結果をすぐ確認する「バイブコーディング」と非常に相性が良いのです。
しかし、この「環境構築」こそが、最初の大きな壁でした。
🚧 開発のリアル:私が躓いた3つのポイントと解決法
AIがコードをサクッと書いてくれる一方で、私が直面したエラーのほとんどは「環境」や「ツール」に関するものでした。
最初の絶望:「’npm’ は認識されていません」
Viteを使うためのコマンドを打った瞬間、真っ赤なエラーが。原因は初歩的なもので、私のPCにNode.js(JavaScriptをPC上で動かすためのシステム)がインストールされていなかったことでした。
Geminiにエラーメッセージをそのまま伝えると、「Node.jsが入っていないか、インストール後にコマンドプロンプトを再起動していないのが原因です」と即座に回答があり、無事解決しました。
謎の英語の質問攻め
Viteのインストール中、黒い画面(ターミナル)に突如 Use Vite 8 beta (Experimental)? や Install with npm and start now? といった英語の質問が表示され、進行がストップ。
これも画面のスクリーンショットをGeminiに投げたところ、「ベータ版は不安定なのでNoを」「今回は手動でThree.jsを入れたいのでNoを」と、なぜその選択をすべきかという理由付きで導いてくれました。
ローカルでは動くのに、サーバーに上げると画面が真っ白
ゲームが完成し、意気揚々とレンタルサーバーにアップロードしたところ、デザインもプログラムも読み込まれない大惨事に。
VS Codeのフォルダ構成の画像をGeminiに見せると、一発で原因を特定。ビルド時の「ファイルパス(絶対パスと相対パスの違い)」が原因でした。Geminiが提示してくれた設定ファイル(vite.config.js)を1つ追加するだけで、無事に全世界へ公開できました。
💡 Gemini直伝!AIを「優秀なエンジニア」にするためのコ
今回、Geminiと一緒に開発をしてわかった「AIから的確な解決策を引き出すコツ」があります。AI(Gemini)曰く、以下の情報があるとサポートの精度が劇的に上がるそうです。
- エラーメッセージは「そのまま」コピペする:要約せず、出力されたテキストを丸ごと貼るのが一番のヒントになります。
- 画面のスクリーンショットを添付する:言葉で説明するのが難しいターミナルの状態や、フォルダのツリー構造などは、画像で見せるのが最適です。
- 「最終的に何をしたいか」を伝える:「このエラーを直して」だけでなく、「サーバーにアップして公開したいのに、このエラーが出る」と目的を共有すると、先回りした提案(今回で言えば相対パスへの変更)が可能になります。
🧠 AI時代でも「裏側の仕組みを知る知識」が必要な理由
今回実感したのは、「コードを書く作業はAIに任せられても、システムを構築・運用する基礎知識は人間側に必要である」という事実です。
「バイブコーディング」は魔法のようですが、開発環境の構築(Node.jsやViteの役割)、サーバーへのデプロイ、パスの概念といった「バックエンドやインフラの仕組み」を理解していないと、ちょっとしたエラーで完全に立ち往生してしまいます。
今後、指示を出すだけで裏側の環境構築やサーバーアップロードまで全自動で行ってくれる「AIエージェント」が台頭してくるでしょう。しかし、ビジネスや商用サービスにおいて、一つ間違えればシステム全体が崩壊するかもしれないインフラ部分を、中身がブラックボックスのままAIに完全丸投げするのは非常にハイリスクです。
AIが手足となって動いてくれるからこそ、私たち人間は「システム全体がどういう仕組みで動いているのか」という俯瞰的な知識を持ち、AIの作業を監督・コントロールするディレクション能力が求められます。
AIを活用してアイデアを素早く形にするためにも、技術の「仕組み」を知る好奇心を持ち続けることが、これからの時代を生き抜く強力な武器になるはずです。

