スクロールすると映像が前後に動く「シネマティックスクロールサイト」が、AI動画生成とコーディングエージェントの組み合わせで個人でも作れる価格帯に入ってきました。今日は、動画をコマ送りにしてスクロールへ紐づける手法と、プロンプトから直接Three.js/WebGLコードを書き出すAIツール、そしてそれらを支えるスクロール演出ライブラリを整理します。
「動画のコマ送り」でスクロールを演出する
Appleの製品ページのような、スクロールに合わせてカメラが被写体の中を進んでいく表現の正体はシンプルで、8〜10秒の連続した1カットの動画を1フレームずつ分解し、各フレームをスクロール位置に紐づけているだけです。下にスクロールすると再生が進み、上にスクロールすると巻き戻る仕組みで、サイト自体が複雑にアニメーションしているわけではありません。
この作り方を1〜2ドル程度のコストで解説したのが、MindStudioのチュートリアルです。流れは次の5段階に整理できます。
| 工程 | 使うツール | 役割 |
|---|---|---|
| 1. コンセプト出し | Kimi K3（Moonshot AI）のチャット | 「単一連続8秒のマクロ撮影」を軸に、方向性の異なる企画を10案ほど一括生成し、好みで選ぶ |
| 2. 動画プロンプト作成 | Kimi K3 | 選んだ企画を、映像生成向けの具体的なプロンプトに書き起こす |
| 3. 映像生成 | Higgsfieldの「Cinematic Studio」 | 16:9または9:16、8秒・1080p程度で連続1カットの映像を生成 |
| 4. フレーム補間 | ByteDanceのAIGC補間ツール | 生成時は30fps程度なので60fpsへ倍化し、コマ送り時のカクつきを解消 |
| 5. スクロール実装 | Kimi Code（ターミナル型コーディングエージェント） | 各フレームを「シーン」としてスクロール位置に割り当て、サイト全体を実装 |
記事では、この最後のフレーム補間を省略することが「素人っぽく見える最大の原因」だと強調されています。動画生成が主役で、コーディングエージェントはあくまでスクロールと動画を結びつける役に徹する、という役割分担が興味深いところです。
プロンプト一発でThree.js/WebGLを書き出すAIツール
動画のコマ送りとは別に、実際にブラウザ上で動く3Dシーンをコードごと生成するアプローチもあります。VULKは「没入型3Dサイトに特化したAIサイトビルダー」を掲げ、自然言語の指示からReact Three Fiber（Three.jsのReactラッパー）ベースのシーングラフ・カメラリグ・GLSLシェーダー・スクロール連動アニメーションまでを書き出します。
| 比較項目 | VULK | テンプレート/ノーコード系ビルダー |
|---|---|---|
| 出力形式 | 実際のThree.js / WebGLコード | 動画背景やキャンバスウィジェット止まりが多い |
| カスタムGLSLシェーダー | 対応 | 非対応 |
| フルスタックバックエンド | PostgreSQL＋認証を追加可能 | 非対応 or 別サービス連携のみ |
| ソースコード書き出し | GitHub/ZIPで完全に自分の資産に | プラットフォームに縛られることが多い |
「Spline的な3Dオブジェクトの埋め込み」でも「動画ヘッダーだけの平坦なページ」でもなく、実際に動くReact Three Fiberアプリを生成してデプロイ・書き出しまで一気通貫でやる、という立ち位置です。料金はBuilderプラン月額19.99ユーロからで無料枠はありません。
スクロール演出を支えるJSライブラリの定番
AIでコードを生成する場合でも、土台になるライブラリの選択肢を知っておくと出力を評価・修正しやすくなります。2026年時点で定番なのは次の組み合わせです。
- GSAPの
ScrollTrigger— 複雑なタイムラインとスクロール連動アニメーションの業界標準。Webflowの支援により無料化されている。 - Lenis — ブラウザ標準のカクつく挙動を物理演算ベースの滑らかなスクロールに置き換える軽量ライブラリ。GSAPのティッカーと同期させてWebGLスクロール同期やパララックスを作るのに使われる。
- Motion.dev — Reactアプリ向けにシンプルなAPIでジェスチャーやレイアウトアニメーションを扱えるライブラリ。
実装ガイドでは、lenis/reactのReactラッパーを使いuseGSAPでクリーンアップを自動化する構成が2026年の標準的な書き方として紹介されています。AIにコードを生成させる際も「Lenis + GSAP ScrollTrigger」「Three.js + スクロール連動」といった具体的な組み合わせ名を指定すると、狙った演出に近づけやすくなります。
実践のコツと注意点
- フレーム補間は省略しない。 30fpsのままスクロールに紐づけると体感的に「カクつくAIサイト」になりやすく、60fpsへの補間が仕上がりを大きく左右します。
- アクセシビリティを忘れない。 スクロール連動の激しいモーションは
prefers-reduced-motionを尊重し、めまいや酔いを感じるユーザーへの配慮を入れる。 - 「一発プロンプト」では完成しない。 コンセプト出し・映像生成・補間・コーディングと工程が分かれており、ターミナル操作や複数サービスの契約に慣れが必要です。手軽さと引き換えに、まだ十分に技術的な手順であることは踏まえておきたいところです。
- コストは工程ごとに発生。 Kimiの利用料と映像生成クレジット（1クリップ数十クレジット程度）が別会計になるため、複数コンセプトを試すと積み上がります。
主な情報源
- MindStudio Blog: Build Cinematic Scroll-Driven Websites with Kimi K3 for $1
- VULK: AI 3D Website Builder — Prompt to Three.js / WebGL
- GitHub: darkroomengineering/lenis
- devdreaming.com: Next.js Smooth Scrolling with Lenis & GSAP (2026 Guide)
- Kimi Platform: Kimi K3 Quickstart
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。