SEO

CLSどう改善する？測定法・低下原因・対策（レスポンシブの場合も解説）

公開日：2026.07.16

著者： Faber Companyグループ XINOBIX 代表取締役／長屋智揮

CLS（累積レイアウトシフト）とは、ページが読み込まれる際に起きる予期しないレイアウトのずれを数値化したCore Web Vitalsの指標です。CLSの数値が高いページは読み手にとって操作しづらくユーザー体験を損ねている可能性があり、SEOへも間接的に影響します。

そこで本記事では現役SEOコンサルタント監修のもと、CLSの測定方法・悪化の原因・原因別の改善法を解説します。Google Search Console（サーチコンソール）やPageSpeed Insights（ページスピードインサイト）でCLSを指摘された方、これを読んでスコアを改善しましょう。

CLS（累積レイアウトシフト）とは
CLSの測定ツール・測定方法
CLSが悪化する3つの原因
1. 画像・動画のサイズ未指定
2. 広告・埋め込みなどのスペース未確保
3. Webフォントの読み込み遅延
CLS改善前の注意点｜必ずバックアップを取ろう
CLSの原因別の改善法
1. 画像・動画にwidth・height属性を指定する
2. 広告・埋め込みコンテンツの表示領域を事前確保する
3. Webフォントのレイアウトシフトを抑える
まとめ：CLSを改善してユーザー体験を向上させよう

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

CLS（Cumulative Layout Shift）とは、ページの読み込み中に画像・広告・ボタンなどの位置が予期せずにずれる現象を数値化した指標です。CLSの数値が低いほどページの表示は安定しており、ユーザーはストレスなく閲覧・操作できます。

逆に、CLSの数値が高いページは、読みづらかったり誤タップを誘発し、ユーザー体験を損なう恐れがあります。結果として、ページからの離脱や滞在時間の低下につながる可能性があり、SEOの観点でも改善しておきたい要素です。

CLSはページの「見た目のズレ」を数値化した指標のこと

CLS(Cumulative Layout Shift）は直訳すると「累積レイアウトシフト」です。Webページ上のコンテンツを読み込むとき、予期せず動く現象の深刻度を、0以上の数値で表します。

「記事を読もうとしたとき広告が突然表示され、テキスト全体が下に押し出されてタップしたくないボタンを押してしまった」という経験ありませんか？　ああいう場面は、良くないCLSの典型例です。

CLSスコアは、ずれが発生した範囲×ずれた距離の積をもとに算出されます。

Googleは0.1以下を良好と定義しており、0.25を超えるページはユーザー体験が低下していると判断されます。自サイトのCLSスコア確認は、Google社提供のPageSpeed InsightsやLighthouseで、現状の評価を見てみてください。

スコア	評価
0.1以下	良好
0.1超 0.25以下	改善が必要
0.25超	不良

※くわしい記事：
・PageSpeed Insights（ページスピードインサイト）の活用
・Lighthouseとは？

CLSのCore Web Vitalsにおける位置づけ

Core Web Vitalsは、GoogleがWebページのユーザー体験を評価するための3つの指標で構成されます。各指標が担う役割は以下のとおりです。

指標	測定対象	良好とされる基準
LCP	最大コンテンツの描画速度	2.5秒以内
INP	操作への応答速度	200ミリ秒以内
CLS	レイアウトのズレ	0.1以下

CLSは3指標の中で、視覚的安定性を担っています。CLSを改善しても検索エンジンから加点評価がされるわけではありませんが、ユーザビリティの低下はページ評価に悪影響を与える恐れがあります。

※参考記事：Google Search Central｜ページエクスペリエンスの更新に対応するための期間、ツール
※関連記事：コアウェブバイタルとは？各指標と改善方法をわかりやすく解説【動画あり】

CLSの測定ツール・測定方法

CLSの改善は、現状のスコアを把握することから始まります。測定ツールは主に3つあり、確認できるデータの種類と用途は以下のとおりです。

ツール	データの種類	CLSでの主な用途
1.Google Search Console （サーチコンソール）	フィールドデータ（実ユーザー）	Webサイト全体で問題箇所を特定するときに使う
2.PageSpeed Insights （ページスピードインサイト）	フィールドデータ＋ラボデータ	個別URLの詳細確認と改善効果を検証するときに使う
3.Lighthouse （ライトハウス）	ラボデータ	Webページ本番公開前の、開発中の動作確認時に使う

それでは3つのツールでの測定法を順に解説します。

1.Google Search Consoleで測定する

Google Search Consoleの「ウェブに関する主な指標」レポートでは、実際にページを訪問したユーザーのデータをもとに、CLSの状態を確認できます。端末や通信環境の違いも含めて集計されるため、自社サイトでどの程度レイアウトのずれが起きているのかを把握する際に役立ちます。

💡 手順は以下のとおりです。

左メニューの「ウェブに関する主な指標」をクリックし、「モバイル」または「PC」の「レポートを開く」をクリックします。

CLSが「不良」または「改善が必要」のURLを一覧で確認できます。

Webサイト全体のページをまとめて確認できるため、どのページでCLSに関する問題が発生しているかを把握するのに適しています。修正が完了したら、Google Search Console上で検証を開始し、Googleに改善状況の確認を依頼できます。

2.PageSpeed Insightsで測定する

PageSpeed InsightsはWebサイトのURLを入力するだけでCLSスコアを確認できる無料ツールです。

分析結果には、「実際のユーザーの環境で評価する」（フィールドデータ）と「パフォーマンスの問題を診断する」（ラボデータ）が表示されます。

データの種類	内容	主な活用シーン
フィールドデータ	実ユーザーの過去28日間の集計	現状のユーザー体験を把握する
ラボデータ	分析実行時のシミュレーション	改善施策の効果を即時確認する

💡 CLSに関する修正を行った直後は、まずラボデータで改善の傾向を確認しましょう。フィールドデータは過去28日間の実ユーザーデータをもとにしているため、改善内容が反映されるまでに時間がかかる点に注意が必要です。

また、スコアの下にある「インサイト」セクションでは、CLSに影響している可能性のある要素を確認できます。

どこの画像・広告・埋め込み要素などがレイアウトのずれを引き起こしているのかを確認し、改善箇所を特定する際に活用しましょう。

3.Lighthouseで測定する

LighthouseはGoogle ChromeのDevTools（開発者ツール）から実行できる拡張機能です。Webページ本番公開前の開発環境やローカル環境でCLSを計測する際に使われることが多く、公開前の事前確認に適しています。

💡 Lighthouseでの測定は、拡張機能を追加したら次の手順で確認画面を開きます。

Google Chromeで、測定したい対象ページを開く
「Google Chromeの設定（縦の3つの点）」＞「その他のツール」＞「デベロッパーツール」を選択
「Lighthouse」を選択
「モバイル」または「デスクトップ」を選択
「Analyze page load」をクリック

分析が終了すると、CLSの数値が表示されます。

Lighthouseの計測結果は、あらかじめ決められた環境でページを読み込んだシミュレーション値です。実際の訪問者の端末や回線環境でのCLSを反映した数値ではありません。

Webページの本番公開後に確認するときは、PageSpeed InsightsやSearch Consoleで実ユーザーの計測結果もあわせて確認することをおすすめします。

CLSが悪化する3つの原因

Googleが開発しているwebサイトのパフォーマンス分析アプリ「web.dev」の分類に基づくと、CLSが悪化する主な原因は3つに整理できます。

PageSpeed Insightsの「パフォーマンスの問題を診断する」セクションと照らし合わせながら、自サイトに該当する原因を特定してください。

1. 画像・動画のサイズ未指定

Webページの画像や動画に、HTMLのwidth属性（横幅サイズ）とheight属性（縦幅サイズ）が指定されていないと、ブラウザはダウンロード完了まで画像の大きさを判断できません。表示用のスペースを空けられないままレイアウトが組まれ、画像の大きさが確定したタイミングでページ全体のレイアウトが組み直されます。その結果、周囲のテキストやボタンが下に押し出され、記事を読みながら要素が突然ずれる体験につながります。

▼画像サイズが指定されていない場合にレイアウトのズレが起きる様子

▼画像サイズが指定されており、レイアウトのズレが起きない様子

※参考記事：web.dev｜Cumulative Layout Shift の最適化

2. 広告・埋め込みなどのスペース未確保

画面がずれる原因は、画像だけではありません。ネットを見ていて、「広告やポップアップ、YouTube、Googleマップ、SNSの投稿が遅れて表示されて、ページがずれた」という経験はありませんか？

これらの埋め込みコンテンツは、ページが開いたあとに少し遅れて読み込まれます。そのため、あらかじめ「ここに動画が入るよ」という予約席（スペース）を確保していないと、中身が表示された瞬間に下の文章をドスンと押し下げてしまうのです。

たとえば、記事本文の途中に広告が後から表示されると、読んでいた文章やボタンの位置が突然ずれたりもします。

▼ユーザーの操作なしに、Webサイト上部にポップアップが出現しレイアウトが押し下げられる様子

とくに広告は、配信されるクリエイティブによってサイズが変わる場合があり、読み込み前に表示サイズを正確に予測しにくいことがあります。そのため、広告枠や埋め込みコンテンツを設置する際は、あらかじめ表示領域を確保しておくことが重要です。

また、Cookieバナーやお知らせポップアップをページ上部に挿入する場合も注意が必要です。ユーザー操作なしに後から表示されると、既存のコンテンツを押し下げ、CLSの悪化原因になります。

3. Webフォントの読み込み遅延

Webフォントの読み込みが遅れると、文字の表示が切り替わるタイミングでレイアウトがずれ、CLSが悪化することがあります。

Webフォントは外部サーバーから取得されるため、ページを開いた瞬間に必ず表示できるとは限りません。そのため、読み込みが完了するまでの間は、別のフォントで一時的に表示されたり、テキストが表示されない状態になったりします。

このとき、Webフォントの代わりに一時的に表示されるフォントをフォールバックフォントと呼びます。フォールバックフォントをあらかじめ指定しておくと、想定外のフォントが表示されるのを防ぎやすくなります。

▼フォールバックフォント指定の有無による表示イメージ▼

Webフォントの読み込み時に起こる表示の変化は、主にFOUTとFOITと呼ばれる2つの挙動です。

パターン	挙動
FOUT （Flash of Unstyled Text）	Webフォントが読み込まれるまで、文字を透明にして隠す挙動のこと
FOIT （Flash of Invisible Text）	Webフォントが読み込まれるまで、代わりに標準のフォント（明朝やゴシックなど）を表示しておく挙動のこと

どちらのパターンでもレイアウトシフトは起きる可能性があります。ただし、フォールバックフォントを指定しておけば、Webフォントの読み込み中や読み込みに失敗した場合でも代替フォントを表示できます。

これにより、テキストが非表示になる状態を防げます。また、Webフォントと文字幅や形状が近いフォールバックフォントを指定しておくと、フォントが切り替わったときの見た目の差が小さくなり、レイアウトのずれも抑えられるでしょう。

CLS改善前の注意点｜必ずバックアップを取ろう

CLSの改善では、作業前にWebサイトのバックアップを取得しておきましょう。

HTMLやCSS、WordPressのテーマファイルなどを編集するとき、記述ミスや設定変更によってページの表示が崩れる可能性があるからです。

WordPressサイトの場合は、バックアップ用のプラグインを利用する方法があります。テスト環境を用意できる場合は、本番環境へ反映する前に、修正後の表示や動作を確認しておくと安心です。

バックアップを取らずに本番環境を直接編集すると、表示崩れや機能不全が起きた際に復旧に時間がかかる恐れがあります。CLS改善に着手する前に、元の状態へ戻せる準備をしておきましょう。

CLSの原因別の改善法

CLSを改善するには、レイアウトのずれが起きている原因に合わせて対策することが大切です。
ここでは、画像・広告や埋め込みコンテンツ・Webフォントの3つに分けて、具体的な改善方法を解説します。

自サイトでCLSが発生している原因を確認しながら、該当する項目から見直していきましょう。

1. 画像・動画にwidth・height属性を指定する

画像や動画によるCLSを防ぐには、HTML上でwidth属性とheight属性を指定し、読み込み前から表示領域を確保することが大切です。

画像サイズが指定されていないと、ブラウザは画像が読み込まれるまで必要な高さを判断できません。その結果、画像の表示後に本文やボタンが下へ押し出され、レイアウトのずれが発生します。

基本的には、以下のように画像タグへwidthとheightを指定します。

<img src="example.jpg" width="800" height="600" alt="サンプル画像">

CSSで画像をレスポンシブ対応にしている場合でも、HTML側のwidthとheightは省略しないようにしましょう。たとえば、CSSでwidth: 100%; height: auto;を指定していても、HTMLに画像サイズの情報がなければ、読み込み前の表示領域を確保できない場合があります。

srcsetを使う場合は、候補となる画像のアスペクト比をそろえたうえで、基準となる画像サイズを指定します。

<img
  width="800"
  height="600"
  src="example.jpg"
  srcset="example.jpg 800w, example-1600.jpg 1600w"
  alt="サンプル画像"
>

PCとスマートフォンで異なる画像を出し分けるpicture要素を使う場合は、source要素とimg要素にもwidthとheightを指定できます。

<picture>
  <source media="(max-width: 767px)" srcset="image-sp.jpg" width="640" height="360">
  <source media="(min-width: 768px)" srcset="image-pc.jpg" width="960" height="540">
  <img src="image-pc.jpg" alt="サンプル画像" width="960" height="540">
</picture>

※関連記事：HTMLタグを基礎からおさらい。SEOに必須のタグを事例付きで紹介

2. 広告・埋め込みコンテンツの表示領域を事前確保する

広告やYouTube、Googleマップ、SNS投稿などの埋め込みコンテンツは、ページ表示後に読み込まれることがあります。表示領域を事前に確保していないと、読み込みが完了したタイミングで下の本文やボタンを押し下げ、CLSが悪化する原因になります。　

▼広告のせいでレイアウトがズレる様子

対策としては、CSSであらかじめ表示領域を確保しておくことが有効です。たとえば、広告枠や埋め込みエリアにmin-heightを指定したり、画像や動画の比率に合わせてaspect-ratioを設定したりする方法があります。

下記では、min-heightを使って、高さ250pxの広告スペースをあらかじめ確保しています。

<div id="ad-slot" style="min-height: 250px;"></div>

広告の読み込み前からスペースを確保しておくことで、広告が後から表示されたときに本文やボタンが下へ押し出されるのを防ぎやすくなります。

広告枠の場合、配信される広告によってサイズが変わることがあります。そのため、過去に配信された広告サイズや想定される表示サイズをもとに、あらかじめ余裕を持ったスペースを用意しておくとよいでしょう。広告が表示されなかった場合でも、確保した領域が急に折りたたまれないようにしておくことが大切です。

また、Cookieバナーやお知らせバーをページ上部に後から挿入すると、既存のコンテンツを押し下げる原因になります。必要に応じて、ページの上に重ねて表示するオーバーレイ形式にするなど、本文の位置が動かない実装を検討しましょう。

3. Webフォントのレイアウトシフトを抑える

Webフォントを使用している場合、フォントの読み込みタイミングによってCLSが悪化することがあります。ページ表示時に一時的に別のフォントで文字が表示されたり、テキストが表示されない状態になったりするためです。

Webフォントによるレイアウトシフトを抑えるには、font-displayの指定が有効です。たとえば、font-display: optional;を指定すると、Webフォントの読み込みが遅い場合は代替フォントのまま表示されるため、フォント切り替えによるレイアウトのずれを抑えやすくなります。

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

また、Webフォントを指定する際は、代替となるフォールバックフォントもあわせて設定しておきましょう。

body {
  font-family: 'MyFont', sans-serif;
}

Webフォント名だけを指定すると、読み込み中に想定外のフォントが使われる場合があります。フォールバックフォントを指定しておくことで、Webフォントが読み込まれるまでの表示を安定させやすくなります。

まとめ：CLSを改善してユーザー体験を向上させよう

CLSは、ページの読み込み中に発生するレイアウトのずれを数値化した指標です。数値が高いページでは、本文やボタンの位置が急に動き、読みづらさや誤タップにつながる恐れがあります。

この記事で解説したCLS改善のポイントは以下のとおりです。

画像・動画へのwidth/height属性指定
広告・埋め込みコンテンツへのCSSによる表示領域事前確保
Webフォントへのfont-display: optional指定とフォールバックフォントの指定

改善施策を実施しても、すぐにスコアへ反映されるとは限りません。PageSpeed Insightsのラボデータでは改善が確認できても、実ユーザーのデータをもとにしたフィールドデータへ反映されるまでには時間がかかる場合があります。

また、CLSは複数の原因が重なって悪化しているケースもあります。画像、広告、埋め込みコンテンツ、Webフォントなど、レイアウトのずれを引き起こしている要素を確認しながら、影響の大きい箇所から見直していきましょう。

レスポンシブ対応や広告タグ、Webフォントなどが複雑に絡むサイトでは、原因の特定や改善の優先順位づけに迷うこともあります。ミエルカでは、Core Web Vitalsを含むサイト改善やSEO施策のご相談を承っています。CLSの改善方針に迷っている場合は、ぜひお気軽にご相談ください。

ミエルカの
SEOコンサルに相談する

　📰Faber ComapnyのSEOコンサルティング支援事例 ▶︎　バイク王＆カンパニーさま｜買取関連のCV前年比163％！内部設計とUI/UXの改善事例

▶︎　アジアンウエイさま｜1年で売り上げ3倍！過去最高益を叩き出したECサイトの取り組み

本記事の著者

長屋智揮

Faber Companyグループ XINOBIX 代表取締役

同志社大学在学中にインドで情報誌の立ち上げを経験。卒業後にレバレジーズ株式会社に入社。2016年にXINOBIX株式会社を起業し、インド進出支援業をスタート。その後、英会話スクールの比較サイトを起業しウェブリオ（現GLASグループ）に売却。その間、複数の企業でインハウスのSEO責任者や事業部長を経験。2021年に再度当社を専業とし、現在はコンテンツマーケティング支援業を行う。
X▶︎@gayan_x　Facebook▶︎長屋智揮

この著者の記事をもっとみる