スクロールすると映像がコマ送りで進み、奥行きを感じる3Dサイト。実はその正体は「AIで作った数秒の動画を1枚ずつの画像に分解し、スクロール量に合わせて表示する」テクニックです。AIツールだけで作る手順をまとめます。
実際のデモ
この手法で作った例です。下の枠の中でスクロールすると、空中で静止した人物の周りをカメラが回り込む“バレットタイム”がコマ送りで進みます。このデモは pollo.ai で生成した動画を、コマ送り（連番画像）にして作成しています。
仕組み：なぜ3Dに見えるのか
4秒ほどの動画を連番画像（コマ）に分解し、マウスのスクロール量に応じて1枚ずつ切り替えて表示します。スクロールで“動画をコマ送り”することで、奥行きや立体感のある演出になります。これは Apple の製品ページなどで知られる「スクロール連動の画像シーケンス」という王道手法を、AIで素早く作る、というアプローチです。
制作手順（AIだけで完結）
- ヒーロー画像を作る：ChatGPT の画像生成で、良い感じのヒーロー画像を作成する。
- 動きのプロンプトを作る：Claude に「Seedance用の動きのプロンプトを作って」と依頼する。
- 動画にする：そのヒーロー画像と動きのプロンプトを Seedance や pollo.ai などの動画生成AIに渡し、数秒の mp4 を生成する（上のデモは pollo.ai で生成）。
- コマに分解する：Claude に「この mp4 を JPG連番に変換して出力して」と依頼し、1枚ずつの連番画像を書き出す。
- LPにする：Claude に「
3d-scroll-websiteスキルを読み込んでLPを作って」と依頼。スキルが、連番画像をスクロールに同期して表示するコードを生成してくれる。
ポイントは、各工程を別々のAIに任せていること。画像＝ChatGPT、動き＝Seedance、変換とサイト化＝Claude、という分担です。
使うツールまとめ
| 工程 | ツール | 役割 |
|---|---|---|
| ヒーロー画像 | ChatGPT（画像生成） | 元になる1枚を作る |
| 動きの指示 | Claude | 動画生成用プロンプトを作成 |
| 動画化 | Seedance / pollo.ai | 画像＋プロンプトから数秒のmp4（本デモは pollo.ai） |
| コマ分解 | Claude | mp4 → JPG連番に変換 |
| サイト化 | Claude＋3d-scroll-website スキル | スクロール連動LPのコード生成 |
📦 この手法を再現するための自作スキルを配布しています：3d-scroll-website（GitHub）。連番画像をスクロール同期で表示する雛形と手順が入っています。
別のツール構成でも作れる
各工程のツールは置き換え可能です。例えば、同じ手法を別のツールで作る方法として、Prajwal Tomar 氏が紹介している構成があります。
- ChatGPT でプロンプトを作り、Whisk で開始フレームと終了フレームの画像を生成。
- Google Flow の「frames to video」で、その2枚から動画を生成（間の動き・回転・奥行きを自動補完）。
- ezgif の video-to-jpg で動画をJPG連番に変換（30fps・約240枚。多いほど滑らか）。
- Cursor で Next.js プロジェクトを作り、frames を public に置いて sticky スクロールを実装。
「画像生成 → 動画化 → フレーム分解 → スクロール実装」という流れは共通で、ツールは好みや手持ちに合わせて選べます（参考: Prajwal Tomar 氏の解説）。
技術的な裏側（仕組みを知っておくと調整しやすい）
- 事前読み込み：表示前に全コマをプリロードしておくと、スクロール時のカクつきを防げる。
- スクロール→コマ番号：スクロール位置を「何枚目の画像か」に変換し、その画像を表示（canvas描画や img の差し替え）。
- 滑らかさ：描画は requestAnimationFrame に乗せると滑らか。
- 枚数と画質のバランス：コマが多いほど滑らかだが重くなる。解像度・圧縮（JPG/WebP）で最適化する。
注意点
- 表示速度・容量：連番画像は重くなりがち。枚数・解像度・圧縮を抑え、モバイルでは軽量版を用意する。
- アクセシビリティ：
prefers-reduced-motion（動きを減らす設定）を尊重し、スクロールの“乗っ取り感”を出しすぎない。 - 権利・規約：AIで生成した画像・動画の商用利用条件は各ツールの規約を確認する。生成系ツールは有料枠が必要な場合も。
この手法は、Appleの製品ページなどで広く使われている「スクロール連動の画像シーケンス」です。各ツール名・仕様は公開時点のものです。収集・要約はAI、公開判断は人。