CLS（Cumulative Layout Shift）はページ読み込み中の視覚的ずれの累積

なぜこれを学ぶか

CLS の改善は SEO 評価とユーザー体感の両方に効く。 読み込み中のガタガタが大きいサイトは離脱率が高く、SEO も評価が低い。

サイト体感を改善するすべての担当者で必須。

学ばないと起きること

学ぶメリット

• 体感品質の劇的向上
• CLS 0.1 以下を達成
• 商談で「CLS 改善 5 つの原因」を即答

仕組み

CLS の定義

公式: 読み込み中に発生したレイアウト変動の影響度を累積:

CLS = 影響範囲（viewport）× 移動距離（画面比）

CLS の主要原因

キー概念

画像のサイズ確保

<img src="hero.jpg" width="1200" height="800" alt="...">

ブラウザがレイアウト計算前に空間予約。

CSS でも:

img {
  aspect-ratio: 3/2;
  width: 100%;
  height: auto;
}

Web フォントの最適化

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 90%;
}

広告枠の確保

<div style="min-height: 250px;">
  <!-- ここに広告が動的挿入される -->
</div>

最低高さを CSS で確保 → 挿入時の押し下げ防止。

動的コンテンツの位置

transform を使ったアニメーション

/* 良い: transform は CLS 影響なし */
.card { transition: transform 0.3s; }
.card:hover { transform: translateY(-4px); }

/* 悪い: top の変更は CLS 影響 */
.card { position: relative; transition: top 0.3s; }
.card:hover { top: -4px; }

よくある誤解

実務での適用

画像の SEO チェックリスト

1. 全画像に width / height 属性
2. CSS で aspect-ratio 指定（レスポンシブ）
3. lazy loading で off-screen 画像対応
4. Next.js なら next/image 使用

Web フォント

1. font-display: swap
2. preload で重要フォント
3. size-adjust で fallback 整合

動的コンテンツ

1. 挿入前に枠確保
2. 広告枠は min-height で予約
3. オーバーレイ / モーダルで既存コンテンツに影響なし

トラブル別の対処

公式ソース

• CLS ガイド
• CLS の最適化
• 画像の aspect-ratio

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。