今日のテーマは「AIでリッチなWebデザインを作る」。派手な3D・パララックス・スクロール演出は一昔前は専任のクリエイティブコーダーの領域でしたが、2026年8月時点ではAI動画生成とAIコーディングエージェントの組み合わせで、デザイナー1人でもかなりのところまで作り込めるようになっています。今回は「動画を素材にする」「エージェントに正しいコードを書かせる」「ノーコードで済ませる」という3つの方向性から、具体的な手法とツールを整理します。
動画生成→フレーム抽出→スクロール同期という新定番
Appleの製品ページなどで知られる「スクロールに合わせて連番画像が切り替わる」演出（スクロールスクラビング）は、これまで3DCGレンダリングで連番画像を用意する必要がありました。ここにVeoのようなAI動画生成を組み込むチュートリアルが登場しています。builder.ioの解説によれば、手順は次のようになります。
| 工程 | 内容 | 主な道具 |
|---|---|---|
| 1. 生成 | 1枚のアンカー画像からループ可能な短い動画を生成 | Veo などの画像→動画AI |
| 2. 書き出し | 動画を連番フレーム（画像シーケンス）に変換 | FFmpeg |
| 3. 変換 | フレームを軽量画像形式に統一 | WebP変換 |
| 4. 描画 | Canvas上に現在フレームを描画 | drawImage() |
| 5. 同期 | スクロール位置からフレーム番号を算出して描画を切り替え | GSAP ScrollTrigger |
動画の<video>要素を直接シークして使う方法も紹介されていますが、動画のシークはキーフレームまで巻き戻ってから再デコードする都合上、細かい位置への頻繁なジャンプには弱いとされています。そのため「一度連番画像に落としてからCanvasで描く」方式の方が滑らかに動く、という指摘は実装前に知っておく価値があります。
GreenSock公式のAI Skills――ScrollTriggerを“でたらめに”書かせない
アニメーションの実装コードそのものをAIに書かせる場面も増えていますが、学習データには古いTweenMax時代のGSAPコードが大量に混ざっており、存在しないAPIを平気で生成してしまう問題がありました。これに対しGSAP開発元のGreenSockがgsap-skillsという公式Agent Skillsを公開し、コアAPI・タイムライン・ScrollTrigger・React/Vue/Svelte連携などの「今のGSAPの正しい書き方」をエージェントに学習させられるようにしています。Claude Code・Cursor・Copilotなど40以上のエージェントに対応しており、スキルCLI経由で導入できます。似た方向性のツールとして、自然言語からGSAPコードを生成するGSAPifyのような専用ジェネレーターも登場しています。
プロンプトのコツ
- 「見出しの各文字をぼかし＋透明→鮮明にフェードインさせ、文字間にstaggerを入れる」のように、対象要素・視覚変化・タイミングをセットで具体的に指示する。
- スクロール演出は
transformとopacityだけで組むよう指定する（widthやmarginのアニメーションはレイアウト再計算が発生し重くなるため）。 - GSAP AI Skillsのようなプラットフォーム公式スキルを併用し、エージェントが独自解釈でAPIを捏造しないようにする。
ノーコードで済ませるなら――Doraの3Dシーン内蔵スクロール
コードを書かずに済ませたい場合は、DoraのようなAIサイトビルダーが3Dシーンとスクロール演出をエディタに直接組み込んでいます。テキストプロンプトからページ全体をまず生成し、その後ドラッグ&ドロップで3Dオブジェクトの読み込みやスクロール連動のキーフレーム編集ができる点が特徴で、After Effects的な操作感で複雑なスクロール効果を組めるとされています。JavaScript知識がなくても「動画生成→フレーム抽出」に近い体験を得られる選択肢として押さえておきたいツールです。
3D表現そのものをエージェントに書かせる――Three.js×AI
Three.jsを使ったフルスクラッチの3D表現も、AIエージェントでの実装が広がっています。Three.js AIというリソースサイトでは、Claude Code・Cursor・Bolt.new・Lovable・v0といった各種ツールでのThree.js実装を比較したモデル別ベンチマークや、160以上のAPI（シーン・マテリアル・ライティング・シェーダー・GLTFローダー・ポストプロセッシング）を正確に扱わせるためのAgent Skillsが公開されています。複数ファイルにまたがるThree.jsのリファクタリングにはClaude Codeのようなエージェント型CLIが向いている、といった使い分けの整理もされており、「何を」「どのツールに」書かせるかの判断材料になります。
土台としてのCSSネイティブ機能も併せて把握しておく
JavaScriptライブラリやAI生成コードに頼らずとも、CSS Scroll-driven Animations（animation-timeline）が2026年時点で主要ブラウザに揃ってきています。scroll()を指定するとスクロール位置がそのままアニメーション進行を決めるため、軽量なパララックス背景や読了率インジケーターならJavaScript不要で実装できます。AIに実装を任せる場合も、「まずCSSネイティブで足りるか」を最初に確認するよう指示しておくと、無駄に重いJSが生成されるのを防げます。
まとめ：目的に応じて手法を選ぶ
| やりたいこと | 向いている手法 | 必要スキル |
|---|---|---|
| 映像的な3D演出を素早く試したい | AI動画生成→フレーム抽出→Canvas描画 | FFmpeg・GSAP ScrollTriggerの基礎 |
| コードは書くがAPIの誤りを避けたい | GSAP AI Skills / GSAPify併用 | プロンプト設計 |
| コードを書きたくない | Doraなどのノーコード3Dビルダー | 不要（エディタ操作のみ） |
| 本格的な3Dシーンを構築したい | Three.js＋Claude Code等のエージェント | Three.jsの基礎理解 |
| 軽量なパララックスで十分 | CSS Scroll-driven Animations | CSSのみ |
主な情報源
- Create a 3d scrolling animation with GSAP and Veo 3 – builder.io
- greensock/gsap-skills – GitHub
- GSAP AI Animation Generator – GSAPify
- Dora – Start with AI, ship 3D animated websites without code
- Three.js AI – Model Benchmarks, Prompts, Tools & Skills
- CSS scroll-driven animations – MDN Web Docs
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。