AIでリッチなWebデザインを作る：CSSスクロール連動・GSAP・コマ送りの使い分けとプロンプト例（2026年10月）

2026年10月29日

3Dやスクロール演出つきの「リッチなWebサイト」は、いまやAIにコードを書かせて作れる時代です。今回は、Claude等でGSAP・Three.jsを使う方法、CSSだけで動くスクロール連動アニメの現状（2026年10月にFirefoxも対応）、動画をコマ送りにして滑らかに見せる手法を、プロンプト例つきで整理します。

1. まず手法を選ぶ：3つの作り方

「AIでリッチなサイト」といっても、実装方法は大きく3つに分かれます。目的と負荷で選ぶのが近道です。

手法	向いている演出	主な技術	注意点
CSSスクロール連動	フェードイン、進捗バー、軽いパララックス	animation-timeline: view() / scroll()	JS不要で軽量。非対応ブラウザ向けの保険が必要
GSAP ScrollTrigger	ピン留め、横スクロール、複雑なタイムライン	GSAP + Lenis	表現力が高い。実装量とチューニングが増える
コマ送り（画像シーケンス）	製品が回転する、1カット映画風のスクロール	canvas + 連番画像	画像枚数分の読み込み。容量管理が必須
3D（WebGL）	3Dモデル・シェーダー背景	Three.js / React Three Fiber	端末負荷が高い。モバイルでの軽量化が必要

2. CSSだけのスクロール演出が「どこでも動く」段階に

CSSの animation-timeline（scroll() / view()）は、Chrome・Edge 115、Safari 26に続き、Firefox 159（2026年10月）で主要エンジンすべてが対応したと報じられています。スクロール量とアニメーションの進行を直接結びつけられるため、単純な演出ならJavaScriptなしで実装できます。

基本は進行方向に合わせた @keyframes を書き、animation-timeline: view() を指定する
@supports (animation-timeline: view()) で囲み、非対応環境では完成状態を表示する
prefers-reduced-motion のユーザーには動きを止める

なお、IntersectionObserverの代わりになる「スクロールトリガー」はChrome・Edge 146で入った一方、FirefoxとSafariは未対応とされており、こちらは当面は付加的な強化として使うのが安全です。

3. Claudeに「GSAP＋Three.js」を書かせる

Webflowのブログでは、Claudeは動画そのものではなく、HTML・SVG・canvasやThree.jsでシーンを組み、GSAPで動かすコードを書くのが得意だと説明されています。同じコードをそのままWebに載せられる点が強みです。

プロンプトの型

目的：SaaS製品のランディングページのヒーローとスクロール演出
技術：HTML/CSS/JS、GSAP + ScrollTrigger、Lenis（CDN読み込み）
演出：1)ヒーローの文字を1行ずつ下からフェードイン
      2)スクロールでセクションをピン留めし、背景色を段階的に変化
      3)カードは奥行き違いでパララックス
制約：prefers-reduced-motionで動きを無効化／モバイルは演出を簡略化
      ／Lighthouseのパフォーマンス80以上を維持
出力：index.html 1ファイル、コメント付き

演出を番号で具体的に書くと、曖昧な「かっこよく」より再現性が上がる
制約（軽量化・アクセシビリティ）を最初に伝えると、後から直す量が減る
LenisとScrollTriggerを併用する場合は、lenis.on('scroll', ScrollTrigger.update) のように更新連携が必要になる

4. 「生成→コマ送り」で映画のようなスクロールを作る

製品や物体が回転するような演出は、動画を連番画像に変換し、スクロール位置に合わせてcanvasへ1枚ずつ描画する手法がよく使われます。YouTubeで公開されているAwwwards受賞サイトの再現解説では、600枚の連番画像をGSAP ScrollTrigger（scrub）とLenisで制御する構成が紹介されています。