CSS-Tricks が Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions（2026-06-08）で、スクロールに連動した演出を CSS ネイティブで実装する手法を整理しました。animation-timeline: scroll() / view() 関数、animation-range、そして container query の scroll states（@container scroll-state(...)）といった機能群によって、これまで GSAP ScrollTrigger や Intersection Observer などの JS で実装していた「スクロール量に連動して要素を動かす」「ある地点で発火させる」「スクロール状態に応じて見た目を切り替える」処理が、CSS だけで宣言的に書けるようになりました。View Transitions とも組み合わさり、スクロール演出の作り方そのものが変わりつつあります。
受託 Web 制作の現場では、「ヒーローのパララックスや出現アニメーションのためだけに重い JS アニメーションライブラリを入れ、依存ツリーが膨らみ、低スペック端末でカクつき、バージョン追従とバグ対応で保守コストが積み上がる」という事故が繰り返されてきました。受託で Web 制作を支える立場では、これは 「最新の CSS が使えるか」ではなく、「JS 依存を減らし、保守しやすく、低スペック端末でも軽く、prefers-reduced-motion に配慮したスクロール演出を、未対応ブラウザのフォールバックまで含めて引き渡せるか」を設計に組み込む課題だと捉えています。これまで 脱JSのオーバーレイUIを受託で（GH Media） で扱った JS 依存の削減方針、モダンCSSのネイティブ機能を受託で使う（GH Media） で扱った ネイティブ CSS の取り込み方針と接続して、本記事では 「スクロール演出のCSSネイティブ実装支援」を 受託パッケージとして整理します。
なぜ「いま」スクロール演出を作り直すのか
| 観点 | JSアニメーション実装（従来） | CSSネイティブ（2026） |
|---|---|---|
| 依存 | GSAP / ScrollTrigger を追加 | 追加ライブラリ不要 |
| 連動ロジック | スクロールイベントで JS 計算 | animation-timeline で宣言的に指定 |
| 発火検出 | Intersection Observer で監視 | view() / scroll states が自動 |
| 実行スレッド | メインスレッドで再計算しがち | コンポジタ側で軽く動く |
| バンドルサイズ | 数十 KB 増える | ほぼゼロ |
| 保守 | バージョン追従が必要 | ブラウザ標準で陳腐化しにくい |
| アクセシビリティ | 自前で減衰制御 | prefers-reduced-motion と統合 |
つまり 「JS ライブラリで演出する」ことと「軽くて保守しやすく依存の少ないスクロール演出を届ける」ことは別物であり、受託でも 「連動ロジックを CSS に寄せ、減衰と停止を設計し、フォールバックを用意して引き渡す」ことが品質の前提になりました。これにより 「JS 依存を減らし、Core Web Vitals を悪化させない構成」を成果物として保証できます。
scroll-driven / scroll-triggered / scroll states / view transitions の違い
この4つは混同されがちですが、「何に連動するか」「いつ起きるか」が別物です。受託では最初にここを切り分けることが、過剰実装を避ける鍵になります。
① scroll-driven（スクロール量に連動）
animation-timeline: scroll() を使い、スクロールの進捗そのものをアニメーションの時間軸にする手法です。スクロールを戻せば演出も巻き戻ります。プログレスバーやパララックスのように「位置に正比例して連続的に変化させたい」場合に向きます。
② scroll-triggered（ある地点で発火）
animation-timeline: view() と animation-range を使い、対象要素がビューポートに入った地点で演出を発火させる手法です。Intersection Observer で担っていた「出現したらフェードイン」の置き換えで、animation-range: entry 0% cover 30% のようにどの可視範囲で動かすかを宣言できます。
③ scroll states（スクロール状態に応じた切り替え）
container query の scroll states（@container scroll-state(...)）で、「スクロールされたか」「端に張り付いているか（stuck）」「スナップ位置か」といった状態に応じて見た目を切り替えます。ヘッダーを縮める、position: sticky 中だけ影を付ける、といった用途に向きます。
④ view transitions（画面遷移・状態変化の補間）
View Transitions API は DOM の変化前後をブラウザが補間するもので、スクロール連動とは独立した軸です。スクロール演出と組み合わせることはできますが、役割は「遷移の補間」であり混同しないことが重要です。
/* scroll-driven: スクロール進捗に連動 */
.progress-bar {
animation: grow linear;
animation-timeline: scroll(root block);
}
/* scroll-triggered: ビューポート進入で発火 */
.fade-in {
animation: fade linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}受託で提供する「スクロール演出のCSSネイティブ実装支援」5フェーズ
フェーズ 1: 棚卸し・診断（1 週間）
- 既存サイトのスクロール演出（パララックス / 出現 / 追従ヘッダー等）の洗い出し
- 使用中の JS ライブラリと依存サイズ・スクロール処理の計測
- 対応ブラウザ要件・アクセシビリティ要件の確認
- 成果物: スクロール演出棚卸し表 + 依存・脱却可否レポート
フェーズ 2: 設計（1 週間）
- 各演出を scroll-driven / scroll-triggered / scroll states のどれで作るかの切り分け
- フォールバック方針（未対応ブラウザの挙動）と
prefers-reduced-motion時の減衰方針の決定 - View Transitions との併用要否の判断
- 成果物: 実装方針書 + フォールバック・減衰設計書
フェーズ 3: 実装（1〜3 週間）
animation-timeline/animation-range/ scroll states による連動実装prefers-reduced-motionでの停止・減衰の実装- 未対応ブラウザ向けフォールバックの実装
- 成果物: 実装済みコンポーネント + 実装標準ドキュメント
フェーズ 4: 検証・引き渡し（1 週間）
- 主要 / 未対応ブラウザ・低スペック端末での表示・フレームレート検証
prefers-reduced-motion有効時の挙動・Core Web Vitals への影響検証- 成果物: 検証レポート + 保守手順書
フェーズ 5: 継続保守（継続）
- ブラウザ対応状況の定点観測
- フォールバックの段階的撤去判断
- 新規スクロール演出の追加実装
受託向け実装標準セット
| 用途 | 推奨 | 避ける |
|---|---|---|
| スクロール量連動 | animation-timeline: scroll() | スクロールイベントで JS 再計算 |
| 進入で発火 | view() + animation-range | Intersection Observer の常用 |
| 状態切り替え | scroll states（scroll-state()） | JS でのクラス付け替え乱用 |
| 減衰制御 | prefers-reduced-motion で停止 | 減衰なしの一律再生 |
| フォールバック | 機能検出 + 静的表示 | 未対応ブラウザ放置 |
| ライブラリ | 標準で足りれば不採用 | 演出のためだけに重い依存追加 |
どの案件に必要か / 不要か
| 必要な案件 | 優先度が低い案件 |
|---|---|
| パララックス・出現演出を多用する LP | 演出がほぼないサイト |
| JS 依存を減らしたい長期運用サイト | 短命なキャンペーンページ |
| 低スペック端末でのカクつきを直したい | 想定端末が高性能のみ |
| アクセシビリティ・CWV が要件 | 制約がほぼない |
| 既存アニメライブラリの保守に疲れている | 既存実装で問題が出ていない |
受託契約に書く6つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| 対象範囲 | 作り直す演出の種類 | パララックス/出現/追従の境界 |
| 対応ブラウザ | 保証する範囲 | フォールバックの程度 |
| フォールバック | 未対応時の挙動 | 演出なし表示の許容度 |
| 減衰・配慮 | prefers-reduced-motion 基準 | 検証範囲 |
| 引き渡し | 実装標準 / 保守手順 | 保守体制 |
| 継続保守 | 対応状況の監視 | 運用費用 |
価格モデル — スクロール演出実装パッケージ
| プラン | 金額 | 対象 | 内容 |
|---|---|---|---|
| 診断 | 20 万円〜 | 1 サイト | 棚卸し + 脱却可否レポート |
| 標準実装 | 80 万円〜 | 中規模 | 主要演出の実装 + 減衰・フォールバック |
| 本格対応 | 160 万円〜 | 大規模 | + 全演出の作り直し + CWV / アクセシビリティ検証 |
| Lite 保守 | 3 万円〜 / 月 | 小規模 | 対応状況監視 + 軽微修正 |
| Standard 保守 | 10 万円〜 / 月 | 中規模 | + フォールバック撤去判断 + 新規実装 |
顧客側 ROI 試算（演出多用サイト想定）
| 項目 | JSアニメ実装 | CSS 中心で実装 | 差分 |
|---|---|---|---|
| 依存ライブラリ | 複数を抱える | 削減 / 撤去 | 依存ツリーの縮小 |
| バンドルサイズ | 数十 KB 増 | ほぼゼロ | 表示速度の改善 |
| スクロール処理負荷 | メインスレッドを圧迫 | コンポジタ側で軽量 | 体感のなめらかさ向上 |
| バグ対応 | バージョン追従で発生 | ブラウザ標準で減少 | 保守工数の削減 |
| 保守工数 | 継続的に発生 | 大幅圧縮 | 運用コストの低減 |
| 年間効果 | — | — | 依存削減 + CWV 改善 + 保守工数圧縮 |
診断（20 万円〜）だけでも、「いまのスクロール演出が、どれだけ JS 依存を減らし、どれだけ表示を軽くできるか」を可視化できること自体に価値があります。演出のためだけに抱えたライブラリの保守コストとパフォーマンス劣化は、たいてい数年かけてじわじわ効いてきます。Core Web Vitals への影響評価は Core Web Vitals 改善ガイド（GH Media） も併読してください。
ハマりやすい5つの落とし穴
落とし穴 1: prefers-reduced-motion を無視する
演出を一律に再生し、動きに敏感な利用者に苦痛を与えます。prefers-reduced-motion で停止・減衰を最初から織り込みます。
落とし穴 2: 低スペック端末でのカクつきを見ない
高性能端末でのみ確認し、現場の中位機種でフレーム落ちします。想定端末で実機のフレームレートを検証します。
落とし穴 3: Safari 等のフォールバックを用意しない
未対応ブラウザで演出が消えるどころかレイアウトが崩れます。機能検出と静的表示のフォールバックを先に用意します。
落とし穴 4: 過剰演出で CWV を悪化させる
演出を盛りすぎてレイアウトシフトや描画負荷が増えます。演出は要点に絞り、CWV への影響を測りながら追加します。
落とし穴 5: アクセシビリティを後回しにする
連動演出がフォーカスや読み上げの妨げになります。支援技術での操作・読み上げを織り込みます。詳細は Webアクセシビリティ実装ガイド（GH Media） を参照してください。
90日アクションプラン
| 週 | アクション |
|---|---|
| Week 1 | スクロール演出の棚卸し + 依存・処理負荷計測 |
| Week 2 | 脱却可否の判定 + フォールバック / 減衰方針決定 |
| Week 3〜5 | scroll-driven / triggered / states の実装 |
| Week 6 | 主要 / 未対応ブラウザ・低スペック端末での検証 + 手順整備 |
| Week 7〜13 | 対応状況ウォッチ + フォールバックの段階撤去 |
まとめ — 「ライブラリで動かす」から「依存を減らして引き渡す」へ
animation-timeline: scroll() / view() や scroll states が実用域に入ったことは、スクロール演出の作り方を「JS ライブラリでイベントを監視して計算する」から「CSS で宣言的に連動させる」へと押し進めます。受託で Web 制作を支える立場では、連動を CSS に寄せ、減衰とフォールバックを設計し、低スペック端末でも軽く動く状態で引き渡す 「スクロール演出のCSSネイティブ実装支援」が、依存と保守コストを減らし Core Web Vitals を損なわない成果物を届ける主力サービスです。
弊社では診断 / 標準実装 / 本格対応 / Lite / Standard の各段階で本パッケージを提供しています。「演出のためだけのライブラリを外したい」「低スペック端末のカクつきを直したい」「prefers-reduced-motion に配慮した演出に作り直したい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
