30秒で3Dウェブサイトを作る1つのプロンプト（6件検証済み）

ほとんどの3Dウェブサイト向けプロンプトライブラリは、プロンプト本文そのものに料金を課すか、デモ動画だけを見せて肝心の文言は公開しません。ここでは6つの完全なプロンプトを紹介します。Claudeにはそのまま貼り付けるか、Lovable、Bolt、Cursor向けに1行だけ調整してください。6つすべてを実際のモデルで試したところ、5つは動作するThree.jsページとして返ってきました。下のスクリーンショットはすべてそのレンダリング結果であり、モックアップではありません。

今すぐコピーできる6つの3Dウェブサイト用プロンプト

各プロンプトでは、CDNから読み込まれたThree.jsを使った単一ファイルのHTMLページが求められます。この制約は重要です。単一ファイルならどのブラウザでもローカルで開け、開発者に渡したりカスタムコードブロックに貼り付けたりしやすく、またモデルがインポートをプロジェクト全体に散らばらせるのではなく、シーンを自己完結させるよう強制されます。

1. パーティクル銀河ヒーロー

Three.js（CDNから読み込む）を使用して、インタラクティブな3Dパーティクル銀河のヒーローセクションを備えた単一ファイルのHTMLページを作成してください。要件: 約50,000個のパーティクルでゆっくり回転する渦巻銀河を形成すること; パーティクルの色は、中心では暖かいアンバー、外縁ではバイオレットへと変化すること; 訪問者がドラッグして回転とズームを行えるようにOrbitControlsを追加すること; 中央揃えのヒーロー見出しとして "Build Beyond Flat" を表示し、短いサブラインとCTAボタンを重ねること; オーバーレイコンテナには pointer-events: none を設定し、CTAボタンには pointer-events: auto を設定して、テキストの背後で銀河をドラッグ可能なままにすること; 背景は暗い #0a0616 にすること; ウィンドウのリサイズに対応すること。完全なHTMLファイルを単一のコードブロックで ONLY 出力してください。

27秒で生成され、3,692の出力トークンを使用しました。銀河は回転し、ドラッグで軌道移動でき、オーバーレイ越しでもボタンはクリック可能なままです。唯一の実際の欠点は、サブラインが明るい銀河の中心部に重なってしまい、読みにくいことです。修正内容は以下のテストノートにあります。

2. スクロール駆動の製品紹介

Three.js を CDN から読み込んだ、スクロール駆動の 3D プロダクトショーケースを備えた単一ファイルの HTML ページを作成してください。要件: 固定された全画面キャンバスの中央に浮かぶクロームのトーラスノット; ページには 4 つの全画面スクロールセクションがあり、ユーザーがスクロールするとカメラがオブジェクトの周囲を 360 度回転し、オブジェクトのマテリアルカラーがセクションごとにスムーズに変化する (シルバー、ディープブルー、エメラルド、カッパー); 各セクションはキャンバスの左側に固定された見出しと 1 行のコピーを表示する; スクロール時のスムーズな補間 (lerp) により動きが減衰して感じられる; 2 つの色付きスポットライトと柔らかい地面の影を備えたダークなスタジオ風の見た目; リサイズに対応すること。 完全な HTML ファイルのみを、1 つのコードブロックで出力してください。

これは5つの作業生成の中で最も重いもので（63秒、7,023出力トークン）、最も印象的な結果でした。スクロールするとカメラがオブジェクトの周りを動き、素材は依頼どおり各セクションごとに正確に再着色されます:

減衰付きのlerp補間も忠実に尊重されており、その動きには、スクロールジャックされたスライドショーというよりも、エージェンシーのサイトらしい重厚でコストのかかった雰囲気があります。

3. GLSL フルイドグラデーション背景

Three.js を CDN から読み込んだカスタム GLSL フラグメントシェーダーを使用して、全画面のアニメーションする WebGL フルードグラデーション背景を備えた単一ファイルの HTML ページを作成してください。要件: time uniform とフラグメントシェーダー内の simplex 風ノイズで駆動される、深い青、紫、コーラルが溶け合うゆっくり動く有機的なブロブ。シェーダーには微妙なフィルムグレインを追加すること。中央に配置されたガラスカード（backdrop blur）を重ね、その上に白い見出し "Ship Immersive Sites"、1 行のサブライン、そして 2 つのボタンを配置すること。アニメーションはノートPC上でも滑らかに保つ必要がある（単一の quad、postprocessing passes なし）。リサイズに対応すること。完全な HTML ファイルのみを、1 つのコードブロックで出力してください。

31秒、3,830トークン、初回で合格。「単一のquad、ポストプロセッシングパスなし」という行は性能のガードレールです。これがないと、モデルはEffectComposerやbloomパスを使いたがり、統合GPUではフレームレートが大きく低下します。

4. 3Dポートフォリオのフライスルー（逆襲してきたやつ）

単一ファイルのHTMLページを作成してください: CDNからThree.jsを使用した3Dポートフォリオ。
6つの浮遊するプロジェクトカード（角丸の平面に、プレースホルダーのグラデーション
テクスチャとカードのテクスチャ上に描画されたプロジェクトタイトル）を、3D空間内の穏やかな
カーブに沿って配置します。ユーザーがスクロールすると、カメラはそのカーブに沿って前進し、
各カードを一度に1枚ずつフォーカスします。カメラはフォーカス中のカードが十分な余白を持って
常にフレーム内に収まるようにし、カードを通過してはいけません。フォーカス中のカードは少し
拡大します。隣接するカードは奥行きのために一部見える状態を保ちます。控えめなフォグ、暗い
背景、減衰するスクロール補間を追加してください。フォーカス中のカードをクリックするとリンクが
開きます。リサイズに対応してください。コードは簡潔に保ってください: 1つのカード生成関数を再利用し、
コメントはなし。完全なHTMLファイルを単一のコードブロックで出力してください。

これは3回の実行を要し、それでもまだ出荷可能な状態ではありません。しかも、上のスクリーンショットが、なぜそれでも公開するのかを示しています。カードは描画されますが、カメラがその背後にあるため、タイトルが左右反転して表示されます。1回目は、ファイルの途中で16,000トークンの出力上限を超えました。2回目は（プロンプトにその行が含まれている理由でもある）「コードをコンパクトに保つ」指示付きで、カードは描画されたものの、カメラがそれらをまっすぐ突き抜けました。3回目はクリッピングを修正したものの、カメラとスクロールの連動が失われました。カメラパスの演出に加えてカードごとのテクスチャを扱うのは、上のシーンよりもモデルにとって本当に難しいです。デバッグセッションの時間を確保するか、ホバー状態付きの静的な曲線グリッドに簡略化してください。

5. インタラクティブな製品ビューアー

CDN から Three.js を使用した、インタラクティブな 3D 製品ビューアーの単一ファイル HTML ページを作成してください。台座の上に、スタイライズされたワイヤーフレームなしの幾何学的な製品の代替物（面取りされた立方体またはカプセル）を中央配置します。右側パネルには 3 つのカラースウォッチと、マテリアルをライブ更新するメタル/マットの切り替えを配置します。OrbitControls は水平方向の回転のみに制限し、柔らかな 3 点のスタジオ照明と接地影を付けます。パネルはキャンバス上に重ねるプレーンな HTML/CSS にしてください。リサイズに対応してください。完全な HTML ファイルのみを、1 つのコードブロックで出力してください。

一発合格、66秒、7,719トークン。スウォッチとメタル/マットの切り替えでマテリアルがリアルタイムに更新され、モデルはさらにプロンプトなしで気の利いた注記を追加した。つまり、商品がフレーム内に収まるよう、回転は水平軸に固定されているという脚注である。

6. 1ページの3Dビジネスサイト

単一ファイルのHTMLページを作成してください。CDNからThree.jsを使用した、デザインスタジオ向けの1ページサイトです。セクション: hero、services、work、contact。1つのローポリな抽象形状がheroの右上に浮かび、ゆっくり回転します。ユーザーが各セクションまでスクロールすると、その形状はスケールと色を変形させてそのセクションのアクセントに合わせます。それ以外のセクションはクリーンなHTML/CSSのみを使用してください（セクションごとの重い3Dはなし）。そのためページは高速なままです。スムーズスクロール、モバイル対応、リサイズ処理を行ってください。完全なHTMLファイルを1つのコードブロックとして、ONLY出力してください。

62秒、7,419トークン。このモデルはスタジオ名をでっち上げ、4つのセクションを構築し、指定どおりの位置にローポリゴンの二十面体を浮かべました。最初のこのプロンプトの試行では8,000トークンの出力上限に達して途中で切れてしまいました。API経由でモデルを呼び出す場合、ページ全体のプロンプトでは出力上限を16,000トークン以上に設定してください。

実行したときに何が起こったか

1つのモデルに対してプロンプトごとに3回実行した結果は逸話であって、ベンチマークではない。2026年半ば時点でのprompt-to-3D生成の位置を確認するスポットチェックとして読んでほしい。方法メモ：claude-sonnet-5を2026年7月17日にAPI経由で使用、デフォルト設定、system promptなし、結果はAppleシリコン搭載MacBook上のデスクトップ版Chromeで1280×720にレンダリング。成功した実行では、モデルが公開CDNからThree.js r128のUMDビルドを自ら選択した。

5つの動作ページの中で唯一の視覚的欠陥は、プロンプト1のサブラインが銀河の最も明るい部分に重なってしまい、ほとんど読めなくなっていることです。1つのフォローアップ行でそれは修正されました — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. これがこれらの実行全体に共通するパターンです。3Dシーン自体は概ね正しく仕上がる傾向があり、反復の予算はタイポグラフィ、オーバーレイのコントラスト、そして（ポートフォリオの場合は）カメラの演出に使われます。

この規模ではコストは問題になりません。ポートフォリオの再試行を含む9世代、約46,000出力トークンに及ぶフルテスト実行でも、コストは1ドルを大きく下回りました。私たちはこれをAIReiter経由で実行しました。AIReiterはClaude APIへのアクセスを公式のトークン単価の5分の1で再販しているため、粘り強い反復セッションでも小銭程度の出費に収まります。

独自の3Dウェブサイトプロンプトの書き方

合格したプロンプトには5つの要素があります。この5つをすべて守れば、一発合格の確率が大きく上がります。

1. 1つのシーン要素。 銀河、トーラスノット、勾配場。私たちの実行例や共有コミュニティの例の大半では、1ページで複数の無関係な3D要素を要求するプロンプトで、モデルが要件を落とし始めます。2. 動きの駆動要素。 時間（slowly rotates、driven by a time uniform）か、スクロール（as the user scrolls, the camera orbits）のどちらか。どちらかを明示してください。「animated」だけだと、モデルはつまらないものを選んでしまいます。ポートフォリオの失敗からの注意点: 物体をスクロールで動かすのは信頼できますが、物体間の経路に沿ってカメラをスクロールで動かすのは、そこで破綻します。3. インタラクション。 ドラッグで回転する OrbitControls は、私たちのテストの成功した全実行でうまく機能しました。キャンバス上にテキストを重ねる場合は、オーバーレイコンテナに pointer-events: none、ボタンに pointer-events: auto を指定するよう依頼してください。そうしないと、テキスト層がシーン用のドラッグやクリックを奪ってしまいます。4. オーバーレイの内容。 見出しの正確な文言を引用符付きで指定してください。モデルは未指定の文面を、結局置き換えることになるようなありきたりのスローガンで埋めます。5. パフォーマンスとサイズのガードレール。 パーティクル数、single quad, no postprocessing、または low-poly にすることでページは高速になります。keep the code compact は出力をAPIのトークン上限内に収めます。私たちの9回の実行のうち2回は、コード品質の問題が出る前に出力上限で失敗しました。

モデルを平面的なCSSの模倣ではなく、本物の3Dへと導く語彙: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. これらの言葉が重要なのは、実際のAPI名に対応しているためであり、そのおかげでモデルは即興ではなく、学習時に見たライブラリに対してコードを書くことができます。

コード貼り付けのショートカット

説明しきれないようなエフェクトには、もう1つの手法があります。CodePenで完成済みのThree.jsエフェクトを見つけ、その生のコードをAIツールに貼り付けて、Add this 3D animation to the hero. とだけプロンプトを送ります。するとモデルが、そのスニペットをあなたのスタック — Reactコンポーネント、ビルド設定、セクション構造 — に変換してくれます。これは通常いちばん面倒な部分です。Builder.ioは、5万粒子の惑星アニメーションを使ってこの手法をドキュメント化しており、同じpointer-events: noneのレイヤリング修正も含めて、their walkthroughで紹介しています。

これは、受賞サイト並みの仕上がりを目指すときに最も効果の高い方法です。シェーダーの数学部分は、それを調整した人間から来ており、AIは統合作業だけを行います。

どのツールがこれらのプロンプトを使用しますか

上記の6つのプロンプトはツールに依存しません。HTML/JS を記述してプレビューできるものなら、どれでも実行できます。ツール間の違いは、出力形式とコードの所有権にあります（2026年7月17日確認）：

このうち2つは注記に値します。VULKの売りは、実際のReact Three Fiberコードを生成することです。つまり、ループ再生される動画ヘッダーではなく、インタラクティブなWebGLシーンを生成し、その実例サイトがそれを裏付けています。実際のコード出力か動画ヘッダーかという違いは、どんな「AI 3D website builder」にお金を払う前にも確認すべき、まさに重要な分かれ目なのです。もしプロンプトを書くより閲覧したいなら、MotionSites は Lovable、Bolt、Cursor、Claude 向けに整理されたカテゴリ別ライブラリを提供しています。一部は無料でコピーでき、残りはサブスクリプションの向こう側にあります:

プロンプトの限界に達するところ

r/lovable や r/web_design のスレッドで繰り返し出る質問は、適切なプロンプトで mont-fort.com や Noomo Agency の labs ページのようなサイトを再現できるのか、というものです。正直に言うと、プロンプトだけでは無理です。そうしたサイトは、カスタムの GLTF モデル、アートディレクションされたライティング、そして特注のシェーダーワークの上に構築されており、テキストプロンプトではそれらのアセットを生み出せません。プロンプトで得られるのは、そうしたサイトの *mechanics*（スクロール連動カメラ、シェーダー背景、減衰の効いたモーション）を、プレースホルダーのジオメトリで再現することです。実際のモデルファイルに差し替えることでその差は一部埋まりますが、ライティング、マテリアル、そしてモバイル向けのフォールバックは、依然として本物のデザイン作業です。上で述べたポートフォリオのフライスルー失敗例も、同じ教訓を小さく示しています。プロンプトが演出された複数オブジェクトのシーンに近づくほど、より多くの人間の反復作業が必要になるのです。

3つの失敗モードで、壊れた生成の大半をカバーでき、それぞれに1行の修正があります:

• 黒い画面で、エラーは見えない。 通常は ES module/CDN の import 不一致です。修正プロンプト: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps.（r128 はテスト実行でプロンプトなしに選ばれたバージョンで、今でも動作します。新しい Three.js のバージョンでは UMD の経路が削除されたため、固定しておくことで不一致を回避できます。）
• デスクトップでは滑らかだが、スマホではカクつく。 ノートパソコンでは問題なかったパーティクル数です。修正プロンプト: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• 3D シーンは動くのに、ページ上の何もクリックできない。 canvas かオーバーレイがイベントを受け取っています。修正プロンプト: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

そして、私たち自身の実行結果からもう1つ: 3Dカード上のテキストが反転して表示される。 カメラが平面の裏面を見ています。修正プロンプト: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

よくある質問

無料の3Dウェブサイト用プロンプトはありますか？

はい。この投稿の6つは完全版で、自由にコピーできます。また、DocsBot と MotionSites の無料プランでもさらに利用できます。有料ライブラリで主に得られるのは、量と事前にテスト済みの多様性であり、別種類のプロンプトではありません。

これらのプロンプトは Lovable や Bolt で使えますか？

はい、ただし1点調整があります。「単一ファイルのHTML」という要件は外してください。これらのプラットフォームはReactプロジェクトをスキャフォールドするためです。それ以外はすべて、つまりシーンの主題、モーションドライバー、インタラクション、パフォーマンスのガードレールはそのまま引き継がれます。

3Dウェブサイトのプロンプトを使うのにThree.jsを知っておく必要がありますか？

生成には少しだけ、反復には少し多めに。上記のプロンプトには、必要な Three.js の用語が埋め込まれています。OrbitControls やフラグメントシェーダーが何かを知っていれば、盲目的に再生成するのではなく、的確な変更を依頼できます。

3Dウェブサイトに最適なAIツールは何ですか？

単一ファイルのエフェクトやヒーローセクションなら、Claudeを直接使うのがよいでしょう。ソースを保持でき、トークンごとに料金がかかります。バックエンド付きのホスト済みサイトなら、Lovable か Bolt の無料プラン、または、特にエクスポートされた React Three Fiber コードが欲しいなら VULK が適しています。

3DヒーローはパフォーマンスやSEOに悪影響を与えますか？

それを許す場合に限ります。3Dは1つのシーンにとどめ、上記のモバイル用ガードレールを追加し、6つのプロンプトすべてがそうしているように、見出しと本文はキャンバスの上に実際のHTMLとして配置してください。クローラーはテキストレイヤーを読み取り、Core Web Vitalsは主にページがほかに何を読み込むかに左右されます。