Google Search Console で CLS の問題を解決する方法｜原因と対処法をわかりやすく解説

[初回公開] 2025年05月09日
[最新更新] 2025年05月09日

ブログやサイトを運営していると、Google Search Console（サーチコンソール）で「CLS に関する問題」が表示されることがあります。CLS はユーザー体験に関わる重要な指標で、放置しておくと検索順位にも影響を及ぼす可能性があります。本記事では、CLS の基本的な意味から、Search Console での確認方法、具体的な改善方法までをわかりやすく解説します。SEO 対策の一環として、ぜひ参考にしてください。

１．Google Search Console とは

Google Search Console とは、Google が提供する無料のツールで、ウェブサイトのパフォーマンスや検索結果での表示状況を確認・改善するために使われます。
インデックス状況、検索キーワード、モバイルユーザビリティ、Core Web Vitals など、SEO において重要なデータが豊富に揃っており、サイト運営者にとっては欠かせない存在です。

特に最近はページエクスペリエンスの評価が強化されており、CLS などの指標にも注目が集まっています。

２．Google Search Console で「CLSに関する問題」が表示される様子

Google Search Console の「ページエクスペリエンス」や「ウェブに関する主な指標」レポートを確認すると、「CLS に関する問題」という警告が表示されることがあります。

CLS の対応を行った後は同じく Google Search Console で再審査を依頼するとクロールを待つより早くに改善されます。

この警告は、ユーザーがページを閲覧中に要素が予期せず動くなど、レイアウトの不安定さを示す指標です。
次の章では実際の画面キャプチャや表示例を交えながら、どのような項目で警告が出るのか、また URL 単位での影響範囲の確認方法について説明します。

３．CLS の問題とは

CLS（Cumulative Layout Shift）とは、ウェブページの読み込み中や表示後に、要素が突然移動することでユーザーが混乱する現象を示す指標です。

例えば、読み込みが終わった直後に広告バナーが表示されて文章がズレたり、ボタンの位置が急に変わったりすると、それが CLS の問題になります。
数値が高くなるとユーザー体験が損なわれ、Google の評価にも悪影響を与えるため、CLS を低く保つことが重要です。

４．CLS の問題の対応方法

CLS の改善には、主に以下のような方法が効果的です。
画像や広告のサイズをあらかじめ指定する、フォントの遅延読み込みを避ける、レイアウトの変化を引き起こす要素を事前に読み込んでおく、といった対策があります。

特にモバイル環境での閲覧時に CLS が悪化しやすいため、モバイルビューでの確認と調整も不可欠です。
本章では、HTML や CSS でできる具体的な修正ポイントを紹介します。

4-1．画像や広告の高さを CSS で指定する

CLS はブラウザで表示して後から画像や広告が読み込まれて文章が下にズレる度合いを示しています。
そのため、あらかじめ CSS で高さを確保しておくとズレを防止することができます。

例えば画像には次の CSS で固定値を指定するとページ読み込み直後は空白になりますが、画像データが届くと表示されます。

style=”max-width: 100%; height: 250px;

4-2．アンカー広告を停止する

Google アドセンスの自動広告は HTML を記事内に記載せずとも自動的に広告を配置してくれる便利なツールですが、その中でページ表示時に画面上部または下部からスライドしながら広告が出る「アンカー広告」は CLS に影響を与えます。

下図は Google アドセンスの広告設定画面です。
ここでアンカー広告をオフにすると CLS の数値が下がります。

５．CLS 対策後の改善の様子

Google アドセンスのアンカー広告をオフにすると数日中に Google Search Console でモバイル版で「不良」だったものが「改善が必要な URL」に変更になりました。

まだ「改善が必要な URL」になっているのは、対象のウェブサイトの画面上部に広告を入れるようにしていますが、この広告の表示領域の高さを指定していないためです。

対してパソコン版の方はアンカー広告が表示されないので、一定して「改善が必要な URL」が続いています。

続いて、高さ指定していなかった画面上部の広告エリアに height: 250px を指定した結果、こちらも数日中に「良好」に変更となりました。

６．まとめ

CLS の問題は、見た目には小さな変化に思えても、ユーザー体験やSEOに大きな影響を与える重要な項目です。
Google Search Console を活用すれば、どのページで問題が発生しているかを正確に把握でき、早期の対応が可能です。

日頃からサイトの表示速度やレイアウト安定性を意識することで、ユーザーにも Google にも好まれるサイト作りができます。
今回の対策を参考に、CLS のスコア改善に取り組んでみてください。

関連記事