Webページの読み込み中に、画像や広告バナーが遅れて表示され、閲覧していたテキストやボタンの位置がズレてしまった経験はないでしょうか。
このような「レイアウトの予期せぬズレ」は、ユーザーの閲覧を妨げるだけでなく、誤クリックを発生させる要因になります。
本記事では、CLSが低下する要因と、SEOおよびユーザー体験（UX）に与える影響について解説します。
他のウェブに関する主な指標については以下の記事で確認できます。
本セミナーでは、AIがSEOと検索体験に与えた構造変化を整理し、これからの時代に必要となるAIOの考え方と対策の方向性を解説します。
参加費：無料
日時：1/21(水) 13:00~14:00
CLS（Cumulative Layout Shift）とは
CLSはページの視覚的な安定性を評価する指標です。
ユーザーがページを閲覧している最中に画像や広告が遅れて表示され、本文やボタンの位置がずれる現象をレイアウトシフトと呼びます。
CLSのスコアは、このズレが「画面のどれくらいの広さに影響したか（影響の割合）」と「どれくらいの距離動いたか（距離の割合）」を掛け合わせて算出されます。数値が0に近いほど視覚的に安定しており、ユーザー体験が良いと評価されます。
より専門的な「影響の割合」「距離の割合」の算出方法については、Googleが公開する開発者向けのガイドに詳細な説明があります。興味がある方は下記ガイドも参照してみてください。
CLSの重要性
CLSの改善が重要である理由は大きく分けて2つあります。
ユーザー体験（UX）の悪化を防ぐため
意図しないレイアウトのズレは、ユーザーに強いストレスを与えます。特に、購入ボタンやキャンセルボタンの位置がズレて誤クリックが発生してしまうと、ユーザーがサイトから離脱する原因になります。
検索順位への影響があるため
CLSは、Googleが検索順位を決定する要素（ランキングシグナル）の一つである「Core Web Vitals」に含まれています。Googleはユーザー体験を重視しているため、視覚的に安定していないサイトは評価が下がる可能性があります。SEOの観点からも、無視できない指標です。
CLSの評価基準
GoogleはCLSのスコアについて以下の基準を設けています。
| 評価 | スコア (応答時間) |
|---|---|
| 良好 | 0.1 以下 |
| 改善が必要 | 0.1 ～ 0.25 以下 |
| 不良 | 0.25 以上 |
また、サイト全体の評価としては、ページビューの 75% 以上が「良好」のしきい値を満たしていれば、そのサイトは「良好」と判断されます。
レイアウトシフトが発生する主な原因
レイアウトシフトが発生して、CLSが悪化する主な原因は以下の3点です。
画像や動画のサイズ指定不備
HTML側で画像（imgタグ）や動画の幅と高さが指定されていない場合、ブラウザはデータを読み込むまで表示領域を確保できません。読み込み完了後に領域が確保されるため、周囲のテキストや要素が押し出されてレイアウトシフトが発生します。
動的に挿入されるコンテンツ
広告バナーやSNSの埋め込みなど、JavaScriptによって後から挿入されるコンテンツも原因となります。これらが表示されるスペースがあらかじめ確保されていない場合、コンテンツが出現した瞬間にレイアウトが変動します。
Webフォントの読み込み
Webフォントを使用している場合、フォントデータのダウンロード中に代替フォントが表示され、ダウンロード完了後にWebフォントへ切り替わることがあります。フォントによって文字幅や高さが異なるため、切り替わりの瞬間に文章の表示領域が変わり、レイアウトシフトを引き起こします。
今回紹介した以外にもCLSが悪化する要因はいくつか存在します。より詳細な仕様や技術的な解説、その他の改善方法については、以下のGoogle公式ドキュメントをご参照ください。
まとめ
CLSはユーザーの誤操作（誤クリック）を防ぎ、快適な閲覧環境を提供するための重要な指標です。まずは自社サイトで、サイズの指定されていない画像や、表示領域の確保されていない広告がないかを確認してみましょう。
具体的な計測ツールを使用した確認方法と改善手順については、以下の記事をご覧ください。
