2026.09.28AI WEB構築

「Claude Codeで3Dサイトが作れる」は本当？話題のサイトの作り方を制作会社が分解してみた

AUTHORCreavePlus 合同会社

この記事の目次

SNSで「Claude Codeで3Dサイトを作った」という投稿を見かけることが増えました。スクロールすると立体が回ったり、光の粒が舞ったり。

自分にもできそうだと思って試してみたら思っていたものとまるで違う画面が出てきた。そんな経験はありませんか。

先に結論を書くと、話題になるような3DサイトをClaude Codeへの1回の指示で作るのは無理です。

ただ、Claude Codeで3Dサイトが作れないわけでもありません。

この記事では、海外で話題になった3Dサイトが実際にどう作られているかを制作者自身が公開している情報をもとに分解します。

そのうえで、Claude Codeに任せられるところと任せきれないところを制作会社の目線で分けてみます。

SNSで話題になる3Dサイトは、こんなサイト

まずは実物を開いてみてください。どれも、Webデザインの国際的な賞「Awwwards」で評価されたサイトです。

Igloo Inc：2024年の Site of the Year。制作はスタジオの abeto。氷をモチーフにした立体の中を、スクロールで進んでいきます
Lando Norris：2025年の Site of the Year。F1ドライバーの公式サイトで、制作は OFF+BRAND
Messenger：2025年の Developer Site of the Year（技術面の年間賞）。Igloo Incと同じ abeto の作品で、小さな惑星の上を歩き回る、ゲームに近いサイトです
Oryzo：制作は Lusion。ただのコルクのコースターを、最新のAI製品のように大げさに紹介するパロディサイト。本物の製品ではありません

どれも動画を流しているのではなく、ブラウザの中で3Dがその場で動いています。そして、どれも「コードが書ければ作れる」ものではありません。

Oryzoはこう作られていた

一番わかりやすいのが Oryzo です。制作した Lusion が、制作の裏側を全7回の連載で公開しています。

題材はコースター1枚で、形はとても単純です。それでも、次のような手間がかかっています。

1年がかりの社内プロジェクト
3Dの場面は Houdini で組み、Redshift で描く。 どちらも映画やCMの映像づくりで使われるソフトです
Webに載せるときは Gaussian Splatting に変換する。 立体を無数の小さな点の集まりで表す技術で、きれいな見た目を保ったまま、ブラウザで扱える形にしています
手の3D素材は、専門のショップで買ったスキャンデータを加工。 指が動くように骨組みも入れています
コルクの質感は、実物のコルク材を約180枚撮影して3D化

面白いのは、隠し要素のキャラクターにAIの3D生成ツールを使っていることです。AIで作った形を、人がZBrushというソフトで整えています。

トップのスタジオもAIを使っています。ただし使っているのは工程の一部で、残りは人の手と専門の道具です。

3Dサイトができるまでの5つの工程

Oryzoに限らず、こうしたサイトは大きく5つの工程で作られます。それぞれClaude Codeにどこまで任せられるかを、私たちの見立てで付けてみました。

演出を決める（何を、どの順番で、どう見せるか）：△ 相談相手にはなる。決めるのは人
素材を作る（商品や空間の3Dモデル、質感、光）：△ そもそもコードの道具ではない
表示する（ブラウザに3Dの場面、カメラ、光を組み立てる）：◎ 一番得意
操作と連動させる（スクロールやドラッグに合わせて動かす）：○ 書くのは速い。気持ちよさの調整は人の目
軽くして仕上げる（素材の圧縮、スマホ対応、読み込みの工夫）：○ 手順は書ける。実機での確認は人

Claude Codeが得意なのは、真ん中の「表示する」です。Three.jsを使って立体、カメラ、光を組み立てるコードなら、1回の依頼でかなりのところまで書いてくれます。

逆に、話題のサイトとの差が一番出るのは「素材」と「演出」です。Oryzoが1年かけたのも、ほとんどがこの2つでした。

SNSの「Claude Codeで作れた」の正体

では、SNSで見る「Claude Codeで作った3Dサイト」は嘘なのか。そうではありません。本当に作っています。ただ、作っているものが話題のサイトとは違います。

3Dの素材を使っていないことが多い

公開されている作例を見ると、立体をすべてコードで組み立てているものがよくあります。球や板、光の粒など、コードで作れる形だけで画面を構成する方法です。

これなら素材の工程を飛ばせるので、Claude Codeだけで完結します。そのかわり商品や人物のような「具体的な物」は出てきません。

15秒の動画だととても映える

浮かぶ図形や光る粒子は、画面を録画してBGMを付けるだけで見栄えがします。スマホで開いたときの重さや、文字の読みやすさは動画には映りません。

「数分で作れた」は最初の1枚目

最初の画面が出るまでは本当に早いです。ただ、動きの速さや間の取り方を詰めていく時間は投稿には出てきません。

頼んでいる人が詳しい

英語圏の解説記事でも「高級感のある感じで」のような曖昧な頼み方では、一番無難なコードしか返ってこないと書かれています。

うまくいっている人は使う技術や動きを仕様書のように細かく指定しています。

それでもClaude Codeで届く範囲はある

ここまで読むと「やっぱり無理か」と思うかもしれません。でも、プロの現場でもClaude Codeはもう使われています。

ポートフォリオサイト Goodgrowth の制作者は、Codropsに寄せた制作解説の中で、Claude Codeを取り入れたことで頭の中のイメージを形にしやすくなったと書いています。

使っている技術は Three.js、GSAP、Lenis、Vite などです。

ただし3Dの素材は、Cinema 4D で自分で作っています。入口で回るディスクも3Dではなく CSS の回転で済ませています。

全部を3Dにしていないし、全部をClaude Codeに任せてもいない。プロの使い方はこういう組み合わせです。

Claude Codeで3D表現のコストが下がった話は、Claude × WebGL。3Dサイトが「現実的なコスト」になった話にも書いています。

頼むときは「見た目」より「操作」と「確かめ方」を渡す

Claude Codeに頼むときは、「すごい3Dサイトを作って」ではなく、何をどう動かして、何を確かめるかを渡すと、ぶれが小さくなります。たとえば、こんな頼み方です。

商品紹介ページの試作を作ってください。表示する立体は、まず円柱1つで構いません。左右のドラッグで回転でき、3つの色をボタンで切り替えられるようにしてください。Three.jsのバージョンを固定し、起動手順を添えてください。スマートフォンで本文をスクロールできること、動きを止められること、3Dを表示できない場合も商品説明が読めることを確認してください。最初に表示と回転を作り、そのあとで色の切り替えを足してください。

最初は円柱で十分です。動きと操作が決まってから、本物の3Dモデルに差し替えます。素材の工程と動きの工程を分けて進めるわけです。