ページの「ガタつき」で検索順位が下がってる？CLSスコアを97%改善した方法
CLS（Cumulative Layout Shift）は、ウェブページの視覚的な安定性を測る指標です。画像や広告の読み込みによるレイアウトのズレを数値化し、Googleの検索ランキング要因にも含まれます。0.1未満が良好とされています。

## この記事のまとめ

**CLSとは**
- ページ閲覧中の予期しないレイアウトのズレを測定する指標
- Googleが推奨する良好な数値は0.1未満
- Core Web Vitalsの一つで、SEOに直接影響

**主な原因と対策**
- 画像にwidth/height属性を指定する
- 広告スペースを事前確保する
- Webフォントの読み込みを最適化する

この記事を読めば、CLSの改善方法と測定ツールの使い方が理解できます。

## はじめに：ウェブサイトの「ガタつき」がビジネスに与える影響

ウェブサイトを閲覧中に、記事を読んでいたはずのテキストが突然下にずれて、どこまで読んだか見失ってしまった。あるいは、「購入する」ボタンをクリックしようとした瞬間に広告が表示され、意図せず広告をタップしてしまった。このような「ガタつき」はサイト上のユーザー体験を悪化させてしまいます。

この現象は、単にユーザーをイライラさせる不快な体験にとどまりません。それは
- **コンバージョン機会の損失**
- **ブランドイメージの低下**
- **広告費の無駄遣い**

に直結する、ビジネス上の問題です。

この「ガタつき」は、Googleが提唱する**CLS（Cumulative Layout Shift）**という、ユーザー体験の質を測る重要な指標として数値化されています。

この記事を読めば、
- **CLSとは何か**
- **なぜSEO（検索エンジン最適化）にとって重要なのか**
- **具体的な改善策**

まで理解できます。

## CLS（Cumulative Layout Shift）とは何か？

CLS（Cumulative Layout Shift）とは、ウェブサイトの**「視覚的な安定性」**を測定するための指標です（[Google公式ドキュメント](https://web.dev/articles/cls?hl=ja)）。ユーザーがページを閲覧している最中に、レイアウトがどれだけ予期せず動いたかを数値化します。この視覚的な安定性は、ユーザーがストレスなくコンテンツを閲覧し、目的のアクションをスムーズに行うために不可欠です。

簡単にいうと、CLSは**「ユーザーが予期しないレイアウトのズレがどれくらい発生したかを示すスコア」**と言えるでしょう。

レイアウトのズレとは、次の画像のように後で読み込まれた要素（ `C` ）によって、先に読み込まれた要素（ `B` ）が押し下げられる動作のことを言います。

![レイアウトのズレ.png](https://image.docbase.io/uploads/a04b445d-eb46-4799-b7f3-758633cbed48.png =558x437)


Googleは優れたユーザー体験の基準として、CLSについて以下の数値を推奨しています（[Cumulative Layout Shift の最適化](https://web.dev/articles/optimize-cls?hl=ja)）。


| 評価 | CLS数値 |
| --- | --- |
| 良好 | 0.1未満 |
| 改善が必要 | 0.1以上、0.25未満 |
| 悪い | 0.25より大きい |

ここで最も重要なのは、この目標が**「ページ訪問の少なくとも75%で達成されるべき」**という点です。つまり、4人のユーザーのうち3人以上が、CLSスコアが良好な体験を得られる状態を目指す必要があります。

CLSスコアが悪いと、ユーザーは具体的に次のようなストレスを感じることになります。

* テキストの消失
    * 記事を読んでいる最中に画像や広告が読み込まれ、テキストブロック全体が下へ押しやられてしまい、どこを読んでいたか見失う。
* 意図しないクリック
    * 「購入」ボタンをクリックしようとした瞬間に、その上にバナー広告が表示され、誤って広告をクリックしてしまう。最悪の場合、キャンセルしようとしていた注文を確定してしまうといった深刻な事態にもつながりかねません。

このように、**CLSはユーザーの不満や誤操作に直結する重要な指標**です。ユーザーが快適にサイトを利用できるかどうかを判断する上で、決して無視できない要素です。

## SEOへの影響は？

CLSは単なるユーザー体験のための技術指標ではありません。Googleの検索エンジンランキングにも直接的な影響を与える重要な指標です。

その最大の理由は、CLSがGoogleの提唱する**「Core Web Vitals（コアウェブバイタル）」を構成する3つの主要指標の一つであるため**です。Core Web Vitalsは、ウェブサイトの健全性を示す中核的な指標群であり、Googleはこれを検索ランキングの要因に含めることを公言しています。

>Core Web Vitals は、ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する一連の指標です。検索結果でのランキングを上げ、全般的に優れたユーザー エクスペリエンスを提供できるよう、サイト所有者の皆様には、Core Web Vitals を改善することを強くおすすめします。
>
>引用：[Core Web Vitals と Google 検索の検索結果について](https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja&_gl=1*13e4q5e*_up*MQ..*_ga*OTY4MDIyNTAxLjE3NjA0MTI4NTg.*_ga_SM8HXJ53K2*czE3NjA0MTI4NTgkbzEkZzAkdDE3NjA0MTI4NTgkajYwJGwwJGgw)

つまり、ウェブサイトのCLSスコアが悪いと、Core Web Vitalsの評価が低いことを意味するため、結果としてGoogle検索時のランキングが低下する可能性があります。

実際に、GoogleサーチコンソールでCLSスコアが悪いかどうかを確認できます。Googleサーチコンソールで「ウェブに関する主な指標」をクリックすると、「良好な URL と判断されなかった理由」を確認できます。この中に「CLS に関する問題」があれば、CLSスコアが悪いことを示しています。

![Googleサーチコンソール「ウェブに関する主な指標」.png](https://image.docbase.io/uploads/6c15325b-a641-4372-9725-3b3496354e44.png =WxH)

結論として、CLSの改善はユーザーに快適な体験を提供するだけでなく、検索エンジンからの評価を高め、より多くの潜在顧客にサイトを見つけてもらうためのSEO対策としても重要です。

では、具体的にどのような要因がCLSスコアを悪化させてしまうのでしょうか。次章でその主な原因を解説します。

## CLSスコアを悪化させる5つの主な原因

CLSの改善に取り組むためには、まずその根本原因を特定することが不可欠です。
ここでは、最も一般的で回避可能な5つの落とし穴を解説します。

### 原因1：サイズ指定のない画像 (`<img>`)

多くのサイトで見られる最も基本的かつ致命的な過ちの一つが、画像に`width`と`height`を指定していないことです。

これによりブラウザは、画像のダウンロードが完了するまでどれくらいのスペースを確保すればよいかわかりません。その結果、画像の読み込みが完了した瞬間に、本来確保すべきだったスペースが作られ、その下にあるテキストなどのコンテンツが一気に押し下げられてしまいます。

### 原因2：サイズ指定のない広告、埋め込みコンテンツ、iframe

広告、YouTube動画、Googleマップといった外部の埋め込みコンテンツも、画像と同様の問題を引き起こします。Google公式ドキュメントによると、ウェブ上のレイアウト シフトの原因として、**広告が最も大きな要因の一つとなっています**。これらの要素は動的に読み込まれ、最終的なサイズが表示されるまで確定しないことが多いため、表示された瞬間に周囲のレイアウトを大きく動かしてしまうのです。

### 原因3：自動挿入されるコンテンツ

ユーザーの操作とは無関係に、ページの読み込み後に新しいコンテンツが挿入されるケースです。例えば、ページ上部に表示される「Cookieの使用に同意しますか？」といったバナーや、セール情報を知らせる通知などがこれに該当します。これらの要素が既存のコンテンツの上に追加されると、ページ全体のレイアウトが下にずれてしまいます。

### 原因4：Webフォントの読み込み

Webフォントの読み込み中に、代替フォントでテキストが一時的に表示されることがあります。その後、Webフォントが読み込まれるとテキストが置き換わりますが、この際にフォントのサイズが異なるとレイアウトシフト（FOUT: Flash of Unstyled Text）が発生します。たとえテキストが非表示（FOIT: Flash of Invisible Text）の場合でも、レイアウト自体は代替フォントで行われており、Webフォントが表示された瞬間に同様のズレが生じるため、問題は同じです。

### 原因5：不適切なアニメーション

要素を動かすアニメーションも、実装方法によってはレイアウトシフトの原因となります。CSSのtopやleftといったプロパティを変更すると、ブラウザはページの再計算（再レイアウト）を強制され、これがシフトを引き起こします。一方で、transformプロパティを使ったアニメーションは再レイアウトをトリガーしないため、CLSへの影響を避けながら滑らかな動きを実現できます。

これらの原因を理解することが、効果的なCLS改善への第一歩です。次のセクションでは、これらの問題に対する具体的な解決策を一つずつ見ていきましょう。

## CLSを改善するための具体的な対策

原因が特定できれば、CLSは適切な対策によって改善できる課題です。ここでは、前章で挙げた原因に対応する、実践的なテクニックを紹介します。

### 画像によるレイアウトシフトを防ぐ

最も基本的かつ効果的な対策は、`<img>` タグに常にwidthとheight属性を指定することです。`<img>` にwidthとheightを一貫して設定することでCLSスコアを改善できます。

```html
<img src="image.jpg" width="640" height="360" alt="説明文">
```

これにより、ブラウザは画像のダウンロードが完了する前でも、幅と高さの比率（アスペクト比）を計算し、必要な表示領域をあらかじめ確保することができます。

レスポンシブデザインで画像の幅を可変にする場合は、HTMLにwidthとheightを指定した上で、CSSで以下のように設定するのがベストプラクティスです。アスペクト比を維持したまま、レイアウト崩れを防ぐことができます。

```css
img {
  width: 100%;
  height: auto;
}
```

### 広告や埋め込みコンテンツのスペースを確保する

広告や埋め込みコンテンツが表示される`<div>`要素などに対して、CSSの min-height プロパティを使い、あらかじめ表示領域を確保しておきましょう。

しかし、単にスペースを確保するだけでは不十分な場合があります。その場合、例えば以下のような方法があります。

1. 最大のサイズで予約する
    - レイアウトシフトを完全に防ぐ最も確実な方法は、配信される可能性のある広告サイズのうち、最も大きいものの高さでスペースを確保することです。ただし、小さい広告が表示された場合に余白が生まれる可能性があります。
2. 最も一般的なサイズで予約する
    - Google Ad Managerなどのレポートから過去の配信データを確認し、最も頻繁に配信される広告サイズに合わせてスペースを確保します。これは、余白とレイアウトシフトのバランスを取るための戦略的なアプローチです。
3. 最小のサイズで予約する
    - 配信される可能性のある広告サイズのうち、最も小さいものでスペースを確保します。これにより余白は最小化できますが、より大きな広告が表示された際にはシフトが発生します（ただし、スペースを全く確保しないよりは遥かにましです）。

もしスペースの事前確保が難しい場合は、CLSへの影響を最小限に抑えるため、可能な限りビューポートの下部（ページの後半）に配置する戦略が有効です。これにより、ユーザーが最初に目にする領域でのレイアウトシフトを避けられます。

### Webフォントの読み込みを最適化する

Webフォントによるレイアウトシフトは、読み込み方法を最適化することで軽減できます。

* フォントの事前読み込み
    * 重要なWebフォントは、HTMLの`<head>`内で`<link rel="preload">`を使用して早期に読み込みを開始させます。これにより、ページの初期表示に間に合う可能性が高まり、レイアウトシフトのリスクが低減します。
* font-displayプロパティの活用
    * CSSで `font-display: optional` を指定すると、フォントの読み込みが初期表示に間に合わなかった場合に、そのフォントの適用を諦め、代替フォントを使い続けるようブラウザに指示できます。これにより、フォント切り替えに伴う再レイアウトを完全に回避できます。

### コンテンツの自動挿入ルールを徹底する

原則として、ユーザーのクリックやタップといった明確な操作なしに、既存コンテンツの上部に新しいコンテンツを挿入しないようにしましょう。これはユーザー体験を損なうため避けるべきです。

ユーザーの操作に応じて新しいコンテンツを表示する場合、その応答速度が重要です。ユーザーのクリックのような明確なアクションに直接的かつ即座に反応して発生するレイアウトシフトは、ユーザーにとって予期された動きと見なされます。
このため、**ユーザーがボタンをクリックしてから500ミリ秒以内**に発生したレイアウトシフトは、CLSスコアの計算から除外されます。この猶予期間内に表示を完了させることが重要です。

## CLSスコアの測定と分析方法

対策を実施したら、その効果を確認し、新たな問題点を発見するためにCLSスコアを定期的に測定することが不可欠です。ここでは、誰でも無料で利用できる代表的なツールを2つ紹介します。

### PageSpeed Insights

Googleが提供する[PageSpeed Insights](https://pagespeed.web.dev/)は、URLを入力するだけでサイトのパフォーマンスを診断できます。最大の特徴は、フィールドデータとラボデータの両方を一度に確認できる点です。

* フィールドデータ
    * 実際のユーザーが過去28日間に体験したCLSスコア。ページの全ライフサイクル（スクロール後の遅延読み込みなど）を含む、最も信頼性の高い指標
* ラボデータ
    * シミュレーション環境（Lighthouse）でページの初期読み込み時のみを測定したスコア

![PageSpeed Insightsの結果.png](https://image.docbase.io/uploads/5544d261-2b86-45b4-8e99-222771ff5f4b.png =WxH)

### Chrome DevTools

Google Chromeブラウザに組み込まれている開発者向けツールです。「パフォーマンス」ツールを利用してページの読み込みを記録すると、どの要素が、どのタイミングで、どれくらいシフトしたのかを視覚的に確認できます。これにより、問題の根本原因をピンポイントで特定することが可能です。

![パフォーマンスの結果.png](https://image.docbase.io/uploads/01fabb01-911d-4bc7-a5a8-0535858ec0b9.png =536x497)

## 実例：DocBaseのメモ詳細画面でのCLS改善

では実際に僕がDocBaseのメモ詳細画面でCLSを改善した事例を紹介します。

### 問題の特定

DocBaseのヘルプセンターや技術ブログで公開した記事がなかなかGoogle検索結果画面に表示されづらい問題がありました。
そこで、サーチコンソールを確認したところ、以下のようにCLSに関する問題がメモ詳細画面（記事詳細画面）で発生していました。
![CLSに関する問題.png](https://image.docbase.io/uploads/420e2767-f83e-409f-9f37-536bdb43dc10.png =WxH)

Chromeの開発者ツールでメモ詳細画面のパフォーマンスを計測したところ、メモ本文が表示される前に以下の要素が先に表示されていました。

- 参照メモ
- OGP一覧
- メモのアクティビティ

上記の要素が表示された後、上記の要素よりも上にメモ本文が表示されることでレイアウトシフトが発生していたのです。

![メモ詳細画面の描画の様子.png](https://image.docbase.io/uploads/296544ec-2623-4bc9-89b9-cb74a714015d.png =WxH)

### 対応方法

要素の表示順を制御すればいいので、

1. メモ本文の表示
2. 他の要素の表示

となるように調整しました。

### 改善結果

この対応により、CLSスコアが97%も改善しました。

**CLSスコアの変化**
- Before: 0.313
- After: 0.009
- 改善率: 約97%削減

**Before**
![CLS改善前のPageSpeed Insightsの結果](https://image.docbase.io/uploads/93f82dd3-9a71-4354-950a-59cd0f82f7a6.png =WxH)

**After**
![CLS改善後のPageSpeed Insightsの結果](https://image.docbase.io/uploads/5ced66a8-0c08-4f0e-877d-ce0b4b4fa467.png =WxH)

また、この改善をリリース後、Googleサーチコンソール上にも反映するために「修正を検証」をクリックしておきました。

![「修正を検証」ボタン.png](https://image.docbase.io/uploads/8d6e1d9b-3cde-48b4-b64f-f523e67a1c4b.png =WxH)

すると、リリース後しばらく経つと、サーチコンソール上でも以下のように問題が解決された（対象URLが0件になった）ことを確認できました。

![CLSに問題があるURLがゼロに.png](https://image.docbase.io/uploads/14da4240-1a3f-4042-9aa9-961e7ad5319b.png =WxH)

## よくある質問（Q&A）

### CLSの数値は、どこで確認できますか？

PageSpeed InsightsにURLを入力すれば、無料で確認できます。実際のユーザーデータ（フィールドデータ）と、シミュレーションデータ（ラボデータ）の両方が表示されます。

### CLSが悪いと、SEOにどれくらい影響しますか？

CLSはCore Web Vitalsの一つとして、Googleの検索ランキング要因に含まれています。ただし、コンテンツの質やリンクなど他の要因も重要です。CLSだけで順位が大きく変わるわけではありません。

### 画像にwidth/heightを指定すると、レスポンシブデザインが崩れませんか？

崩れません。HTMLにwidth/heightを指定した上で、CSSで `width: 100%; height: auto;` を設定すれば、アスペクト比を維持したままレスポンシブに対応できます。

### 広告のサイズが毎回違う場合、どうすればいいですか？

最も頻繁に配信される広告サイズでスペースを確保するのが現実的です。または、ビューポートの下部（ページ後半）に配置することで、CLSへの影響を最小限に抑えられます。

### CLSの改善は、すぐに効果が出ますか？

対策を実施すれば、PageSpeed Insightsのラボデータですぐに改善を確認できます。ただし、フィールドデータ（実際のユーザーデータ）は過去28日間の蓄積なので、反映に時間がかかります。

## まとめ

この記事では、ウェブサイトの「ガタつき」、すなわちCLSがユーザー体験とSEOに与える影響と、その具体的な改善策について解説してきました。最後に、重要なポイントをまとめておきます。

* CLSはウェブサイトの「視覚的な安定性」を示す指標であり、ユーザーの満足度やコンバージョンに直結する
* CLSはCore Web Vitalsの一つとしてGoogleの検索ランキング要因に含まれており、SEO評価に直接影響を与える
* 画像のサイズ指定、広告スペースの事前確保、Webフォントの最適化など、具体的な対策によって改善可能

## 参考リンク
- [ページ エクスペリエンスが Google 検索の検索結果に与える影響について](https://developers.google.com/search/docs/appearance/page-experience?hl=ja&_gl=1*9683sv*_up*MQ..*_ga*OTY4MDIyNTAxLjE3NjA0MTI4NTg.*_ga_SM8HXJ53K2*czE3NjA0MTI4NTgkbzEkZzAkdDE3NjA0MTI4NTgkajYwJGwwJGgw)
- [Cumulative Layout Shift（CLS）](https://web.dev/articles/cls?hl=ja)
- [Cumulative Layout Shift の最適化](https://web.dev/articles/optimize-cls?hl=ja)
- [レイアウト シフトの最小化](https://developers.google.com/publisher-tag/guides/minimize-layout-shift?hl=ja)

## 著者について

2019年よりDocBaseの開発にフロントエンド／バックエンドエンジニアとして参加。  
新エディターや検索機能、[公式リモートMCPサーバー](https://help.docbase.io/posts/3902653)の開発などに携わる。  

主なスキル：
- フロントエンド: React, TypeScript  
- バックエンド: Ruby, Ruby on Rails
- インフラ: Terraform