「動画を生成してコマ送りする」だけがリッチな3D・パララックス演出の作り方ではない。2026年7月、ブラウザ標準のスクロール駆動アニメーションが主要ブラウザで揃い、JS任せだった演出がCSS数行で書けるようになった。同時にAIコーディングでThree.jsのシーンをまるごと書かせる作例や、プロンプト1本で3Dサイトを生成するAIビルダーも急速に実用段階に入っている。今日はこの「コードで作るリッチ3D」の最前線を、ネイティブCSS・定番ライブラリ・AIネイティブツールの3レイヤーで整理する。
スクロールがJSを離れる：CSS Scroll-Driven Animations
これまでパララックスやフェードインの類は、scrollイベントを監視してrequestAnimationFrameで間引く…という「メインスレッドを圧迫するJS」が定番だった。CSS animation-timelineプロパティは、この処理をブラウザのコンポジタスレッドに渡し、scroll()（ページ全体のスクロール位置）やview()（要素がビューポートに入っている進捗）を直接アニメーションのタイムラインとして使えるようにする。
大きな変化は対応ブラウザの広がりだ。WebKitの解説記事によると、Safari 26でScroll-driven Animationsのサポートが加わり、Chromium系と合わせて主要2エンジンで動くようになった（Can I useで最新状況を確認可能）。ヘッダーのフェード、進捗バー、要素ごとのビューアニメーションといった「よくあるやつ」は、もうJSライブラリなしでも十分に書ける。
CSSとGSAP、どちらを使うか
とはいえ全部がCSSで完結するわけではない。ピン留めしながらタイムラインを細かく制御する、複数要素を厳密に同期させる、といった「振り付け」が必要な演出は依然GSAPのScrollTriggerが強い。目安は次の通り。
| やりたいこと | 向いている手段 | 理由 |
|---|---|---|
| 要素のフェードイン・簡単な視差 | CSS animation-timeline |
JSゼロ、コンポジタスレッドで軽量 |
| セクションのピン留め＋複数要素の同期 | GSAP ScrollTrigger | タイムライン制御・イベントフックが豊富 |
| 3D空間をカメラが移動するような演出 | Three.js＋GSAP | WebGLシーンのカメラパスをスクロールに同期 |
| スクロール自体の「質感」を変える | Lenis | 慣性のある滑らかなスクロールを1行で追加 |
軽量な慣性スクロールライブラリLenis（4kb、MITライセンス）はGSAPとの併用がほぼ定番化しており、Framer用のノーコード版も用意されている。
作例で見るコードベースのリッチ3D
「動画を生成してスクロールで再生する」のではなく、実際にWebGLシーンをコードで組む作例も継続的に出てきている。デザインコーディング系メディアCodropsの直近の記事から3つ紹介する。
- Blenderのカメラパス×Three.js×GSAP：Blenderで描いたカメラの通り道をJSONで書き出し、Three.jsで再構築、スクロールに合わせてGSAPでカメラを進める。3D空間を「歩いているような」ギャラリー演出。
- ZERO（インタラクティブ・ナラティブ）：Three.js・GSAP・Howler・Viteで構築された、1本の連続スクロールで進行する体験。1GB超の素材を10MB未満に圧縮しつつ、非力なAndroidでも60fpsを保つ設計が解説されている。
- 波が伝播するキューブグリッド：カーソル位置を3D空間に変換し、キューブの波紋アニメーションを作るミニマルな背景演出のチュートリアル。
いずれもコードは公開されており、Claude CodeやCursorのようなAIコーディングツールに読み込ませて改造するベースとしても使いやすい。
AIネイティブな3Dビルダーの伸び
コードを書かず、プロンプトから3D体験そのものを生成するツールも育っている。Splineは新しいOmma（omma.build）で、コード生成・画像生成・3Dメッシュ生成の複数エージェントを並列に走らせ、プロンプトから3Dサイト・アプリを一気に組み立てる方向に進んでいる。GLB/GLTFの3Dモデルや既存サイトのデータを取り込めるのも特徴だ。
一方、VULKは生成物を「動くテンプレート」で終わらせず、React Three Fiber（Three.jsのReactレンダラー）ベースの素のコードとして書き出し、GitHubへのエクスポートやバックエンド追加まで含めて「所有できる」ことを売りにしている。プロンプトで済ませたい場面と、コードごと引き取って自分で育てたい場面とで、選ぶツールが分かれてきた。
AIにリッチな演出を書かせるプロンプトの要点
Claude CodeやCursorにThree.js／GSAPのシーンを組んでもらう際、次の情報を先に渡すと手戻りが減る。
- カメラの動線：どのセクションでカメラがどこからどこへ動くか（始点・終点・注視点）を文章で明示する。
- スクロールとの同期方法：CSSの
animation-timelineで十分か、GSAP ScrollTriggerのピン留めが必要かを先に決めてから依頼する。 - パフォーマンス予算：モバイルでの目標fpsやアセット総容量（例：10MB以内）を数値で伝える。ZEROの事例のように圧縮方針まで含めると精度が上がる。
- アクセシビリティ：
prefers-reduced-motionへの対応（アニメーション無効化やフォールバック）を必ず要件に入れる。
まとめ
2026年後半のリッチWebデザインは、「AI動画を貼ってコマ送り」と「AIにコードそのものを書かせる／生成させる」が両立する時代に入った。軽い視差やフェードはネイティブCSSに任せ、複雑な振り付けはGSAP、3D空間の移動体験はThree.js、さらにゼロからの立ち上げはOmmaやVULKのようなAIネイティブビルダーに任せる——という使い分けが実務の型になりつつある。
主な情報源
- WebKit Blog: A guide to Scroll-driven Animations with just CSS
- MDN: animation-timeline CSS property
- Can I use: animation-timeline scroll()
- Lenis – Smooth Scroll
- GSAP ScrollTrigger Docs
- Codrops: Scroll-Driven 3D Gallery with a Blender Camera Path
- Codrops: ZERO — The Engineering Behind a Defiant Interactive Narrative
- Codrops: Building an Interactive Wave Propagation Cube Grid with Three.js
- Spline Updates: Meet Omma
- VULK: AI 3D Website Builder
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。