Xで見たツールに感化され、Claude Codeで"画像→3D変換ツール"を2時間で爆誕！本家と比べてみた結果

こんにちは！YaroTechです。

昨日のDay278で「Claude Maxプラン月$100払ってるのに、Chatしか使ってない」と告白しました。

そして翌日の今日、さっそくClaude Codeを本気で使ってみました。

きっかけはXで見た `3dsvg.design` というツール。SVGファイルをドラッグするとリアルタイムで3Dモデルに変換してくれる、めちゃくちゃカッコいいWebアプリです。

「これPNGも対応してたらキャラクターイラストも3D化できるのに……」

そう思った瞬間、Claude Codeが「作ればいいじゃん」とささやいた気がしました。

……作りました。2時間で。

今日は、Claude Codeで自作した「Vibe 3D」（2D画像→3Dオブジェクト変換ツール）の開発ストーリーと、本家3dsvg.designとの比較結果をお届けします。

※見出し画像のプロンプトは一番下におまけで公開中！

🖥️ 実行環境

• ハードウェア: ThinkPad X1 Carbon（Intel Core Ultra 7 258V / RAM 32GB / Arc GPU / Windows 11 Home 25H2）

• 開発AI: Claude Code（Opus 4.6）

• フロントエンド: React + Vite + React Three Fiber + Three.js

• バックエンド: FastAPI + Anthropic API

• 開発時間: 約2時間（Phase 1〜3）

🎯 この記事で得られること

• Claude Codeで"Xで見たツールの自分版"を2時間で作る手順

• 2D→3D変換の2つのアプローチ（押し出し型 vs ボクセル化型）の違い

• PNG画像を多色保持したまま3D化する方法

• ツール同士の「競合」と「補完」の見分け方

🔥 きっかけ：3dsvg.designとの出会い

事の発端は昨日の夜、Xのタイムラインで流れてきた `3dsvg.design` というサービスでした。

SVGファイルをドラッグ＆ドロップすると、リアルタイムで3Dモデルに変換してくれる、いわゆる「押し出し型（extrude）」の3D化ツールです。

試しに「YaroTech」というテキストをSVGで作って投入してみたら、綺麗に押し出された3Dテキストが生成されて感動。

でも、ふと思いました。

「PNGには対応してないのか……」

自分はブログの見出し画像をAIでPNG生成することが多い。キャラクターイラストや多色のロゴPNGもそのまま3D化したい。でもSVGに変換するには輪郭抽出（Potrace）が必要で、しかも多色情報は失われる。

「じゃあ、自分で作るか。」

……という思考が、Claude Codeを本気で使う初めての瞬間になりました。

🚀 Claude Codeで開発開始（Phase 1〜3）

Claude Code（Opus 4.6）に、ざっくりと要件を伝えました。

Phase 1〜3で段階的に進みました。

Phase 1：画像ドロップ → ボクセル化（128px解像度）→ Three.jsで立方体群として描画

Phase 2：マテリアル切替（Default / Plastic / Metal / Glass / Chrome / Gold / Clay / Toon の8種）、アニメーション切替（Spin / Float / Pulse / SpinFloat / 静止 の5種）

Phase 3：エクスポート機能（PNG / GLB / WebM）、生成履歴（localStorage）、表示モード切替（Solid / Wire / Points）

実装の核はInstancedMeshによるボクセル描画最適化。1万個以上の立方体を60fpsで動かすために必須でした。

Claude Codeは指示を書くだけで、ディレクトリ構造からコードまで全部走らせて、動作確認まで勝手にやってくれました。自分がやったのは、UI微調整とマテリアル追加のリクエストくらい。

🎨 Vibe 3Dの主な機能

完成した自作ツール「Vibe 3D」（localhost:5173）の機能まとめ：

• PNGドラッグ＆ドロップ → ボクセル3D化（解像度128px）

• マテリアル8種：Default / Plastic / Metal / Glass / Chrome / Gold / Clay / Toon

• アニメーション5種：Spin / Float / Pulse / SpinFloat / 静止

• 表示モード：Solid / Wire / Points

• エクスポート：PNG / GLB / WebM

• 生成履歴：localStorage保存

作業時間は、Phase 1〜3の全部合わせて約2時間です。

🔬 本家と比べてみた：YaoyorozTechロゴで3本勝負

せっかくなので、ブログのブランドロゴ「YaoyorozTech」を両ツールに投入して比較してみました。

① 自作Vibe 3Dに元PNGを投入

赤丸・∞マーク・テキスト色がぜんぶ保持された状態で3D化されました。解像度128pxなのでエッジはボクセル特有のギザギザ感があるけど、多色PNG→多色3D という芸当は本家ではできない部分。

② 本家3dsvg.designにSVG（シンボルonly）を投入

ブランドロゴを Potrace でシンボル部分だけSVG化して投入したら、まさかのMetaロゴ化。白地に浮かぶ∞マークだけが押し出されて、Facebook/Metaのあのロゴにしか見えない結果に……w

これは予想外でしたが、「押し出し型は単色シルエットを綺麗に立体化する」という仕様がハッキリわかる結果でもありました。

③ 本家3dsvg.designにSVG（フル版）を投入

シンボル全体＋テキストを含むフル版SVGを投入すると、綺麗な円柱＋3D看板文字が生成されました。こっちはブランド素材として実用レベル。

🐱 Vibe 3Dの真骨頂：猫キャラで試す

Vibe 3Dの得意領域を検証するため、Nanobananaで生成した猫キャラPNGで試しました。

結果、オレンジの縞・白いお腹・ピンクの肉球・鼻の赤が全部保持されたまま3D化。しかもキャラ上部の「わーい！」という日本語手書き文字までボクセル化されました。これは本家のSVG方式では絶対にできません。

Glassマテリアルに切り替えると、同じモデルが幻想的な半透明の猫に変身。マテリアル切替の威力が一撃で伝わる結果に。

ちなみに本家3dsvg.designに同じ猫PNGを放り込んでみたら……

「SVGファイルしか取り込めません」

でした。これで完全に棲み分けが証明されました。

🔗 補完関係の発見：3dsvg.design vs Vibe 3D

比較結果を表にまとめると：

$$
\begin{array}{|l|l|l|} \hline
\text{項目} & \text{Vibe 3D（自作）} & \text{3dsvg.design（本家）} \\ \hline
\text{入力} & \text{PNG（色込み）} & \text{SVG（シルエット）} \\ \hline
\text{処理} & \text{ピクセル解析→ボクセル化} & \text{パス押し出し} \\ \hline
\text{結果} & \text{多色メダル/コイン風} & \text{単色看板/サイン風} \\ \hline
\text{エッジ} & \text{ボクセルギザギザ} & \text{ベクターなめらか} \\ \hline
\text{得意} & \text{写真・キャラ・多色} & \text{ロゴ・記号・単色} \\ \hline
\text{用途} & \text{キャラ3D化、イラストの立体化} & \text{ブランド看板、サイン素材} \\ \hline
\end{array}
$$

最初は「本家の下位互換になるだろうな」と思っていたけど、触ってみたら完全に補完関係だったことに気づきました。

• 写真やイラストの多色情報を保持したい → Vibe 3D

• ロゴやシンボルをクッキリした3D看板にしたい → 3dsvg.design

同じ「2D→3D変換」でもアプローチが違えば結果が全然違う。"劣化版"と思ってたものが、実は隙間を埋めるツールだった、というのが今回の一番の発見です。

🔗 関連記事

• Day278: 月1万5千円払ってるのに、Claudeの1/3しか使ってなかった話

• Day275: 有料サブスクに頼らず、Claude Codeで『自前版』MoneyForward AI Coworkを作ってみた

• Day224: World Labsで画像1枚から3D空間を生成してみた

📝 まとめ

• Xで見たツールに感化→Claude Codeで自作→2時間で動くWebアプリが完成

• 本家3dsvg.designはSVG押し出し型、自作Vibe 3DはPNGボクセル化型

• 競合ではなく補完関係だった（用途で使い分け）

• 昨日「Chatしか使ってない」と告白→翌日には第2弾のClaude Code自作を実現

Claude Codeを本気で使うと、"欲しいツールを自分で作れる時代" がマジで到来してるなと実感した1日でした。

Day275のMF AI Cowork自前版に続き、これでClaude Code自作第2弾。「月$100の1/3しか使ってない」状態から、着実に活用範囲が広がってきました。

🎨 おまけ：見出し画像作成プロンプト

今日の見出し画像のベースはジミー（Gemini）に下記プロンプトで作成。

詳細なアニメの美意識の画像を作成〜表情豊かな瞳、なめらかな網掛けセルの色使い〜下記条件のnote見出し画像をサイズは横長で作成

1. 背景：深い紺色からインディゴへのグラデーション、粒子状の光エフェクト
2. 左側：PNG画像ファイルのアイコン（猫イラストっぽい2Dイメージ）が浮かんでいる
3. 中央：矢印（→）と「2時間で爆誕」の赤いテキスト
4. 右側：ボクセル化された3D猫キャラ（オレンジ縞、多色、立体的、ギザギザのエッジ）
5. 上部中央：「Xで見たツールに感化されて」のサブタイトル（白文字）
6. 下部中央：「画像→3D変換ツール『Vibe 3D』」のメインタイトル（白文字、赤縁）
7. 下部中央寄りに「YaroTech」のロゴを12ptで控えめに配置
8. 全体のバランスを確認して完成

#YaroTech #ClaudeCode #生成AI #2D3D #Vibe3D #ReactThreeFiber #FastAPI #AIで自作ツール #毎日投稿 #継続は力なり