この記事で分かること：3Dのモデリングができない初心者でも、AIで3Dモデルを作り、Splineでアニメと「動き」を付けて、マウスで視線が追ってくる・スクロールでシーンの中に入っていく3Dサイトを作る手順を、クリック単位で解説します。完成イメージは当サイトの実物デモ 動く3Dサイト（視線追従＋スクロール進入） です。本記事の情報は2026年6月時点です。
完成物と所要時間
作るもの：背景が動くヒーロー画面に、(1)マウスで視線（向き）が追ってくる、(2)スクロールでシーンの中に入っていく——この演出が付いた「動く3Dサイト」を作り、公開します。完成イメージは /demo/animated-3d です。
所要時間の目安：初回は2〜4時間（慣れれば1時間）。個人差があります。
目次
- 結論：モデリング不要で「動くサイト」は作れる
- 必要なもの（多くは無料）
- STEP1：画像を作る（テンプレ＋基準＋例）
- STEP2〜：画像→動画→AntiGravityで動かす
- つまずき対処
- 完成チェックリスト
- よくある質問
- （発展）本物の回せる3DはSpline
結論：モデリング不要で「動くサイト」は作れる
3Dサイトの壁は「モデリング（形を作る）」と「3D書き出しの有料化」です。本記事のメインの作り方は、その両方を回避します——3Dモデルを作らず、画像→動画→コードで“動くサイト”にする方法です。手順は STEP1（画像作り） から。
※「回せる本物の3D」を載せたい上級者向けに、最後に Splineを使う発展ルート も簡単に紹介します。
動くサイト全体の考え方は 動く3Dサイトの作り方 も参照。
必要なもの（多くは無料）
| 役割 | ツール | 無料でできること |
|---|---|---|
| 画像生成 | ChatGPT（または Nano Banana / Whisk） | 無料枠で数枚。大量・高解像度は有料 |
| 画像→動画 | Kling / Grok / Google Flow | 無料/低額枠で数本（公式直が安い） |
| サイト下書き | Google AI Studio | 無料枠（Gemini Flash）でコード生成 |
| 仕上げ（コード編集） | AntiGravity（または Claude Code） | 無料〜（プロンプトで実装） |
| 公開 | Vercel / Netlify / Hostinger | 無料枠で公開 |
各アカウントを作っておきます。通し題材は「AIデザイン会社のヒーロー画面（背景が動く＋スクロール演出）」にします。
共通STEP1：画像を作る（テンプレ＋基準＋例）
どちらのルートでも最初は画像作りです。用途で「良い画像」の基準が違うので、下のテンプレの［ ］を自分の被写体に差し替えて使ってください。
メイン：サイトのヒーロー画像の基準
サイトの主役になる1枚。参考デザイン（Dribbble等のスクショ）を渡すと精度が上がります。
テンプレ：この参考画像と同じ雰囲気で、［被写体・テーマ］のヒーロー画像を作って。テキストは入れない。背景は［純黒/ダーク/指定色］。中央に主役を配置。Web用に16:9・高解像度。
レイアウトの下地が欲しい時は この参考画像から、装飾要素を全部消して、テキストと背景だけを残して中央に配置して（AIでサイトを組み直す下地にします）。 と頼みます。
（発展）3Dモデル化しやすい画像の基準
3D変換ツールが形を読み取りやすい画像にします。基準は①被写体は1つ ②白(無地)背景 ③3/4の斜めアングル ④均一な光・影は弱め ⑤単色寄りで形が明確 ⑥テキスト/ロゴなし。
テンプレ：3Dモデル化に使う参照画像を作ってください。被写体：［被写体］。3/4の斜めアングル、真っ白な背景、均一なスタジオ照明、影は弱め、中央に配置、形がはっきり分かる単色寄りの質感、テキストやロゴは入れない。
［被写体］の差し替え例：
- マスコット系：
丸くて可愛いロボットの顔のマスコット - 商品系：
シンプルな化粧水のボトル（透明な容器） - 食品系：
つやのあるドーナツ1個 - 動物系：
デフォルメされた柴犬のフィギュア、立ちポーズ - 抽象オブジェ：
なめらかな曲面の抽象オブジェ（彫刻風）
コツ：一発で完璧を狙わず「もっと正面寄りに」「背景を完全な白に」と追加指示して寄せます。複数アングルが欲しいときは、ChatGPTをThinkingモードにして「正面・横・斜めを別々のファイルで出してください（separate files）」と頼むと、1枚にまとまらず分けて出してくれます（3D化の精度が上がります）。画像プロンプトの考え方は プロンプト集 も応用できます。
STEP2〜：画像→動画→AntiGravityで動かす
3Dモデルを作らず、画像→動画→コードで動くサイトにします。海外の制作者がよく使う、つまずきにくい本命の手順です。
STEP2. 参考デザインを集める
Dribbble で「過去1ヶ月」の流行デザインを探し、好みの1枚をスクリーンショット。AIは参考なしだと凡庸になるので、必ず参考を用意します。
STEP3. 画像を作る
STEP1の「ヒーロー画像の基準」テンプレで、参考スクショを渡してヒーロー画像を生成（ChatGPT / Nano Banana）。画像が切れたら Figma の拡張（Extend）で広げられます。
STEP4. 画像を動画にする（ループ）
画像を Kling 3.0 / Grok / Google Flow に入れ、animate this, make it noticeable, perfect loop for website で5〜7秒のループ動画に。最初のフレームと最後のフレームを揃えると継ぎ目が消えます。Klingは公式サイト直の方がAPIより安いです。
STEP5. Google AI Studio で下書きを作る（無料枠）
- Google AI Studio を開き、Buildで作りたいサイトを説明。
- 参考スクショを渡し「
このヒーローセクションを完全に再現して。背景は純黒#000000、画像は入れず、スクショは要素の配置の参考に。テキストは自分の内容に、文字数は同じに（デザインを崩さない）。」 - できたらコードをZIPでダウンロード（Gemini Flashなら無料枠で可）。
STEP6. AntiGravity で仕上げる
- ZIPを解凍し、フォルダを AntiGravity にドラッグ → 「
localhostに追加して」でプレビュー。 - assetsフォルダにB-3の動画を入れ「
この動画をヒーローの背景にして、ループ、音なし」。 - スクロール演出：「
スクロールで2セクション目のテキストが1文字ずつ出るFramer Motionアニメを追加。背景動画はsticky（固定）にし、2セクション目で徐々にフェードアウト」。 - マウス追従や画面遷移も同様に文章で指示（「
next projectを押すと素敵なトランジションで別ページを開く」）。ローダーは motionsites.ai の無料プロンプトを貼る手も。 - モバイル：「
モバイルのみ動画を上・内容を下にして下端にグラデ。デスクトップは変えない」。
STEP7. 公開する
AntiGravityから GitHubへpush → Vercel / Netlify / Hostinger でデプロイ。独自ドメインも接続できます。これで“動くサイト”が完成です。ここまでがメインの作り方。本格的な「回せる3D」が欲しい人だけ、次の発展編へ進んでください。
（発展）本物の回せる3DはSpline
ここからは上級者向けのオプションです。マウスでグリグリ回せる“本物の3Dモデル”を載せたい場合は、Splineを使います（必須ではありません）。形はAIに作らせ、Splineは“動き付け”に専念します。
A-1. 画像をAIで3Dモデルにする（無料ツールでOK）
- 画像→3D変換ツールを開き、「Image to 3D」を選ぶ。
- 共通STEP1（ルートA用）の画像をアップロード→生成（数十秒〜1分）。
- 書き出しは「GLB」形式（Spline相性◎・Web向き）。大きいファイルは後で圧縮。
⚠️ つまずき注意：Tripo / Meshy は高品質ですが、GLBの書き出し（エクスポート）が有料化していることがあります。初心者はまず無料・透かしなし・GLB書き出し可の次を使うとつまずきません。
- Upsampler：サインアップ不要・透かしなし・毎日の無料GPU枠・GLBダウンロード・商用可。
- Hunyuan3D：GLB/USDZ・PBR対応・商用可（モデルの再配布は不可）。
- TRELLIS.2（Microsoft・オープンソース）：GLB＋PBRを無料で。
ツールの使い分け（形状精度／テクスチャ等）は 画像→3Dの比較記事 にまとめています。
A-2. Splineにモデルを入れて、ライトと質感を付ける
- Splineで新規シーンを作成。
- STEP2のGLBファイルをキャンバスにドラッグ＆ドロップ（または左上メニュー→Import）。SplineはGLB/GLTF・FBX・OBJ・STLを読み込めます。
- 真っ黒に見えたらライト不足です。オブジェクトを追加メニューから Ambient Light（環境光） と Point/Directional Light を足すと見えるようになります。
- 質感を足すなら、対象を選び Material パネル→＋→Matcap レイヤー。matcap画像はChatGPTに「
金属(brushed aluminum)のmatcap球、中央に球、背景なし、文字なし、正方形」と頼んで作れます。 - カメラの角度・オブジェクトの位置を整える。
A-3．アニメを付ける（State→Transition）
Splineのアニメは「状態（State）を2つ作って、その間を行き来させる」のが基本です。
- オブジェクトを選択し、右側の States パネルの「＋」を押す。これで Base State（初期状態） と 新しいState ができます。
- 新しいStateを選んだ状態で、オブジェクトを回転・移動・拡大する（例：Y軸に少し回す）。Base Stateに戻すと元の姿に戻ります＝この差分が「動き」になります。
- Events パネルでイベントを追加（例：Mouse Hover や後述の Scroll）→ Transition アクションを追加し、遷移先のStateを指定。
- Transitionの設定：Duration（秒）＝動く速さ、Delay＝遅延、Loop（Infinite）＝繰り返し、Cycle＝元に戻すか。ゆっくり常時回す“浮遊感”は Duration長め＋Loop Infinite＋Cycleで作れます。
A-4．マウスで視線が追う（Look Atイベント）
「キャラがこっちを見つめる」演出は Look At イベント一発です。
- 視線を向けたいオブジェクト（顔、または“目”のパーツ）を選択。
- Events → 新規イベント → Look At を追加。
- Target（ターゲット）を「Mouse（マウス）」に設定。これでカーソルの方向を向き続けます。
- 目だけを別パーツにして Look At すると、より自然な「視線追従」になります。動きが急なら追従の強さ/速度を調整。
カーソルを追いかける（位置に寄ってくる）動きが欲しいときは Follow イベントも使えます。
A-5．スクロールで中に入る（Scrollイベント）
「スクロールするとシーンの奥／中に入っていく」は Scroll イベント＋カメラ（またはオブジェクト）のStateで作ります。
- カメラを前進させた（被写体に近づいた）状態を State として作る（STEP4の要領でカメラ位置やオブジェクトのスケールを変える）。
- そのオブジェクト/カメラに Scroll イベントを追加 → Transition で“近づいた”Stateへ。
- Start At＝ページ上でアニメを開始する位置、End After＝開始位置から何pxスクロールで最終状態に到達するか、を設定。スクロール量に動きが同期します。
- 「奥から手前へ突入」「パーツが分解して中が見える」など、Stateの作り方しだいで演出が変わります。
※さらにフォトリアルに「実在の空間へ入る」表現が欲しい場合は、写真から3D空間を作る Luma AI（Gaussian Splatting・無料）のフライスルーを使う手もあります（別アプローチ）。
A-6．サイトに埋め込む＆軽くする
- Splineで右上 Export → Code Export。用途に合わせて選びます。
- ノーコード（Webflow/Wix/Framer等）：Viewer のスクリプト（embedコード）をコピーして、サイトのHTML埋め込み欄に貼る。
- React / Next.js：
npm i @splinetool/react-splineを入れ、Splineコンポーネントに公開URLを渡す（当サイトもこの方式に対応できます）。 - 軽量化（重要）：GLBは事前に圧縮、ライトは使いすぎない、重い見た目は動画(WebM)として書き出して背景に敷くのも手。スマホでの読み込みも必ず確認。
埋め込み後の“動くサイト”の仕上げ（背景動画＋マスク、スクロール連番、マウス追従UI）は当サイトの実装デモ /demo/animated-3d（作例ページ）で実物を確認できます。受注して納品する流れは LP/HP制作プラン へ。
つまずき対処
- モデルが真っ黒：ライト不足。Ambient Light＋Point Lightを足す。
- ボタンが押せない：3Dが画面全面を覆っている。埋め込み側でz-indexを調整し、3D要素に
pointer-events: none（クリック不要なら）。 - 重い・スマホで止まる：GLB圧縮・ライト削減・テクスチャはWebP・動画化(WebM)・遅延読み込み。
- 形がいまいち：STEP1の画像を「白背景・3/4アングル・単色」で作り直す。マルチビューで精度UP。
- Splineロゴが出る：無料プランの仕様。気になるなら有料、または動画書き出しで回避。
完成チェックリスト
- ☐ ChatGPTで3D化しやすい画像（白背景・3/4・単色）を作った
- ☐ Tripo/MeshyでGLBモデルを書き出した
- ☐ Splineに読み込み、ライトで見えるようにした
- ☐ State→Transitionで基本アニメを付けた
- ☐ Look Atで視線追従、Scrollで進入を付けた
- ☐ Code Export（Viewer or React）でサイトに埋め込んだ
- ☐ スマホで表示・動作・重さを確認した
よくある質問（FAQ）
本当にモデリングなしで作れますか？
はい。メインの手順では3Dモデル自体を作りません（画像→動画→コード）。発展編のSplineでも、形はAI（画像→3D）に作らせ、Splineは「動きを付ける」「Webに載せる」に絞るので、ゼロからモデリングする必要はありません。
全部無料でできますか？
入門は無料枠で可能です。商用利用・高解像度・Splineロゴ消し・画像/動画の大量生成などで有料が必要になります（2026年6月時点・各公式で確認）。
「画像＋プロンプトを入れるだけ」で全部できるサービスは？
近いのは Spline AI / Omma（自然言語で3D＋スクロール＋カーソル操作を付与）、Dora AI（プロンプトで3Dサイト生成）です。本記事の手順を理解しておくと、これらの出力も自分で微調整できます。
出典（最新は各公式で確認）：Spline Look At ／ Spline Transition ／ Upsampler（無料image-to-3D） ／ Hunyuan3D ／ Google AI Studio ／ motionsites.ai。ルートBの工程は海外制作者の手法（GPT Image＋AntiGravity）を整理したものです。手順・仕様・料金はバージョンで変わるため、本記事(2026年6月時点)は考え方の理解を主眼にしています。