ウェブページ上のボタンをクリックしようとしたとき、突然ページ全体の内容が下にずれて、関係のない広告やリンクをクリックしてしまった経験はありませんか？このようなイライラする体験こそ、CLS（Cumulative Layout Shift、累積レイアウトシフト） が解決しようとしている中心的な問題です。
CLSは、Googleが2020年に導入したウェブユーザーエクスペリエンスのコア指標の一つで、ページの視覚的な安定性 を測定するために特別に設計されています。簡単に言うと、ページ読み込み中にコンテンツが予期せず移動する程度を定量化するものです。スコアは低いほど良く、理想的には 0.1 未満、0.25 を超えるとユーザーエクスペリエンスが低い範囲と見なされます。
ページレイアウトシフトの根本原因は、コンテンツ読み込みの非同期性とリソースサイズの不確実性 にあります。ブラウザがページレンダリングを開始したとき、一部の要素（画像、広告、埋め込み動画など）のサイズがあらかじめ定義されていない場合、ブラウザはまずデフォルト値またはゼロの高さでレンダリングし、リソースが実際に読み込まれた後にレイアウトを再計算します。この「再計算」のプロセスにより、すでに表示されているコンテンツが突然移動してしまいます。
最も典型的なシナリオは次のとおりです。
これらの些細に見える移動も、累積するとユーザーの閲覧の一貫性を著しく損ない、特にモバイルデバイスではより顕著になります。
CLSの計算式は 影響スコア × 移動距離スコア です。
影響スコア とは、安定しない要素が2つのレンダリングフレーム間で、ビューポートを占める割合を指します。例えば、ある要素が元々画面の50%の面積を占めていたのに、移動後に別の25%の新しい領域を占めた場合、総影響面積は75%となり、影響スコアは0.75となります。
移動距離スコア は、要素が移動した最大距離とビューポートの高さの比率です。例えば、高さ800pxの画面で要素が下方に200px移動した場合、移動距離スコアは0.25となります。
これら2つを掛け合わせることで単一のシフトスコアが得られ、CLSはページ全体のライフサイクルにおける すべての予期しないレイアウトシフトスコアの累積値 です。「予期しない」という点が重要です。ユーザーが能動的にトリガーしたインタラクション（例：ボタンクリックによるコンテンツ展開）によるレイアウト変化はCLSにカウントされず、ユーザーが全く予期していない時に発生した移動のみがペナルティの対象となります。
あなたのウェブサイトが以下のタイプに属する場合、CLSは重点的な最適化対象となるべきです。
Eコマースおよびトランザクションプラットフォーム：ユーザーが商品を閲覧したり、支払い情報を入力したりする際に、ページが突然跳ねると誤操作につながる可能性があります。例えば、間違った商品をクリックしたり、間違った金額を入力したりすることで、コンバージョン率や信頼度に直接影響します。
ニュースおよびコンテンツメディア：読者が記事に没頭している最中に、突然挿入された広告が段落を押し広げ、閲覧体験が中断されると、離脱率が顕著に上昇するでしょう。
モバイルファーストのアプリケーション：携帯電話の画面は小さく、あらゆるレイアウトシフトが拡大されます。特にネットワークが遅い環境では、リソース読み込みの遅延が大幅な跳ね返りを引き起こしやすくなります。
SEOトラフィックに依存するウェブサイト：CLSはGoogleのコアウェブバイタルの3つの主要な柱の一つであり、検索ランキングに直接影響します。競合他社のCLSがより優れている場合、あなたの自然検索トラフィックが分散する可能性があります。
オンライン注文サイトを想像してみてください。ユーザーがメニューページを開き、料理の写真と価格を見て、「カートに追加」ボタンをクリックしようとしています。指が画面に触れるまさにその瞬間、ページ上部にプロモーションバナー広告が読み込まれ、コンテンツ全体が150ピクセル下にずれてしまいました。ユーザーは結局、次の料理のボタンをクリックしてしまい、戻って再操作しなければなりません。この体験はイライラさせるだけでなく、注文の放棄につながる可能性もあります。
また、技術ブログの例もあります。読者がコード例を読んでいる最中に、ページ上部のウェブフォントがシステムデフォルトフォントからカスタムフォントに切り替わり、行の高さが変化してコードブロック全体が下方に移動し、読者は閲覧位置を再度特定する必要があります。同様の妨害が複数回累積すると、ユーザーはページを閉じてしまう可能性が高いです。
CLSを解決する鍵は、コンテンツのために事前にスペースを確保する ことで、リソース読み込み後にレイアウトの再フローが発生するのを防ぐことです。
画像と動画に明確な幅・高さ属性を設定する：レスポンシブデザインを使用している場合でも、aspect-ratio CSSプロパティや width および height HTML属性を使用することで、ブラウザは事前に占有スペースを計算できます。
広告枠や埋め込みコンテンツのために固定コンテナを確保する：広告スクリプトが読み込まれるのを待ってからスペースを確保するのではなく、事前に空白のプレースホルダーやスケルトンスクリーンで領域をマークします。
フォント読み込み戦略を最適化する：font-display: swap を使用する場合、代替フォントとターゲットフォントのサイズの違いに注意するか、size-adjust プロパティを使用して代替フォントを最終フォントのメトリクスにできるだけ近づけます。
レンダリング済みのコンテンツの上に動的に要素を挿入しない：挿入が必要な場合（例：通知バナー）、アニメーションで滑らかに遷移させるか、新しいコンテンツが既存のコンテンツを押し出すのではなくオーバーレイするようにします。
クリティカルではないリソースを遅延読み込みする：ファーストビュー外の画像や広告には遅延読み込みを使用し、初期レンダリング時の不確実性を減らします。
CLSの意義は、Googleの審査を通過したり、SEOランキングを向上させたりすることにとどまりません。それは、ユーザーの時間と注意力をどれだけ尊重しているか を真に反映します。ユーザーが視線を調整したり、コンテンツの位置を再確認したり、誤って広告をクリックする心配をしたりすることなく、より長く滞在し、あなたのウェブサイトをより信頼し、コンバージョン行動を完了する意欲が高まるでしょう。
ビジネスの観点からは、CLSを削減することで、Eコマースサイトのカート追加率、コンテンツサイトの滞在時間、フォームページの完了率といった主要な指標を直接向上させることができます。技術進化の観点からは、CLSの登場は、パフォーマンスとエクスペリエンスのバランス に対する業界全体の再考を促しました。コンテンツを高速に読み込むことは確かに重要ですが、読み込みプロセスがユーザーのフロー状態を破壊する場合、速度の利点はむしろ負担になります。
CLSは絶対的なゼロ値を目指すべき指標ではなく、継続的な最適化の方向性です。ツール（Chrome DevTools、Lighthouse、PageSpeed Insightsなど）で実際のデータを監視し、実際のユーザーフィードバックと組み合わせることで、パフォーマンス、機能、エクスペリエンスの最適なバランス点を段階的に見つけることができます。
