AIでAppleみたいなスクロール演出を作る：連番画像×canvas×GSAPの基本フロー

2026年10月20日

火曜はAIでリッチなWebデザインを作る日です。今回は、Apple製品ページのように「スクロールで映像が進む」演出を、AIで素材を作りAIコーディングツールで組み立てる流れに絞って整理します。

スクロール連動の演出は「動画」ではなく「連番画像」で作る

スクロール位置に合わせて映像を進める手法は、AI生成と相性が良い表現です。ただし、video要素の currentTime をスクロールのたびに書き換える実装は、カクつきやすいとされています。圧縮動画は即座にシークできるとは限らず、特にモバイルでは顕著だからです。解決策として Scrollytelling Design Patterns は、連番画像を事前に書き出し、canvasに該当フレームを描画する方法を挙げています。

制作フローは4ステップ

手順	やること	使うもの（例）
1. 始点・終点の静止画	動きの最初と最後の2フレームを生成する	Google Flow、Midjourney などの画像生成
2. 間の動きを生成	2枚の間を補間する動画を作る（Frames to Video 等）	画像→動画生成ツール
3. 連番化	動画を30fpsなどで連番画像に書き出し、WebP化する	EZGIF、ffmpeg
4. 実装	canvas＋スクロール連動で組み込む	GSAP（ScrollTrigger）＋Claude等

手順の流れは、Instagramの制作解説投稿（Google Flowで2フレーム生成→Frames to Videoで補間→EZGIFで連番化→AIコーディングツールで実装）に沿っています。ツールの選び方は自由で、要は「生成→コマ送り」の型を押さえることです。

実装の骨格（GSAP ScrollTrigger＋canvas）

連番画像を canvas に描き、スクロール量をフレーム番号に変換します。以下は考え方を示す最小例です。Claudeなどに頼むときも、この構造（sticky/pin、canvas、scrub）を指定すると意図通りに仕上がりやすくなります。

const frameCount = 140;
const frames = Array.from({ length: frameCount }, (_, i) => {
  const img = new Image();
  img.src = `/frames/${String(i + 1).padStart(4, "0")}.webp`;
  return img;
});

const canvas = document.querySelector("#hero-canvas");
const ctx = canvas.getContext("2d");
const state = { frame: 0 };

function render() {
  ctx.drawImage(frames[Math.round(state.frame)], 0, 0, canvas.width, canvas.height);
}

gsap.to(state, {
  frame: frameCount - 1,
  ease: "none",
  onUpdate: render,
  scrollTrigger: { trigger: ".hero", start: "top top", end: "+=3000", pin: true, scrub: 0.25 }
});

Claudeに任せるときの「スキル」と指示のコツ

あるクリエイターは、Burj Khalifaのスクロールサイトを、次の4つの無料スキルを入れたClaudeで作ったと紹介しています（Instagram投稿より）。

GSAP公式の gsap-skills：スクロールアニメーションの書き方
awwwards-3d：スクロール連動3D
threejs-skills：Three.jsのコード品質を上げる
Anthropic公式skillsの frontend-design：見た目が凡庸にならないようにする

サードパーティ製スキルは内容を確認してから導入してください。指示文には次を入れると安定します。

フレーム枚数・ファイル名規則・解像度（例：140枚、WebP、幅1200px程度）
スクロール距離（pinの長さ）とscrubの滑らかさ
先頭の数フレームを優先読み込みし、全体は遅延読み込みにする
prefers-reduced-motion のときは静止画に切り替える

つまずきやすい点

「回るだけ」にしない：途中の状態に意味がある動き（組み立て、変形、旅）でこそスクロール連動が活きます。ロゴが回るだけではスクリーンセーバーに近くなります（Scrollytelling Design Patternsの指摘）。
モバイル実機で確認：連番画像でも枚数と解像度が多いと重くなります。中位スマホでの確認が推奨されています。
動きを減らす設定への配慮：アニメーションをオフにした訪問者にも内容が伝わる静止フレームを用意します。
ノーコード派の選択肢：FramerのAgentには、スクロールに同期して再生・巻き戻しされる動画をプロンプトで作る機能が紹介されています。3DならSplineのシーンを埋め込む手もあります。

「逆ポートフォリオ」という発想

Midjourneyの画像をひとつの映像にしてスクロールに預け、その周りにClaudeでサイトを組む「reverse portfolio」という考え方も紹介されています。サイトに画像を並べるのではなく、先に体験を設計してから器を作る順序です。AIで素材を作る時代には、この順序の方が破綻しにくいでしょう。

主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。