Claude Opus 5.5 × Blender × three.js で、3Dのサービス紹介ページを作ってみた
AIにBlenderを操作させて工場とオフィスの模型を作り、three.jsでスクロールとクリックに反応するサービス紹介ページにしました。やってみて分かった、うまくいったこと・時間がかかること・ブランディングへの可能性をまとめます。
弊社のサービスを「文字ではなく、見て分かる形」で伝えたいと考え、3Dのサービス紹介ページを試作しました。
使ったのは、AIの Claude Opus 5.5、3Dソフトの Blender、Webで3Dを表示する three.js です。Claude には、MCP という仕組みで Blender を直接操作させ、模型づくりから Web ページへの組み込みまでを一緒に進めました。
この記事では、作ったものの紹介と、やってみて分かったことをまとめます。
作ったもの
中小企業の「工場」と「オフィス」を白い模型で表し、スクロールすると次の順に進むページです。
- 困っている現場：FAXの注文を手で打ち直す、手書きの計画、在庫を探し回る人など、課題を人の動きで見せる
- 流れの線：家具を透かして、仕事の流れだけを線で見せる。線が特定の人や場所に集中している＝詰まり
- 変わった現場：ITやデータの仕組みを入れたあとの姿を、同じ場所で見せる
工場では生産管理や稼働の見える化などの IT導入 を、オフィスでは営業・マーケティングの データ活用とAI を題材にしています。全体で26の場面があり、画面の人や部署をクリックすると、その人の肩書・課題・解決策が表示され、カメラがその人に寄ります。
作り方の流れ
| 工程 | 使ったもの | やったこと |
|---|---|---|
| 1. 調査 | Claude（Web検索） | 中小企業白書などで、どんな課題を見せるべきかを確認 |
| 2. 絵コンテ | Claude | 「1件の注文が工場を流れる」物語と、場面の順番を決める |
| 3. 模型 | Claude ＋ Blender（MCP経由） | 工場・倉庫・オフィスの模型を作る |
| 4. 書き出し | Blender | 部品をまとめて軽くし、GLB（Web向けの3D形式）で書き出す |
| 5. Webページ | Claude ＋ three.js | スクロール、流れの線、人の動き、クリックの反応を作る |
うまくいったこと①：AIには「Blenderに作ってもらう」のが近道
最初に分かったのは、Claude に3Dの形をいきなりコードで書かせるより、MCP で Blender を操作させて「まず物を作ってもらう」ほうがずっと進めやすい ということです。
MCP を使うと、Claude が Blender に「この位置にこの大きさの箱を置く」「面取りをする」といった操作を直接送れます。作った結果はその場で Blender の画面に出るので、スクリーンショットを見ながら「通路をふさいでいるので消して」「壁を1枚挟んで」と、会話で直していけます。
特にやりやすかったのが、画像から物理的な物を作る 使い方です。工場設備の写真を渡すと、Claude が形の特徴（扉の位置、操作盤、階段、信号灯など）を読み取り、Blender 上で組み立ててくれます。ロゴや細かい文字は入れず、形だけを再現しています。
また、倉庫で使う重量センサーのマットやハンディ端末は、実在する製品の寸法を調べてから作ってもらいました。「それっぽい箱」ではなく実寸に近い大きさで作ると、模型全体の説得力が上がります。
時間がかかること：Blenderにも限界がある
一方で、しっかりした見た目のモデルを作ろうとすると、かなり時間がかかる ことも分かりました。
- AIが作る形は、基本的に「箱」「円柱」「球」の組み合わせです。機械のような角ばった物は得意ですが、人や曲面の多い物は難しく、今回の人形はカプセル形のままです
- 1つずつ操作を送って確かめる進め方なので、細部を詰めるほど往復が増えます
- 光の当たり方や質感など、「きれいに見せる」仕上げは、最終的に人の目で調整する必要があります
今回は「写真のようなリアルさ」ではなく「建築模型のように、何が起きているかが伝わること」を目標にしました。この割り切りがあったので、試作として形にできたと考えています。本番の品質まで仕上げるなら、モデリングの時間はしっかり見込んでおくべきです。
うまくいったこと②：Blenderのモデルが、そのままWebで使える
Web に載せる工程は、想像よりずっと簡単でした。
Blender で作ったモデルは GLB 形式で書き出せば、three.js でそのまま読み込めます。しかも Blender で付けた部品の名前が Web 側にも残る ので、名前を目印に表示を切り替えられます。
たとえば before_ で始まる部品は「導入前だけ表示」、it_ で始まる部品は「導入後だけ表示」というルールにしておけば、スクロールに合わせて「紙の山が消えて、画面が現れる」といった変化をコード数行で作れます。
軽さの面でも問題ありませんでした。オフィスの模型は約470個の部品でできていましたが、書き出す前に「動かない物は材質ごとに1つにまとめる」処理を入れて48個にし、圧縮後のファイルは約280KBになりました。
役割分担としては、Blender は形を作る、three.js は動きと演出を作る と分けるのがうまくいきました。透ける演出や流れの線、光の粒のような抽象的な表現は、Blender ではなくコード側で描いています。
うまくいったこと③：クリックの挙動も簡単に作れる
Blender で作った物に「クリックしたらどうするか」を付けるのも、比較的簡単でした。
three.js の Raycaster（画面上のクリック位置から、3D空間のどの物に当たったかを調べる仕組み）を使い、当たった部品の名前から表示する内容を引くだけです。
// クリックした位置から、当たった人を調べる
raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObjects(people)[0];
if (hit) {
const person = PERSONA[hit.object.name]; // 名前 → 肩書・課題・解決策
showPanel(person); // 情報パネルを出す
focusCamera(hit.object); // カメラをその人に寄せる
}今回は、工場とオフィスの人と部署すべてに「肩書・課題・解決策・使う仕組み」を持たせ、クリックするとカメラがその人に寄るようにしました。見る人が「うちの会社のあの人の話だ」と、自分ごととして読めるようになります。
ブランディングへの可能性
今回の実験で、「自社が何をしているか」を3Dの模型で見せることは、ブランドの価値を上げる手段になり得る と感じました。
- 文章で「生産管理を導入します」と書くより、紙の山が消えて画面に置き換わる様子を見せるほうが、一瞬で伝わります
- 現場の細かさ（FAXの打ち直し、止まっても気づかない機械、棚を探し回る人）を描くことで、「この会社は現場が分かっている」という信頼につながります
- 模型の作り方と Web への組み込み方が分かったので、弊社のサイトだけでなく、他の会社のサービス紹介、工場や事業所の紹介、採用ページ などにも応用できそうです
まとめ
- AIに3Dを作らせるなら、MCPでBlenderを操作させて、まず物を作ってもらう のが近道。写真から形を作る使い方は特にやりやすい
- ただし Blenderにも限界があり、しっかりした見た目に仕上げるには時間がかかる。目的に合わせて「どこまで作り込むか」を決めておくのが大事
- Blenderのモデルはそのまま three.js で使え、部品の名前を目印に表示の切り替えやクリックの挙動を簡単に付けられる
- 自社の、そしてお客様のブランド価値を上げる手段として、手応えのある実験だった
このページは、今後のサイトリニューアルに向けてさらに作り込んでいく予定です。「自社の現場や業務を、こんなふうに見える形にしたい」というご相談があれば、お気軽にお問い合わせください。
