累積レイアウトシフト（CLS）

累積レイアウトシフト（CLS）の定義

累積レイアウトシフト（CLS）は、ページのライフサイクル全体にわたって発生する予期しないレイアウトのズレを測定するコアウェブバイタル指標です。具体的には、CLSは、描画フレーム間で可視要素が予期せず動いた際の最大バースト（連続したレイアウトシフトスコア）の合計を記録します。たとえば、広告がページ上部に読み込まれてテキストが下に押し出されたり、画像が寸法未指定で表示されたりすると、ユーザーの読みやすさを損なう視覚的不安定性が発生し、誤った要素のクリックを誘発することもあります。Googleは2021年6月にCLSをランキング要素として正式採用し、ユーザー体験と検索最適化の両面で重要な指標となりました。良好なCLSスコアは0.1以下で、視覚的な乱れが最小限であることを示します。0.1〜0.25は改善が必要、0.25を超えると不良と評価されます。

背景と歴史的経緯

累積レイアウトシフトの導入は、ウェブパフォーマンス分野におけるユーザー体験の測定方法に大きな変化をもたらしました。CLS以前は、多くの指標が読み込み速度やインタラクティビティに重点を置き、ページ要素の予期しない動きによるストレスは見過ごされがちでした。Googleの調査によると、70%以上のユーザーが定期的にレイアウトシフトを経験しており、その発生は直帰率の増加やエンゲージメント低下と密接に関連しています。この指標はWeb Incubation Community Group（WICG）によって開発され、Layout Instability APIを通じて標準化され、ブラウザでレイアウトシフトの検出と報告が可能になりました。Googleが2020年5月にコアウェブバイタルを発表した際、CLSはLCP（Largest Contentful Paint）やINP（Interaction to Next Paint）と並ぶ主要3指標の一つとなりました。CLSは当初、ページ全体の累積レイアウトシフトを測定していましたが、2021年5月にセッションウィンドウ方式が導入され、ページ全体の軽微なシフトで過度な評価低下を防ぎ、最悪のバーストに着目することで実際のユーザー体験に即した指標へと進化しました。こうした変遷は、Googleがユーザー体験に根ざした指標の開発に取り組んでいることを示しています。

技術的解説：CLSの仕組み

累積レイアウトシフトは、「インパクト比率」と「距離比率」という2つの主要要素を組み合わせた高度な計算方式で動作します。インパクト比率は、ビューポート内で不安定な要素（連続する2フレーム間で開始位置が変わる要素）が占める面積の割合です。例えば、ある要素が1フレーム目でビューポートの50%を占めており、次のフレームで位置がずれ、その前後の領域の合計が75%ならインパクト比率は0.75です。距離比率は、その要素がビューポートの最大寸法（幅または高さ）に対してどれだけ移動したかを示します。例えば、要素がビューポート高さの25%だけ下に動いた場合、距離比率は0.25となります。最終的なレイアウトシフトスコアは、これら2つを掛け合わせて算出します（0.75×0.25＝0.1875）。個々のシフトはセッションウィンドウとして1秒未満で連続発生したものを最大5秒間でグループ化し、最もスコアが高いバーストのみがCLSとして報告されます。このウィンドウ方式により、多数の小さなシフトがあるページが、不安定な大きなシフトがあるページより不当に評価が下がるのを防いでいます。

CLSの測定とスコア閾値

GoogleはCLSパフォーマンスの明確な基準を設けており、ウェブサイト運営者が視覚的安定性を把握しやすくなっています。**CLSスコア0.1以下は「良好」**で、これが目標値です。0.1超〜0.25以下は「改善が必要」で、最適化によりユーザー体験の向上が期待できます。0.25超は「不良」で、明らかな視覚的不安定性が存在し、ユーザーのストレスやエンゲージメント低下につながります。これらの閾値はページロードの75パーセンタイル値で評価され、モバイルとデスクトップの両方で分割集計されます。こうすることで、外れ値ではなく多くのユーザーの体験が反映されます。これらの基準は、数百万件に及ぶ実ユーザーデータとユーザー満足度指標の相関分析に基づいています。Lighthouseパフォーマンススコアでは25%がCLSで構成されており、全体のページ評価でも重要な要素です。これらの閾値を理解し、0.25超のページは即時対応、0.1超は継続的な最適化計画に組み込むことが効果的です。

比較表：CLSと関連パフォーマンス指標

CLSスコアが悪化する主な原因

サイズ指定のない画像や動画は、レイアウトシフトの最も一般的な原因の1つです。HTML画像タグに幅・高さ属性が指定されていないと、ブラウザは完全に読み込むまで必要なスペースを確保できず、レンダリング時に周囲のコンテンツが予期せず移動します。同様に、サイズ未指定の広告・埋め込み・iframeもレイアウト不安定化の要因です。特にサードパーティ広告では最終的な寸法管理が難しくなります。動的に挿入されるコンテンツ（一定時間後に出現するバナー、関連記事ウィジェット、展開式コメント欄など）は、事前にスペースを予約しないと既存コンテンツを押し下げます。WebフォントによるFOITやFOUT（Invisible/Unstyled Textのフラッシュ）は、カスタムフォントとフォールバックフォントの表示差でテキストが再描画され、レイアウトシフトを引き起こします。top、left、bottom、right、box-shadowなどのCSSプロパティを使った不適切なアニメーションも、レイアウト再計算を誘発します。サードパーティJavaScriptが非同期に予期しない要素を挿入したり、適切なプレースホルダーのない遅延読み込みが画像表示時にシフトを引き起こすこともあります。原因を正しく把握することで、効果的な個別対策が可能です。

CLS最適化のベストプラクティス

すべてのメディアに明示的な寸法指定を行うことがCLS最適化の基本です。画像・動画・埋め込みコンテンツにはHTMLで幅・高さ属性を設定し、読み込み前から適切なスペースを確保します。レスポンシブ対応では、CSSアスペクト比ボックス（aspect-ratioプロパティやpadding-bottomテクニックなど）で比率維持が有効です。動的コンテンツ用のスペース予約は、広告やウィジェットなどの動的要素が出現してもシフトしないようCSSプレースホルダーを活用します。アニメーションはレイアウトプロパティではなくtransformを使用し、transform: translate()やscale()で動かすことで再計算を回避します。重要なWebフォントはプリロードし、font-displayを「optional」や「fallback」に設定すれば、テキスト非表示やレイアウトシフトを防げます。既存コンテンツ上部への新規挿入は避け、ユーザーが読んでいる要素を押し下げないようにしましょう。プレースホルダー付きの遅延読み込みで画像を事前予約スペースに表示し、サードパーティJavaScriptはファーストビュー下やユーザー操作後に読込むようにします。これらを体系的に実装すれば、CLSスコアは不良（0.25超）から良好（0.1以下）まで大幅に改善できます。

CLSがユーザー体験・ビジネスメトリクスに与える影響

レイアウトシフトは、ユーザー満足度やビジネス成果に直接影響します。調査では、予期しないレイアウトシフトで読書位置を見失うことで直帰率が上昇し、ページ滞在時間が減少することが分かっています。ECサイトでは、レイアウトシフトで誤った商品やリンクをクリックしやすくなり、ストレスやカート放棄につながります。Reliveの調査では、レイアウトシフトをほぼゼロまで削減した結果、顧客体験が改善しコンバージョン率が5%向上、別の事例ではCLSを41%改善してコンバージョン率が10%上昇しました。Layout Instability APIの研究では、大きなレイアウトシフトを経験したユーザーは、意図した操作を完了せず離脱する確率が2〜3倍高いことが示されています。さらに、Googleのランキングアルゴリズムは良好なCLSスコアを持つページを優遇するため、視覚的安定性の最適化は即効的なユーザー改善と長期的なSEO効果の両方をもたらします。特に競争の激しいキーワードでは、CLSが良好なページが検索上位を維持しやすく、CLS最適化による「ユーザー体験向上・コンバージョン増・検索順位向上」の複合効果はROIの高い施策です。

CLSの文脈：ラボデータとフィールドデータの違い

ラボデータとフィールドデータでは、CLS測定値に大きな違いが生じることが多く、最適化を目指す開発者の混乱を招きます。LighthouseやPageSpeed Insightsなどのラボツールは、コントロールされた合成環境で初回ページロード時のCLSのみを測定し、最初のビューポート内で発生したシフトしか検出できません。このため、ユーザーがスクロール・メニュー操作・動的コンテンツ表示時に発生するシフトを見逃します。一方、Chrome User Experience Report（CrUX）などのフィールドデータは、実際のユーザーによる全ページライフサイクルを通じたCLSを取得し、インタラクションやスクロール中のシフトも記録します。このため、Lighthouseで良好なのにSearch Consoleのコアウェブバイタルで不良となる場合があります。RUM（Real User Monitoring）ソリューションを使えば、どのデバイス・どの操作でレイアウトシフトが発生したかの詳細まで把握できます。最適化時は、実ユーザーデータを重視しつつ、ラボデータで個別課題のデバッグを行うのが有効です。ラボとフィールドの乖離は、一度限りのテストではなく継続的監視の重要性を示しています。現実のユーザー体験を反映した最適化が求められます。

CLSとAIプラットフォーム監視

ChatGPT、Perplexity、Google AI Overviews、ClaudeなどのAIシステムがウェブコンテンツ要約や引用を行う時代になり、引用対象ウェブサイトの視覚的安定性はAI監視プラットフォームでも重要な指標となっています。AIから自社サイトへ流入したユーザーも、CLSパフォーマンスを直接体験します。CLSスコアが悪いと、AI経由のトラフィックでも直帰率が高まり、AI引用の価値が低下する可能性があります。AmICitedのような監視ツールでは、AI各種プラットフォームでのドメイン表示状況を追跡し、CLSパフォーマンスを総合的なブランド監視戦略の一部とすることができます。CLSが良好なサイトは、AI経由を含む全トラフィックで優れたユーザー体験を提供でき、視覚的安定性の最適化がますます重要性を増しています。AI生成コンテンツが検索結果に増えるにつれ、CLSパフォーマンスとデジタルプレゼンスの関係は密接となり、ブランド価値や顧客満足維持のためにも注力が必要です。

今後の進化と戦略的展望

CLSは、ウェブ標準やユーザー期待の変化に合わせて進化し続けています。 Googleは、ブラウザ機能の進歩や新たなレイアウト不安定化パターンの出現に合わせて指標のさらなる改良を示唆しています。2021年のセッションウィンドウ方式導入は、より良い測定手法が登場すれば指標を柔軟に調整するGoogleの姿勢を示すものでした。Web Componentsや最新JavaScriptフレームワークの普及はCLSに新たな課題と機会をもたらし、動的レンダリングパターンに対応した高度な最適化が必要になっています。Layout Instability APIも継続的に改良されており、レイアウトシフト発生原因のより詳細なデータ提供が進んでいます。業界全体でCLS最適化の導入が加速し、主要CMSやウェブサイトビルダーでも標準対応が進んでいます。今後もCLSはユーザー体験測定の主要指標であり続ける可能性が高く、今後は視覚的安定性の他側面を測る新指標が追加されるかもしれません。この進化は、ユーザー中心のパフォーマンス測定という全体潮流の一部であり、指標が技術的ベンチマークではなく実際の満足度と直結する方向性を示します。CLS最適化を今優先する組織は、視覚的安定性が検索順位や体験品質の重要な差別化要素となる将来においても競争優位を維持できるでしょう。