---
title: "CLS（レイアウトのずれ）とは？読み込み中に画面が動く原因"
description: "読み込み中に突然レイアウトがずれてボタンを押し間違えた経験はないでしょうか。CLSはこの「予期しないずれ」を累積スコアで数値化した指標です。画像・広告・Webフォントがずれを引き起こす仕組みと、防ぐための実装パターンを解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-cls"
markdown: "https://giga-site.com/articles/what-is-cls/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# CLS（レイアウトのずれ）とは？読み込み中に画面が動く原因

ページを読んでいる途中にボタンや文章が突然動いて、押し間違える経験はありませんか。この「予期しないレイアウトのずれ」を累積で数値化したのがCLSです。本記事ではCLSの仕組みと、画像や広告、Webフォントがずれを起こす原因、そして防ぐための具体的な方法までをやさしく解説します。

> Source HTML: https://giga-site.com/articles/what-is-cls
> Article index: https://giga-site.com/articles/index.md

## CLSとは何か

CLSはCumulative Layout Shiftの略で、ページの読み込み中や操作中に、要素が予期せず動いてしまう量を累積で測る指標です。Core Web Vitalsの一つで、視覚的な安定性を表します。

CLSの値は、動いた要素の面積の割合と、動いた距離の割合を掛け合わせたスコアの合計で計算されます。大きく広い範囲がずれるほど数値が悪化します。

ユーザーがリンクを押そうとした瞬間に上の画像が読み込まれてボタンが下にずれ、別のものを押してしまう。こうした体験を防ぐためにCLSが重視されます。

## レイアウトがずれる主な原因

レイアウトのずれは、表示領域を確保しないまま後からコンテンツが挿入されることで起こります。代表的な原因を押さえておくと対策しやすくなります。

- サイズ指定のない画像が後から読み込まれて高さが変わる
- 広告やバナーが遅れて差し込まれ、その下の要素が押し下げられる
- Webフォントの読み込みで文字の見た目が切り替わり行が動く
- JavaScriptで後から要素を挿入し、既存のレイアウトを押し出す
- iframeや埋め込みコンテンツのサイズが事前に確保されていない

## 実務ではどこで関係する？

CLSは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

CLS（レイアウトのずれ）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## CLSの基準値

CLSは0.1以下なら「良好」、0.25を超えると「不良」とされます。スコアは累積なので、小さなずれでも積み重なると悪化します。

特にモバイルでは画面が狭く、わずかなずれでも操作ミスにつながりやすいため、PCよりシビアに見たほうがよい指標です。

## CLSを防ぐ手順

CLS対策の基本は「後から入るものの居場所を、最初から確保しておく」ことです。次の手順で見直してみてください。

1. すべての画像と動画に幅と高さ（またはアスペクト比）を指定する
2. 広告や埋め込みの枠は、表示前から固定サイズの領域を確保しておく
3. Webフォントは表示方法を調整し、切り替え時のずれを抑える
4. 新しいコンテンツは既存要素の上ではなく、確保済みの場所に挿入する
5. 計測ツールでずれた要素を特定し、原因の枠から順に修正する

## 確認・共有時にもずれを意識する

デザインを関係者に確認してもらうとき、ガタつくページは「未完成」「雑」という印象を与えてしまいます。中身が良くても評価が下がるのはもったいないことです。

特にレビューでは相手がスクリーンショットを撮ったり要素を指して指摘したりするため、レイアウトが安定していると意思疎通もスムーズです。

ギガサイト便で発行した共有URLは、同じURLのままファイルを差し替えられます。CLSを直したHTMLに更新すれば、リンクを送り直さずに改善版を確認してもらえます。

## よくある質問

### CLSはどうやって測れますか？

Lighthouseやブラウザの開発者ツール、各種Web Vitals計測ツールで測定できます。ラボ計測に加えて、実ユーザーのフィールドデータでも確認すると、実際の利用環境でのずれが分かります。

### 画像にサイズを指定するだけで効果はありますか？

大きな効果があります。幅と高さ、またはアスペクト比を指定すると、画像が読み込まれる前から表示領域が確保され、読み込み完了時に周囲の要素が動かなくなります。CLS対策の基本中の基本です。

### Webフォントもレイアウトのずれの原因になりますか？

なります。最初に代替フォントで表示し、後から指定フォントに切り替わると、文字幅や行の高さが変わって周囲がずれることがあります。表示方法の設定で切り替え時の影響を抑えられます。

### CLSの目標値はどのくらいですか？

0.1以下が良好の目安です。0.25を超えると不良とされます。スコアは累積されるため、小さなずれを放置せず、積み重ならないように対策することが大切です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [Core Web Vitalsとは？表示速度・体験の指標](https://giga-site.com/articles/what-is-core-web-vitals/index.md)
- [LCP（Largest Contentful Paint）とは？メインコンテンツが出る速さ](https://giga-site.com/articles/what-is-lcp/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CLS（レイアウトのずれ）とは？読み込み中に画面が動く原因",
  "description": "読み込み中に突然レイアウトがずれてボタンを押し間違えた経験はないでしょうか。CLSはこの「予期しないずれ」を累積スコアで数値化した指標です。画像・広告・Webフォントがずれを引き起こす仕組みと、防ぐための実装パターンを解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-cls",
  "url": "https://giga-site.com/articles/what-is-cls",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "CLSはどうやって測れますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Lighthouseやブラウザの開発者ツール、各種Web Vitals計測ツールで測定できます。ラボ計測に加えて、実ユーザーのフィールドデータでも確認すると、実際の利用環境でのずれが分かります。"
      }
    },
    {
      "@type": "Question",
      "name": "画像にサイズを指定するだけで効果はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "大きな効果があります。幅と高さ、またはアスペクト比を指定すると、画像が読み込まれる前から表示領域が確保され、読み込み完了時に周囲の要素が動かなくなります。CLS対策の基本中の基本です。"
      }
    },
    {
      "@type": "Question",
      "name": "Webフォントもレイアウトのずれの原因になりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "なります。最初に代替フォントで表示し、後から指定フォントに切り替わると、文字幅や行の高さが変わって周囲がずれることがあります。表示方法の設定で切り替え時の影響を抑えられます。"
      }
    },
    {
      "@type": "Question",
      "name": "CLSの目標値はどのくらいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "0.1以下が良好の目安です。0.25を超えると不良とされます。スコアは累積されるため、小さなずれを放置せず、積み重ならないように対策することが大切です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```