CLS（累積レイアウトシフト）の意味から、SEOへの影響、測定方法、具体的な改善手順までをやさしく解説！サイズ指定のない画像や広告によるページの「レイアウトのずれ」を解消し、検索エンジンとユーザーに選ばれるサイトを目指しましょう。
Webページを読んでいる途中で画像が表示され、文章が突然下へ動いた経験は珍しくありません。
押そうとしていたボタンの位置が広告によって変わり、意図しないリンクを開いてしまうこともあります。
こうしたページの動きは、小さな不具合に見えても、読みにくさや誤操作、フォーム入力の中断につながります。
サイト運営側では、サーチコンソールに「CLSに関する問題」と表示されても、何が原因で、どのページから直すべきか判断できないケースが少なくありません。
CLSは、ページ内で発生する予期しないレイアウトのずれを数値化した、コアウェブバイタルの指標です。
表示速度ではなく、画面がどれだけ安定しているかを確認するために使われます。ためだけに行うものではありません。
文章を落ち着いて読める状態をつくり、誤クリックや離脱を防ぎ、問い合わせや購入を安心して進めてもらうための施策でもあります。
そこで今回は、CLSの意味からSEOへの影響、測定方法、原因の見つけ方、改善手順までを実務の流れで整理しました！
数値を確認するだけで終わらせず、影響の大きいページから効率よく改善し、検索エンジンにも利用者にも選ばれやすいサイトを目指しましょう。
CLSとは？SEO担当者が押さえておきたい基礎
CLSを改善するには、最初に指標の意味と評価方法を正しく理解する必要があります。
数値だけを見て良し悪しを判断すると、表示速度の問題と混同したり、一度のテスト結果だけで改善できたと考えたりするおそれがあります。
現在のコアウェブバイタルでは、表示の速さ、操作への反応、画面の安定性がそれぞれ別の指標で測定されます。
CLSが担当するのは、このうち画面の安定性です。
また、CLSは検索評価に関係するものの、数値を良好にするだけで上位表示が決まるわけではありません。
検索意図を満たす内容、情報の正確性、ページの操作性などと組み合わせ、総合的な使いやすさを高めることが大切です。
CLSは「予期しないレイアウトのずれ」を数値化した指標！
CLSは「累積レイアウトシフト」を意味し、ページの閲覧中に表示中の要素が予期せず移動した度合いを示します。
たとえば、文章を読んでいる途中で画像が読み込まれ、続きの文章が画面の外へ押し出される現象が該当します。
広告が後から表示されて購入ボタンが下へ動いたり、Webフォントへの切り替えによって見出しの行数が変わったりする場合もCLSが発生します。
こうしたずれが起こると、読んでいた場所を見失うだけでなく、別のボタンを押す、申し込みを中断する、サイトに不信感を持つといった問題が生じます。
CLSは数値が小さいほど画面が安定していることを示し、単位はありません。
読み込みに何秒かかったかを測る指標ではないため、ページの表示が速くても、後から部品が動けばCLSは悪化します。
反対に、読み込みに時間がかかるページでも、各要素の表示領域が確保されていればCLSは低く抑えられます。
CLSを確認するときは、ページの速さではなく、利用者が操作している画面の位置が安定しているかを見ることが重要です。
コアウェブバイタルは「表示・反応・安定性」の3つで考えよう！
現在のコアウェブバイタルは、LCP、INP、CLSの三つで構成されています。
LCPは主要なコンテンツが表示されるまでの速さを測り、INPはクリックやタップなどの操作に対する反応の速さを測ります。
CLSは、画像や広告などが後から読み込まれたときに、表示中の要素がどの程度動いたかを測ります。
古い解説では操作への反応を示す指標としてFIDが紹介されていますが、FIDは2024年3月にINPへ置き換えられました。
社内資料や過去の記事を参照するときは、現在もFIDを使っていないか注意が必要です。の表示が遅かったり、メニューを押してから反応するまでに時間がかかったりすれば、使いやすいページとはいえません。
3つの指標を個別に確認しながら、最終的には利用者が迷わず目的を達成できる状態を目指します。
また、スマートフォンとパソコンでは、画面幅、通信環境、端末性能、表示される広告が異なる場合があります。
一方の結果だけで判断せず、モバイルとパソコンを分けて確認することが大切です。
CLSは0.1未満を目標にしよう！
CLSの評価基準は、0.1以下が「良好」、0.1を超えて0.25以下が「改善が必要」、0.25を超えると「不良」です。
0.1は良好の範囲に含まれますが、広告の変更や端末差による悪化も考え、実務では0.1未満を目標にすると余裕を持たせられます。テストの最良値ではなく、実際のページ表示における七十五パーセンタイル値が使われます。
これは、表示体験を良い順に並べたとき、少なくとも四分の三の利用者が基準を満たしている状態を目指す考え方です。
一部の高速な端末だけで安定していても、低速回線や一般的なスマートフォンで大きなずれが起きていれば、良好とは判断されにくくなります。
現在のCLSは、ページ内のずれを最初から最後まで単純に合計するのではありません。
一秒未満の間隔で連続し、全体で最大五秒以内に発生したずれを一つのまとまりとして扱い、その中で最も大きい値をCLSとします。超える不良ページを減らし、その後に改善が必要なページを0.1以下へ近づけると優先順位を付けやすくなります。
CLSはSEOの評価要素でも、順位を決めるすべてではない！
コアウェブバイタルは検索ランキングシステムで利用されており、CLSもSEOで無視できない指標です。
画面が安定したページは内容を読み進めやすく、リンクやボタンも正確に操作しやすいため、検索利用者にとって快適な体験を提供できます。しただけで検索順位が上がるとは限りません**。
検索した疑問に答えていないページや、情報の根拠が不明確なページは、CLSが低くても高い評価を得られるとは限らないためです。
検索意図への適合、内容の信頼性、独自性、内部リンク、モバイルでの使いやすさなど、ほかの要素と一緒に改善する必要があります。
同程度の情報を掲載した競合ページが並ぶ場面では、読みやすさや操作の安定性が成果の差につながる可能性があります。
特に、問い合わせフォーム、申し込み画面、購入手続き、広告掲載ページでは、ボタンの移動が誤操作や離脱に直結します。
SEO指標を整える作業としてではなく、訪問者の不安や損失を減らす改善として進めることが重要です。
問題ページと原因を見つける実践手順
CLSの調査では、サイト全体の状況を把握してから、個別ページで動いた要素を特定する順番が効率的です。
サーチコンソールは、実際の利用状況をもとに、問題を持つページ群を見つける用途に向いています。
ページスピードインサイトやChromeの開発者ツールは、対象ページを再現し、原因となる画像や部品を調べる用途に向いています。
実際の利用者から集めたフィールドデータと、一定条件で計測するラボデータには、それぞれ異なる役割があります。
片方の結果だけを見て正常または異常と判断せず、両方を組み合わせましょう。
測定の目的は数値を記録することではなく、どの要素が、どのタイミングで、なぜ動いたのかを明らかにすることです。
サーチコンソールで問題のあるページ群を絞り込もう！
最初にサーチコンソールの「ウェブに関する主な指標」を開き、モバイルとパソコンのレポートを分けて確認します。
レポートには、ページの状態が「不良」「改善が必要」「良好」に分類され、CLS、LCP、INPの問題ごとに対象URL数が表示されます。細を開くと、0.1を超えているグループや、0.25を超えているグループを確認できます。
サーチコンソールでは、似た表示体験を持つページがURLグループとしてまとめられます。
多数の記事ページが同じグループに含まれている場合は、個別の記事内容ではなく、記事テンプレート、広告枠、関連記事、ヘッダーなどの共通部品に原因がある可能性があります。
表示されるURLはサイト内の全ページ一覧ではなく、問題を調べるための代表例です。
代表URLを一つ直すだけで終わらず、同じテンプレートを使うページにも問題がないか確認します。
優先順位は、対象URL数だけでなく、アクセス数、問い合わせ数、売上、広告収益への影響も加えて決めましょう。
不良ページが多い共通テンプレートと、事業成果への影響が大きいページから着手すると、限られた工数を使いやすくなります。
ページスピードインサイトで実際の数値と改善候補を確認しよう！
問題のあるURLをページスピードインサイトへ入力し、モバイルとパソコンの結果をそれぞれ確認します。
画面上部の実際のユーザー環境に関する評価はフィールドデータで、過去二十八日間のChrome利用者の体験を集計したものです。
その下に表示されるパフォーマンス診断はラボデータで、一定の端末や通信条件を再現して、その場でページを読み込んだ結果です。利用環境でCLS問題が起きているかを判断するために使います。
ラボデータは、画像サイズ、読み込み順序、表示を妨げる処理など、改善候補を探すために使います。
公開直後のページやアクセス数の少ないページでは、URL単位のフィールドデータが不足することがあります。
その場合、個別URLではなく、サイト全体をまとめたオリジンデータが表示されるか、実利用データ自体が表示されません。RL」と「オリジン」のどちらが選択されているかも確認します。
診断項目や表示中のスクリーンショットを見ながら、サイズ指定のない画像、後から追加される部品、動いた要素を改善候補として記録しましょう。
実測値とテスト値が違っても慌てずに原因を切り分けよう！
サーチコンソールではCLSが不良なのに、ページスピードインサイトのラボデータでは0に近い数値になることがあります。
これは必ずしも計測の誤りではなく、フィールドデータとラボデータが異なる状況を測っているためです。
ラボテストは、主にページを開いて読み込みが完了するまでの短い操作を再現します。
実際の利用者は、ページを長く閲覧し、スクロール、メニュー操作、フォーム入力、広告表示、カルーセルの切り替えなどを行います。
読み込み後に現れる広告や、一定時間後に表示される案内は、通常のラボテストでは再現されない場合があります。能、画面幅、キャッシュの有無、ログイン状態、地域、広告の配信内容によっても変わります。
調査では一回のテストだけで判断せず、複数回読み込み、シークレット表示、低速回線、スマートフォン幅などの条件を変えます。
ページを開いた直後だけでなく、下までスクロールし、メニュー、検索窓、フォーム、タブ、スライダーも操作します。
フィールドデータで問題の存在を確認し、ラボデータや開発者ツールで再現条件と原因を探すという役割分担で考えると混乱を防げます。
Chromeの開発者ツールで「動いた要素」を突き止めよう！
個別ページの原因を詳しく調べるときは、Chromeの開発者ツールにあるパフォーマンスパネルを利用します。
対象ページを開いて記録を開始し、再読み込みやスクロール、メニュー展開、フォーム操作など、ずれが発生しそうな動きを再現します。
記録が終わると、レイアウトシフトの発生箇所が時間軸上に表示されます。
レイアウトシフトを選択すると、発生した時刻、スコア、移動した要素、原因の候補などを確認できます。
小さな動きを無計画にすべて直すよりも、全体のCLSへ大きく影響している画像、広告、ヘッダーなどを先に直したほうが効率的です。
読み込み時に問題が見つからない場合は、ネットワーク速度を落とし、画面幅を変更し、スクロール後の動作も記録します。
原因が広告枠や関連記事などの共通部品であれば、ほかのページでも同じ動きが発生している可能性があります。
個別URLの修正で終わらせず、共通テンプレートや部品の修正につなげることが重要です。
CLSが悪化する原因を順番に改善しよう！効果の高い対策チェックリスト
CLSの主な原因には、サイズ指定のない画像や動画、広告や外部埋め込み、後から追加される案内、Webフォント、アニメーションがあります。
原因を見つけたら、「画像が動くため画像領域を確保する」というように、問題と対策を一対一で整理します。
「CLSを改善してほしい」とだけ制作担当者へ伝えると、確認範囲や完了条件が曖昧になりがちです。
対象URL、発生操作、動いた要素、現在の数値、希望する修正方法をセットで共有すると、対応を進めやすくなります。
すべてを同時に直す必要はありません。
発生したスコア、影響するページ数、アクセス数、問い合わせや売上への影響、修正工数を比較し、効果の大きい項目から対応しましょう。
画像や動画の表示領域を先に確保しよう！
画像や動画によるCLSは、ファイルが読み込まれるまで高さが決まらず、表示された瞬間に後続の文章を押し下げることで発生します。
対策の基本は、画像や動画へ幅と高さを設定し、読み込み前からブラウザが必要な空間を計算できるようにすることです。
レスポンシブ表示では、画像を固定幅にするのではなく、縦横比を事前に伝えることが重要です。
画像タグの幅と高さ、またはスタイルシートの縦横比指定を利用すれば、画面幅が変わっても必要な高さを確保できます。キャッチ、商品写真、ロゴ、バナー、サムネイル、動画、地図のプレビューも点検します。
遅延読み込みを使っている場合も、画像が表示されるまでの空間を残し、下の文章が先に詰めて表示されないようにします。
スマートフォン用とパソコン用で異なる画像を出し分けている場合は、それぞれの縦横比が適切に設定されているか確認が必要です。
CMSでは、画像を挿入するたびに必要な属性が自動出力される設定にすると、記事ごとの修正を減らせます。
既存記事を一枚ずつ直すだけでなく、テーマや画像出力の共通仕様から改善することが再発防止につながります。
広告・外部埋め込み・フォームにも固定の枠を用意しよう！
広告、地図、動画、SNS投稿、口コミ、予約フォームなど、外部サービスから読み込む要素は表示までに時間がかかることがあります。
読み込み前の高さがゼロになっていると、表示された瞬間に周囲の文章やボタンが押し下げられます。
対策として、実際の部品が表示される前から、同じ大きさの枠や最低限の高さを用意します。て変わる場合は、よく使われる最大サイズや最低限必要な高さを基準に枠を設計します。
広告が配信されなかったときも、空いた領域を急に縮めると周囲の要素が動くため、表示後の扱いまで決めておく必要があります。
外部サービスの読み込みが遅い場合は、同じ高さの仮表示や読み込み中表示を置くと、画面を安定させやすくなります。
特に注意したいのが、ファーストビューの上部へ広告やキャンペーン案内を後から差し込む設計です。
画面上部で発生したずれは、その下にある多くの要素を動かしやすく、大きなCLSにつながります。
最初から必要な枠を確保できない部品は、本文の途中や下部へ移動できないかも検討しましょう。
後から追加される案内や部品で本文を押し下げないようにしよう！
Cookieへの同意、キャンペーン告知、アプリへの誘導、会員登録案内、在庫通知などは、JavaScriptによってページ表示後に追加されることがあります。
こうした部品を既存コンテンツの上へ挿入すると、読んでいる文章や操作中のボタンが移動します。
まずは、ページを開いた後に自動表示される部品を洗い出し、必要性と表示位置を確認します。そのうえで専用の領域を確保するか、周囲の配置を変えない重ね表示を検討します。
ただし、重ね表示は本文や操作ボタンを隠す可能性があるため、閉じる方法やスマートフォンでの占有面積にも注意が必要です。
利用者がボタンを押した結果として開くメニューやアコーディオンは、予期された動きとして扱われやすくなります。
一方で、操作していないのに自動で開く案内やポップアップは、予期しないずれや操作ミスを生みやすくなります。
「もっと見る」や入力欄の追加も、クリック後にすぐ展開し、途中で通信待ちによる再移動が起きないように設計します。
効果が確認できない追従部品や告知は削除し、表示の安定性と導線の分かりやすさを優先することも有効な改善です。
Webフォントの切り替わりによる文字のずれを抑えよう！
Webフォントを使用しているページでは、最初に代替フォントで文章が表示され、読み込み後に指定フォントへ切り替わることがあります。
切り替え前後で文字幅、文字の高さ、行間が異なると、見出しの折り返し位置や本文の行数が変わり、周囲の要素が動きます。
特に、長い見出し、ボタン内の文字、ナビゲーション、ファーストビューの大きなコピーは影響を受けやすい部分です。ントを早めに読み込み、本文の表示後に大きな組み直しが起こらないようにします。
使用する書体、太さ、文字種を絞り、実際に使っていないフォントファイルを読み込まないことも大切です。
代替フォントには、指定フォントと文字幅や行の高さが近いものを選びます。
必要に応じて、代替フォントの大きさや間隔を調整し、切り替え時の移動量を減らします。
ブランド専用フォントをすべての文章へ使う必要がなければ、ロゴや重要な見出しだけに限定し、本文には安定して表示できる標準的なフォントを使う方法もあります。
ブランド表現と読みやすさ、表示安定性のバランスを考えて使用範囲を決めましょう。
アニメーションやカルーセルは「場所を動かさない」設計にしよう！
アニメーションやカルーセルは視線を集めやすい一方、部品の高さや位置を直接変更すると周囲のレイアウトまで動かします。
画像の切り替えごとに縦横比が変わるスライダーや、文章量によって高さが変化するカルーセルは、CLSの原因になりやすい設計です。
最初に部品全体の表示領域を決め、どの内容へ切り替わっても高さが変わらない状態をつくります。
画像の比率を統一し、文章が長い場合の最大行数や省略方法も決めておきます。
ランキング、ニュース欄、実績数などを自動更新する部品も、更新時に本文を押し下げていないか確認しましょう。
追従ヘッダーでは、読み込み後に高さが変わったり、スクロール途中で急に拡大したりしないようにします。
動きを加える場合は、高さや幅、上下左右の位置を変更する方法よりも、周囲の配置へ影響しにくい変形処理を使うほうが適しています。文章を見失ったりボタンを押し間違えたりするなら逆効果です。
動きによるメリットと、操作性や安定性への影響を比較して採用を判断しましょう。
共通テンプレートから直し、少ない工数で多くのページを改善しよう！
CLSの問題が複数ページで発生している場合は、個別記事より先に共通テンプレートを確認します。
ヘッダー、メニュー、広告枠、記事上部、関連記事、プロフィール、問い合わせフォーム、フッターなど、ページをまたいで使われている部品ごとに原因を整理します。
同じ問題を持つURLが多いテンプレートを直せば、一度の変更で多数のページを改善できます。
サーチコンソールで同じURLグループに含まれているページは、似た構造や表示体験を持つ可能性があるため、共通点を確認しましょう。
優先順位は、影響するページ数だけでなく、事業への影響と修正に必要な工数を組み合わせて決めます。
画像サイズの指定や広告枠の最低高さなど、短時間で対応できる項目は先に実施します。
テーマ改修や外部サービスの変更など、大きな工数が必要な項目は、原因と期待効果を整理して計画へ組み込みます。
修正前の数値、発生した操作、原因要素、対応内容、修正後の結果を記録すると、社内や顧客へ説明しやすくなります。
ページ単位ではなく部品単位で管理することが、効率的な改善と再発防止につながります。
改善後は再計測し、数値が戻らない運用をつくろう！
修正が終わったら、開発環境で原因となった操作を再現し、対象のレイアウトシフトが解消されたか確認します。
画像を直した場合は低速回線で読み込み、動的部品を直した場合は表示条件や操作手順を変えてテストします。
公開後は、ページスピードインサイトとChromeの開発者ツールで再計測し、修正によって別のずれが生まれていないか確認します。
サーチコンソールの数値は実際の利用データをもとにしているため、公開直後にすべてが更新されるわけではありません。
対象となる問題をすべて修正した後に検証を開始すると、二十八日間の実利用データを通じて問題が解消されたか確認されます。ンサイトや開発者ツールを使い、技術的な問題が残っていないか継続して点検します。
サイトの改修、広告枠の追加、計測タグの導入、テーマ更新、外部フォームの変更は、CLSが再び悪化するきっかけになります。
公開前の確認項目へ、画像と動画の領域、広告枠、Webフォント、動的部品、カルーセル、スマートフォン表示を加えましょう。
一度だけ数値を改善するのではなく、変更のたびに確認できる運用をつくることが、安定した状態を維持するポイントです。
まとめ｜まずは影響の大きいページからCLS改善を始めよう！
CLSは、ページ内で発生する予期しないレイアウトのずれを数値化した、コアウェブバイタルの重要な指標です。
表示速度そのものではなく、文章、画像、ボタンなどが安定した位置に表示されているかを測ります。
評価基準は0.1以下が良好、0.1を超えて0.25以下が改善必要、0.25を超えると不良です。ソールで問題を持つページ群を把握し、ページスピードインサイトとChromeの開発者ツールで個別の原因を調べます。
主な対象は、サイズ指定のない画像や動画、広告や外部埋め込み、後から表示される案内、Webフォント、アニメーションやカルーセルです。
各要素の表示領域を事前に確保し、既存の文章やボタンを後から動かさない設計へ変更します。
CLS改善は、検索順位だけを目的にする施策ではありません。
誤クリックや読み直しを減らし、問い合わせ、申し込み、購入を安心して進められるページをつくる施策です。
まずは、アクセス数や成果への影響が大きいページと、多数のURLで使われている共通テンプレートから着手しましょう。
小さな修正でも、共通部品へ反映できれば、多くのページをまとめて改善できます。
測定、原因特定、修正、再計測を繰り返し、利用者が安心して閲覧・操作できる安定したサイトを維持することが大切です。
Webマーケにお悩みなら、「AI×経験×アイディア」のぎあはーとへ！
合同会社ぎあはーとは「AI×プロの経験×アイディア」で強いマーケ戦略を着実にお届けする会社です。
| ・月間売上を前年比277.4%に （3,479,415円→9,653,169円） （上場アパレルメーカーM社：2021年 運用1年） ・新規サイトで月間コンバージョン数を31件へ （ メディア系SaaSツールC社：2025年 施策10ヶ月） ・Webイベントで1,330名の参加者集客 （メディア系SaaSツールC社：2026年 イベント期間30日） |
こんな実績を持つマーケティングのプロが、他にできない強い施策を素早く回転させます。
戦略からコンテンツ運用、結果分析までをワンストップで受けつけております。また、10本で8,8000円という格安にてSEO記事制作もお受けしております。
料金表
| 内容 | 基本料金 |
| マーケティング顧問業務 LLMO戦略立案・コンテンツ制作・レポート | 月額・要お見積もり |
| SEO記事の制作1本（スポット依頼） 5,000字以上、追加料金なし キーワード選定等ワンストップ | 9,900円（税込） |
| SEO記事の制作10本（スポット依頼） 合計50,000字以上、追加料金なし キーワード選定等ワンストップ | 88,000円（税込） |
まずはオンライン面談によるお見積もりや無料のサイト診断ができますので、ぜひお気軽にご相談ください！
