このページではCLS（Cumulative Layout Shift）についてわかりやすく解説していきます。

計測される仕組みから、評価内容までをわかりやすく解説していきます。

CLSの改善方法を知りたい方は「CLSの6つの改善施策」の記事をご覧ください。

CLSとは？

CLS（Cumulative Layout Shift）は「累積レイアウトシフト」という意味で、Webページの視覚的な安定性を測る指標です。

Core Web Vitals（Google が定める Web 体験の重要指標）のひとつでもあり「ページの表示中に、意図せずレイアウトがどの程度ずれたか」を数値化した指標 です。

ページが読み込まれるときに画像・広告・フォントなどが遅れて読み込まれ、ボタンやテキストがズレることがありますが、これがレイアウトシフトです。

CLSはそのずれの大きさと影響を受けた画面範囲（Distance Fraction）を掛け合わせてスコア化しページ全体での累積値を算出します。

参考記事：「CLSに関する問題0.1超」の原因と改善方法

CLSの具体例

CLSが起きた場合のイメージ例を紹介します。

上記の例は画像が後から読み込まれたことで、テキストやボタンの位置が画像の高さ分ズレてしまったというイメージ例です。

他にも下記のようなケースでレイアウトが後からずれるということもあります。

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

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

CLSのスコア算出の計算の仕組みと算出方法

CLSスコアの基本的な計算式

CLSは以下の公式で計算されます。

レイアウトシフトスコア = Impact Fraction（影響面積の比率） × Distance Fraction（移動距離の比率）

Impact Fraction（影響面積の比率）の計算

Impact Fraction（影響面積の比率）は、レイアウトシフトが表示領域（ビューポート）のどれだけの割合に影響を与えたかを示します。

ビューポート全体が100％とし、要素の移動前の位置と移動後の位置を合わせた総面積の割合で計算されます。

例えば、画面上部に画像が挿入されて、画面全体の75%の領域が下に移動した場合、Impact Fraction（影響面積の比率）は0.75といった計算になります。

Distance Fraction（移動距離の比率）の計算

Distance Fraction（移動距離の比率）の割合は、要素が実際にどれだけ移動したかを示します。

要素の移動距離がビューポートの高さ（または幅）で割った値となります。※最大値は1.0（ビューポート全体分の移動）となります。

例えば、ずれ込んだ画像要素が画面の高さの25%分移動した場合、距離の割合は0.25となります。

上記の場合の計算例はこのようになります。

 CLS = 0.75（影響面積の比率）× 0.25（移動距離の比率）= 0.1875

セッションウィンドウの仕組みを理解する

ページには複数のレイアウトシフトが発生する可能性があります。

CLSでは、ページ上で起きた複数のレイアウトシフトを「いつまでまとめるか」を決める時間枠がセッションウィンドウです。

セッションウィンドウの基本ルール

• シフト間の間隔が1秒以上空く場合に別のレイアウトシフトになる
• 1秒未満の間隔で次のシフトが発生している場合は同じレイアウトシフトにある
• 1つのセッションウィンドウの最大継続時間は5秒

下記の図の例をもとに、わかりやすく解説していきます。

パターン①：シフト間の間隔が1秒以上空くケース

パターンの1つ目としては、シフト間の間隔が1秒以上空く場合は、新しいセッションとして区切られるケースです。

上記の画像を例に説明します。

シフト１のボタンは0.5秒で表示され、シフト２は2秒、シフト３は2.5秒で表示されたためシフト１とシフト２の間隔が1秒以上空きました。

この場合、シフト１とシフト２は間隔が1秒以上空いたため別のレイアウトシフトグループに区切られます。

シフト２とシフト３は間隔が1秒未満のため、1つのレイアウトシフトグループとしてまとめられます。

パターン②：1つのセッションウィンドウの最大継続時間は5秒

パターンの2つ目としては、1つのセッションウィンドウの最大継続時間は5秒というルールで区切られるケースです。

上記の画像を例に説明します。

シフト１とシフト２は間隔が1秒未満のため、1つのレイアウトシフトグループとしてまとめられます。

シフト１が計測されてから5秒以上経過したタイミングでレイアウトシフトグループが区切られました。

その後にシフト３は6秒で表示されたので、別のレイアウトシフトグループとなります。

CLSスコアの算出方法と手順

CLSのスコアは下記の手順で算出することができます。

1. 個別レイアウトシフトスコアの算出
2. セッションウィンドウへのグループ化
3. セッション内のスコアを計算
4. 全セッションの中で最も高いスコアがCLSスコアとなる

1つ1つわかりやすく説明していきます。

個別レイアウトシフトスコアの算出

今回は下記の条件のレイアウトシフトがあるページを例に解説していきます。

シフト1 (0.5秒): 0.50 × 0.30 = 0.150 (画像読み込み)
シフト2 (1.2秒): 0.30 × 0.20 = 0.060 (テキスト調整)
シフト3 (1.8秒): 0.40 × 0.25 = 0.100 (広告表示)
シフト4 (4.5秒): 0.60 × 0.15 = 0.090 (フォント変更)
シフト5 (6.0秒): 0.70 × 0.20 = 0.140 (コンテンツ追加)
シフト6 (6.8秒): 0.25 × 0.12 = 0.030 (ボタン調整)
シフト7 (9.2秒): 0.45 × 0.18 = 0.080 (ポップアップ)

まずは上記のように1つ1つ個別にレイアウトシフトスコアを計算します。

セッションウィンドウへのグループ化

次にセッションウィンドウへのグループ化を行います。

上記例の場合は下記のようにグループ化ができます。

シフトグループ①：シフト1 (0.5秒)＋シフト2 (1.2秒)＋シフト3 (1.8秒)

シフトグループ②：シフト4 (4.5秒)

シフトグループ③：シフト5 (6.0秒)＋シフト6 (6.8秒)

シフトグループ④：シフト7 (9.2秒)

セッション内のスコアを計算

次に各グループのセッション内のスコアを計算します。

ここでは、各シフトの足し算の合計でスコアを出します。

シフトグループ①：(シフト1＝0.150)＋(シフト2＝0.060)＋(シフト3＝0.100)＝0.310

シフトグループ②：(シフト4＝0.090)＝0.090

シフトグループ③：(シフト5＝0.140)＋(シフト6＝0.030)＝0.170

シフトグループ④：(シフト7＝0.080)＝0.080

全セッションの中で最も高いスコアがCLSスコアとなる

最終的なCLSスコアは、すべてのセッションウィンドウの中で最も大きなスコアを持つものが採用されます。

セッション内のスコアを計算した結果、シフトグループ①のスコアが一番高くなりました。

そのためシフトグループ①の0.310がCLSのスコアとなります。

CLSの重要性

CLSの重要性については、大きく3つあります。

下記でそれぞれ説明していきます。

ユーザー体験（UX）に大きく影響

CLSはユーザー体験（UX）に大きく影響します。

レイアウトシフトによるクリックなどの操作や、ページの見やすさなどユーザー体験に大きく影響します。

• 記事を読んでいる途中で広告が表示され、読んでいた箇所を見失う
• リンクをクリックしようとした瞬間にレイアウトがずれ、別のリンクをクリックしてしまう
• フォーム入力中にレイアウトが変わり、入力内容が見えなくなる

これらの体験は、ユーザーにストレスを与え、サイトへの信頼感を損ないます。

特にBtoBサイトでは、専門性や信頼性が重要視されるため、技術的な問題でユーザーの信頼を失うのは大きな損失です。

Core Web VitalsとしてSEO評価としての重要性

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

検索順位に直接的な影響を与え、CLSスコアが悪いサイトは検索結果での表示順位が下がる可能性があります。

1. LCP（Largest Contentful Paint） 
2. INP（Interaction to Next Paint）
3. CLS（Cumulative Layout Shift） 

LCPは主に読み込みのパフォーマンスを測定する指標です。「LCPとは」の記事でも詳しく解説しています。

INPはクリックやタップといった操作などのインタラクティビティを測定する指標となります。「INPとは」こちらもご覧ください。

Core Web Vitalsの中でも大きな評価の1つを担っており、とても重要度の高い指標となります。

ブランド信頼性

レイアウトが安定していないサイトは「作りが甘い」「信頼できない」と感じられやすく、コンバージョン率（購入や申し込み）にも影響します。

CLS（Cumulative Layout Shift）の安定性は、ブランド信頼性に直結します。

ページ表示中に要素が予期せず動くと、誤クリックや不便さから「不誠実」「作りが甘い」と感じられ、ユーザーは離脱しやすくなります。

逆にCLSが低くレイアウトが安定したサイトは「安心して使える」という印象を与え、ブランドの信頼性を高め、継続利用やコンバージョン向上に繋がります。

コンバージョン率への影響

CLSはコンバージョン率にも直接的な影響を与えます。例えば。

• 資料請求ボタンをクリックしようとしたときにレイアウトがずれ、別のボタンをクリックしてしまう
• フォーム入力中にレイアウトが崩れ、ユーザーが離脱してしまう
• 商品購入ページで予期しないレイアウト変更が起こり、購入プロセスが中断される

これらの問題は、せっかく興味を持ってくれたユーザーを逃してしまう重大な機会損失となります。

CLSの評価の目安となる数値

CLSはページの視覚的安定性を数値で表す指標です。

スコアは0以上の小数で、数値が小さいほどレイアウトの安定性が高くなります。

Googleは以下の基準を提示しています。

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

CLSの測定方法と分析ツール

CLSの計測方法についてご紹介していきます。

基本的にはPageSpeed Insights、lighthouse、サーチコンソールを活用する方法があります。

WEBサイトの表示速度を計測する方法でも詳しく説明しています。

PageSpeed Insightsの計測方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。

計測されると下記の画像のような表示となりCLSの計測結果も表示されます。

また、更に下部のパフォーマンス指標の箇所へいくと「レイアウトシフトの原因」といった項目もあり、ここでも詳しい状況の確認が取れます。

PageSpeed Insightsでの計測の特徴は、下記のような点が挙げられます。

• URL入力だけで簡単に確認できる
• 1度の計測でモバイル・PC両方簡単に確認できる
• 実際の利用環境での計測値になる
• Chromeユーザーの実測値を集計
• 改善ポイントなどが詳しく出てくる

特に実際の利用環境での計測値になる。という点はしっかり覚えておきましょう。

利用環境というのは、インターネット環境なども影響するためサイト以外の環境が影響するということになります。

ですので、開発環境以外でどう評価されるかなど確認する上でも良いツールとなります。

Lighthouseの計測方法

開発者向けのより詳細な分析には、Lighthouseがおすすめです。

Lighthouseの計測方法として下記の手順に沿って計測ができます。

1. Chromeで計測したいページを開く
2. 右クリックして「検証」をクリックし下記の画像の画面を開きます
3. 「Lighthouse」タブをクリック
4. 測定条件を設定する
5. Analyze page loadをクリックして計測開始

上記の手順に沿って計測をスタートさせると、下記の画像のような計測結果の画面に切り替わります。

更に詳しく解析したい場合は、レンダリングの機能の「レイアウトシフト領域」にチェックを入れてページを読み込むことで、レイアウトシフトした場所が表示されます。

読み込み中にレイアウトシフトした場所は読み込まれる際に薄い青い枠でシフト領域を表示してくれます。

読み込みが終わると青い枠は消えます。

一瞬なので見にくい部分もありますが、レイアウトシフトしている、していないも目視で確認することができます。

lighthouseの計測の特徴をまとめると下記となります。

lighthouseでの計測の特徴

• 開発環境での計測値になる
• 他の影響を受けないので常に同条件で計測が可能

開発環境での計測となるのが特徴です。（回線速度などその他の影響を受けない）

ページを構築する際の表示速度の確認などに最適となります。

Search Console（サーチコンソール）の計測方法

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

下記の手順に沿って確認ができます。

1. ウェブに関する主な指標の箇所をクリック
2. PC、モバイルのどちらかを選択
3. 不良、改善が必要、良好の箇所にそれぞれチェックを入れておく
4. 不良や改善が必要な場合は、CLSに関する問題が表示される

ウェブに関する主な指標＞レポート（モバイルorPC）の順にクリックすると下記の画面になります。

不良や改善が必要な箇所がある場合は、下部に問題の内容が表示されます。

CLSに関する問題の箇所をクリックすると、問題になっているURLが表示されます。

問題箇所を修正後に下記の修正を検証のボタンを押すと、サーチコンソール側で28日間の監視が始まり問題がなければ問題の表示が解消されます。

Search Console（サーチコンソール）での計測の特徴

• 問題がある場合は、対象となるURLが発見できる
• 修正後、google側に検証を依頼できる
• 細かい詳細までは出ない

マーケティング担当の方が簡易的に原因箇所をチェックする場合や、修正後のリクエストをgoogleに送りたい場合の利用におすすめ。

CLSに関するよくある質問

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

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

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

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

A: 主に異なる場合は下記の要因が考えられます

1. レスポンシブデザインの違い
2. 画像の最適化
3. 広告の最適化: デバイス別の広告表示の調整
4. フォントサイズの統一: デバイス間でのフォントサイズの一貫性

PCやスマホでは画面のサイズが大きく変わるため、レスポンシブデザインや、画像のレスポンシブ設定などにより表示のずれが生じる場合があります。

それぞれのデバイスに合わせてサイズを最適化することがおすすめの方法です。

参考記事：レスポンシブ対応のCLS改善方法を解説

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

A: 主に下記の要素を確認してみましょう。

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

まとめ

CLS（Cumulative Layout Shift）は、Webサイトの視覚的安定性を測る重要な指標です。

レイアウトシフトによるユーザー体験の悪化は、単に不快なだけでなく、実際のビジネス成果にも直接的な影響を与えます。

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

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

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

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