スクロール3D・パララックスをAIで作る：CSSで足りる演出とGSAP/Three.jsの線引き

2026年10月13日

3Dやパララックス、スクロール連動のリッチな演出は、いまやAIに書かせて磨く時代です。ただし「全部JSで重く作る」と体感も保守も悪化します。今回は、CSSだけで足りる演出とGSAP＋Three.jsが必要な演出の線引きと、AIへの指示の出し方を整理します。

まず決める：その演出はCSSで足りるか

スクロールに合わせたフェードイン、視差、進捗バーなどは、ブラウザ標準のCSS「scroll-driven animations」で書けます。animation-timeline: view() を指定するだけで、アニメーションの進行がスクロール位置に連動します。ライブラリ不要で、メインスレッドを塞ぎにくいのが利点です。

対応状況は、2026年3月時点の解説記事によると、Chrome/Edge 115+、Safari 26で対応、Firefoxはフラグ付きの部分対応です。非対応ブラウザでは animation-timeline が無視されるだけなので、最終状態で表示される設計にしておけば安全に劣化します。

@keyframes reveal {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}
.reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

さらに Chrome for Developers では、特定のスクロール位置を越えた時点で時間ベースのアニメーションを開始する「scroll-triggered animations」がChrome 145で入ると紹介されています。「進行をスクロールに同期させる」型と「しきい値で再生を始める」型を使い分けられます。

CSSとGSAP/Three.jsの使い分け

やりたいこと	向く手段	AIへの指示のコツ
フェード・スライドの出現、進捗バー	CSS scroll-driven animations	「JS不要、animation-timeline: viewで。非対応ブラウザは最終状態で表示」
セクション固定（pin）、複雑なタイムライン	GSAP ScrollTrigger	「scrub付きtimelineで、markersを有効にして位置調整できるように」
スクロールで3Dモデルやカメラを動かす	Three.js／React Three Fiber＋GSAP	「canvasは固定、スクロール値をカメラ位置に反映。低スペック端末は軽量版に」
ノーコード寄りで3Dを置く	Spline	コードエクスポート（three.js/R3F）後にAIで統合

AIでスクロール3Dを作る流れ

紹介されている手順に共通するのは、「スクロールの土台を先に作り、各セクションを順に足す」ことです。たとえば動画解説では、スクロール基盤（Intersection Observer）→3Dヒーロー→パララックスの特徴セクション→スクロール連動の色変化、と複数のプロンプトを同じスクロール制御に集約しています。

土台：「スクロール進捗を0〜1で持つ1つの仕組みを作り、全演出がそれを参照する」
3Dシーン：Three.js上にモデルを置き、照明・奥行き・わずかなカメラ移動で「ページに馴染む」見せ方に
章ごとの演出：カメラの接近、シーン切替、固定リビールなどをScrollTriggerのtimelineで定義
最適化：ファーストビュー外のシーンは遅延読み込み、端末性能で粒子数やシェーダーを下げ、WebGL非対応は静止画にフォールバック

GSAPにはAIコーディングツール向けのオープンソースSkill Packがあり、実運用向けのパターンをClaude CodeやCursorに渡せると紹介されています（要公式での確認）。ScrollTrigger＋Three.jsで「カメラがギャラリーを通り抜ける」例では、カメラを直接tweenせず、小さなオブジェクト（z, lookZ）をscrubして毎フレームカメラへ反映する構成が解説されています。AIに頼むときも、この「値を動かす層」と「描画する層」を分けるよう指定すると破綻しにくくなります。

サイトマップとユーザーフロー図 — Photo: VFS Digital Design / CC BY 2.0（Openverse経由）

コピペして使える指示の型

スクロール連動のLPを作って。
- 演出は原則CSS（animation-timeline: view()）。固定・複雑な連動のみGSAP ScrollTrigger
- 3Dはcanvasを固定し、スクロール進捗(0-1)でカメラを動かす
- prefers-reduced-motion では動きを止めて静的表示
- モバイルは粒子数と影を減らす。WebGL不可なら静止画
- 完了後、各演出がCSS/GSAPのどちらかと理由を表で説明