サーチコンソールで見るCLS問題の原因と改善方法詳細解説

2025 10/27

2025/10/27

はじめに

この記事の目的

本記事は、Googleサーチコンソールを活用してCLS（Cumulative Layout Shift）問題を発見し、改善につなげる方法を分かりやすく解説します。専門用語を最小限にして、具体的な確認手順や原因、対策を丁寧に説明します。

対象読者

・自分のサイトの表示安定性を改善したいウェブ担当者や個人ブロガー
・サイト速度やユーザー体験を向上させたい開発者や編集者
専門的な知識がなくても理解できるように書いています。

CLSが重要な理由

CLSはページの視覚的な安定性を表す指標で、ユーザーが誤操作をする原因になります。SEOの評価や滞在率にも影響しやすいため、早めの対応が大切です。たとえば、ボタンが後からずれてクリックミスが起きるような現象が該当します。

本シリーズで学べること

サーチコンソールでのCLS確認方法
主な原因と改善手順
運用時の注意点と再審査申請の流れ
実際の画面を見ながら進める構成にします。

読み進め方のコツ

章ごとに実践できるポイントをまとめます。まずは概要をつかみ、該当ページを特定してから対策に進んでください。

GoogleサーチコンソールとCLSの概要

サーチコンソールとは

Googleサーチコンソールは、Googleが無料で提供するサイト管理ツールです。検索キーワードの確認、インデックス状況のチェック、モバイル対応の確認、サイトの表示速度やCore Web Vitalsの確認ができます。たとえば、どの検索語で訪問が増えたかや、クロールエラーの有無を画面で把握できます。

CLS（Cumulative Layout Shift）とは

CLSはページの視覚的な安定性を表す指標です。読み込み中や表示後に要素が突然動くと、ユーザーにとって不快になります。たとえば画像や広告が後から挿入されて本文が下に押し出されるとスコアが悪化します。数値は0〜大きな値で表し、低いほど安定しています。

サーチコンソールとCLSの関係

サーチコンソールはCore Web Vitalsの一つとしてCLSの問題を報告します。問題のあるページ群を一覧で示してくれるので、改善の優先順位を付けやすくなります。具体的には、問題の該当URLや影響を受けたユーザー数を確認でき、改善後は再評価の目安にもなります。

利用のメリット

サーチコンソールを使うと、どのページで視覚的な不安定さが起きているかを早く把握できます。改善対象を絞り、ユーザー体験を高めやすくなります。簡単な例では、画像にサイズ指定を追加することでCLSが改善することが多いです。

CLSとは何か？なぜ重要なのか

CLSの定義

CLS（レイアウトの累積シフト）は、ページを表示したときに要素が予期せず動いた量を数値化したものです。例えば広告の挿入や画像の後読みでテキストやボタンが動く現象を指します。スコアは「影響を受けた画面面積の割合」と「移動距離の割合」を掛け合わせて算出します。

スコアの目安

0.1未満：良好
0.1〜0.25：改善の余地あり
0.25以上：問題あり

具体例で理解する

広告が読み込まれて本文が下へ押される
画像にサイズ指定がなく読み込みで高さが変わる
フォントが切り替わって行間や文字幅が変わる
これらはユーザーが誤タップしたり読みづらく感じる原因になります。

なぜ重要か

視覚的安定性が高いと操作ミスが減り、ページの信頼感が増します。ユーザー体験の向上は滞在時間やコンバージョンに結びつき、Googleの評価にも影響します。日常的な改善でサイトの使いやすさが確実に上がります。

サーチコンソールでのCLS問題の確認方法

まず準備すること

サーチコンソールにサイトを登録し、十分なトラフィックが集まるまで待ちます。データは実際のユーザーの計測（フィールドデータ）をもとに表示されます。

レポートの場所

左メニューから「ページエクスペリエンス」→「ウェブに関する主な指標」を開きます。ここで「CLS」に関するステータスが一覧で見られます。

警告の見方

「CLSに関する問題：0.25超」と表示されたら、Google基準（良好は0.1未満）を超えるレイアウトシフトが発生しています。警告は問題のあるページやURLグループを示します。

個別URLの確認方法

警告をクリックすると影響を受けるページ一覧が出ます。各URLを選ぶと、詳細なサンプル数や該当するシフトの割合が見られます。必要ならCSVでエクスポートして絞り込みができます。

見るときの注意点

・フィールドデータのサンプル数が少ないと偏りがあります。
・ラボツールと結果が異なることがあるため、まずはフィールドデータで傾向を把握してください。

最初に取るべき行動

問題の多いURLを特定し、共通のテンプレートや画像・広告の配置を優先的に確認します。次章で具体的な原因と改善策を説明します。

CLSの主な原因

1. 画像や動画に幅・高さがない

画像や動画が読み込まれる前にサイズを指定していないと、ブラウザが読み込み後に要素の高さや幅を決めます。その結果、読み込み途中でレイアウトが大きく動き、CLSが悪化します。例：記事内の画像にwidth/heightやCSSのアスペクト比を設定していない。

2. 広告や埋め込みウィジェットの領域確保がない

広告や外部ウィジェットは後から挿入されることが多いです。あらかじめ領域を確保していないと、ページが押し出されてしまいます。例：下に表示される広告がロード時に突然挿入される。

3. CSSの遅延やJavaScriptによるスタイル変更

遅れて読み込まれるCSSやJavaScriptがあると、最初に簡易なスタイルで表示され、後で本来のスタイルに切り替わります。フォントや幅が変わると要素が移動します。例：重要なスタイルを遅延させている。

4. ウェブフォントの遅延読み込み

フォントが後から読み込まれると、テキストの字幅や行間が変わり、段落やボタンがずれることがあります。例：カスタムフォントで本文の表示が変わる。

5. 動的コンテンツやアニメーション

ユーザー操作で要素を挿入・削除したり、アニメーションで位置を変えるとCLSに影響します。例：非同期で読み込む関連記事や、幅が変わるカルーセル。

どの原因も共通して、要素の位置が予期せず変わる点が問題です。次章では、これらをどう改善するかを具体的に説明します。

CLS問題の改善方法

画像・iframe・広告でレイアウトを確保する

画像やiframe、広告に必ずwidth・height属性を付け、もしくはCSSでアスペクト比を指定します。例えばimgにwidthとheightを入れるか、aspect-ratioを使って読み込み前のスペースを確保します。広告枠は固定サイズかレスポンシブ用のプレースホルダーを用意してください。

CSSの最適化と重要スタイルのインライン化

ページの最初に必要なスタイル（フォントやレイアウトの基礎）はインラインで入れ、遅延読み込みするCSSを分けます。これにより表示の揺れを減らします。不要なレンダリングブロッキングを避けましょう。

動的要素のスペース予約

遅れて挿入するコンテンツ（広告、コメント、画像ギャラリーなど）はあらかじめ高さを予約します。JavaScriptで要素を追加する際はプレースホルダー要素を先に挿入してください。

Webフォント対策

font-display: swapを使うとフォント遅延で起きるレイアウト変化を軽減できます。必要ならシステムフォントフォールバックを組み合わせてください。

サードパーティウィジェットの最適化

外部ウィジェットは非同期で読み込み、必要なスペースを確保します。可能なら遅延読み込みや静的プレースを使い、影響範囲を限定します。

確認とテストの流れ

開発環境でLighthouseやWeb Vitals拡張を使ってスコアを計測します。変更ごとに影響を測り、優先順位の高い箇所から対処してください。

サーチコンソールでの運用ポイントと再審査申請

はじめに

CLSを改善した後は、Googleサーチコンソールの機能を使い効率よく運用します。修正を反映させる手順と、再審査（検証）の進め方を具体的に説明します。

運用ポイント

修正完了後は「修正を検証」を実行します。問題ページのURLをまとめて送るとスムーズです。例：レイアウト移動を固定化したページ一覧。
「URL検査」で個別の状態を確認します。スクリーンショットやライブテストの結果を添えて記録してください。
レポートはモバイルとPCで必ず確認します。影響範囲（ページ数）を把握しましょう。

再審査申請の流れ

問題を修正して内部で検証する。
サーチコンソールで「修正を検証」を開始する。
Googleの検証結果を待つ（数日〜数週間）。
合格ならステータスが更新され、不合格なら原因を見直して再申請します。

注意点

一部だけ直しても別ページで同様の問題が起きます。点検リストを作って全体を確認してください。
外部スクリプトや広告は影響が大きいので、読み込み順やサイズ指定を明確にしましょう。

定期的な監視方法

月次でCore Web Vitalsレポートを確認し、変化が出たら優先度を付けて対応します。
変更履歴や修正のエビデンス（スクリーンショット、コミットログ）を残すと再現と改善が早まります。

以上が運用時の実務的なポイントです。継続的に監視し、ユーザー体験向上を目指しましょう。

まとめ：CLSとサーチコンソール活用の重要性

CLSは閲覧中の予期しないレイアウト変動でユーザーにストレスを与える指標です。画像に幅・高さを指定する、広告枠を確保する、フォントの読み込み方法を工夫するなどの対策で改善できます。
サーチコンソールは問題の早期発見に便利です。通知を設定して、問題が増えたページや影響範囲を優先的に確認してください。例としては、モバイルでのみ高いCLSが検出された場合、まずスマホ表示を優先して修正します。
日々の運用ポイント
主要なページを定期チェックする。検索流入の多いページを優先します。
変更履歴と合わせて計測する。新しい広告やコンテンツ追加が影響することが多いです。
小さな改善を積み上げる。1回の改修で全て解決することは少ないため、段階的に取り組みます。
SEOと信頼性への効果
CLSを改善するとユーザー滞在時間や直帰率が改善しやすく、検索順位の安定化に寄与します。