CSSだけで実現するスクロール連動アニメーション：scroll-timeline／view-timeline徹底ガイド

導入｜なぜ「CSSだけ」でスクロール演出を作りたいのか？

新しいLPで「スクロールに合わせて動くアニメーション」を作ったとき、カクつき・CLS悪化・JSライブラリ依存に悩んだ経験はありませんか？
私たちも「動かすほど重くなる」このジレンマに長く苦しみました。

原因の多くは、JavaScriptが毎フレームDOMを再描画していることにあります。
その解決策として登場したのが、CSS標準仕様の scroll-timeline／view-timeline。
これらを使えば、JSを使わずに「スクロール位置に連動したアニメーション」を軽量に実装できます。

本記事では、以下を現場目線で整理します。
・なぜ重くなるのか
・scroll-timeline／view-timeline の使い方
・実装パターンとライブラリ比較
・パフォーマンス／アクセシビリティ対策

一緒に、滑らかで保守しやすいアニメーションを目指しましょう。

（CSS設計や命名規則の考え方については『CSS設計で保守性と拡張性を高める方法｜BEM・OOCSS・SMACSS徹底比較』もご参照ください）

用語解説：LP（ランディングページ）
広告や検索結果などから訪問者が最初にアクセスするページ。商品やサービスの訴求・成約を目的とする。

用語解説：CLS（Cumulative Layout Shift）
ページ表示中のレイアウトのズレ量を示す指標。数値が大きいとユーザー体験が悪化する。

用語解説：JSライブラリ
JavaScriptで書かれた外部プログラム群。アニメーションやUI制御などを簡単に実装できるが、依存しすぎると保守性やパフォーマンスに影響する。

用語解説：DOM（Document Object Model）
HTML文書をプログラムから操作するための構造。JavaScriptで要素の追加・削除・変更ができる。

用語解説：scroll-timeline／view-timeline
CSSの新しい標準仕様。スクロール位置や要素の表示範囲をアニメーションの進行度（タイムライン）として利用できる。

1. なぜスクロール連動は重く／不安定になるのか

ブラウザが重くなる主因は、再描画とレイアウト再計算です。
JavaScriptでスクロールイベントを監視すると、ブラウザは毎回DOMを再評価し、結果的にジャンク（フレーム落ち）が発生します。
特にモバイルではCPU・GPUリソースが限られるため、top や left の変更は禁物。
代わりに、transform と opacity のみで動かすのが鉄則です。

■ Core Web Vitalsで見る影響点

指標	内容	アニメーションへの影響
CLS	レイアウト移動量	位置変更系アニメで悪化しやすい
LCP	メイン要素の描画速度	背景アニメが重いと遅延
INP	操作後の反応速度	scrollイベント処理が多いと悪化

（Web VitalsやCLS・LCPの詳細な解説は『CSS padding margin使い分け完全ガイド｜失敗例とベストプラクティス』をご参照ください）

改善の第一歩は合成レイヤーの活用。
will-change: transform; を適切に指定すれば、GPU描画に移行でき、再レイアウトを抑制できます。

✅ ポイント：CSSだけで「描画負荷を分離」するのが、Web Vitals対策の基本です。

用語解説：Core Web Vitals
Googleが提唱するWebページの品質指標。CLS（レイアウトの安定性）、LCP（表示速度）、INP（操作応答性）などがある。

用語解説：LCP（Largest Contentful Paint）
ページ内で最も大きな要素が表示されるまでの時間。短いほどユーザー体験が良い。

用語解説：INP（Interaction to Next Paint）
ユーザー操作から画面が反応するまでの速度。新しいWeb Vitals指標。

用語解説：再描画・レイアウト再計算
ページの一部が変化した際、ブラウザが見た目や配置を再計算・再表示する処理。頻発すると動作が重くなる。

用語解説：ジャンク（フレーム落ち）
アニメーションやスクロールがカクつく現象。1秒間に表示すべきフレーム数が落ちることで発生する。

用語解説：transform／opacity
CSSで要素の位置や透明度を変更するプロパティ。パフォーマンスに優れ、アニメーションで推奨される。

用語解説：合成レイヤー
ブラウザが要素を個別に描画・合成する仕組み。will-change指定でGPU描画に切り替わり、動作が滑らかになる。

2. 標準APIで実現するスクロールアニメーション入門（scroll-timeline／view-timeline）

■ 基本構文を押さえる

scroll-timeline はスクロール量を、view-timeline は要素の表示範囲を、アニメーションのタイムラインとして扱う仕組みです。

用語解説：アニメーションのタイムライン
アニメーションの進行度を制御する基準。scroll-timelineやview-timelineでは、スクロール量や要素の表示範囲が進行度となる。

用語解説：@keyframes
CSSでアニメーションの動きを定義する構文。from/toや%指定で状態を切り替える。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scroll-anim {
  animation: fadeIn 1s linear both;
  animation-timeline: scroll(my-timeline);
}

@scroll-timeline my-timeline {
  source: auto;
  orientation: block;
}

■ よく使うパターン

フェードイン： セクションごとの出現演出
ステップアニメーション： 進捗に合わせて棒グラフが伸びる
パララックス： 背景と前景を異なる速度で動かす

これらはすべてCSSのみで記述でき、JavaScriptのイベント監視が不要です。

（パララックスやアニメーションの実装例については『Web制作で使えるCSSアニメーション10選｜サンプルコード＆使い方解説』もご参照ください）

用語解説：パララックス
背景と前景を異なる速度で動かし、奥行き感を演出するWebデザイン手法。

用語解説：progressive enhancement（段階的強化）
まず基本機能を実装し、対応ブラウザでは追加機能を有効化する設計思想。

■ ブラウザ対応（2025年11月時点）

対応済み： Chrome／Edge／Opera
部分対応： Safari
試験中： Firefox

まだExperimental扱いですが、主要ブラウザでは十分動作します。
本番導入も「progressive enhancement（段階的強化）」の形で進められます。

3. LPで使える3つのユースケース

① ヒーロービジュアルのフェードイン

view-timeline を使い、画面に入る瞬間だけ透明度を上げます。
transform を利用すればCLSを避けつつ、自然な出現が可能です。

用語解説：ヒーロービジュアル
Webページの最上部に大きく表示されるメイン画像や動画。第一印象を決める重要な要素。

② ステップ型チャート演出

scroll-timeline の進行度を使い、要素の高さを変化させて「伸びるグラフ」を作ります。
数字をCSSの counter() と連携させれば、JSなしで進行アニメも実現可能です。

用語解説：counter()
CSSで自動的に連番やカウントアップを表示できる関数。リストやチャートの数字表示に使われる。

③ パララックス＋Sticky組み合わせ

position: sticky と transform の併用で、背景固定・前景移動の立体感を演出。
GPUで描画されるため、モバイルでも滑らかに動作します。

用語解説：position: sticky
スクロール位置に応じて要素が固定・解除されるCSSプロパティ。ヘッダーやサイドバーの固定表示に使われる。

ぜひコードをコピペして、まずは動かしてみてください。

4. 標準API vs ライブラリ比較表

比較項目	CSS標準API	GSAP ScrollTrigger	Lenis／Locomotive
バンドルサイズ	追加不要	数百KB〜MB	約数百KB
保守性	高い（標準仕様）	バージョン依存	更新頻度に注意
ライセンス	不要	商用条件あり	OSS（制限あり）
対応ブラウザ	Chrome中心	Polyfill可	同上
アクセシビリティ	標準対応	カスタム実装	カスタム実装

小〜中規模サイトではCSS標準APIで十分。
大規模・多段制御ではGSAPやLenisの採用も検討しましょう。
「どちらを選ぶか」は要件次第。重要なのは必要十分な技術選定です。

用語解説：GSAP ScrollTrigger
JavaScript製の高機能アニメーションライブラリGSAPの拡張。スクロール連動アニメを柔軟に制御できる。

用語解説：Lenis／Locomotive
なめらかなスクロールやパララックス演出を実現するJavaScriptライブラリ。デザイン性重視のサイトで利用される。

用語解説：Polyfill
古いブラウザでも新しい機能を使えるようにする追加スクリプト。

用語解説：OSS（オープンソースソフトウェア）
ソースコードが公開され、誰でも利用・改変できるソフトウェア。

5. パフォーマンス＆アクセシビリティ設計チェックリスト

アニメーションを誰でも快適に楽しめるようにするには、@media (prefers-reduced-motion) への対応が欠かせません。

@media (prefers-reduced-motion: reduce) {
  .scroll-anim {
    animation: none;
  }
}

加えて、社内レビューで以下を確認しましょう。

transform／opacity 以外を変更しない
will-change は最小限に
CLS・LCPを導入前後で計測
Lighthouseでスコアを定期チェック
フォールバック（非対応ブラウザ）を文書化

これらをチェックリスト化して共有すれば、再現性ある開発体制を築けます。

用語解説：アクセシビリティ
年齢や障害の有無に関わらず、誰でもWebを快適に利用できるようにする設計思想。

用語解説：@media (prefers-reduced-motion)
ユーザーが「動きを減らしたい」と設定している場合、アニメーションを抑制するためのCSSメディアクエリ。

用語解説：フォールバック
機能非対応の環境でも最低限の表示や動作を保証するための代替手段。

用語解説：Lighthouse
Googleが提供するWebサイトの品質評価ツール。パフォーマンスやアクセシビリティなどを自動診断できる。

6. 結論｜軽く、やさしく、標準で動く未来へ

scroll-timeline と view-timeline は、
「JSで動かす」から「CSSで制御する」 への大きな転換点です。

・Core Web Vitalsを守りながら動きを加えられる
・ブラウザ標準で長期的な保守がしやすい
・アクセシブルなUXを設計しやすい

今後は、これらの標準APIが新しいベースラインになるでしょう。
まずは既存ページの一部から導入し、滑らかさと安定性を体感してみてください。
ぜひ次のLPで「CSSだけのスクロール演出」に挑戦してみましょう。

用語解説：UX（ユーザーエクスペリエンス）
ユーザーがWebサイトやサービスを利用する際に感じる体験や満足度。

用語解説：ベースライン
技術や仕様の「最低限満たすべき基準」。今後の標準となるライン。

ROUTE

ルートゼロの
アクティビティ

CSSスクロールアニメーション完全解説｜scroll-timelineでJS不要の軽量演出を実現

CSSだけで実現するスクロール連動アニメーション：scroll-timeline／view-timeline徹底ガイド

導入｜なぜ「CSSだけ」でスクロール演出を作りたいのか？