Claude Codeで3Dサイトを作るときは「本物の3D・描いた光・切り抜き」に分け、目標画像との採点ループで仕上げる

どんな問題を解決するか / いつ使うか

AIで3Dのサイト（部屋や空間を見せるLPなど）を作ると、全部を3Dモデルで作ろうとして重くなったり、見た目が目標から遠かったりする。Meng To が Claude Code と Opus 5.5 で3Dサイトを作る13分の動画で、全体の流れを公開している。

やり方

1. 参考を集める：Mobbin の3D事例を Claude の中から探して集める。
2. 1つのプロンプトにまとめて渡す：参考画像・作る計画・カメラ（視点と動き）を1回で伝える。
3. 表現の手段を分ける：各要素を「本物の3D」「描いた光（ライティングを絵で表現）」「切り抜き画像」のどれで作るか決める。
4. 採点ループ（投稿者の呼び名は dream loop）：AIが作った画面のスクショを自分で撮り、目標画像と比べて点数を付け、ずれている所を直す。点数が上がるまで繰り返す。
5. 仕上げ：家具などの細部を足し、間違いを直し、スマホで速く動くようにする。

注意点

• 投稿は流れの要約と動画で、プロンプト本文は載っていない。各工程の詳しいやり方は動画で確認する。
• 採点は同じ目標画像と基準で行わないと、点数が比べられない。
• 関連：3DのLPは、先にセクションごとの参考画像を画像生成で作らせてから、Three.jsで組ませる、同じ構図の画像・深度マップ・動きの見本動画を1つのフォルダにまとめて渡し、Claude Codeにthree.jsのLPを組ませる、Pristineスキル：実画面を4通り（明暗×PC/スマホ）で撮り、10点満点で採点してから直させる

出典

• @MengTo · 2026-11-04