はじめに
本ドキュメントは、Googleが定めるページエクスペリエンス指標「コアウェブバイタル」の一つ、CLS（Cumulative Layout Shift）について詳しく解説することを目的としています。CLSはページの視覚的安定性を測る指標で、ユーザーが閲覧中に要素が突然移動すると体験が悪化します。本書では定義、計算方法、評価基準、SEOへの影響、原因と改善方法まで順を追って説明します。
この章の役割
- ドキュメント全体の目的と範囲を明確にします。
- 誰に向けた内容かを示します。
読者対象
- ウェブ制作者、運用担当者、SEO担当者など、実際にページ改善を行う方。初心者でも分かるよう基礎から説明します。
期待できること
- 実際の事例や数値を用いて、CLSを測る方法と改善の優先順位が分かります。
- ページ表示の安定性を高める具体的な手順を理解して実行に移せます。
以降の章で、CLSの意味と実務での対応方法を丁寧に解説していきます。
コアウェブバイタル CLSとは
CLSとは何か
CLS（Cumulative Layout Shift）は、ページ表示中に起きる「見た目のずれ」を数値化した指標です。ユーザーが操作中にボタンや本文が動くと不快に感じますが、CLSはその不安定さを評価します。値は0に近いほど安定しています。
具体的にいつ起きるか（例）
- 画像に幅・高さの指定がなく読み込み中にサイズが変わると、下のコンテンツが押し下げられる。
- 広告や埋め込みウィジェットがあとから挿入され、表示位置が変わる。
- ウェブフォントの読み込みで文字の見た目が切り替わり、レイアウトが移動する。
なぜ重要か
突然のレイアウト変化は誤タップや読みづらさを招き、ユーザー体験を下げます。結果としてサイトの信頼性や離脱率に影響します。コアウェブバイタルの一部として、検索評価にも関係します。
測定のポイント（簡潔に）
CLSはページのライフサイクル全体で発生した予期しないシフトを合算して評価します。単発の小さな動きより、短時間に繰り返す大きな移動がスコアを悪化させます。改善の第一歩は、画像や広告にサイズを指定し、動的な挿入を最小化することです。
CLSの計算方法と具体例
計算の基本
CLSは、ビューポート内で「影響を受けた面積の割合」と「移動した距離の割合」を掛け合わせ、発生したすべてのレイアウトシフトの値を合計して算出します。
式としては、
CLS = Σ（影響面積比 × 移動距離比）
- 影響面積比：変化で影響を受けた領域がビューポート全体に占める割合
- 移動距離比：要素が移動した距離をビューポートの高さ（通常は高さ）で割った比率
具体例
1) ビューポート中央にボタンが出現し、画面の下半分が下にずれた場合
– 影響面積比 = 0.5（下半分が影響）
– 移動距離比 = 0.2（例：画面高さの20%移動）
→ このシフトのスコア = 0.5 × 0.2 = 0.10
2) ページ上部で大きな画像が後から読み込まれ、下のコンテンツを大きく押し下げた場合
– 影響面積比 = 0.6、移動距離比 = 0.4
→ スコア = 0.6 × 0.4 = 0.24（大きくなりやすい例）
3) 小さな通知バナーが少しだけ動いた場合
– 影響面積比 = 0.1、移動距離比 = 0.1
→ スコア = 0.01（ほとんど影響しない）
累積について
ページ内で複数のレイアウトシフトが起きると、それぞれのスコアを合計して最終的なCLS値になります。例えば上の例1と例2が両方起きれば、CLS = 0.10 + 0.24 = 0.34となります。
ビューポートの上部や広い領域で起きる変化ほどスコアが大きくなるため、重要な領域は事前にスペースを確保する対策が有効です。
CLSの評価基準と基準値
評価基準（Googleの定義）
- GOOD（良好）: CLS < 0.1
- NEEDS IMPROVEMENT（改善が必要）: 0.1 ≤ CLS ≤ 0.25
- POOR（不良）: CLS > 0.25
それぞれの意味
CLSの値が小さいほど、ページの視覚的安定性が高く、ユーザーは読んでいる最中にレイアウトが急に動かされる不快さを感じにくくなります。0.1未満は「視覚的に安定している」と見なされ、良いUXにつながります。0.1以上0.25は改善が望ましく、0.25を超えると明らかにユーザー体験を損ねます。
実務での扱い方
- 推奨目標はCLSを0.1以下に保つことです。これが優れたユーザー体験の出発点になります。
- 優先順位は「大きな視覚的ずれが起きる箇所」を先に直します。ユーザーが頻繁に見るページやコンバージョンに直結するページを優先してください。
測定のポイント
- フィールドデータ（実際のユーザー計測）とラボデータ（開発環境での測定）を両方確認します。
- フィールドでは75パーセンタイル（体感に近い指標）を使うと実際の問題を把握しやすいです。
小さな実践アドバイス
- まずはページごとのスコアを把握し、0.1を超える箇所を洗い出してください。改善効果が大きい箇所から手を付けると短期間で成果が出ます。
CLSとSEOへの影響
なぜCLSがSEOに関係するのか
CLSはGoogleのページエクスペリエンス指標の一部であり、検索結果の評価に影響します。ページの見た目が不安定だとユーザーが直感的に操作できず、滞在時間や直帰率に悪影響が出ます。検索エンジンはこうしたユーザー行動を評価に反映させるため、CLSの改善はSEO上も重要です。
具体的な影響例（分かりやすく）
- ボタンやリンクが移動して誤タップされるとコンバージョン率が下がります。結果として売上や問い合わせ数に悪影響が出ます。
- ページ読み込み中に広告や画像が後から差し込まれると、ユーザーが離脱しやすくなります。検索順位にも間接的に響きます。
測定と優先度の決め方
CLSは他の指標（LCPやFID/INP）と合わせて評価します。すぐにユーザー体験を損ねる要素があれば優先的に直します。したがって、トラフィックやコンバージョンに大きく影響するページから対策を始めると効果が出やすいです。
SEO対策での実践ポイント（簡潔に）
- 画像や広告には幅・高さを指定してレイアウトの空きを確保します。
- 動的に挿入する要素は予め領域を用意しておきます。
- Webフォントは適切に読み込み、表示の切替でレイアウトが崩れないようにします。
- Search ConsoleやPageSpeed Insightsでフィールドデータを定期確認してください。
どの対策もユーザー体験を直接改善します。SEOの観点から見ても、CLSの早期改善は投資に見合う効果が期待できます。
CLSの原因と改善の特徴
主な原因
- 広告や埋め込み要素の突然表示
- 例: ページ読み込み後に広告が挿入され、本文が下に押し出される。
- 画像や動画の遅延読み込み（サイズ未指定）
- 例: imgタグに幅・高さがなく、読み込み時に高さが変わる。
- ウェブフォントの読み込み
- 例: フォントが切り替わると文字幅が変わる。
- スクリプトによる動的なDOM挿入
- 例: JavaScriptで後から要素を追加してレイアウトが崩れる。
改善の特徴と利点
- 視覚的に原因を特定しやすいです。画面でどの要素が動いたかが分かれば対策が明確になります。
- 対策が直感的で即効性があります。要素のスペース確保や読み込み順の調整で大きく改善できます。
具体的な改善手順（実践的）
- 問題箇所を再現する（開発者ツールや記録動画を使う）。
- 広告や埋め込みに固定の高さ・幅を与える、あるいはプレースホルダを用意する。
- 画像は幅・高さ属性かCSSのaspect-ratioでスペースを確保する。
- フォントはpreloadするか、font-displayでフォールバックを指定する。
- 動的挿入は視覚的なシフトが起きないようCSSでreserveするか、アニメーションはtransform/opacityだけで行う。
注意点
- 改善の効果はページ構成によって異なります。まず測定してから順に対処してください。
