3d website claude｜Claudeで動く3Dサイトを作る実践手順
「3d website claude」で調べているものの、Claudeの会話だけで立体的なサイトが完成するのか、Claude CodeやThree.jsをどう組み合わせればよいのか迷っていませんか。この記事では、動く3D表現を作る現実的な進め方から、スマホで重くしない設計、公開前の確認までを整理します。
Claude CodeにThree.jsを組み合わせれば、回転する商品表示やスクロール連動の演出を含む3Dサイトを作成できる。Claude Designで見た目を固め、段階的に実装・検証すれば、無理なく公開まで進められるとわかる。
目次 (9)
3d website claudeの検索意図
「3d website claude」は、Claudeを使って立体的で動きのあるウェブサイトを作る方法を知りたい検索です。検索上位には、会話からSketchUp用モデルを作る公式コネクタ、自然言語から3Dシーンを生成するSceneView、Claudeで3Dサイトを作る動画が並びます。
公式の「Trimble SketchUp Connector」は、部屋や家具、サイトのコンセプトを説明するとSketchUpで開いて修正できるモデルを作る仕組みです。出典URL: https://claude.com/connectors/sketchup
ただし、サイト制作で必要なのはモデル単体ではなく、回転、スクロール、説明文、CTAまで含むページです。そこで「3D素材を作る方法」と「ブラウザへ組み込む方法」を分けて整理します。実例は検索上位の動画も参考になります。出典URL: https://www.youtube.com/watch?v=d-9WcoOKOKU
Claude・Claude Code・Claude Designの使い分け
同じClaudeでも役割が違います。目的に合わない画面から始めると、公開用コードへ整理し直す工程が増えます。
- Claude：目的、対象ユーザー、色、構成を整理し、HTML・CSS・JavaScriptの試作を出す入口です。
- Claude Design：レイアウトやブランドの見え方を会話で試し、コメントや直接編集で詰める場所です。公式発表では、3Dを含む試作、単体HTMLへの書き出し、Claude Codeへの引き継ぎが説明されています。出典URL: https://www.anthropic.com/news/claude-design-anthropic-labs
- Claude Code：複数ファイルの編集、コマンド実行、ビルド確認まで進める開発環境です。Three.jsの実装を繰り返すならこちらが中心です。公式ドキュメント: https://code.claude.com/docs/en/overview
迷ったら、ClaudeまたはClaude Designで狙いを固め、Claude Codeで実装します。小さなデモはClaudeのHTML出力から始めても構いません。
作る前に決める3つのこと
3Dサイトは表現を増やすほど制作量と端末負荷が増えます。Claudeに頼む前に、次の3点を一枚のメモにします。
- 目的：商品の360度確認、ブランドの印象づくり、作品展示、データの可視化など、3Dが必要な理由を一つに絞ります。
- 主役：最初の画面で見せるモデルを一つ決め、背景、光、カメラの動き、CTAの位置を言葉にします。
- 制約：スマホ対応、読み込み時間、対応ブラウザ、画像やモデルの権利、キーボード操作の要件を先に書きます。
「高級感のあるサイト」ではなく、「白いスニーカーを中央に置き、スクロールで180度回転、購入ボタンは下部に固定」のように指定します。目的と完了条件が具体的なほど修正回数を減らせます。
Claude Codeで3Dサイトを作る手順
複雑な演出は後回しにし、表示できる最小シーンから段階的に足します。
- プロジェクトを用意する：Viteなどで作り、
npm install threeでThree.jsを追加します。 - 骨格を作る：
index.htmlに見出しとCTAを置き、main.jsでカメラ、ライト、レンダラー、モデルを読み込みます。最初は球で十分です。 - 一つの操作を加える：ドラッグ回転、スクロール連動、ホバー反応から一つ選びます。
- 情報と導線を足す：特徴、価格、ボタン、通常画像を置き、3Dが失敗しても内容が伝わるようにします。
- 実機で検証する：ビルド、スマホ、キーボード操作を確認し、エラーや重さをClaude Codeに渡します。
この順序なら、モデルの読み込みに失敗してもページ全体が止まりません。3Dは目的を達成するための一部として扱います。
最初に渡すプロンプトの書き方
指示文には、見た目だけでなく技術、操作、合格条件まで入れます。
目的: 家具ブランドのトップページで、椅子を360度確認できるようにする
対象: 商品をスマホでも確認したい購入検討者
技術: Vite、Three.js、GLB、HTML、CSS、JavaScript
画面: ヒーロー、商品説明、仕様、CTA、フッター
操作: ドラッグ回転、スクロールで緩やかにズーム、タップで停止
制約: 初期表示では低容量モデルを使い、3D失敗時は静止画を表示する
合格条件: キーボードでもCTAに到達でき、幅375pxで横スクロールが出ない
次の依頼では「ファイル構成を提示してから実装」「一度に一つの機能だけ追加」「変更後にビルドとモバイル表示を確認」と指定します。変更点と検証結果を出させると、崩れの原因を追いやすくなります。
3Dモデルを用意する方法
モデルは自作、既存のGLB・glTF素材、SketchUpなどから選びます。ウェブ用モデルを何でも自動生成するより、素材を用意して配置と演出を任せる方が安定します。
建築や家具の形を会話から起こすなら、公式のSketchUp Connectorが候補です。寸法や素材を指定し、出力をSketchUpで確認してからウェブ用に書き出します。出典URL: https://claude.com/connectors/sketchup
SceneViewの紹介ページでも、自然言語からコードを生成し、回転・ズームできる3D表示を確認する流れが示されています。ただしSDKの例なので、Three.jsへそのまま貼れるとは限りません。出典URL: https://sceneview.github.io/claude-3d.html
素材はファイル容量、ポリゴン数、テクスチャ、ライセンスを確認します。権利が不明なモデルは公開せず、商用利用条件とクレジット表記の要否を記録します。
3Dサイトを軽くするスマホ対策
3Dサイトは、見た目より読み込みと操作でつまずきがちです。端末に合わせて見せる量を段階化します。
- 初期表示は軽い静止画または低解像度モデルにし、ユーザーが必要とした時点で詳細モデルを読み込む。
- テクスチャを必要以上に大きくせず、モデルを圧縮し、使っていないマテリアルやライトを削る。
devicePixelRatioに上限を設け、低性能端末では影、反射、粒子、アニメーションの頻度を下げる。prefers-reduced-motionを尊重し、動きを止めても商品説明とCTAが成立するようにする。- WebGL非対応、通信が遅い、モデルが壊れている場合に、通常画像へ切り替える。
「デスクトップで滑らかに動く」だけでは不十分です。実機でタップ領域、文字、発熱、通信量まで確かめます。
公開前のチェックリスト
最後は見た目と機能を分けて確認します。最終判断は人が行います。
- 内容：3Dがなくても商品名、特徴、価格、CTAが読めるか。
- 操作：マウス、タッチ、キーボードで操作でき、スクロールを奪いすぎないか。
- 速度：HTML、JavaScript、モデル、テクスチャの容量を計測したか。
- 表示：幅375px前後、タブレット、デスクトップで崩れないか。
- アクセシビリティ：見出し順、代替テキスト、フォーカス、コントラストを確認したか。
- 権利と安全：素材の利用条件を確認し、秘密情報を公開ファイルへ入れていないか。
- 公開：本番ビルド、コンソールエラー、404、OGP、問い合わせ導線を確認したか。
3Dは注目を集める手段です。通常のHTMLとして読める本文を先に成立させ、その上に立体表現を重ねる設計が安全です。
