CLS に関する問題: 0.25 超（モバイル）とは？

Googleサーチコンソールより、「ウェブに関する主な指標＞モバイル＞CLS に関する問題: 0.25 超（モバイル）」ということで「この問題がある URL のページ エクスペリエンスは不良です」ということです。

CLSってなに？

【CLS（Cumulative Layout Shift）】は「読んでいる最中に画面がガタッとズレる度合い」を数値化した指標（Core Web Vitalsの1つ）です。
ページ表示中に起きた「意図しないレイアウトのズレ」を合算してスコア化します。

• 良い ≤ 0.10
• 要改善 0.10–0.25
• 不良 > 0.25

「CLS に関する問題：0.25超（モバイル）」は、実ユーザーのモバイル計測（過去28日）で、75パーセンタイルのCLSが0.25を超えたURL群がある、という意味です。GSCに出ている「対象URL 193」は、その“同じタイプの問題を持つページのグループ”の規模です。

なにが原因で起きる？

共通パターンはこれです（あなたのサイトでも該当）：

• 広告が後から挿入されて本文が下にズレる
• 目次やウィジェットの後出し表示／アニメーション
• 画像に width/height がない（読み込み後にサイズが確定）
• Webフォント切り替えで文字サイズが変わる
• 「埋め込み（YouTube等）」の高さが後で決まる

どう直す？（最短チェックリスト）

1. 広告の枠に“最低高さ”を確保（イン記事／記事末Multiplexをラッパーで囲んで min-height を付ける）
2. 目次（RTOC）のアニメーションOFF＋目次ボックスに min-height を付与
3. モバイルの自動バナー広告はOFFまたは広告間隔を広めに（800–1000px）
4. 画像はwidth/height（またはaspect-ratio）を必ず持たせる
5. フォントはfont-display: swap、またはWebフォントを使わない設定に
6. 埋め込みは比率ボックス（例：aspect-ratio:16/9）で高さを先取り

直せたかの確認方法

• PageSpeed Insights（モバイル）で対象URLを測定 → 「最大のレイアウト シフト要素」に広告や目次が出なくなっているかを見る
• Chrome DevTools → RenderingタブのLayout Shift Regionsにチェックして、ズレ箇所が赤枠で出るか確認

改善を入れたら、GSCの該当レポートで「修正を検証」を押してください。
CLSは“実ユーザーデータ（28日移動平均）”なので、反映に数週間かかるのが普通です。目標はCLS ≤ 0.10。

川下　政明

土木施工管理技士

XInstagramYouTube

川下政明（かわしもまさあき）です。
土木施工管理歴３０年以上のベテラン施工管理技士として、現場のリアルを発信中！
■施工管理のノウハウ
■測量のコツ・CADの活用法
■パソコンを使った業務効率化
【保有資格】
・1級土木施工管理技士
・2級管工事施工管理技士
・2級舗装施工管理技士
・測量士
・採石業務管理者など
建設現場で役立つ情報を「わかりやすく」「実践的に」お届けします！
仕事のヒントにしていただけると嬉しいです。