画像生成→動画化→フレーム分解で作る、AIの“映画のように動く”スクロールサイト

2026年9月25日

Webサイトのヒーロー演出は「コードでアニメーションを組む」から「動画素材をAIで作り、スクロールに同期させて再生する」やり方に軸足が移りつつある。画像生成→動画化→フレーム分解という新しい制作フローと、それを支える専用ツール、そしてAIに演出を指示する際のコツを、直近の事例からまとめる。

「フレームシーケンス」がスクロール演出の主役になった

スクロールに合わせて映像がコマ送りで進む「スクロールスクラビング」自体は目新しい技法ではない。GSAPのScrollTriggerで動画のフレームをcanvasに連番画像として描画し、スクロール位置をフレーム番号にマッピングする——という仕組みは以前からある。変わったのは「その連番画像をどう用意するか」だ。手持ちの動画素材がなくても、AIに1枚の静止画を作らせ、それを短い動画に変換し、動画からフレームを書き出せば、映画のような滑らかなヒーロー演出をゼロから作れるようになった。

具体的なワークフローとして紹介されているのが、始点となる画像と終点となる画像をAIで生成し、その2枚をGoogle Flow（Veo 3.1による動画生成)に渡して「間を埋める」短いトランジション動画を作らせ、書き出したフレームをWebP画像として並べてスクロールに同期させる、という手順だ。旧ツールの「Whisk」は2026年4月に提供終了となり、キーフレーム生成の機能はFlowに統合されている。この一連の流れをClaude Codeでサイトに落とし込む実演がMedium記事「Scrollytelling and Cinematic AI Hero Animation」にまとまっている。

同様の流れを教材化しているのがScrolltide Academyのチュートリアルで、静止画をChatGPTで用意し、Veo 3で短いシネマティックなループ動画に変換、Claude Codeにセクションごとサイトを組ませる、という手順を無料で公開している。

手順を丸ごと肩代わりする専用ツールも登場

フレーム抽出やcanvas描画のコードを自分で書かなくても、動画をアップロードするだけでスクロール演出に変換してくれるツールも増えてきた。

ツール・スキル	特徴
scroll-video-website-skill	動画をWebP連番フレームに変換し、プログレッシブ読み込み対応のスクロール連動canvasに落とし込むAIエージェント向けスキル(OSS)
Chase AIのスクロールアニメーションスキル	1回の指示でスクロールスクラブ型のサイトを組み上げる「ワンショット」型のAIスキル
Hero Scroll Effect	AI生成画像→動画→フレーム分解までを一気通貫で扱うオープンな実装事例

いずれも仕組みは共通していて、①静止画をAIで生成、②静止画を短い動画に変換、③動画からフレームを書き出し、④スクロール位置と再生位置を同期させる、という4段階に集約される。動画ファイルをそのまま埋め込むより軽く、ブラウザの互換性トラブルも起きにくいのが利点として挙げられている。

編集ソフトのタイムライン画面、フレームを並べて動画を編集する様子 — Photo: Andrew Currie / CC BY-SA 2.0, Openverse経由

プロンプトは「見た目」でなく「挙動」を書く

AIにスクロール演出を組ませる際のコツとして繰り返し指摘されているのが、色や形といった見た目の描写だけでなく、「いつ始まり、いつ終わるか」という時間軸の挙動まで言葉にすることだ。たとえば「このセクションはビューポートに入った瞬間にアニメーションが始まり、セクションの高さ分スクロールし切ったところで完了する」というように、開始条件と終了条件をセットで指示すると、AIが生成するコードの精度が上がるとされる。

ネイティブのCSS Scroll-Driven Animations（animation-timeline: view() など）を使えばJavaScriptなしでGPU駆動のパララックスやプログレスバーを組めるが、AIに実装を任せる場合も「GPUで動く実装にする」「スクロールイベントの監視でなくIntersection Observerを使う」といったパフォーマンス面の制約を先に伝えておくと、後から手直しする手間が減る。

実例で挙動を確認する

実際にどんな見え方になるかは、文章より実例を見た方が早い。スクロールスクラブ系のAI生成サイトを70件以上集めたギャラリーa1.gallery「Scroll animation AI」では、映像素材の使い方や演出のテンポの違いを横並びで比較できる。自分のプロジェクトでどの程度の演出が適切か判断する際の参考になる。

3D表現を絡めたい場合は、テキストや画像からその場で3Dシーンを生成できるSpline AIのような、Reactへの直接エクスポートに対応したツールを組み合わせる選択肢もある。動画のフレームシーケンスと3Dオブジェクトを併用し、要所だけ立体表現を効かせる構成も増えている。