今日のテーマは「AIでリッチなWebデザインを作る」。3D・パララックス・スクロール演出まわりで2026年に入ってから起きた大きな変化は、これまで有料だった高機能プラグインが軒並み無料化し、ブラウザ自体もスクロール演出をネイティブでこなせるようになったこと。ツールの選択肢が広がった今、どれを・どう組み合わせるかを整理する。
動くWebを支える技術地図――どれを選ぶか
「にゅるっと」「ぐりぐり」動くサイトの裏側には、だいたい次の4種類のどれか（または組み合わせ）がある。まず全体像を表で押さえておく。
| 技術 | 得意なこと | 2026年の状況 |
|---|---|---|
| GSAP（ScrollTrigger） | ピン留め・スクラブ・水平スクロールなど複雑な演出 | 3.15で全プラグイン無料化、Webflowにも深く統合 |
| Motion（旧Framer Motion） | Reactコンポーネントの出入り・レイアウトアニメーション | 2025年に独立、React以外にも対応拡大中 |
CSSネイティブ（animation-timeline: view()） |
フェードイン等の軽量なスクロール連動 | Chrome/Edge/Firefoxで利用可、Safariも追随 |
| Lenis | 慣性のある滑らかなスクロール感の土台 | GSAP・Motionどちらとも組み合わせて使うのが定番 |
結論だけ先に言うと、「ピン留めしながら複数ステップを刻む」「横スクロールに切り替える」といった凝った演出はGSAP＋ScrollTriggerが今も頭ひとつ抜けている。逆に単純なフェードインや控えめな視差効果だけなら、ライブラリなしのCSSネイティブで十分というのが2026年時点の実感だ。
GSAPが全プラグイン無料化、Webflowでは3D（Spline）とも一体化
GSAPはWebflowによる買収を経て、SplitText・MorphSVG・DrawSVG・ScrollTriggerなど、かつてClub GreenSock会員限定だった有料プラグインが商用利用も含めてすべて無料になった。2026年4月リリースのGSAP 3.15ではこの体制がさらに整理され、npm install gsapだけで全機能が使える状態になっている。
加えてWebflow InteractionsがGSAPベースに刷新されたことで、コードを書かずに水平タイムライン上でScrollTrigger・SplitText・スタガーを組める。2026年1月には3DツールSplineのアクションもこのタイムラインに統合され、Splineで作った3Dシーンの再生・カメラワークをGSAPのスクロール演出と同じ流れで制御できるようになった。3Dモデルの用意はSpline、演出の指揮はGSAP、という役割分担がノーコードでも組みやすくなっている。
ブラウザネイティブの「CSSスクロール駆動アニメーション」という選択肢
ライブラリを増やしたくない場合の受け皿になっているのが、CSSのscroll-timelineとanimation-rangeを使った「スクロール駆動アニメーション」だ。animation-timeline: view()を指定するだけで、要素がビューポートに入るタイミングに合わせて@keyframesを再生でき、JavaScriptなしでスクロール連動のフェードインや進捗バーが作れる。
Chrome・Edge・Firefoxではすでに使え、Safariも対応を進めている段階。ピン留めや複雑なタイムライン制御はまだGSAPの領分だが、「要素が現れたらふわっと表示する」程度の演出であれば、@supportsでフォールバックを用意しつつCSSだけで済ませる、という選択が現実的になってきた。
AIで「映画のように動く」演出を作るプロンプト実践
もう一つの潮流が、画像生成AIと動画生成AIを使って3D演出そのものを「作画」してしまうアプローチだ。手順はおおむね次の通り。
- MidjourneyやHiggsfieldなどで商品や被写体の静止画を生成する
- それを画像から動画への生成AIでカメラが回り込む・分解するといった短い動画に変換する
- 動画を1コマずつ画像に分解し、スクロール量に応じて表示するコマを切り替える（GSAPのScrollTriggerやCSSの
animation-rangeで制御）
この「生成→動画化→コマ送り」の手法自体は、ScrollTriggerのscrubオプションと組み合わせるとApple製品ページのような滑らかな分解ビューが作れる。Claude Codeのようなコーディングエージェントに頼む場合は、「どのセクションで」「何コマ目から何コマ目まで」「スクロール量とコマ番号の対応」を具体的に指示するほど狙い通りの仕上がりになりやすい。あいまいな「かっこよく動かして」だけでは意図と違う速度・タイミングになりがちなので注意したい。
Framerも3Dプロンプト編集に対応
FramerのAgentは、Rotate XYZ・Perspective・Depthなど3D Transformの全プロパティをプロンプト経由で編集できるようになった。生成した3Dレイヤーはコード化されず、キャンバス上でそのまま選択・微調整できるのが特徴。あわせて動画にも適用できる「Video Shaders」も追加され、色収差やガラスのような歪みをノーコードで動画・画像に重ねられる。3D演出を専用ツールなしでWebサイトビルダーの中だけで完結させたい場合の選択肢になりそうだ。
主な情報源
- GSAP公式サイト
- GSAP GitHubリポジトリ（無料化の経緯）
- Webflow Blog: Webflow Interactions with GSAP
- What If Design: Webflowの2026年アニメーション機能アップデート一覧
- MDN: scroll-timeline
- MDN: animation-range
- Motion Magazine: Framer Motion is now independent, introducing Motion
- Lenis GitHubリポジトリ
- Framer Updates（3D Transforms / Video Shaders）
- MindStudio: How to Build Animated 3D Websites with Claude Code and AI Video Generation
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。