CLSを改善する方法｜レイアウトのズレをなくす

CLSとは何か・目安となるしきい値

CLSはページの読み込み中や操作中に、要素が予期せず動いた量を積み上げて数値化した指標です。値が小さいほどレイアウトが安定していることを意味します。2026年7月10日時点で公開されている目安では、良好とされるのはおおむね0.1以下、改善が必要とされるのが0.1から0.25、悪いとされるのが0.25超という区分です。この数値は確認日時点のものであり、指標や基準は変更される場合があります。最新情報はGoogleの公式ドキュメントをご確認ください。注意したいのは、ユーザー自身の操作（ボタンのクリックなどの直後500ミリ秒以内）によって起きる移動は対象外として扱われる点です。つまり問題になるのは、ユーザーが望んでいないのに勝手に動いてしまう表示のズレです。小さなズレでも、ボタンやリンクの押し間違いを誘発すると体験を大きく損なうため、数値以上に実際の使い勝手への影響が大きい指標だと言えます。特に、購入ボタンや送信ボタンの直前でレイアウトがずれると、ユーザーが意図しない箇所を押してしまい、離脱やストレスの原因になります。表示速度の指標と違って、CLSは見た目の派手さとは関係のない地味な問題ですが、日々の使い勝手にじわじわと影響するため、丁寧に対処する価値があります。まずは自分のページを実際にスクロールしながら、どこで要素が動くかを観察してみることが、改善の第一歩になります。

レイアウトがずれる主な原因

レイアウトのズレを引き起こす代表的な原因はいくつかのパターンに整理できます。第一に、幅や高さを指定していない画像や動画で、読み込みが完了した瞬間に本来の大きさに広がり、周囲の要素を押しのけるケースです。第二に、広告やSNSの埋め込み、レコメンド枠など、後から読み込まれてスペースを確保していない要素です。第三に、Webフォントの読み込みが完了した瞬間に文字の見え方が切り替わり、行の高さや幅が変わって周囲がずれるケースです。第四に、ページ表示後にJavaScriptでバナーや通知、同意バーなどを上部に挿入し、既存の内容を下へ押し下げてしまうケースです。これらに共通するのは「後から現れる要素の分の場所を、あらかじめ用意していない」という点です。原因のパターンを知っておくと、自分のページのどこが該当するかを見つけやすくなります。逆に言えば、これらのパターンに当てはまる要素をあらかじめ洗い出し、それぞれに場所を確保しておく設計を最初から取り入れておけば、後からズレに悩まされる場面を大きく減らせます。制作の段階でこうした点に配慮しておくことが、公開後の手戻りを避けるうえでも効果的です。

画像・動画にサイズを指定してズレを防ぐ

画像や動画によるズレは、あらかじめ表示領域の大きさをブラウザに伝えておくことで防げます。具体的には、画像の幅と高さの値を指定しておく方法や、CSSで縦横比を保つよう指定しておく方法があります。こうしておくと、ブラウザは実際の画像が届く前から必要なスペースを確保し、読み込み後もそのスペースに収まるため周囲が動きません。レスポンシブ対応で表示幅が変わる場合でも、縦横比を保つ指定をしておけば高さが自動的に決まり、ズレを避けられます。Next.jsの画像用コンポーネントのように、サイズ情報をもとにあらかじめ領域を確保してくれる仕組みを使うと、この対策を取りこぼしにくくなります。逆に、サイズ指定のない画像がページ内に多いと、それぞれが読み込まれるたびに少しずつズレが積み重なり、CLSの値が悪化していきます。まずは主要な画像から順にサイズ指定を徹底することが、確実な改善につながります。

広告・埋め込み・後から挿入される要素への対策

広告枠やSNSの埋め込み、レコメンド、同意バーといった要素は、読み込みのタイミングが遅れがちで、しかも表示される大きさが可変なため、CLSの悪化要因になりやすい部分です。基本的な考え方は、これらが表示される場所にあらかじめ十分な高さのスペースを確保しておくことです。想定される最大の高さ分の領域を先に空けておけば、実際の中身が届いても周囲を押しのけません。もし高さが予測しにくい場合でも、平均的な高さで枠を確保しておくだけでズレの量を大きく抑えられます。ページ読み込み後に上部へ挿入しがちな通知バーや告知は、可能であればコンテンツの上に重ねる形で表示するか、最初から場所を空けておく設計にすると、既存の内容を押し下げずに済みます。外部サービスに起因するズレは自分でコントロールしにくいこともありますが、枠の確保という一手だけでも体験の安定に寄与する傾向があります。

Webフォント切り替えによるズレを抑える

Webフォントを使うページでは、最初に代替フォントで文字が表示され、後から本来のフォントに切り替わる瞬間に、文字の幅や高さがわずかに変わって行がずれることがあります。これを抑える工夫として、フォント読み込み中の表示の扱いを指定する方法があります。たとえば読み込みが終わるまで代替フォントで表示し、切り替え時のズレをできるだけ小さくする設定です。加えて、代替フォントと本来のフォントの文字幅の差を近づける調整を行うと、切り替え時の見た目の変化を目立たなくできます。フォント自体をあらかじめ読み込むよう指示しておくと、切り替えのタイミングが早まり、ユーザーが読み始める前に本来の表示に整いやすくなります。Webフォントは世界観づくりに欠かせない要素である一方、扱い方によってはCLSの悪化要因にもなるため、見た目と安定性の両立を意識した設定が求められます。フォント最適化の詳細は別途専門的な対応が必要になる場合もあります。

CLSを計測して改善を確認する

CLSの改善も、数値を見ながら進めることが欠かせません。PageSpeed Insightsやブラウザの開発者向け計測機能を使うと、CLSの値に加えて、どの要素がどれだけ動いたかを可視化できます。特に開発者向けの機能では、ズレを起こした要素を強調表示してくれるため、原因の特定に役立ちます。注意したいのは、CLSはページ全体を通じて積み上がる指標である点です。ファーストビューだけでなく、スクロールしていった先で読み込まれる要素や、操作に応じて表示される要素もズレの対象になります。したがって、ページ上部だけを確認して満足せず、実際に下までスクロールしたり操作したりしながら確認することが大切です。実際の利用者環境で測定されたデータも参照し、手元で再現しにくいズレがないかを合わせて確認します。こうした検証を重ねることで安定した表示に近づけられますが、これは改善を保証するものではなく、外部要素の挙動によって変動する可能性がある点は理解しておくとよいでしょう。

よくある質問（FAQ）

QCLSはどのくらいの値を目指せばよいですか

A2026年7月10日時点の公開情報では、良好とされるのはおおむね0.1以下が目安とされています。ただしこの数値は確認日時点のものであり、指標や基準は変更される場合があります。最新情報はGoogleの公式ドキュメントをご確認ください。まずは現状値を計測し、どの要素がズレを起こしているかを特定するとよいでしょう。

Q画像にサイズを指定するだけでCLSは良くなりますか

A画像が主な原因であれば大きな改善につながることが多いですが、広告やフォント、後から挿入される要素など他の原因が残っていると値が下がりきらない場合があります。計測ツールでズレを起こしている要素を確認し、原因ごとに対策を組み合わせることをおすすめします。

QCLSの改善で検索順位は上がりますか

ACLSは検索順位を決める数多くの要素の一つにすぎず、改善すれば必ず順位が上がるわけではありません。まずはボタンの押し間違いを防ぐなど、ユーザー体験の向上を主目的に取り組むのが現実的です。順位への効果は保証するものではありません。

Q外部の広告が原因のズレはどうすればよいですか

A広告が表示される場所にあらかじめ十分な高さのスペースを確保しておくと、中身が後から届いても周囲を押しのけません。高さが予測しにくい場合でも、平均的な高さで枠を空けておくだけでズレの量を抑えられる傾向があります。

QスマートフォンとパソコンでCLSの値が違うのはなぜですか

A画面幅によってレイアウトや折り返し、表示される要素が変わるため、ズレの起き方も端末ごとに異なります。両方の環境で計測し、それぞれに応じた対策を確認することが望ましいです。特にモバイルは利用者が多い環境のため優先的に確認するとよいでしょう。