【Vibe Coding】Claude/Geminiと5日間対話して、ブラウザ完結の3Dお絵かきツール「VoxoB」を爆速で作った話
こんにちは、 イケ製作所（Ike mfr） です。
今回は「ブラウザを開いた瞬間に、誰でも複雑なボクセルアートを生成できるツール」を目指し、Claude Opus と Gemini 3.1 Pro をフル活用した 「バイブコーディング（Vibe Coding）」 で、5日間という短期間で Web アプリケーションを開発しました。
制作したのはこちらです。
VoxoB (Voxel Generator & Editor)
上図：池袋サンシャイン水族館の動画を色で深さ指定してボクセル（3D）に出力した結果
※以下、折りたたみには著者の本音を書きたいと思います。
🚀 なぜ作ったのか：ゼロ・フリクションへのこだわり
世の中には MagicaVoxel などの素晴らしいツールがありますが、私が欲しかったのは以下の3点を満たすツールでした。
- インストール不要・ログイン不要（ブラウザを開いた瞬間、1秒で起動する）
- ワンクリック自動生成（アルゴリズムの力で、都市やフラクタルなどの作品を自動生成する）
- ファイル単体で動作（単一の HTML ファイルに全ロジックを凝縮する）
本音
AIに指示を投げていたら偶然できた副産物を、後付けで「こだわり」っぽく書いているだけです。そもそもインストールやログイン機能を実装するのはAIに頼むのすら面倒でした。
また、私自身には絵心がないため、検証用に「勝手に3Dアートを作ってくれる機能」が必要だったという裏事情もあります。ファイル単体で動作するのも、複数のファイルを行き来して管理するのが面倒だったからです。
🛠 技術スタック
「どこでも動く」を最優先したため、あえてビルドツールを通さない Vanilla JS スタイルを採用しました。
- Graphics: Three.js (WebGL)
- Core: Vanilla JavaScript, HTML5, CSS3
- Architecture: Single HTML File（すべての UI とロジックを1ファイルに集約）
本音
正直、技術スタックはAIが勝手に選びました。
ちなみに Three.js はMITライセンスで商用利用は合法かつ無料ですが、ライセンス表示義務があります。この辺りのリーガル面もAIは上手く選定してくれたと思います。もちろん、実際のHTMLの目立たないところにはライセンス表記をこっそり盛り込み済みです。
🧠 「バイブコーディング」5日間の全記録
AIと対話しながら、抽象的な「バイブス（感性）」を具体的なコードに落とし込んでいく開発プロセスです。コードの全容は1ファイル・約1500行に及びますが、実装は驚異的なスピードで進みました。
1日目：コア・エンジンの構築と基本描画
Three.js のセットアップから開始。
「3Dドットお絵かきツールを作りたい」という大まかな指示から、グリッドシステム、レイキャスティング（当たり判定）、そして基本的な描画ツール（ペン、消しゴム）を一気に実装させました。
2日目：プロシージャル生成とアルゴリズム実装
単なるエディタでは面白くないため、Generate（自動生成）機能 を追加。「都市（City）」「フラクタル（Fractal）」「DNA」「地形（Terrain）」などを数理的なアプローチで自動配置するロジックをAIと議論しながら実装しました。また、ペンの拡張として「Line（直線）」「Fill（塗りつぶし）」ツールもこの日に完成。
3日目：アニメーション機能とファイル入出力
ボクセルに動きをつけるフレームアニメーション機能（Anim Generate）を追加し、「Rain（雨）」「Wave（波）」「Spin（回転）」などの動的エフェクトを実装。
さらに、作成したモデルを OBJ, STL, GLB で書き出す3Dエクスポート機能と、WebM, MP4 形式での動画書き出し機能を実装。バイナリ処理の複雑な部分もAIが瞬時に解決しました。また、2D画像から3Dの奥行きを生成する「Depth from Image」も搭載。
4日目：UI/UX のブラッシュアップ
PC・タブレット・スマホのどこでも触れるように、レスポンシブなUIとダークモードを基調としたデザインを構築。X/Y/Z軸のミラーリング機能など、細かいユーザビリティの向上に努めました。
5日目：デバッグ、多言語対応、Vercel デプロイ
日本語・英語の i18n（国際化）対応を完備。メモリリークの解消などの最終デバッグを行い、GitHub 経由で Vercel にデプロイし、全世界に公開しました。
本音のスケジュール（リアルな開発ログ）
上の記録は「プロジェクトの軌跡」としてAIが嘘（ハルシネーション）をついてまとめたものですが、実際のリアルな動きは以下の通りです。ちなみにClaudeとの会話記録はこちら。
１日目： 夜中に急にテンションが上がり「AIでアプリを作ろう」と決意。Claudeに投げた最初のプロンプトはこれだけ。
あなたは優秀なゲームクリエイター・デザイナー・プログラマーです。
JavaScriptで3Dドットお絵かきゲームを作りたい。
ただし、3Dモデルで出力できる機能を追加すること。
お絵かきが面倒な人のために補助ツール（ランダム生成・テンプレ・塗りつぶし）などを充実させること
お絵かきしやすいUIにせよ
マジでプロンプト凝ってない。日本語もぶきっちょ。しかし、出力されたコードは一流。少し眠くなったので2往復ぐらいやり取りして終了。ちなみに2回目のやり取りで「2D断面でお絵描きできるようにせよ」と無茶振りし、早くも2D/3Dの二画面構成が完成した。
２日目： 思いついた機能をひたすら投げまくる。
「アニメーション機能（４次元軸）を追加せよ」「URLパラメータでの共有機能」「画像や動画を取り込んで色を基に3Dの奥行き（3D depth）を持たせよ」「操作音を追加せよ」「描画モードと削除モードを切り替えられるようにせよ」など、コアアーキテクチャを何度も破壊する要求を連発。さらに「メモリに対する注意表示を出せ」などの最適化も丸投げした。
３日目： さらなる機能追加と、クレーマー並みのダメ出しの嵐。
「楕円ツールを追加せよ」「既存のボクセルの色だけ変える着色モードを作れ」「OBJインポート時にMTLファイルも参照して色付けせよ」「ジェネレートに青海波や六方最密構造など幾何学を10個以上追加せよ」「動画エクスポート時にプログレスバーを出せ」と怒涛の要求。
しまいには、「1回目のクリックで薄くプレビューを表示し、2回目で確定せよ （この機能は何回も指示を出しているためいい加減取り組め）」とAI相手にガチギレし始める。それでもAIは文句一つ言わずに、完璧な「3Dゴーストプレビュー機能」を実装してくれた。
４日目： 諸事情でお休み。作業してないです。
５日目： 「すべて追加、修正せよ」と超特大のプロンプトを投げた直後、限界まで酷使した結果ついにエラー（『Claudeの応答を完全に生成できませんでした』）を吐き、使用制限に到達してClaudeが息絶える。
そこでGemini 3.1 Proに切り替えてデバッグと総仕上げ。
個人的な所感としては、「Claudeで大まかな構想とベースを作り、Geminiで仕上げる」というフローがかなり効率良かったです。Geminiには、名前の商標チェック、競合調査、Vercelへの無料デプロイ手順、投げ銭（Buy Me a Coffee）の構築まで至れり尽くせりで手伝ってもらいました。ちなみにこのブログの「建前」部分もAIが書いてます。
✨ 注目機能：ワンクリックで「生成」する快感
VoxoB は、ただの「手描きエディタ」ではありません。Generate ボタンを押すと、アルゴリズムがボクセルを自動的に配置します。
上図：ジェネレートの「🌊波」とアニメジェネレートの「🌊波動」で生み出したgifのエクスポート結果(URL)
「1ピクセルずつ置くのは面倒だけど、数理的に美しい形を作りたい」
そんなクリエイターのワガママを、複雑なアルゴリズムの実装なしで体験できるよう設計しました。
💡 AI との共創（Vibe Coding）で得た知見
今回の開発を通じて、AI は単なる「コード生成機」ではなく、 「実装のハードルを下げ、アイデアの試行回数を爆発させるパートナー」 だと確信しました。
「こういう挙動にしたい」という曖昧なイメージ（バイブス）を伝えると、AI が最適なアルゴリズムを提案し、私はその「手触り」を確認しながら次の指示を出す。このループが、5日間での完成を実現させました。
本音
このブログを生成したAI自身が、自分のことを「パートナー」と自称していることには正直ちょっと笑ってしまいますが……私の拙い日本語プロンプトからここまで形にしてくれたのを見ると、優秀な相棒だと認めざるを得ません。
🔗 今後の展望
VoxoB は、これからも「イケ製作所」の実験場として、新しい自動生成アルゴリズムや AI 連携機能を実装していく予定です。
もし気に入っていただけたら、Buy Me a Coffee でコーヒーを一杯奢っていただけると、次のアルゴリズム開発の燃料になります！
Happy Voxel Coding!
あとがき
この記事が良いなと思ったら、ぜひ LGTM や GitHub の Star をお願いします！
「こういう生成アルゴリズムを追加してほしい」などのリクエストもお待ちしています。