ページの100%でレイアウトシフト（CLS）が見られます意味と原因・改善法

「ページの 100% でレイアウト シフト（CLS）が見られます」とは、Google Search Consoleで対象となるページ群の100%においてCLS（累積レイアウトシフト）の問題が検出されていることを意味します。「100%」という数字はCLSスコアの大きさではなく、調査対象ページのうち問題が発生している割合を示しています。本記事では、このメッセージが表示される理由から、CLSの基本概念、発生原因、測定方法、具体的な改善手順までを体系的に解説します。Googleがウェブサイトのユーザー体験を評価するうえで重視する指標であるCLSは、検索順位やコンバージョン率にも直結するため、サイト運営者にとって早急な対応が求められる項目です。読み終えたあとには、自分のサイトでどこから手をつければよいかが明確になり、Core Web Vitals全体の品質改善にもつなげられる内容となっています。

「ページの 100% でレイアウト シフト（CLS）が見られます」とは何を意味するのか

結論として、このメッセージは対象ページのほぼすべてでCLSの基準値超過が確認されている状態を示しています。表示場所はGoogle Search Consoleの左メニューにある「エクスペリエンス」から「ウェブに関する主な指標」を開いたレポート内です。100%という数値は問題の深刻度ではなく、Googleが収集したフィールドデータの対象ページ群のうちCLSに関する問題が発生している割合を表しています。

メッセージが表示される画面と確認手順

Google Search Consoleの「ウェブに関する主な指標」レポートでは、モバイルとPCそれぞれで「不良URL」「改善を要するURL」「良好URL」に分類された推移グラフが表示されます。デバイス別の評価が分かれて表示されるため、どの環境で問題が起きているかを把握できます。100%と表示されたグループは、対象ページ全体でCLSのしきい値を超えているということを示しているため、個別の修正よりもサイト全体に影響する共通要素を見直す視点が欠かせません。

「100%」の意味を正しく読み解く

「100%」はCLSスコアそのものではなく、レポート対象ページのうち問題があると判定されたページの割合です。そのため、サイト全体に共通するテンプレートやヘッダー、サイドバー、共通パーツが原因になっているケースが多く、一括修正で大きな改善が期待できる状況といえます。逆に、特定のページだけにCLSが発生している場合は別のメッセージで通知されるため、100%という表記は「全体共通の構造的問題」と解釈するのが適切です。

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

CLSとは、ウェブページの読み込み中や表示後に、ページ上の要素が予期せず移動してしまう現象を数値化した指標です。Cumulative Layout Shiftの略で、日本語では「累積レイアウトシフト」と訳されます。

具体的には、画像や広告、フォントなどが遅れて読み込まれ、テキストやボタンの位置が突然ずれる現象がレイアウトシフトです。記事を読んでいる最中にテキストが下に移動して読んでいた場所を見失ったり、押そうとしていたボタンが直前に動いて意図しない別のボタンを押してしまったり、画像の表示で文章が押し下げられたり、広告が突然表示されてコンテンツが見えなくなったりといった不快な体験を、ページのライフサイクル全体で累積して計測した数値がCLSです。

CLSが注目されるようになった背景

CLSはGoogleが2020年に発表したCore Web Vitalsの3指標のうちの一つです。スマートフォンの普及によりモバイル端末での閲覧が主流となり、通信速度が安定しない環境でレイアウトシフトが起こりやすくなっていることが背景にあります。Googleはこのような実際のユーザー体験を改善するために、CLSをはじめとするCore Web Vitalsを検索評価に組み込みました。

CLSのスコア基準と評価のしくみ

CLSのスコアは0以上の数値で表され、小さいほど良好です。Googleは次の基準で各ページを評価しています。

サイト全体としては、ページビューの75%以上が0.1以下を満たすと「良好」、75%以上が0.25を超えると「不良」と評価されます。Google Search Console上では「CLSに関する問題：0.25超」というラベルで分類されており、このカテゴリは最優先で改善すべき対象です。

スコアの計算方法

CLSは「インパクトスコア」と「ディスタンスフラクション」を掛け合わせた値の累積で算出されます。インパクトスコアはレイアウトシフトが画面に占める面積の割合、ディスタンスフラクションは要素がどれだけ移動したかを示し、大きな要素が大きく移動するほどスコアが高くなる仕組みです。つまり、画面の大半を占めるヒーロー画像が画面外まで動くようなケースでは、一回のシフトでも大きなスコアが計上されます。

Core Web VitalsとSEOへの影響

Core Web Vitalsは2021年6月から検索ランキングの評価要因として本格導入された指標群で、CLSはその中の一つに位置づけられています。3つの指標と良好基準は次の通りです。

INPは2024年3月にFID（First Input Delay）に代わって導入された新しい指標です。Googleはこれらをページエクスペリエンス シグナルの一部として検索ランキングに組み込んでおり、CLSのスコアが悪いとコンテンツ品質に関わらず順位に影響する可能性があります。ただし、Googleはコンテンツの品質を最も重視しており、Core Web Vitalsはあくまでも同程度のコンテンツ品質を持つサイト間での差別化要因とされています。競争の激しいジャンルでは、CLSの改善が順位向上に直結するケースも多く報告されています。

CLSがビジネス成果に与える影響

CLSが高いサイトでは、意図しないボタンのクリックやコンテンツの読みづらさが原因で、購入・申込み・問い合わせといったコンバージョン率が下がる傾向があります。検索順位の変動だけでなく、サイトの成果そのものに直結する指標であるため、運営の重要課題と位置付けられます。特にモバイル検索ではページエクスペリエンスがより重視されており、CLS改善後に直帰率が下がったという事例も多く報告されています。

CLSが発生する主な原因

CLSの主な原因は、画像・動画のサイズ未指定、動的に挿入される広告やコンテンツ、Webフォントの遅延読み込み、Cookieバナーやポップアップ、アニメーションやトランジションの5つに整理できます。代表的な発生要因と内容は次の通りです。

原因1 画像や動画のサイズが未指定

最も一般的な原因は、imgタグや動画にwidth・height属性が指定されていないことです。サイズ指定がないと、ブラウザは読み込み完了まで領域を確保できず、読み込み後に周囲が一斉にずれます。ファーストビューに画像がある場合、ページ全体のレイアウトが大きく変化するため、影響が顕著になります。ECサイトの商品画像やブログ記事のアイキャッチ画像など、サイト内に多数の画像がある場合は特に注意が必要です。

原因2 動的に挿入される広告やコンテンツ

JavaScriptで動的に挿入される広告、ソーシャルプラグイン、埋め込みコンテンツ、地図、関連記事ウィジェットなども主要因です。Google AdSenseのようなアドネットワーク広告は、サーバーの応答速度や入札状況によって表示される広告の内容が変わるため、サイズを事前に確定しづらく、CLSの改善が難しいケースとして挙げられます。広告を掲載しているサイトでCLS問題が発生している場合は、まず広告設定を見直すことが重要です。

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

Webフォントの読み込みが遅れると、システムフォントから切り替わったタイミングで文字幅や大きさが変わり、テキストの行数や折り返し位置がずれます。この現象はFOUT（Flash of Unstyled Text）と呼ばれ、ファイルサイズの大きい日本語フォントで特に発生しやすい傾向があります。Google FontsやAdobe Fontsを利用している場合は、読み込み戦略の見直しが効果的です。

原因4 Cookieバナーやポップアップ

GDPR対応のCookieバナーやニュースレター登録ポップアップ、通知許可リクエストなどが、ページコンテンツの上に重ねるのではなく、ページ内に挿入される実装になっているとレイアウトシフトが発生します。WordPressプラグインのデフォルト挙動が原因になっていることも多く、使用しているプラグインの実装方式を確認することが重要です。

原因5 アニメーションやトランジション

top、left、right、bottom、width、heightといったレイアウトに影響するプロパティを使ったアニメーションや、JavaScriptで要素サイズを動的に変更する処理は、ページ内の他の要素を押しのけるためレイアウトシフトを引き起こします。視覚的な演出のつもりが、結果として指標を悪化させてしまうケースが少なくありません。

CLSの測定方法とツールの使い分け

CLSは複数のツールで測定でき、フィールドデータとラボデータを使い分けるのが効率的です。それぞれの特徴をまとめると次のようになります。

Google Search Consoleでの確認手順

Google Search Consoleにログインしたあと、左メニューから「エクスペリエンス」を選び、「ウェブに関する主な指標」をクリックして「モバイル」または「PC」を切り替えると、CLSに関する問題があるURL一覧を確認できます。問題のあるURLが「不良URL」「改善を要するURL」「良好URL」に分類され、過去28日間のデータが推移グラフとともに表示されるため、改善作業の効果を経時的に追えます。

PageSpeed Insightsでの診断

pagespeed.web.devにアクセスし、確認したいページのURLを入力して「分析」ボタンをクリックするだけで、CLS、LCP、INPの結果を確認できます。実際のユーザーデータ（フィールドデータ）と、シミュレーションによるスコア（ラボデータ）の両方を表示できる点が特徴で、「診断」セクションではレイアウトシフトを引き起こしている具体的な要素が示されることもあり、原因特定に役立ちます。

Chrome DevToolsでの詳細分析

F12キーで開くChrome DevToolsのLighthouseタブから「ページ読み込みのパフォーマンスを分析する」を実行すると、レイアウトシフトを起こしている要素がスクリーンショットとともに表示されます。Performanceタブでは「Layout Shift」と表示されたイベントをクリックすることで、移動した要素がタイムライン上で赤い枠線で示されます。さらに、Renderingパネルで「Layout Shift Regions」を有効にすると、ブラウジング中にリアルタイムでレイアウトシフトが発生している領域を青い枠線でハイライト表示できるため、開発時の検証に最適です。

CLSの具体的な改善方法

CLSの改善は、原因ごとに対策が決まっているため、影響の大きいものから順に実施するのが効果的です。代表的な改善策を順に解説します。

改善方法1 画像にwidth・height属性を指定する

最も基本的かつ効果的な対策は、imgタグにwidth・height属性を追加することです。レスポンシブデザインを採用している場合は、CSSでmax-width: 100%とheight: autoを併用すると、アスペクト比を保ったまま画面幅に応じて柔軟に伸縮します。CSSのaspect-ratioプロパティを使う方法は、padding-topを使った旧来のテクニックよりも記述が短くシンプルで分かりやすいため、現在では推奨される手法です。WordPress 5.5以降では投稿エディタからアップロードした画像に自動でwidth・height属性が付与されるようになっていますが、テーマやプラグインによっては正しく機能しない場合があるため、実際の出力を確認することが大切です。

改善方法2 広告枠を事前確保する

動的広告によるレイアウトシフトを防ぐには、広告が入る予定のスペースをCSSで事前に確保します。たとえばヘッダー部分に横幅728px、高さ90pxのバナー広告を表示する場合、コンテナにmin-height: 90pxとwidth: 728pxを指定しておくとプレースホルダーになり、広告が読み込まれる前からスペースが維持されます。Google AdSenseの場合は「自動広告」より「手動広告」でサイズを固定する方法が有効で、画面端に固定表示される「アンカー広告」もコンテンツへの干渉が少ないためCLSへの影響を軽減できます。

改善方法3 Webフォントの最適化

重要なWebフォントはhead内でpreloadし、CSSのfont-displayプロパティを指定します。font-display: optionalを設定すると、フォントの切り替えによるレイアウトシフトを完全に防止できますが、フォントが読み込まれない場合はシステムフォントで表示される点には留意が必要です。日本語フォントはファイルサイズが非常に大きいため、実際に使用する文字だけを含めるサブセット化が効果的で、読み込み速度の改善にもつながります。

改善方法4 固定要素の適切な実装

Cookieバナーやポップアップなど後から表示される要素は、CSSのposition: fixedで画面下部や上部に固定し、ページコンテンツに影響を与えない形で実装します。bottomやleftの位置指定とz-indexを併用することで、コンテンツの上に重ねて表示でき、レイアウトシフトを発生させずに通知が可能になります。これにより、ユーザー体験を損なわずに必要な情報を提示できる構造になります。

改善方法5 アニメーションの最適化

CSSアニメーションでは、top、left、width、heightなどレイアウトに影響するプロパティではなく、transformプロパティを使うのが定石です。transformによるアニメーションはGPUで処理されるため、レイアウトの再計算が発生せず、CLSとパフォーマンスの両面で優れています。たとえば上から要素を降ろす演出は、topではなくtransform: translateYを使うことで同等の見た目を保ちながらレイアウトシフトを回避できます。

改善方法6 iframeや埋め込みコンテンツへの対応

YouTubeや地図などのiframeをラッパー要素で囲み、aspect-ratioプロパティやpadding-topでアスペクト比を事前に確保すると、読み込み完了までの間もスペースが維持されます。lite-youtube-embedのような遅延読み込みライブラリを利用すると、軽量なプレースホルダーを表示しつつクリック時に動画を読み込めるため、CLS改善と表示速度の向上を同時に実現できます。

修正後の確認とSearch Consoleでの検証申請

改善作業が完了したら、Google Search Consoleの「ウェブに関する主な指標」で対象の問題を選択し、「修正を検証」ボタンをクリックして再クロールを依頼します。検証には通常数日から数週間かかり、ステータスは「修正を検証中」から、問題が解決されると「合格」へ変わります。

反映までのタイムラグ

フィールドデータは過去28日間のデータを集計しているため、改善した日から最大28日後に完全に反映されます。検証申請を行ってもすぐに表示が消えるわけではないため、即時反映ではない点を理解しておくと、効果検証の段階で焦らずに済みます。

継続的なモニタリング

修正後はPageSpeed InsightsやLighthouseを使って定期的にCLSスコアを確認し、新規コンテンツや機能追加で問題が再発していないかをチェックします。サイトへのコンテンツ追加や機能実装のたびに新たなCLS問題が発生することもあるため、継続的な監視が重要です。

WordPressサイトでのCLS対策のポイント

WordPressで運営しているサイトでは、テーマとプラグインの確認が要です。

まず、使用しているテーマが画像にwidth・height属性を適切に出力しているかを確認します。WordPress 5.5以降は標準で属性が付与されますが、古いテーマでは正しく動作しないことがあるため、最新版へのアップデートやテーマコードの修正が必要です。

次に、スライダー、ポップアップ、フォーム、ソーシャルシェアボタンなどのプラグインを見直します。PageSpeed Insightsの診断結果を参考に、CLSを引き起こしているプラグインを特定し、代替プラグインへの変更や設定の見直しを検討しましょう。Google AdSenseを使用している場合は、自動広告の設定を確認し、コンテンツへの影響が少ない設定に変更することが望ましく、特にインフィード広告やインコンテンツ広告は記事の途中に挿入されるためCLSへの影響が大きい傾向があります。

WordPress向けのパフォーマンス改善プラグインとしてはWP RocketやFlying Pagesなどが知られており、画像の遅延読み込み最適化やフォント最適化など、CLS改善に役立つ機能を提供しています。導入前後でPageSpeed Insightsのスコアを比較し、効果を確認しながら運用することが大切です。

「ページの 100% でレイアウト シフト（CLS）が見られます」についてよくある疑問

このメッセージや関連トピックについて、運用現場で頻繁に挙がる疑問への回答をまとめます。

「100%」はCLSスコアの値なのか

「100%」はCLSスコアそのものではなく、Google Search Consoleが集計したページ群のうち問題が確認されたページの割合です。CLSのスコアは0以上の数値で表され、0.1以下が良好、0.25超が不良とされています。100%という表記は問題の深刻度ではなく、対象ページ全体に共通する課題が存在していることを示していると理解するのが正確です。

改善してもすぐに表示が消えないのはなぜか

Search Consoleはフィールドデータをもとに評価しており、過去28日間のデータを集計して表示するためです。修正の効果が完全に反映されるまでには時間がかかるため、検証申請を行ったうえで継続的にスコアを観察する必要があります。短期間でグラフが変わらないからといって対策が無効だったわけではなく、データ更新を待つ姿勢が大切です。

モバイルとPCで結果が異なるのはなぜか

モバイルとPCでは画面幅や読み込み速度、ユーザーの操作パターンが異なるため、レイアウトシフトの発生状況も変わります。モバイル検索ではページエクスペリエンスがより重視される傾向があるため、両方に問題がある場合はモバイル側の改善を優先するのが効率的です。

まとめ

「ページの 100% でレイアウト シフト（CLS）が見られます」というメッセージは、Google Search Consoleが収集したページ群の100%でCLSの問題を検出している状態を示しています。「100%」はスコアではなく、問題が発生しているページの割合であり、サイト全体に共通する原因がある場合が多いため、テンプレートや共通パーツの修正で大幅に改善できる可能性があります。

CLSはCore Web Vitalsの一つであり、0.1以下が良好、0.25超が不良に分類されます。主な原因は、画像のサイズ未指定、動的広告の挿入、Webフォントの遅延読み込み、Cookieバナーやポップアップ、レイアウトに影響するアニメーションです。これらに対しては、width・height属性の指定、広告枠の事前確保、font-display: optionalの活用、position: fixedによる固定表示、transformでのアニメーションといった対策が有効です。

改善後はGoogle Search Consoleで修正を検証し、PageSpeed InsightsやChrome DevToolsで継続的にスコアを確認することが、長期的な検索順位の安定とコンバージョン率の向上につながります。ユーザーが快適に閲覧できるサイトづくりを心がけることが、Core Web Vitals時代における最も確実な改善アプローチとなります。