まずやること（最短ルート）
- ズレる箇所（画像/広告/埋め込み）を特定
- 画像・iframe・広告枠に固定サイズを付ける
- フォントの読み込みで行間が変わらないようにする
背景・判断のポイント
CLSは“読み込み中のレイアウトのズレ”です。ユーザー体験の悪化が直接的で、読みづらさや誤タップにつながります。
原因はほぼ「後からサイズが確定する要素」です。画像・iframe・広告枠・フォントなどに“予約領域”を作るだけで改善することが多いです。
改善は作り込みよりルール化が効きます。新規埋め込みを入れる時は必ず寸法を固定する、など運用に落とします。
症状の例（あるある）
- 読み込み中にボタン位置がズレて誤クリックしそうになる
- 画像や広告が後から差し込まれて、本文が押し下げられる
- PageSpeed InsightsでCLSが「不良/改善が必要」になっている
よくある原因
- width/height未指定の画像が後から確定する
- 広告/埋め込みが遅れて挿入される
- Webフォント読み込みで文字幅が変化
確認方法
- LighthouseのCLS要因表示
- 実機でスクロールしながら視覚的に確認
チェックリスト（確認漏れ防止）
- 幅/高さ未指定の画像がないか（比率固定でもOK）
- 広告/埋め込み（iframe）が後から挿入される場合、予約領域があるか
- Webフォント読み込みで文字幅が大きく変わっていないか
- 固定ヘッダー/バナーが読み込み後に出てきて押し下げていないか
- 動く要素（カルーセル等）がファーストビューに置かれていないか
対処
- 画像/iframeの寸法指定（CSSで比率固定でも可）
- 広告枠は予約領域を作る
- フォント表示戦略を最適化し、フォールバック差を減らす
やってはいけない（悪化しやすい手）
- “とりあえず後から挿入”のUIを増やす（CLSが積み上がる）
- 埋め込みの寸法を可変にしすぎる（予約領域が作れない）
- 改善箇所を特定せず、全体のCSSをいじって副作用を出す
再発防止
- 新しい埋め込み要素は「予約領域あり」をルール化
よくある質問（Q&A）
CLSはどこがズレているか分かりません
LighthouseやPSIの指摘で“ズレの要因”が出ることがあります。出ない場合は、実機で読み込み中にスクロールしながら観察し、画像・広告・埋め込み・フォントを疑うのが近道です。
広告が原因の場合はどうすればいい？
広告枠の予約領域を作り、後から挿入されても本文が動かないようにします。レスポンシブでも、複数サイズの枠を用意して切り替える方が安定します。
フォントでズレるのは防げますか？
完全にゼロは難しいですが、フォールバックとの差を減らし、読み込み戦略を調整することで改善できます。まずは“文字幅が大きく変わるフォント”が原因になっていないか確認します。