CLSとは
Webサイトを閲覧しているとき、画像や広告が遅れて読み込まれたせいで、「ボタンを押そうとした瞬間に画面がズレて、意図しない場所をクリックしてしまった」というストレスを感じたことはありませんか？
このような体験があると、ユーザーは「見にくいサイトだな」と強いストレスを感じ、そのままページを閉じて別のサイトへ移ってしまいます。特にスマートフォンでの操作中にこれが起きると、イライラは倍増です。
この「画面が不意にガタッと動いて、見ている位置やボタンがズレてしまう現象」を数値化した指標が、CLS（Cumulative Layout Shift：累積レイアウトシフト）です。
CLS の改善は、誤操作を防ぐというUI/UX（使いやすさ）の面だけでなく、SEO の向上にもつながります。CLS は Google のページ評価（コアウェブバイタル）の重要な要素です。もちろん CLS の数値だけで検索順位が決まるわけではありませんが、コンテンツの質が同じであれば、ページの操作性が優れているサイトの方が検索エンジンからも評価されやすくなります。
CLSの確認方法
CLSの対象になるのは、ページが読み込まれるプロセスや、スクロールなどの操作中に発生するすべての予期せぬレイアウトの動きです。具体的には、遅れて表示されるバナー広告、読み込みに時間がかかる画像、後から挿入される動的なコンテンツなどが原因となります。
CLSも LCP と同様にPageSpeed Insightsで簡単に確認ができます。計測したいURLを入力して分析を実行すると、CLSのスコアが表示されます。CLSは時間ではなく「ズレの大きさや頻度」を独自に算出した数値で、一般的に0.1以下が良好とされます。
Webサイトのデザインをリッチにしようとしたり、広告収益を上げようとしたりすると、かえってCLSが悪化することがあります。たとえば、画像の縦横サイズ（width/height）を指定していなかったり、動的なポップアップを画面上部に突然表示させたりすると、ブラウザが「あらかじめその要素のスペース」を確保できず、後からコンテンツが滑り込んできて画面を大きく押し下げてしまいます。
具体的な改善策のポイント
CLSを改善するためには、具体的にどのような対策が必要なのでしょうか。まずは、以下の3つのポイントから見直してみましょう。
画像や動画要素へのサイズ（width / height）指定
CLSの最も代表的な原因は、画像のサイズがブラウザに伝わっていないことです。HTMLの タグなどに、あらかじめ縦横の比率（アスペクト比）を明示しておくことで、ブラウザは画像がダウンロードされる前、からその分の表示スペースを確保できるようになり、後から画像が入ってきたときの画面のズレを防げます。
広告や埋め込みコンテンツの表示領域の確保
遅れて読み込まれるバナー広告やSNSの埋め込みコードなどは、表示されるまでサイズが確定しないことが多く、レイアウトを大きく崩す要因になります。あらかじめCSSなどで「ここに広告が入る」という最小限の高さや幅（min-heightなど）を確保しておくことで、周囲のコンテンツが押し出されるのを防ぐことができます。
動的なコンテンツの挿入位置の見直し
ユーザーの操作（クリックやタップ）を伴わないタイミングで、画面の上部に新しいテキストや通知バナーなどを突然挿入するのを避けます。どうしても動的な要素を追加したい場合は、既存のコンテンツを押し下げないよう画面の最下部に配置するか、あらかじめ要素分のスペースを空けておく設計が必要です。
これらはサイト構築の際のデザイン設計やコーディングの段階である程度先回りして防げる部分だからこそ、初期の制作フェーズから十分留意しておく必要があります。
まとめ
CLSの改善は、ユーザーがサイトをストレスなく、安心して回遊できるようにするための基本的な整備です。サイトに新しい広告枠を追加したり、デザインを変更したりした後は、定期的にPageSpeed InsightsやGoogle Search Consoleで数値が悪化していないか確認する習慣をつけましょう。
レイアウトが安定した「いつでも安心して操作できるサイト」を提供し続けることが、最終的にユーザーの信頼を生み、サイトの成果へとつながっていきます。
