CLS（Cumulative Layout Shift）を防ぐには？レイアウト崩れの原因と対応策まとめ

画像や動画に明示的なサイズ指定をする

CLSの最も典型的な原因は、画像や動画が読み込まれるまでそのスペースが確保されていないことです。これを防ぐには、HTMLやCSSで幅（width）と高さ（height）を明示的に指定しましょう。

NG例（サイズ指定なし）

<img src="hero.jpg" alt="ヒーロー画像">

改善例（サイズ指定あり）

<img src="hero.jpg" alt="ヒーロー画像" width="1200" height="600">

CSSでaspect-ratioを使う例

.hero-img {
  aspect-ratio: 2 / 1;
  width: 100%;
  object-fit: cover;
}

WebフォントのFOUT/FOITを防ぐ

Webフォントは読み込みに時間がかかるため、以下のような"ちらつき"が発生することがあります。

• FOUT（Flash of Unstyled Text）：初期フォントが表示されたあとにWebフォントへ切り替わる
• FOIT（Flash of Invisible Text）：テキストが一瞬非表示になる

対策1：font-display: swap を指定

@font-face {
  font-family: 'Noto Sans JP';
  src: url('noto-sans-jp.woff2') format('woff2');
  font-display: swap;
}

対策2：初期フォントとWebフォントのサイズ・行間を近づける

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  line-height: 1.5;
}

動的コンテンツ（広告・バナー・埋め込み）のスペースを確保

広告や外部ウィジェットの読み込みによるズレもCLSの原因です。読み込み前から必要なスペースを予約しておくことが重要です。

NG例（スペース確保なし）

<div class="ad-slot"></div>

改善例（スペースを確保）

<div class="ad-slot" style="width:300px; height:250px;"></div>

また、レスポンシブ対応には以下のようにCSSクラスで定義しておくのが効果的です。

.ad-slot {
  width: 100%;
  height: 250px;
  background-color: #f2f2f2; /* プレースホルダとして */
}

※中には、あえてレイアウトシフトを起こしてユーザーの誤クリックを誘発しようとする悪質な手法を用いるサイトも存在します。これはユーザー体験を損なうだけでなく、広告ポリシー違反やブランドイメージの低下にもつながりますので、絶対に避けましょう。

レイアウト変更をJavaScriptで行う際の注意

JavaScriptによる動的なDOM操作でレイアウトが再計算されるとCLSの原因になります。以下のようなポイントに注意しましょう。

対策

• DOMの操作は一括で行う（reflowを減らす）
• 要素を追加する際は事前にスペースを確保する
• アニメーションはtransform / opacityを使う

// NG例：高さが変わるとCLSが発生
element.style.height = 'auto';

// OK例：transformで滑らかに表示
element.style.transform = 'translateY(0)';
element.style.opacity = '1';

レイアウトズレを防ぐためのツール活用

CLSを計測・確認するには、以下のツールが便利です。

Chrome DevTools（Performance → Layout Shift Regions）

• シフトが発生した場所に赤い枠が表示される

Lighthouse（CLSスコアを確認）

• "Avoid large layout shifts" の警告をチェック

PageSpeed Insights

• モバイル・デスクトップ別にCLSスコアが表示される

まとめ：CLSを防ぐためにすべきこと

CLSを防ぐには、**"最初からスペースを確保しておく"**という姿勢が基本です。

• 画像・動画には明示的なサイズ指定を
• フォントには font-display: swap を設定
• 動的に変わる要素にはあらかじめスペースを与える
• transform や opacity でアニメーション

これらを意識することで、ユーザー体験を大きく向上させることができます。