AIで3Dウェブサイトを作る方法:完全ガイド(2026年版)

AIで3Dウェブサイトはどうやって作るのか?

短い答え:欲しい3D体験を普通の言葉で説明します — 「カーソルに反応して浮遊するクロームのトーラスがあるヒーローセクション、ダークな背景、柔らかいスタジオ照明」— すると、AIコードジェネレーターがそれを動作するThree.js / React Three Fiberのシーンに変換します。プレビューし、追加のプロンプトで磨き、デプロイできます。VULK(私たちのプロダクト — 開示は下記)では、このループがプロンプト → 生成されたR3Fコード → Firecracker microVMでのライブプレビュー → Cloudflareへのワンクリックデプロイと流れます。3Dモデリングソフトも、WebGLのボイラープレートも、ビルド設定も不要です。

これはもうニッチなワークフローではありません。VULKで生成された11,355のアプリのうち、ゲームと3D体験は全プロジェクトの5.4% — ビジネスWebアプリに次ぐ第2の規模のカテゴリです(VULKプラットフォームデータ、2026年7月)。このガイドの残りはすべてをカバーします:3D Webが離陸した理由、Three.js vs React Three Fiber、プロンプトからシーンまでの完全なパイプライン(ヒーロー、スクロール駆動シーン、GLSLシェーダー、ポストプロセッシング)、コピペで使える8つの完全なプロンプト、ビジュアルエディタ系ツール(Spline、Womp、Vectary、Unicorn Studio)との正直な比較、パフォーマンス最適化、デプロイ。開示:VULKは私たちのプロダクトです — ビジュアルエディタの方が良い選択である場面では、そう言います。2026年7月17日更新。

比較表:AIコード生成 vs ビジュアル3Dエディタ

どんな機能リストよりも、この構造的な分岐が重要です:ビジュアルエディタは埋め込みを生み、AI生成はコードを生みます。埋め込みはiframeやプロプライエタリなビューアーランタイムの中に生きています — アプリのstate、ルーター、データベースには配線できません。生成されたコードはただのReactコンポーネントです:カートの合計が3Dシーンを動かし、スクロール位置がカメラを動かし、永遠に編集し続けられます。デザイナーがコードに触れずピクセル単位のアートディレクションを必要とする場面では、ビジュアルエディタが勝ちます。

なぜ2026年、3Dウェブサイトはどこにでもあるのか?

3つの力が合流しました。第一にハードウェア:WebGL2は普遍的になり、WebGPUはすべての主要ブラウザに搭載されつつあります。2020年にはゲーミングPCが必要だったシーンを、ミドルレンジのスマホがレンダリングします。第二に期待値:受賞歴のあるプロダクトローンチ(Appleの製品ページ、あらゆる自動車コンフィギュレーター、Awwwardsのトップページ)が、ユーザーに奥行きと動きを「プレミアム」として読むよう訓練しました。フラットなサイトはますますテンプレートに見えます。第三に — これが新しい部分ですが — AIがスキルの壁を取り払いました。Three.jsを手で書くには、シーングラフ、行列、UVマッピング、レンダーループ、GPUパフォーマンスバジェットの理解が必要です。シーンを言葉で説明するのに必要なのは、見たいものが何かだけ。この第三の力こそ、ローンチから数か月で3DがVULKの全プロジェクトの5.4%に跳ね上がった理由です(VULKプラットフォームデータ、2026年7月)。

Three.js vs React Three Fiber:AIは何を生成すべきか?

Three.jsは土台となるWebGLライブラリです — シーン、カメラ、メッシュ、マテリアル、ライト、レンダーループ。**React Three Fiber (R3F)**はThree.jsのReactレンダラーです:すべてのThree.jsオブジェクトが宣言的なJSXコンポーネント(<mesh>、<pointLight>、<Canvas>)になり、周辺のエコシステム(ヘルパーの@react-three/drei、エフェクトの@react-three/postprocessing)が一般的なニーズの大半を数行でカバーします。

VULKは標準的なReact + Vite + TypeScriptプロジェクトの中にReact Three Fiberを生成します。これは意図的な選択です:

• 宣言的コードは編集に耐える。 追加プロンプト(「トーラスをクロームじゃなくガラスにして」)は小さなJSX差分になり、命令的なinit関数への外科手術にはなりません。
• stateとの統合はタダ。 Reactのstate、props、contextが直接シーンを動かします — DOMの料金カードをホバーして、背後の3Dオブジェクトをアニメーションさせられます。
• クリーンアップは自動。 R3Fはコンポーネントのアンマウント時にジオメトリとマテリアルを破棄します。手書きのThree.jsは気をつけないとGPUメモリをリークします。
• エコシステムがイディオマティック。 OrbitControls、Environment、ScrollControls、Text3D、useGLTF — dreiのヘルパーが何百行ものボイラープレートを置き換えます。

React外(バニラサイト、独自ループのゲームエンジン)では素のThree.jsが今も理にかなっています。それがあなたの文脈なら、生成された概念は一対一で移植できます — R3Fは同じオブジェクトの上の薄い宣言的な皮にすぎません。

プロンプトから3Dシーンまでのワークフローはどんな感じか?

VULKでの完全なループを、ステップごとに:

1. シーンを説明する。 クリエイティブデベロッパーにブリーフィングするつもりで書きます:オブジェクト、マテリアル、照明のムード、カメラの挙動、インタラクション。具体性を入れれば品質が出ます — 「浮遊する虹色の球体」は「なんかかっこいい3D」に勝ちます。

2. 生成。 AIがシーングラフ(カメラ、ライト、ジオメトリ、マテリアル、インタラクション)を設計し、プロジェクト全体を書きます:<Canvas>のセットアップ、オブジェクトごとのコンポーネント、ライティングリグ(通常は3点照明かHDRIの<Environment>)、アニメーションフック(useFrame)、レスポンシブ対応(デバイスピクセル比、リサイズ、タッチ)。

3. ライブプレビュー。 プロジェクトはホットリロード付きのFirecracker microVMで起動します — ローカルで動かすのと同じVite開発サーバーが、サーバーサイドで動きます。モックアップではなく、実際のシーンが数秒で見えます。

4. プロンプトで反復。 「回転を半分に遅くして」「ブルームを追加、控えめに」「スクロールに反応させて — ユーザーが最初のビューポートをスクロールするとカメラが寄っていくように」。各フォローアップは影響を受けるファイルだけを編集します。

5. いつでもコードに降りられる。 すべてが読めて編集できるソースコードです — カラー定数を微調整し、イージングカーブを整え、あるいはプロジェクトを開発者に渡す。これが埋め込みツールにはない脱出ハッチです。

6. デプロイ。 ワンクリックでCloudflareのエッジネットワークへ。あるいはZIPエクスポート / GitHubへプッシュしてどこにでもホスティング — 標準的なViteビルドです。

AIは実際どんな3Dシーンを生成できるのか?

今日の3D Webで公開されているもののほぼすべてを4つのファミリーがカバーし、4つともプロンプトで作れます:

3Dヒーロー。 見出しの背後や横に置かれた、印象的な単一オブジェクトやコンポジション — 浮遊するジオメトリ、プロダクトレンダー、プレミアムなマテリアル(ガラス、クローム、玉虫色)の抽象形状。3Dマーケティングサイトの主力です。

スクロール駆動シーン。 ユーザーのスクロールに合わせてカメラやオブジェクトがアニメーション — プロダクトの分解図、ストーリーテリングのシーケンス、セクション遷移。R3FではdreiのScrollControls + useScrollで、スクロールオフセットをカメラ位置やアニメーション進行にマッピングします。

GLSLシェーダーワーク。 マテリアルのプリセットでは得られないエフェクトのためのカスタム頂点/フラグメントシェーダー:流れるグラデーション、ノイズで変位するサーフェス、パーティクルフィールド、ホログラフィックなスイープ。AIはGLSLを書くのが本当に得意です — 「水中でインクがゆっくり流れるようなグラデーション」と説明すると、手書きならシェーダー経験が必要な、シンプレックスノイズと時間ベースのフローを持つフラグメントシェーダーが出てきます。

ポストプロセッシング。 レンダーに重ねるスクリーンスペースのエフェクト:グロー用のブルーム、フォーカス用の被写界深度、レンズ感のための色収差、ムードのためのビネット。@react-three/postprocessingの<EffectComposer>ブロック1つ — 追加は安く、控えめに使えば劇的です。

3Dウェブサイトのための完全なコピペ用プロンプト8選

これらは断片ではなく完全なプロンプトです — どれでもそのままVULKに貼り付けてください(他のジェネレーター用に調整しても構いません)。それぞれがオブジェクト、マテリアル、照明、カメラ、インタラクションを指定しています。それこそが、使えるシーンと出たとこ勝負のシーンを分けるものだからです。

1. 3DヒーローのあるSaaSランディングページ:

Pulseboardという開発者向けアナリティクスSaaSのランディングページを作って。ダークテーマ(背景#0a0a0f)。ヒーローは左に見出し、右にインタラクティブな3Dシーン:微妙な屈折のある3つの浮遊するガラスキューブのクラスターが、それぞれ違う速度でゆっくり回転し、柔らかいティールのポイントライトと白いキーライトで照らされる。キューブはカーソル位置に向かって優しく傾くこと。ヒーローの下:3枚のカードの機能セクション、2プランの料金セクション、フッター。3Dシーンは遅延読み込みし、ビューポート外にスクロールされたらレンダリングを一時停止すること。

2. プロダクトコンフィギュレーター:

メカニカルキーボードの3Dプロダクトコンフィギュレーターを作って。画面中央:角丸ボックスジオメトリで組んだ3Dキーボードモデル(ベース + キーキャップのグリッド)。右サイドバーにオプション:ケース色(グラファイト、シルバー、ネイビー)、キーキャップ色(白、黒、オレンジ)、スイッチタイプ(下の小さなテキスト仕様が変わる)。色を選ぶと3Dモデルのマテリアルが短いトランジションで即座に更新される。OrbitControlsは水平回転とわずかな垂直チルトに制限、5秒間操作がなければオートローテート。キーボードの下に柔らかい影のあるスタジオ照明。選んだ構成をトーストで表示するカート追加ボタン。

3. スクロール駆動のプロダクトストーリー:

スマートウォーターボトルのワンページ・スクロール駆動プロダクトサイトを作って。ボトルはメタリックティールのマテリアルの3Dカプセル形状で、常に中央。セクション1:ボトルが浮遊してゆっくり回転、見出しがフェードイン。セクション2:スクロールするとカメラが寄り、ボトルが傾いてキャップを見せる。「温度センサー」のコールアウトラベル付き。セクション3:ボトルがキャップと本体に分離(分解図)、さらに2つのコールアウトラベル。セクション4:カメラが引き、ボトルが再結合、CTAボタンが出現。スクロールジャックではなく滑らかなスクロール連動アニメーションを使うこと — ユーザーのスクロール位置が直接アニメーション進行を駆動する。

4. GLSLシェーダー背景:

AI音楽スタートアップのランディングページを、ビューポート全面のアニメーションシェーダー背景付きで作って:ダークパープルからディープブルーへのグラデーションが、水中に広がるインクのようなオーガニックなノイズの動きでゆっくり流れる。シンプレックスノイズと時間uniformを持つカスタムGLSLフラグメントシェーダーとして書くこと。白いテキストが読めるよう彩度は60%以下に。見出し、サブ見出し、ウェイトリストのメール入力を中央に重ねる。シェーダーアニメーションはprefers-reduced-motionを尊重し、静的グラデーションにフォールバックすること。

5. インタラクティブな3Dポートフォリオ:

3Dアーティストのポートフォリオサイトを作って。ヒーロー:私の名前を大きな3D押し出しテキスト(Text3D)でブラッシュメタルのマテリアルにし、2つのカラーリムライト(マゼンタとシアン)で照らし、微妙な鏡面反射のあるダークな反射フロアの上に浮かべる。テキストはカーソルを追って数度回転。下:ホバーでチルトする6枚のプロジェクトグリッド、自己紹介セクション、お問い合わせフォーム。ヒーローにだけ控えめなブルームのポストプロセッシングを追加。

6. ブラウザミニゲーム:

ブラウザゲームを作って:プレイヤーが小さな宇宙船を操作し、3レーンのトラックで小惑星の障害物を避けるローポリのエンドレスランナー。矢印キーまたはA/Dでレーン変更、モバイルはスワイプ。小惑星は前方にスポーンし、時間とともに加速しながらカメラに向かってくる。生存時間ベースのスコアカウンター、ハイスコアはlocalStorageに保存、リスタートボタン付きのゲームオーバー画面。フラットシェーディングのマテリアルによるローポリの美学、スターフィールドのパーティクルシステムのあるダークな宇宙背景、柔らかいディレクショナルライト。

7. データ可視化の地球儀:

オフィス所在地を表示するインタラクティブな3D地球儀のあるダッシュボードページを作って。地球儀はダークでスタイライズされた地球テクスチャのスフィアで、微妙な大気のグロー(フレネルシェーダー)付き。実際の緯度経度座標(ロンドン、ニューヨーク、シンガポール、サンパウロ、ベルリン、東京)に小さな光るピンを6つ、緯度経度から3D位置へ正しく変換して配置。ピンをホバーすると都市名と人員数のツールチップ、クリックすると滑らかなアニメーション遷移でカメラがそのピンにフォーカス。ホバーで止まるゆっくりしたオートローテーション。サイドバーに同じオフィスのリスト — リスト項目をクリックすると同じカメラフォーカスが発動。

8. ポストプロセッシング付きプレミアムヒーロー:

高級腕時計ブランドのランディングページを作って。ヒーロー:磨き上げたゴールドのマテリアルの3Dトーラスノットが黒背景の上でゆっくり回転。被写界深度(手前のエッジにフォーカス、奥は柔らかくボケる)、ハイライトへの控えめなブルーム、ゆっくりしたビネット。セリフの見出しと単一のCTA。シーンを生かし続けるため、カメラはほぼ知覚できないほどドリフト(遅い正弦運動)。フォールド以下は標準の2D:3カラムのコレクショングリッドとニュースレター登録。ピクセル比は2に制限し、ヒーローが画面外のときはレンダーループを一時停止。

上のすべてのプロンプトに当てはまる反復のコツを2つ:フォローアップごとに変えるのは1つだけ(「ブルームをもっと控えめに」— 5項目の指示ではなく)、そしてジオメトリだけでなくムードを名指しする(「プレミアム、ダーク、控えめ」は、オブジェクトの説明だけよりも効果的にマテリアルと照明を導きます)。

VULKはSpline、Womp、Unicorn Studioと比べてどうか?

正直に言うと — ユーザーが違えばツールも違い、ビジュアルエディタは自分の領分では極めて優秀です:

Spline(無料 → $12/月・年払い)はデザイナーの標準ビジュアル3Dエディタです:リアルタイム共同編集、マテリアル、アニメーションステート、GUIで設定するインタラクション。出力はビューアー経由で埋め込むSplineシーンです。デザイナーが完全なアートディレクション制御を必要とし、3Dピースが自己完結しているならSplineを選んでください。限界はその裏返しです:シーンはアプリが動かせるコードではなく、ビューアーランタイムは制御できない重さを加えます。

Womp(無料 → $9.99/月・年払い)はブラウザベースの3Dモデリングです(SDFベース、とても取っつきやすい)。ゼロから実際の3D形状を作る最も簡単な方法で、GLB/STLメッシュとしてエクスポートできます。モデリングツールであってウェブサイトビルダーではありません — 何かと組み合わせてください(VULKも含めて:サイトを生成し、WompからエクスポートしたGLBをuseGLTFで読み込む)。

Unicorn Studio(無料10公開 → $20/月)はノーコードのWebGLエフェクトです — シェーダー駆動のヒーロー背景、ディストーション、テキストエフェクト — スライダーで設定して埋め込みます。磨かれたエフェクト1つへの最速ルート。フルシーンやインタラクション、アプリのためのツールではありません。

Vectary(無料 → $15/月・年払い)はプロダクトコンフィギュレーターと埋め込みARビューイングが対象です — ECの製品ビューに強く、それ以外は限定的。

VULK($3.99の3日間イントロ → $19.99/月から、有料のみ)は、このリストで唯一、出力が編集可能なThree.js/R3Fソース付きのデプロイ可能なアプリケーションです。それがトレードです:ビジュアルエディタなし・無料プランなしと引き換えに、コードの所有権、アプリ統合、埋め込みランタイムゼロ。コードにまったく興味のないデザイナーなら、Splineの方が幸せになれます。3Dシーンがプロダクトの一部 — state、データ、ルートに配線されるもの — なら、生成コードだけが壁にぶつからない唯一のアプローチです。

3Dウェブサイトを速く保つには?

パフォーマンスは、ほとんどの3Dサイトが死ぬ場所です。完全なチェックリスト、すべてプロンプト可能です(「3Dパフォーマンスのベストプラクティスを適用して」でも動きますが、明示的な方が良い):

• Dracoでジオメトリを圧縮。 GLTF/GLBモデルはDraco圧縮で5〜10分の1に縮みます。dreiのuseGLTFがデコードを自動処理。4MBの製品モデルが約500KBになります。
• 3Dバンドルを遅延読み込み。 Three.js + R3Fはシーンを載せる前にgzipで約150KB+。コード分割(React.lazy + Suspense)して最初の描画がWebGLを待たないようにし、シーンがマウントするまで静的なポスター画像を見せます。
• 画面外では一時停止。 frameloop="demand"かIntersectionObserverで、シーンが見えないときはレンダーループを止めます。3画面分スクロールした下でアニメーションし続けるヒーローは、純粋なバッテリーの無駄です。
• デバイスピクセル比の上限を2に。 Canvasにdpr={[1, 2]}。スマホでDPR 3のレンダリングは、目に見える利得ゼロでフラグメント処理を3倍にします。
• ライトと影に予算を。 影を落とす動的ライトは1つごとに、その視点からシーンを再レンダリングします。影付きキーライト1つと<Environment>のHDRIの方が、ポイントライト4つより視覚的にも計算的にも優れます。
• 繰り返しジオメトリはインスタンス化。 500個の小惑星フィールドは<Instances>なら1ドローコール、なしなら500です。
• reduced-motionフォールバックを用意。 静的レンダーでprefers-reduced-motionを尊重 — アクセシビリティ要件であると同時に、低スペック端末のフォールバックにもなります。
• 実機のスマホで測定。 ミドルレンジのAndroidでのChrome DevTools GPUプロファイリングが真実を語ります。あなたのMシリーズのラップトップは語りません。

3Dウェブサイトはどうデプロイするのか?

生成されたR3Fプロジェクトは標準のViteビルド — 静的アセットのdist/ — なので、デプロイはどのReactアプリとも同じです。VULKならワンクリックでCloudflareのエッジネットワークへ。ライブURLが付き、カスタムドメインにも対応。エクスポートしたプロジェクト(ZIPまたはGitHub)は静的ホスティングのある場所ならどこでもデプロイできます:Cloudflare Pages、Vercel、Netlify、S3バケット。3D特有の注意を2つ:ホストが.glb/.hdrアセットを長いキャッシュヘッダーで配信することを確認してください(不変で、たいてい最大のファイルです)。テクスチャは圧縮フォーマットで(対応していればKTX2/basis、そうでなければ適切なサイズのJPEG/WebP — スマホ画面に4096pxのテクスチャは帯域の無駄です)。