Cumulative Layout Shift（CLS）は、ページを表示している途中で予期せずレイアウトが移動した量を表す、Core Web Vitalsの指標です。読み込み中の視覚的な安定性を評価するもので、要素の移動距離と影響範囲からシフトスコアを求め、その値を累積して測ります。
- 画像や広告、フォント、動的挿入によって、ボタンや文章が動く問題を特定できます。
- セッションウィンドウなどの規則で累積する際、ユーザー操作による移動とは区別して扱います。
- 予約領域や更新方法を見直すときの判断材料として使います。
AI駆動開発の基本や工程ごとの活用方法、費用・期間への影響については、無料ホワイトペーパー「【2026年最新版】AI駆動開発の完全ガイドブック」で詳しく解説しています。
Cumulative Layout Shiftの定義と役割
画面を読んでいる途中で文章やボタンが動くと、読み間違いや誤クリックにつながります。そこで、表示中に予期しない要素の移動が起きた範囲と大きさを測ります。CLSは、ページ表示中に予期せずレイアウトが移動した量を表すCore Web Vitalsの指標で、読み込み中の視覚的な安定性を評価します。
Cumulative Layout Shiftの仕組み｜計算と判断の流れ
1. 目的とデータの単位の定義
まず開発会社は、ページの種類と利用者の操作を分けて考えます。そのうえで、移動した要素、移動距離、影響範囲を特定します。
2. 候補設定の確認
移動の候補として、画像の寸法や広告枠、フォントの切り替えを確認します。動的な挿入も見たうえで、利用者の操作による移動と区別します。
3. 結果を判断に使える形への整理
まずCLSを中心に、移動した要素と影響範囲を追います。さらに、画像の寸法や広告枠、フォントの切り替えを、ページ種別ごとの75パーセンタイルで見ます。
Cumulative Layout Shiftの使い方｜実務での適用場面
小さな検証からの開始
まずは小さな範囲で、画像と広告、フォント、動的挿入による予期しない移動を特定します。次に、実際の利用者の計測で確認します。
評価期間と利用者条件の統一
比較するときは、ページ種別、接続条件、利用者の環境を明示したうえで、同じ条件の分布を比べます。
本番運用への移行
本番では、入力の欠損率や分布、結果の品質を監視し、処理時間やエラー率も確かめます。悪化したときに備えて、再学習や再推定の条件、承認者、ロールバック先を決めておきます。さらに、検証時と同じ集計ができるログを残します。
Cumulative Layout Shiftと関連手法の違い
CLSは視覚的な位置変化、LCPは主要な要素の表示時刻、INPは操作への応答性を測る指標です。ただし、速度が速くても移動が大きいページは使いにくくなります。
比べるときは、データの分割と目的、評価期間をそろえ、前処理や計算予算も同じにします。手法ごとに答えられる問いが違うときは、単純な順位付けを避けます。
代わりに判断表を作り、精度や安定性を比べます。説明、費用、保守性も同じ表に並べます。
Cumulative Layout Shiftの評価方法｜数値だけに頼らない読み方
主要指標と不確実性
まずCLSと移動要素、影響範囲を確認します。そのうえで、画像寸法の指定や広告枠、フォント交換の状態を見ます。最後に、75パーセンタイルの値も確認します。
診断と再現性
平均値だけでなく、期間別やグループ別、極端なケースごとの結果も確認します。さらに、設定を変えた感度分析や別データでの確認、複数シードでの再実験を行います。これは、結論が一つの偶然に依存していないかを点検するためです。
Cumulative Layout Shiftで起きやすい失敗と対策
データと前処理の問題
全データで集計や標準化、補完をしてから分割すること、未来の値を入力に含めること、評価対象を結果を見て選ぶことは、性能や推定を楽観的にしてしまいます。そのため、前処理は学習側に限り、処理の前後で件数と値域を監査します。
指標と問いの混同
画像の寸法を予約しない、広告枠が変動する、上部に挿入するといったことが起きやすいです。さらに、フォントの切り替えや、実験室のデータだけで判断することも挙げられます。まず、どの描画段階が遅いかを確かめ、計測結果に基づいて対策を選びます。
運用条件の変化の見落とし
ブラウザやページ構成、接続条件、計測方法の変化を監視し、そのうえで再計測の条件を決めます。
Cumulative Layout Shiftを採用する判断基準
読み間違いや誤クリックを防ぎたいページでは、レイアウトの安定性を品質要件に入れます。そのうえで、主要なテンプレートを継続して監視します。指標だけで体験全体を判断しないよう、関連する指標と実際の利用者の計測も併せます。
説明資料には、数式やアルゴリズムに加えて、何を仮定したか、どこから先は分からないかを書きます。結果を利用する人が反証条件や適用範囲を確認できるよう、成功例だけでなく失敗例も残してください。
Cumulative Layout Shiftまとめ｜目的・前提・評価の統一
Cumulative Layout Shiftは、表示中に予期せずレイアウトが動いた量を示し、視覚的な安定性を評価します。
まず小さく検証してから適用範囲を広げ、設定、データ、評価結果を、あとから再現できる形で保存します。判断では、精度や有意性だけでなく、誤りのコストも含めて考えます。さらに、説明可能性や運用負荷、影響を受ける人への公平性も加えます。
よくある質問（FAQ）
Q. Cumulative Layout Shiftとは何ですか？
CLSは、ページ表示中に予期せずレイアウトが移動した量を表す、Core Web Vitalsの指標です。読み込み中の視覚的な安定性を評価します。
Q. Cumulative Layout Shiftはどのような場面で使いますか？
表示中に要素が動く問題を測り、画像や広告などのレイアウトの安定性を改善するときに使います。
Q. Cumulative Layout Shiftを使うときの評価指標は何ですか？
CLSを中心に、移動要素と影響範囲を確認します。さらに、画像、広告、フォントの状態と、75パーセンタイルも見ます。
Q. Cumulative Layout Shiftで起きやすい失敗は何ですか？
寸法未予約や広告変動、上部挿入に注意します。さらに、フォント切替や実データ不足にも気をつけます。
Q. Cumulative Layout Shiftと似た手法はどう使い分けますか？
CLSは視覚的な位置変化、LCPは主要な要素の表示時刻、INPは操作への応答を測る指標です。
参考資料
本記事の定義と実務上の注意は、次の公式資料をもとにしています。
web.dev公式資料、developer.mozilla.org公式資料（LayoutShift）を参照します。利用するときは、該当するバージョンの資料を確認してください。
▼開発を相談する前に読みたい無料ホワイトペーパー
・【2026年最新版】AI駆動開発の完全ガイドブック
関連資料もあわせてご覧ください。
会社紹介
株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。
また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。
もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。
・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>
株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。