30秒で3Dサイトを作るプロンプト6選（実機テスト済み）

3Dサイト用のプロンプト集は、肝心の文面が有料だったり、デモ動画だけ見せてプロンプトは公開していなかったりします。そこで、実際にそのまま使える完全版プロンプトを6本まとめました。Claudeにそのまま貼り付けてもよく、Lovable、Bolt、Cursor向けなら1行だけ調整すれば使えます。6本すべてを実際のモデルに通し、5本は動作するThree.jsページになりました。以下のスクリーンショットはモックアップではなく、生成されたページを実際にレンダリングしたものです。

今すぐコピペできる3Dサイト用プロンプト6選

どのプロンプトも、CDNからThree.jsを読み込む単一HTMLファイルの作成を求めています。この制約には意味があります。単一ファイルならブラウザでローカルに開け、開発者への受け渡しやカスタムコード欄への貼り付けも簡単です。さらに、モデルがプロジェクト内にimportを散らばらせず、シーンを自己完結させる方向に働きます。

1. パーティクル銀河のヒーローセクション

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

生成は27秒、出力は3,692トークンでした。銀河は回転し、ドラッグによる視点操作も機能し、オーバーレイ越しでもボタンはクリックできます。ただし実用上の欠点が1つあります。サブラインが明るい銀河中心部に重なり、読みにくくなりました。修正方法は後述のテストメモで紹介します。

2. スクロール連動のプロダクトショーケース

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

動作した5件のなかでは、これが最も重い生成でした。63秒、7,023出力トークンです。同時に、最も完成度の高い結果でもありました。スクロールに合わせてカメラがオブジェクトの周囲を移動し、マテリアル色も各セクションで指示どおり切り替わります。

減衰のあるlerp補間も守られていました。スクロールに無理やり演出を載せたスライドショーではなく、制作会社のサイトらしい重厚で高価な動きに仕上がっています。

3. GLSLによる流体グラデーション背景

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete
HTML file in a single code block.

31秒、3,830トークンで、初回生成から問題なく動きました。ポイントは「single quad, no postprocessing passes」という一文です。これが性能上のガードレールになります。指定しないと、モデルはEffectComposerやブルームパスを持ち出しがちで、内蔵GPUではフレームレートを大きく落とすことがあります。

4. 3Dポートフォリオのフライスルー（手強かった1本）

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

これは3回試しても、そのまま公開できる状態にはなりませんでした。それでも掲載したのは、上のスクリーンショットが失敗の理由をよく示しているからです。カード自体は描画されていますが、カメラが背面側に回り込んでおり、タイトルが鏡文字になっています。1回目は16,000トークンの出力上限をファイルの途中で超えました。2回目は、このプロンプトに「keep the code compact」と入れた版です。カードは描画できたものの、カメラがカードをそのまま通り抜けました。3回目ではクリッピングは直りましたが、カメラとスクロールの連動が失われました。カメラパスの演出とカードごとのテクスチャは、上のシーンよりモデルにとって明らかに難しい領域です。デバッグ時間を見込むか、ホバー状態を持つ静的な曲線グリッドまで単純化するのが現実的でしょう。

5. インタラクティブなプロダクトビューア

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

初回で成功し、66秒、7,719トークンでした。カラースウォッチとメタル／マット切り替えは、マテリアルへリアルタイムに反映されます。さらに、横方向の回転だけに制限して商品をフレーム内に保つという説明まで、指示していないのに注記として追加されていました。

6. 1ページ完結の3D企業サイト

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62秒、7,419トークンでした。モデルはスタジオ名を独自に考え、4つのセクションを組み立て、指定どおりヒーロー右上に低ポリゴンの正二十面体を浮かべています。このプロンプトは最初の試行で8,000トークンの出力上限に達し、途中で切れてしまいました。API経由でモデルを呼び出すなら、ページ全体を生成するプロンプトでは出力上限を16,000トークン以上に設定しておくべきです。

実行してわかったこと

各プロンプトにつき1つのモデルで3回試しただけなので、これはベンチマークではなく観測結果です。2026年半ば時点で、プロンプトから3Dサイトを生成する技術がどこまで来ているかを見るためのスポットチェックとして読んでください。検証条件は次のとおりです。2026年7月17日にAPI経由でclaude-sonnet-5を使用し、設定はデフォルト、システムプロンプトなし。Appleシリコン搭載MacBookのデスクトップ版Chromeで1280×720にレンダリングしました。成功した生成では、モデルが公開CDN上のThree.js r128 UMDビルドを自ら選択しています。

動作した5ページで見つかった視覚的な欠点は1つだけでした。プロンプト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ドルを大きく下回りました。今回は、Claude APIアクセスを公式のトークン単価の5分の1で再販しているAIReiter経由で実行しています。そのため、粘り強い反復作業でも小銭程度に収まります。

自分用の3Dサイトプロンプトを書くコツ

初回で通ったプロンプトには、共通して5つの要素がありました。この5つを残せば、最初の生成で動く確率は大きく上がります。

1. 3Dシーンの主役は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は、同じpointer-events: noneのレイヤリング修正を含む50,000パーティクルの惑星アニメーションで、この手法を解説しています。

アワード系サイトのような仕上がりを狙うなら、これが最も効率のよいルートです。シェーダーの数式は人間が調整済みのものを使い、AIには統合作業だけを任せられます。

このプロンプトを使えるツール

上の6本はツールを選びません。HTML/JSを書いてプレビューできる環境なら実行できます。違いが出るのは、生成物の形式とコード所有権です。以下は2026年7月17日時点の確認内容です。

このうち2つは補足が必要です。VULKは、ループ動画のヘッダーではなくインタラクティブなWebGLシーンを備えた、本物のReact Three Fiberコードを生成することを売りにしています。公開されているショーケースもその主張を裏付けています。コードを出力するのか、動画ヘッダーを出すだけなのかは、「AI 3D website builder」に料金を払う前に必ず確認したい違いです。プロンプトを自分で書くより探したいなら、MotionSitesがLovable、Bolt、Cursor、Claude向けにカテゴリ分けしたライブラリを運営しています。一部は無料でコピーでき、残りはサブスクリプション対象です。

プロンプトだけでは越えられない壁

r/lovableやr/web_designのスレッドでは、適切なプロンプトさえあればmont-fort.comやNoomo Agencyのlabsページのようなサイトを再現できるのか、という質問が繰り返し出ます。正直な答えは、プロンプト単体では無理です。あの種のサイトは、カスタムGLTFモデル、アートディレクションされた照明、専用のシェーダーによって構築されています。テキストプロンプトだけで、そうしたアセットは生み出せません。プロンプトで得られるのは、スクロール駆動カメラ、シェーダー背景、減衰のあるモーションといったサイトの仕組みであり、ジオメトリはプレースホルダーです。実際のモデルファイルに差し替えれば差はある程度縮まりますが、その照明、マテリアル、モバイル向けフォールバックには依然としてデザイン作業が必要です。上で失敗したポートフォリオのフライスルーも、この教訓を小さな形で示しています。演出された複数オブジェクトのシーンに近づくほど、人の反復作業は増えます。

生成が壊れる原因の大半は、次の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経路が廃止されているため、バージョンを固定すれば不整合を避けられます。）
• デスクトップでは滑らかだが、スマートフォンではカクつく。 ノートPCでは問題なかったパーティクル数が原因になりがちです。修正プロンプトは、Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.です。
• 3Dシーンは動くのに、ページ内のどこもクリックできない。 キャンバスまたはオーバーレイがイベントを奪っています。修正プロンプトは、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.です。

FAQ

無料で使える3Dサイト用プロンプトはありますか？

あります。この投稿の6本はすべて完全版で、無料でコピーできます。DocsBotとMotionSitesの無料枠にも、さらに多くのプロンプトがあります。有料ライブラリで得られる主な価値は、プロンプトの種類と検証済みパターンの量であり、まったく別種のプロンプトではありません。

これらのプロンプトはLovableやBoltでも動きますか？

はい。ただし1点だけ調整します。これらのプラットフォームはReactプロジェクトを生成するため、「single-file HTML」という要件は外してください。シーンの主役、動きのトリガー、操作方法、性能上のガードレールは、そのまま移植できます。

3Dサイト用プロンプトを使うにはThree.jsの知識が必要ですか？

生成するだけなら不要です。調整するなら、少し知っていると便利です。上のプロンプトには必要なThree.js用語が埋め込まれています。OrbitControlsやフラグメントシェーダーが何かを知っていれば、闇雲に再生成する代わりに、狙った変更を依頼できます。

3Dサイト制作に最適なAIツールはどれですか？

単一ファイルのエフェクトやヒーローセクションなら、Claudeを直接使うのがよいでしょう。ソースを保持でき、トークン単位で支払えます。バックエンド付きのホストサイトなら、無料プランのLovableまたはBoltが候補です。React Three Fiberコードをエクスポートしたい場合に限ればVULKです。

3DヒーローはパフォーマンスやSEOに悪影響がありますか？

設計を誤らなければ問題ありません。3Dは1シーンに絞り、上記のモバイル向けガードレールを加え、6本のプロンプトと同じように見出しや本文はキャンバス上の実HTMLとして置いてください。クローラーはテキストレイヤーを読めますし、Core Web Vitalsは主にページがほかに何を読み込むかで決まります。