動画 → スクロール駆動ランディングページ
ヒーローセクションが時間ではなくスクロールで再生される動画となる、Apple製品ページやGitHub Copilotランディングのようなシネマティックなランディングページを構築します。ソース動画からフレームが抽出され、ユーザーのスクロールに応じて切り替わります。スティッキーなヒーローの下には、通常のスクロールでコピーとCTAが表示されるセクションが続きます。
いつ呼び出すか
- ユーザーが動画をドロップし、ランディングページ、スクロールサイト、スクロールフレームヒーロー、動画からのウェブサイトを依頼した場合
- 「Appleスタイルのスクロール」「GitHub Copilotランディング」「スクラブオンスクロール」「フレームオンスクロール」といった言及があった場合
- ヘブライ語での同等表現: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"
保存場所
デフォルト: ~/Documents/yuv-projects/landings/<slug>/ — 後で見つけられるよう、ランディングページは常にここに保存します。親ディレクトリが存在しない場合は作成します。
mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# ここに <slug>/ を構築します。
最終パス: ~/Documents/yuv-projects/landings/<slug>/。ビルドの最後に、ランディングページがどこにあるかをユーザーに伝えます。
ワークフロー（8ステップ）
- ソースを調査 —
ffprobeで再生時間、fps、解像度、音声を取得。 - フレーム数を決定 — デフォルトは
80。下限は40（これ以下だとカクカク）、上限は160（ページが重くなる）。再生時間で選択: ≤10秒 → 50、10–30秒 → 80、30–60秒 → 120、>60秒 → 160。 - 出力ディレクトリを決定 — デフォルトは
~/Documents/yuv-projects/landings/<slug>/。<slug>は短く、動画ファイル名またはトピックから派生させます。明示的な要求があった場合のみ上書きします。 - フレームを抽出 —
references/extract-frames.py <source-video> <output-dir> [count]を実行。output-dir/frames/f_0001.jpgを出力。品質はJPG 82、最大幅1920px（ソースがより大きい場合はダウンスケール）。 - コピーしてカスタマイズ
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を参照）。
- フレームを最適化 — ビルドスクリプトは既に最大幅1920pxにスケーリングしています。ページ全体のサイズが12MBを超える場合は、品質を75に下げるかフレーム数を減らします。
- プレビュー — 出力ディレクトリ内で
python -m http.serverを実行し、http://localhost:8000を開きます。スクロール感は適切なマシンで滑らかです。 - デプロイ — フォルダを 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クラスを切り替え。- リスナーを
requestAnimationFrameでラップし、60fpsを維持。
デザインルール
- 指定があればプロジェクトのデザインシステムを使用し、そうでなければ yuv-design-system スキルをデフォルトとして使用: Anton + Inter（英語）/ Rubik + Assistant（ヘブライ語）、Fly Highパープル（
#5E17EB）+ イエロー（#FFEC00）+ グレー（#F1F2F2）のパレット、オフホワイト（純粋な#fffは不可）、0px または 999px の角丸（8–12pxの角は不可）。Warm Editorial（ピンク+イエロー+ボーン）は Hope/bigcats ブランドファミリー専用です。 - ヒーローのオーバーレイは控えめに — ビネットと一つの大きな見出しのみ。フレームを埋め尽くさないこと。
- ヒーロー下のセクション: ボーンの背景、大きな Anton 見出し、18–22px の Inter 本文、シャープなピンクの長方形に Anton テキストのCTA。
- ヘブライ語の場合: RTLを尊重し、見出しには Rubik 900、本文には Assistant 400/500 を使用。
ファイル参照
| ファイル | 目的 |
|---|---|
references/extract-frames.py | ffmpegベースのフレーム抽出ツール。オプションで一度に完全なHTMLをビルドする |
references/landing-template.html | スクロールメカニズムを備えた自己完結型ランディングページのスケルトン |
references/design-notes.md | タイポグラフィ、パレット、モーションのデフォルト |