定義
スクロールを下げると画面が「1段階 → 2段階 → 3段階」と物語のように展開するランディングページを、重いアニメーションライブラリなしで作りたいときに使う構造だ。スクロールをどれだけ下げたか（進行度）を、物語の再生時間軸のように使うのが核心である。
正確に言えば、スクロール駆動ナラティブレイアウトはスクロール進行度をナラティブタイムラインとして使うページ構造だ。長いラッパーの中に position: sticky（スクロールしても画面の特定位置に貼り付いて固定される CSS 配置）ステージを置き、scroll() / view() タイムライン（スクロール位置・要素のビューポートへの進入をアニメーションの再生進行に結びつける CSS 機能）・animation-timeline・純粋 CSS @keyframes（時間に沿ったアニメーション段階を CSS で定義する構文）で、段階遷移・進行表示・要素の登場を同期させる。GSAP・Lenis・Framer Motion のような JS アニメーションライブラリなしでも「Before → During → After」のような製品ストーリーを作れる。
なぜ必要か
ランディング・オンボーディング・技術ブログのホームは、1 ページの中で複数の段階を説得する必要がある。JS スクロールライブラリはバンドル・hydration（サーバーが作った HTML に React がイベントを付けて実際に動くようにする過程）・メインスレッドのコストを追加し、prefers-reduced-motion（ユーザーが OS で「動きを減らす」をオンにしているか検知する CSS メディアクエリ）のフォールバックが複雑になる。2026 年に話題のスタートアップランディング（Granola・Browserbase など）は、scroll-timeline + DOM デモの組み合わせで「生きている製品」の感覚を出す。mp4 ヒーローに比べてテキストが鮮明で、スクロールとフレーム単位で合わせやすい。
動作原理
2 層に分ける。
1) Sticky scrollytelling（区間遷移）
スクロール進行度 p ∈ [0,1] を JS scroll リスナーまたは animation-timeline: scroll() で読み取り、phase = floor(p × 段階数) を選ぶ。ラッパーの高さが 段階数 × 100vh なら、1 画面につき 1 段階ずつ進む。
| 要素 | 役割 |
|---|---|
| 長いラッパー | スクロール「時間軸」を確保 |
| sticky stage | 視覚フレームを固定 — コンテンツだけ入れ替え |
| phase rail | 現在の段階・次の CTA をテキストでアンカー |
| reduced motion | sticky を解除し、全段階を静的に並べる |
2) Pure CSS loop demo（ヒーロースロット）
ヒーロー右側のライブノートデモのように、14s の循環演出は JS なしで keyframes だけを使う。
- 場所の予約:
min-height+opacity/transformだけをアニメーション — DOM 挿入なし → CLS（Cumulative Layout Shift、ロード中に要素が押されて画面が揺れる度合いを測る指標）0 - タイピング:
clip-path: inset()+steps()ワイプ — 韓国語もグリフ単位で安全 - 昇格演出: TIL カード → 接続線 → Knowledge カードの順次
animation-delay - reduced motion: 最終状態（昇格完了）に固定
3) View entry（補助レイヤー）
リスト・カードは @supports (animation-timeline: view()) の中で view-reveal により登場する。スクロールナラティブとは独立 — 非対応ブラウザは即時表示。
実務適用
チェックリスト:
- sticky 親に
overflow: hiddenを付けない — sticky が死ぬ。 - デモは
aria-hidden+ 実際のリンクは別に持つ — 装飾 UI とナビゲーション契約を分離。 - phase 遷移は transition、ループデモは keyframes — 役割を混ぜない。
- モーション縮小時は静的フォールバック — 情報を失わずに段階を並べる。
トレードオフ
| 選択 | 利得 | コスト |
|---|---|---|
| CSS scroll-timeline | 0kb、compositor（レイアウト再計算なしで GPU 合成するレンダー段階）に親和的 | Safari・旧型ブラウザのフォールバックが必要 |
| sticky + JS phase | 精密な制御、リンク・フォーカス可能 | scroll listener または rAF のコスト |
| pure CSS loop demo | hydration 0、鮮明なテキスト | タイミング調整が CSS に分散 |
| mp4 ヒーロー | 制作が速い | 重い、スクロール同期が難しい |
使ってはいけない場合
- コンテンツが短くスクロールの余裕がないとき — sticky だけ残り演出が壊れる。
- アクセシビリティが核心のフォーム・決済フロー — スクロールに UI 状態を縛らない。
- SEO 本文がスクロールの後ろに隠れるとき — クローラー・低帯域で核心の文が遅れて見える。
よくある間違い
- sticky の祖先に
overflow: hidden— ステージがスクロールとともに消える。 - デモテキストを
<Link>で包む — Playwright・スクリーンリーダーの契約と衝突。 prefers-reduced-motionの未処理 — 14s ループが回り続ける疲労。- 映像デモ + scroll-timeline の二重同期 — フレームドリフト。
関連概念
- 2026-startup-landing-page-trends — Granola・Browserbase の実測パターン
- cls-skeleton-layout-reservation — デモの場所予約と CLS
- largest-contentful-paint — ヒーローアセット戦略（DOM vs video）