video-to-landing-page

動画 → スクロール連動ランディングページ

時間の経過ではなく、スクロールに合わせて動画が再生される、シネマティックなランディングページを作成します。Apple の製品ページや GitHub Copilot のランディングページのようなデザインです。元動画からフレームを抽出し、ユーザーのスクロールに合わせて切り替えます。スティッキーヒーローの下には、通常のスクロールで表示されるコピーと CTA のセクションを配置します。

呼び出すタイミング

• ユーザーが動画を渡し、ランディングページ、スクロールサイト、スクロールフレームヒーロー、または動画からウェブサイトを作成してほしいと依頼した場合
• 「Apple風スクロール」「GitHub Copilotのランディングページ」「スクロール連動再生」「スクロールに合わせてフレームを切り替える」といった言及がある場合
• ヘブライ語での同等表現：「דף נחיתה מסרטון」、「אתר עם גלילה」、「סרטון בגלילה」

保存場所

デフォルト： ~/Documents/yuv-projects/landings/<slug>/ — ランディングページはいつでも見つけられるよう、必ずここに保存します。親ディレクトリが存在しない場合は作成します。

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Build <slug>/ here.

最終パス：~/Documents/yuv-projects/landings/<slug>/。作成の最後に、ランディングページの保存場所をユーザーに伝えてください。

---

ワークフロー（8 ステップ）

1. ソースを調べる — ffprobe で長さ、fps、寸法、音声を確認します。
2. フレーム数を選ぶ — デフォルトは 80 です。下限は 40（これより少ないとカクつきます）、上限は 160（ページが重くなります）です。動画の長さに応じて選びます：10 秒以下 → 50、10〜30 秒 → 80、30〜60 秒 → 120、60 秒超 → 160。
3. 出力ディレクトリを決める — デフォルトは ~/Documents/yuv-projects/landings/<slug>/ です。<slug> は動画名またはトピックから付ける短い名前です。明示的なリクエストがある場合のみ変更します。
4. フレームを抽出する — references/extract-frames.py <source-video> <output-dir> [count] を実行します。output-dir/frames/f_0001.jpg… の形式で出力されます。JPG 品質は 82 で統一され、最大幅は 1920 です（ソースがこれより大きい場合は縮小されます）。
5. コピーしてカスタマイズする — references/landing-template.html を output-dir/index.html にコピーします。
   • __FRAMES__ プレースホルダーを、各フレームの <img> タグに置き換えます（--build-html を指定すると、ビルドスクリプトが自動で行います）。
   • __HEADLINE__、__TAGLINE__、__CTA_TEXT__、__CTA_HREF__、セクションの内容を入力します。
   • ヘブライ語のコンテンツの場合は、<html lang="he" dir="rtl"> を設定し、フォントを Rubik/Assistant に切り替えます（references/design-notes.md を参照）。
6. フレームを最適化する — ビルドスクリプトによって、すでに最大幅 1920px に縮小されています。ページ全体の容量が 12 MB を超える場合は、品質を 75 に下げるか、フレーム数を減らします。
7. プレビューする — 出力ディレクトリ内で python -m http.server を実行し、http://localhost:8000 を開きます。十分な性能のマシンでは、スクロールは滑らかに動作します。
8. デプロイする — フォルダーを Vercel/Netlify/Cloudflare Pages に配置します。ビルド手順は不要です。

スクロールの仕組み

• 外側のスクローラー .scroll-stage の高さは、ビューポート単位で設定します（デフォルトは 600vh で、すべてのフレームを表示するには画面 5 枚分スクロールします）。
• スティッキーヒーローは position: sticky; top: 0; height: 100vh とし、すべてのフレームを絶対配置します。有効なフレーム以外は非表示にします。
• スクロールリスナーで progress = scrolledIntoStage / scrollableHeight を計算し、値を 0〜1 に制限します。
• idx = floor(progress * (N - 1)) — そのフレームに .active クラスを設定します。
• 60fps を維持するため、リスナーを requestAnimationFrame でラップします。

デザインルール

• プロジェクトがYUV.AIブランド（Yuval本人、ポートフォリオ、ブランド）の場合は、yuv-design-systemを呼び出し、媒体に合わせてモードを固定します —
  • ネオンモード（YUV.AIのウェブサイトではデフォルト）：鮮やかなピンク（#FF1464）＋ネオンシアン（#00E5FF）＋白または濃い黒のキャンバス。Anton＋Inter（英語）／Rubik＋Assistant（ヘブライ語）。角丸は0pxまたは999px。
  • ウォーム・エディトリアルモード：Hope、Marcus、bigcats.ai、practical.yuv.aiに限り使用します — ピンク＋黄色＋ボーン。オフホワイトは純粋な#fffにしないでください。
  • ランディングページにデッキモード（Fly Highの紫／黄色）は絶対に使用しないでください — この配色はスライドデッキ専用です。
• プロジェクトがYUV.AIブランドではない場合は、yuv-design-systemを適用しないでください。元の動画の雰囲気に合う配色を選んでください。Anton＋Interは妥当なデフォルトですが、必須ではありません。
• ヒーローのオーバーレイは控えめにします — ビネットと大きな見出しを1つだけ使い、画面を覆い尽くさないでください。
• ヒーローより下のセクション：明るいキャンバス（ネオンモードでは白、ウォーム・エディトリアルではオフホワイト、汎用的な暖色系の場合はボーン）、大きなAntonの見出し、Interによる18〜22pxの本文、シャープなピル型のCTA（border-radius: 999px） — ネオンモードではピンクの塗りつぶし、それ以外ではブランドに合った色にします。
• ヘブライ語の場合：RTLに従い、見出しにはRubik 900、本文にはAssistant 400/500を使用します。

ファイル参照

ファイル	目的
references/extract-frames.py	ffmpegベースのフレーム抽出ツール。必要に応じてHTML全体を一度に生成します
references/landing-template.html	スクロールの仕組みを備えた、自己完結型のランディングページ用スケルトン
references/design-notes.md	タイポグラフィ、配色、モーションのデフォルト設定