Cumulative Layout Shift（CLS）とは？ユーザー体験を向上させる視覚的安定性の完全ガイド

10 min 3 views

皆さんは、Webサイトを閲覧している際に、突然レイアウトがずれてしまい、クリックしたいボタンが別の場所に移動してしまった経験はありませんか？これは「レイアウトシフト」と呼ばれる現象で、ユーザーにとって非常にストレスフルな体験となります。

こうした問題を数値化し、Webサイトの視覚的安定性を評価する指標が「CLS（Cumulative Layout Shift）」です。2021年6月以降、GoogleはCLSを含むCore Web Vitalsを検索ランキングの要因の一つとして採用しており、SEO対策においても重要な指標となっています。

この記事では、CLSの基本的な概念から具体的な改善方法まで、実践的な視点で詳しく解説していきます。表示速度の改善は、単にGoogleのためだけでなく、ユーザーにとってより快適なWebサイト体験を提供するための必須要素なのです。

目次

CLSとは – 視覚的安定性を測る重要な指標

CLSの定義と意味

CLS（Cumulative Layout Shift）は、「累積レイアウトシフト」という意味で、Webページの視覚的な安定性を測る指標です。簡単に言えば、ページの読み込み時や表示中に、ユーザーが予期しないタイミングで発生するレイアウトの「ずれ」や「崩れ」の量を数値化したものです。

具体的には、以下のような現象がCLSの対象となります：

  • 画像が読み込まれることで、読んでいたテキストが突然下に押し出される
  • 広告が遅れて表示され、クリックしようとしたボタンが移動してしまう
  • Webフォントが読み込まれることで、テキストのサイズが変わってレイアウトが崩れる
  • 動的コンテンツの挿入により、既存のコンテンツが予期しない位置に移動する

これらの現象は、ユーザーにとって非常に不快で、時には誤操作を引き起こす原因となります。特に、ECサイトでは意図しない商品を購入してしまったり、フォームでは間違った選択肢を選んでしまったりするリスクがあります。

Core Web Vitalsとしての重要性

CLSは、Googleが提唱する「Core Web Vitals」の3つの指標のうちの一つです。Core Web Vitalsは、以下の3つの指標で構成されています：

  1. LCP（Largest Contentful Paint） – 読み込み性能
  2. FID（First Input Delay） ※2024年3月からINP（Interaction to Next Paint）に変更 – インタラクティブ性
  3. CLS（Cumulative Layout Shift） – 視覚的安定性

これらの指標は、2021年6月以降、Googleの検索ランキング要因として導入されており、SEO対策においても無視できない重要な要素となっています。

CLSの評価基準

CLSのスコアは0から1の数値で表され、以下の基準で評価されます：

  • 0.1以下：「良好（Good）」- 理想的な状態
  • 0.1～0.25：「要改善（Needs Improvement）」- 改善が必要
  • 0.25以上：「不良（Poor）」- 緊急に対応が必要

Googleは、CLSスコアを0.1以下に保つことを推奨しており、これを達成することで、ユーザーに優れた視覚的安定性を提供できると考えられています。

CLSの仕組み – どのようにスコアが算出されるのか

レイアウトシフトスコアの計算方法

CLSのスコアを理解するために、まず個々のレイアウトシフトがどのように評価されるかを見てみましょう。レイアウトシフトスコアは、以下の計算式で算出されます：

レイアウトシフトスコア = 影響率 × 距離の割合

影響率の計算

影響率は、レイアウトシフトが表示領域（ビューポート）のどれだけの割合に影響を与えたかを示します。例えば、画面上部に広告が挿入されて、画面全体の75%の領域が下に移動した場合、影響率は0.75となります。

距離の割合の計算

距離の割合は、要素が実際にどれだけ移動したかを示します。これは、要素が移動した距離を表示領域の最大寸法で割った値です。例えば、要素が画面の高さの25%分移動した場合、距離の割合は0.25となります。

計算例

上記の例の場合、レイアウトシフトスコアは以下のようになります： レイアウトシフトスコア = 0.75（影響率）× 0.25（距離の割合）= 0.1875

CLSスコアの決定方法

ページには複数のレイアウトシフトが発生する可能性があります。CLSでは、これらのレイアウトシフトを「セッションウィンドウ」と呼ばれる単位でグループ化し、最も大きなバーストを測定します。

セッションウィンドウの仕組み

セッションウィンドウは、以下の条件で定義されます：

  • 各レイアウトシフトの間隔が1秒未満
  • 最大5秒間のレイアウトシフトを一つのグループとする

例えば、ページ読み込み時に3つのレイアウトシフトが短時間で発生した場合、それらは一つのセッションウィンドウとして扱われ、各スコアが合計されます。

最終的なCLSスコアは、すべてのセッションウィンドウの中で最も大きなスコアを持つものが採用されます。これにより、ページの最も問題のある部分が適切に評価されることになります。

測定対象となるレイアウトシフト

すべてのレイアウトシフトがCLSの対象となるわけではありません。以下の条件を満たすものだけが測定対象となります：

  • ユーザーが予期していないレイアウトシフト
  • ユーザーの操作（クリック、タップ、キー入力など）から500ミリ秒以内に発生したレイアウトシフトは除外

つまり、ユーザーがボタンをクリックした結果として発生するレイアウトシフトは、ユーザーが予期しているものとして除外されます。

CLSの改善方法 – 具体的な対策とベストプラクティス

1. 画像と動画のサイズ指定

レイアウトシフトの最も一般的な原因は、サイズが指定されていない画像や動画です。ブラウザは軽量なテキストを先に読み込み、その後に画像を表示するため、画像のサイズが事前に分からないと、読み込み時にレイアウトが崩れてしまいます。

基本的な対策

HTMLの<img>タグと<video>タグには、必ずwidthとheight属性を指定しましょう：

Copy<img src="example.jpg" alt="説明文" width="600" height="400">
<video src="example.mp4" width="800" height="450" controls></video>

レスポンシブ対応の画像

現在のWeb制作では、レスポンシブデザインが一般的です。この場合、CSSのアスペクト比を使用して領域を確保できます：

Copyimg {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

srcset属性を使用した場合

異なるデバイスサイズに対応するため、srcset属性を使用する場合も、基本的なwidth/height属性を指定することで、ブラウザが適切な領域を確保できます：

Copy<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     width="800" height="600"
     alt="説明文">

2. 広告表示領域の最適化

動的に表示される広告は、CLSの主要な原因の一つです。特に、遅延読み込みされる広告や、サイズが可変の広告は注意が必要です。

広告用スペースの事前確保

広告が表示される領域を事前に確保することで、レイアウトシフトを防げます：

Copy.ad-container {
  min-height: 250px; /* 広告の最大サイズに合わせて設定 */
  width: 100%;
  background-color: #f0f0f0; /* 広告が表示されるまでの背景色 */
}

プレースホルダーの活用

広告が読み込まれるまでの間、プレースホルダーを表示することで、ユーザーに適切な期待を与えられます：

Copy<div class="ad-placeholder">
  <p>広告を読み込んでいます...</p>
</div>

広告配置の最適化

ページ上部への広告配置は、ページ全体のレイアウトに大きな影響を与えるため、可能な限り避けるか、十分な配慮が必要です。代わりに、以下の配置を検討しましょう：

  • サイドバーへの配置
  • コンテンツ間への自然な挿入
  • ページ下部への配置

3. Webフォントの最適化

カスタムフォント（Webフォント）の読み込みは、FOIT（Flash of Invisible Text）やFOUT（Flash of Unstyled Text）という現象を引き起こし、CLSの原因となります。

フォントディスプレイの最適化

CSSのfont-displayプロパティを使用して、フォントの読み込み動作を制御できます：

Copy@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* フォント読み込み中は代替フォントを使用 */
}

font-displayの値による動作の違い：

  • swap: 代替フォントを表示し、読み込み完了後に切り替え
  • optional: 接続速度に応じて、カスタムフォントを使用するか判断
  • fallback: 短時間で読み込めない場合は代替フォントを使用

フォントの事前読み込み

重要なWebフォントは事前に読み込むことで、レイアウトシフトを軽減できます：

Copy<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>

システムフォントの活用

デザインに大きな影響がない場合は、システムフォントを使用することも効果的です：

Copybody {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

4. 動的コンテンツの最適化

JavaScriptによって動的に挿入されるコンテンツも、CLSの原因となります。

コンテンツ挿入位置の工夫

既存のコンテンツを押し下げるのではなく、以下の方法を検討しましょう：

  • 既存コンテンツの上にオーバーレイ表示
  • ページ下部への追加
  • 専用エリアへの挿入

Cookie同意バナーの最適化

Cookie同意バナーは、ページ上部に表示されることが多く、CLSの大きな原因となります：

Copy.cookie-banner {
  position: fixed;
  bottom: 0; /* 上部ではなく下部に配置 */
  width: 100%;
  background: #333;
  color: white;
  z-index: 1000;
}

5. アニメーションとトランジションの最適化

CSSアニメーションも、適切に実装しないとレイアウトシフトを引き起こします。

Transformプロパティの使用

要素の移動には、top、leftではなくtransformプロパティを使用しましょう：

Copy/* 悪い例 */
.element {
  top: 100px;
  left: 100px;
  transition: top 0.3s, left 0.3s;
}

/* 良い例 */
.element {
  transform: translate(100px, 100px);
  transition: transform 0.3s;
}

サイズ変更時の注意

要素のサイズ変更には、transform: scale()を使用することで、周囲の要素への影響を最小限に抑えられます：

Copy.element:hover {
  transform: scale(1.1);
}

CLSの測定と分析ツール

Google PageSpeed Insights

PageSpeed Insightsは、CLSの測定に最も一般的に使用されるツールです。実際のユーザーデータ（フィールドデータ）と、シミュレーション環境でのデータ（ラボデータ）の両方を提供します。

使用方法

1. PageSpeed Insightsにアクセス 2. 測定したいページのURLを入力 3. 「分析」ボタンをクリック 4. 結果のCore Web VitalsセクションでCLSスコアを確認

結果の解釈

– **フィールドデータ**: 過去28日間の実際のユーザー体験データ – **ラボデータ**: 特定環境でのシミュレーション結果

改善の優先度を決める際は、フィールドデータを重視することが重要です。

Google Search Console

Search Consoleの「ウェブに関する主な指標」レポートでは、サイト全体のCLSの状況を把握できます。

活用方法

1. Search Consoleにログイン 2. 「エクスペリエンス」→「ウェブに関する主な指標」を選択 3. 「モバイル」または「PC」のレポートを開く 4. CLSに関する問題のあるページを確認

このツールの利点は、個別のページではなく、サイト全体の傾向を把握できることです。

Chrome DevTools

開発者向けのより詳細な分析には、Chrome DevToolsのLighthouseが有効です。

使用方法

1. 測定したいページでDevToolsを開く（F12） 2. 「Lighthouse」タブを選択 3. 「Generate report」をクリック 4. Performance部分でCLSスコアを確認

Layout Shift Regionsの活用

DevToolsの「Rendering」タブで「Layout Shift Regions」を有効にすると、レイアウトシフトが発生している箇所が視覚的に表示されます。

Web Vitals拡張機能

Google Chrome拡張機能「Web Vitals」を使用すると、リアルタイムでCLSを含むCore Web Vitalsを測定できます。

メリット

– リアルタイムでの測定 – 開発中のページでも使用可能 – シンプルで使いやすいインターフェース

表示速度改善におけるCLSの位置づけ

ユーザー体験への直接的な影響

CLSの改善は、他のCore Web Vitals指標と比較して、ユーザー体験に最も直接的な影響を与えます。レイアウトシフトは、ユーザーが実際に体感できる問題であり、以下のような具体的な影響があります：

  • 誤操作の防止: 意図しないリンクやボタンのクリックを避けられる
  • 読みやすさの向上: テキストコンテンツの安定した閲覧が可能
  • 信頼性の向上: プロフェッショナルで信頼できるサイトという印象を与える

他のCore Web Vitals指標との関係

CLSは、LCPやINPと密接に関連しています：

  • LCP改善との相乗効果: 画像の最適化はLCPとCLSの両方に効果的
  • INP改善との関係: 動的コンテンツの最適化はINPとCLSの両方に影響
  • 総合的なUX向上: 3つの指標すべてを改善することで、包括的なユーザー体験の向上が実現

SEOへの影響

GoogleのPageExperienceアップデートにより、CLSは検索ランキングの要因の一つとなっています。ただし、以下の点に注意が必要です：

  • コンテンツの品質が最優先: CLSの改善だけでは上位表示は困難
  • 競合優位性の確保: 同程度のコンテンツ品質の場合、CLSが優れているサイトが有利
  • 長期的な評価: Googleは継続的にユーザー体験を評価するため、持続的な改善が必要

業界別のCLS改善事例

ECサイトの場合

ECサイトでは、商品画像の遅延読み込みや動的価格表示がCLSの原因となりがちです。

改善策

– 商品画像の適切なサイズ指定 – 価格表示エリアの事前確保 – レビューセクションの段階的読み込み

効果

– カート追加率の向上 – 購入完了率の改善 – ユーザー満足度の向上

ニュースサイトの場合

ニュースサイトでは、広告の動的表示や関連記事の読み込みがCLSに影響します。

改善策

– 広告枠の固定サイズ指定 – 関連記事エリアの事前確保 – 無限スクロールの最適化

実例

Yahoo! JAPANは、CLSの改善により以下の成果を報告しています： – セッション滞在時間: 13.3%増加 – PV数: 15.1%向上 – 直帰率: 1.72ポイント改善

メディアサイトの場合

メディアサイトでは、埋め込みコンテンツやソーシャルメディアウィジェットがCLSの原因となります。

改善策

– 埋め込みコンテンツの事前サイズ指定 – ソーシャルメディアボタンの最適化 – 動画プレイヤーの適切な実装

CLS改善のためのチェックリスト

基本的な対策

□ すべての画像にwidthとheight属性を指定 □ 動画要素にサイズ指定を実装 □ CSSでのアスペクト比の設定 □ 広告表示領域の事前確保 □ Webフォントのfont-display設定

上級者向け対策

□ 動的コンテンツの挿入位置最適化 □ アニメーションでのtransformプロパティの使用 □ フォントの事前読み込み設定 □ Cookie同意バナーの配置最適化 □ レスポンシブ画像の適切な実装

測定と監視

□ PageSpeed Insightsでの定期的な測定 □ Search Consoleでの全体的な状況把握 □ 実際のユーザー体験の監視 □ 改善効果の継続的な追跡

よくある質問とトラブルシューティング

Q: CLSスコアが改善されない場合はどうすればよいですか？

A: まず、以下のポイントを確認してください：

  1. 測定データの確認: フィールドデータとラボデータの両方を確認
  2. 問題要素の特定: Chrome DevToolsのLayout Shift Regionsで原因を特定
  3. 段階的な改善: 影響の大きい要素から順次対応
  4. 継続的な監視: 改善後も定期的な測定を実施

Q: モバイルとデスクトップでCLSスコアが大きく異なる場合は？

A: これは一般的な現象です。対策として：

  1. レスポンシブデザインの確認: 各デバイスでの表示を個別に確認
  2. 画像の最適化: 各デバイスサイズに適した画像サイズの指定
  3. 広告の最適化: デバイス別の広告表示の調整
  4. フォントサイズの統一: デバイス間でのフォントサイズの一貫性

Q: サードパーティのコンテンツが原因でCLSが悪化している場合は？

A: 以下の対策を検討してください：

  1. 代替手段の検討: 他のサービスやプラグインへの変更
  2. コンテナーの事前確保: サードパーティコンテンツ用の固定サイズ領域
  3. 読み込み優先度の調整: 重要なコンテンツを優先的に読み込み
  4. プロバイダーとの相談: サードパーティプロバイダーへの改善要請

LandingHubでの表示速度改善

CLSの改善は、単独で行うよりも、サイト全体の表示速度改善の一環として取り組むことが効果的です。

統合的なアプローチ

LandingHubでは、CLS改善を含む包括的な表示速度改善をサポートしています。私たちの経験では、以下のような統合的なアプローチが最も効果的であることがわかっています：

  1. パフォーマンス監査: 現状の詳細な分析
  2. 優先度の設定: 影響度の高い改善項目の特定
  3. 段階的な実装: 計画的な改善の実施
  4. 継続的な監視: 改善効果の測定と最適化

高速化の重要性

表示速度の改善は、CLSだけでなく、サイト全体のパフォーマンスとユーザー体験に大きな影響を与えます。適切に最適化されたサイトは、以下のメリットを享受できます：

  • SEO効果の向上: 検索順位の改善
  • コンバージョン率の改善: ユーザー体験の向上による成果の向上
  • 競合優位性の確保: 同業他社との差別化

表示速度でお困りの場合は、LandingHubにお気軽にご相談ください。専門チームが、CLSを含む包括的な改善をサポートいたします。

まとめ

CLS（Cumulative Layout Shift）は、Webサイトの視覚的安定性を測る重要な指標です。レイアウトシフトによるユーザー体験の悪化は、単に不快なだけでなく、実際のビジネス成果にも直接的な影響を与えます。

この記事で説明した改善方法を実践することで、CLSスコアの改善だけでなく、全体的なユーザー体験の向上が期待できます。特に重要なのは以下の点です：

  1. 画像と動画の適切なサイズ指定
  2. 広告表示領域の事前確保
  3. Webフォントの最適化
  4. 動的コンテンツの慎重な実装
  5. 継続的な測定と改善

CLSの改善は、技術的な対策だけでなく、ユーザーの視点に立った設計思想が重要です。常にユーザー体験を最優先に考え、継続的に改善を行うことで、より良いWebサイトを構築できるでしょう。

表示速度の改善は、現代のWeb制作において避けて通れない重要な要素です。適切な知識と継続的な取り組みにより、ユーザーにとって快適で、検索エンジンにも評価される優れたWebサイトを実現しましょう。

<PREV
Largest Contentful Paint（LCP）とは？仕組み・改善方法を完全解説
NEXT>
Total Blocking Time（TBT）とは？仕組みから改善方法まで徹底解説
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です