結論：海外風の“動く3D級”サイトはAIで作れる
スクロール連動・3D・マウス追従——awwwardsに載るような“動き”のあるサイトは、2026年のツールとAIエージェントを組み合わせれば個人でも作れます。本記事は作り方と、実際に動く出来上がりデモをセットでお届けします。情報は2026年6月時点のものです。
まず「出来上がり」を見る（実際に動きます）
下のフレームは当サイト内で動いている本物のデモです。オーロラ背景・回転する3D・スクロールで現れる要素・カードのマウス追従3Dチルトが入っています。
必要な“部品”（役割で選ぶ）
- 3D本体：Three.js（フルコントロール）／React Three Fiber（ReactでThree.jsを宣言的に）／Spline（ノーコードで作って埋め込み）
- 動き：GSAP（ScrollTrigger）でスクロール→カメラ/回転/不透明度、Framer Motionでホバー/遷移、Lenisでスムーススクロール
- 軽量でも“3D級”に：CSS 3D transform・マウス追従チルト・オーロラ風グラデ・スクロールリビール（このデモはこの軽量手法だけで作っています）
作り方の流れ（AIで一気に）
Claude Design
Spline
Claude Code / Cursor
GSAP / Framer
Vercel
Claude Designで構成・ワイヤー・3D/動画のプロトタイプを作り、そのままClaude Codeに実装をハンドオフ。「ヒーローにオーロラ背景、カードに3Dチルト、スクロールで要素をフェードイン」のように指示すると、Next.js+Tailwindで形になります。
軽量で“3D級”に見せる4つのコツ
- オーロラ背景：複数のradial-gradientをぼかして、ゆっくり移動アニメ。
- 3Dチルト：カード上のマウス位置からrotateX/Yを計算（数行のJS）。
- スクロールリビール：IntersectionObserverで画面に入ったらフェードアップ。
- 立体オブジェクト：重いThree.jsを使わず、CSSの3Dキューブでも“っぽさ”は出る。
作品級（シネマティック）AI動画の作り方
動画は Veo 3.1（音声込み・映像美）や Kling 3.0（映画的・日本語プロンプト可）で。映画っぽくするプロンプトの型は順に盛ります：
- ショット/カメラ言語（例：wide establishing shot, slow dolly-in, 35mm）
- 主体 → 主要アクション（1つに絞る）
- 環境・時間帯（golden hour／foggy street）
- キーライト・雰囲気（rim light, moody）
- 仕上げ（film grain, shallow depth of field, color grade）＋カメラ/被写体の動き＋音
「Draft→Review→Tweak→Re-generate」で核のカットから直していくのがコツ。トップの作例ポートフォリオに動画サンプルを載せています。
受託・副業に活かす
“動き”はそのまま単価に効きます。普通のLPより一段上の見栄えを出せると差別化になり、月額保守にもつなげやすい。始め方は LP/HP制作プラン を参照。
よくある質問（FAQ）
未経験でもできる？
まずは今回の軽量手法（CSS 3D＋チルト＋リビール）から。Splineは特にハードルが低いです。
重くならない？
3Dは効果が大きい分だけ重くなりがち。要所だけに使い、画像・動画は最適化を。
情報はいつのもの？
2026年6月時点です。ライブラリ/ツールは更新が速いので最新を確認してください。
まとめ
海外風の“動く3D級”サイトは、Spline/GSAP等の部品＋AIエージェントで個人でも作れます。まずは上の出来上がりデモのような軽量手法から始め、作例として見せて受注につなげましょう。情報は2026年6月時点のものです。