スクロールに合わせて奥行きが生まれ、映像が滑らかに再生されるサイト演出は、もはや大手ブランドだけのものではない。AI動画生成とAIエージェントによるコード生成の組み合わせで、個人や小規模チームでも「リッチなスクロール体験」を短時間で作れるようになってきた。今日は、スクロール演出の基本技法と、それをAIでどう組み立てるかを整理する。
スクロールストーリーテリングの基本パターン
スクロール演出の作り方を整理した記事では、代表的な手法として次の5パターンが挙げられている。
- グラフィックシーケンス — 静止画やイラストをスクロールに合わせて切り替える
- アニメーショントランジション — 要素のフェード・スライドで場面転換する
- パン＆ズーム — 画像や3Dシーン内をスクロールでカメラが移動する
- ムービースクローラー — 動画やコマ画像をスクロール位置に同期して再生する
- ショー＆プレイ — 要素が組み上がる過程をスクロールで見せる
これらを実装する技術的な土台になっているのが、ブラウザ標準のCSS Scroll-Driven Animations（scroll-timeline）と、より複雑な演出向けのGSAP ScrollTriggerだ。シンプルなフェードやパララックスはCSSだけで十分だが、要素の固定（ピン留め）やタイムライン制御、3D空間演出が絡む場合はScrollTriggerに軍配が上がる、というのが現場の一致した見解になっている。
「動画生成→コマ送り」でApple風スクロール演出を作る
Apple製品ページでおなじみの「スクロールで映像がコマ送り再生される」演出も、AI動画生成の普及でハードルが大きく下がった。実写撮影や3DCGレンダリングの代わりに、RunwayやVeoのような動画生成AIでループ可能なクリップを作り、そこから静止画のコマ列を書き出してブラウザで再生する手法が広がっている。典型的な流れは以下の通り。
| ステップ | 内容 |
|---|---|
| 1. 動画生成 | Runway・Veoなどでループ可能な短いクリップを生成 |
| 2. コマ抽出 | ffmpegで連番の静止画（WebP推奨）に書き出す |
| 3. 読み込み | 各コマをImageBitmapとしてメモリに保持 |
| 4. 描画 | Canvasに現在のコマをdrawImage()で描画 |
| 5. 同期 | GSAP ScrollTriggerのscrubでスクロール位置とコマ番号を連動 |
この手法を使えば、カメラや3DCGソフトを持たなくても、テキストプロンプトから「思い通りのアングルで動く映像」を作り、そのままWeb上でスクロール操作できる形に落とし込める。builder.ioの実践記事でも、動画生成AIとGSAPを組み合わせた3Dスクロールアニメーションの作り方が紹介されている。
AIエージェントにスクロール演出を書かせる
コードを書かずにこうした演出を組みたい場合、Claudeのようなコーディングエージェントに「ピン留めして4つのシーンをクロスフェードさせて」「パララックスの層を3枚重ねて」と自然言語で指示する使い方が定着しつつある。GitHub上で公開されているgsap-scrolltriggerスキルは、ピン留め・スクラブ・スナップ・パララックス・バッチ処理・スタッガーといった主要テクニックをエージェントが正しく書けるようにまとめたもので、ReactのuseGSAPフックでのクリーンアップやThree.jsのカメラ制御、コマ画像のスクラブ実装まで一通りカバーしている。同様の狙いを持つscrollytellingスキルもあり、スクロール演出を専門領域として切り出したスキルが増えてきた印象だ。
もう少し手軽に試したい場合は、GSAPifyのような、平易な英語の指示からGSAPコードを生成してプレビューできるツールも便利だ。ScrollTrigger・SplitText・MorphSVGなど主要プラグインに対応し、生成したコードはそのままCodePenにも書き出せる。
ブランドサイトの「3D化」も自然言語で
ClaudeのようなAIエージェントでは、ブランドの説明や下書きスケッチから、パララックス・3D変形・動画背景を含むサイトを直接生成する使い方も広がっている。「奥行きを感じさせるカメラワークで」「スクロールに応じてズームインする」といった演出の指示を自然言語で渡し、実際に動くHTML/CSS/JavaScriptとして受け取れる点が、これまでライブラリの詳細な知識を必要としていた領域のハードルを下げている。
使い分けの目安
| やりたいこと | 向いている技術・ツール |
|---|---|
| 単純なフェード・パララックス | CSS Scroll-Driven Animations（scroll-timeline） |
| 要素のピン留め・タイムライン制御 | GSAP ScrollTrigger |
| Apple風のコマ送り動画演出 | AI動画生成＋ffmpegコマ抽出＋Canvas描画 |
| 自然言語でコードを生成したい | GSAPify、Claude等のコーディングエージェント＋専用スキル |
| ノーコードで3Dサイトごと作りたい | Claudeのサイト生成機能、Spline等のノーコード3Dツール |
スクロール演出は「凝れば凝るほど良い」わけではなく、読み込み時間やアクセシビリティとのバランスも欠かせない。ヒーロー動画は解像度を上げすぎず、ファイルサイズを抑える、スクロール量を必要以上に長くしない、といった基本は変わらない。まずは1つのセクションだけ試作し、体感の重さを確認してから本実装に進むのが安全だろう。
主な情報源
- Create a 3d scrolling animation with GSAP and Veo 3 (builder.io)
- GSAP ScrollTrigger 公式ドキュメント
- CSS Scroll-Driven Animations API (MDN)
- gsap-scrolltrigger Claude Skill (GitHub)
- scrollytelling Claude Code Skill
- GSAPify — AI GSAP Animation Generator
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。