生成した動画を“スクロールで再生”する：AI動画→連番WebP→GSAPでつくる没入ヒーローの手順

2026年10月13日

今日のテーマは「生成した動画を、スクロールで再生するWebサイト」の作り方です。AIで作った短い動画を静止画の連番（コマ送り）に変え、スクロール量と再生位置を結びつけると、Apple製品ページのような没入感が出ます。手順、実装の選択肢、軽量化の注意点をまとめます。

「生成→コマ送り」とは

流れは単純です。①画像生成AIや動画生成AIで数秒の映像を作る、②FFmpegで数十〜百数十枚のWebP連番に書き出す、③ページ側でスクロール位置に応じて表示するコマを切り替える。動画タグのシーク再生より滑らかに逆再生もでき、ブラウザ差も出にくい点が利点です。

この手法を「リバースポートフォリオ」と呼んで紹介する記事もあります。先に見せたい体験を設計し、サイトを後から組む発想です。Midjourneyの画像をつないで動画にし、Seedance 2.5で動かし、Claudeにサイトを組ませる流れが解説されています（HalfJourney Lab、Medium会員限定記事）。

手順を5ステップで

ステップ	やること	ポイント
1. 映像を作る	生成AIで3〜8秒の映像を作る	カメラは一方向の動きに絞る。背景は単純にする
2. 連番にする	FFmpegでフレームを書き出す	12〜24fps程度に間引き、幅は1280px前後に
3. 軽量化する	WebPに変換する	総容量の目安を決め、先頭コマから先に読む
4. 実装する	canvasに描画しスクロールと連動	GSAPのScrollTriggerでピン留めするのが定番
5. 検証する	スマホ・低速回線・動きを減らす設定で確認	静止画フォールバックを用意する

FFmpegで連番を書き出す例

ffmpeg -i hero.mp4 -vf "fps=15,scale=1280:-2" -c:v libwebp -quality 75 frames/f_%04d.webp

fps・scale・quality の3つを調整すれば、容量と滑らかさのバランスを取れます。ClaudeなどのAIコーディングツールには「frames/ の連番をcanvasで描画し、ScrollTriggerのscrubで進行させて」と依頼すると、骨組みは短時間で出ます。

スクロール連動の実装を選ぶ

GSAP ScrollTriggerは、ピン留め・scrub・位置計算が安定していて、複雑な演出向きと評されています（Annnimateの比較）。一方、CSSのスクロール駆動アニメーションは宣言的に書けますが、MDNではanimation-timelineなどがまだBaselineではなく、SafariやFirefoxの対応は確認が必要とされています（Egnworks）。

方式	向く場面	注意点
GSAP ScrollTrigger + canvas	連番再生、ピン留め、複数演出の同期	JSの読み込みが増える
CSS animation-timeline	フェードイン、進捗バーなど軽い演出	未対応ブラウザでは動かない。`@supports`で囲む