ボタンを押そうとした瞬間に広告が読み込まれて、違う場所をタップしてしまった——そんな経験をしたユーザーは少なくありません。CLS（Cumulative Layout Shift）とは、ページの読み込み中に表示要素が予期せずズレる量を数値化したCore Web Vitalsの指標です。Googleの基準では0.1以下が「良好」、0.25を超えると「不良」と判定されます。
この記事でわかることは次の3点です。
- CLSが「気づかれにくいのに評価に響く」指標である理由
- 原因を4系統に切り分けて改善する手順（一覧表つき）
- Mobilistica運営サイト4件の実測データと、そこから見えたLCPとの違い
経済産業省の令和6年度電子商取引に関する市場調査によると、2024年の国内BtoC-EC市場規模は26.1兆円（前年比5.1%増）、EC化率は9.8%まで拡大しています。経済産業省の調査が示すこの市場拡大の裏で、購入ボタンを押す瞬間にレイアウトがズレて誤タップにつながれば、そのままカゴ落ちや離脱に直結します。Mobilistica編集部ではPageSpeed Insightsの計測結果とweb.devの公式解説を突き合わせながら、CLSの改善手順を整理しました。
CLSとは？合格ラインと「悪化に気づきにくい」理由
CLSは、Core Web Vitalsの3指標のうち「表示の安定性」を担当する指標で、ページの表示中に発生したレイアウトのズレの大きさと、その影響範囲を掛け合わせて算出されます。web.devの公式解説では、0.1以下を「良好」、0.1〜0.25を「要改善」、0.25超を「不良」の3段階で定義しています。
CLSが見落とされやすいのは、LCP（表示速度）のように「遅い」と体感しにくいためです。なぜなら、CLSは1回の大きなズレだけでなく、読み込み中に発生した複数の小さなズレが積み重なって数値化されるからです。ユーザー自身は「なぜこのリンクを押してしまったのか」に気づかないまま離脱してしまうことも珍しくありません。判定の単位は単純な合計ではなく、一定時間内のズレをまとめた「セッションウィンドウ」のうち最大のもので決まる、という技術的な仕組みも押さえておくと診断結果を読み違えにくくなります。
CLS改善の手順（4ステップ）と自社4サイトの実測データ
CLSを改善する人が踏む流れは、次の4ステップに整理できます。特別なツールがなくても、ブラウザの開発者ツールとPageSpeed Insightsだけで一通り完結します。
-
ステップ1：PageSpeed InsightsでCLSスコアを確認する
診断結果の「CLS」欄の数値を確認します。CLSはLCPと違い、ラボ計測でもフィールドデータに近い値が出やすい指標です。
-
ステップ2：「診断」タブでズレの原因要素を特定する
「大きなレイアウト シフトを避けてください」という警告項目を開くと、どのHTML要素がズレの原因になっているかが具体的に表示されます。
-
ステップ3：原因別に対策を実施する
次章の一覧表から対策を選び、優先度の高いものから1つずつ適用します。
-
ステップ4：同条件で再計測し、Before/Afterを記録する
同じデバイス条件（モバイル/PC）で再計測し、数値の変化を記録します。
実際にどの程度の数値が出やすいのかを確かめるため、Mobilistica編集部は2026年8月時点で自社運営サイトのうち4件をPageSpeed Insights（モバイル・ラボデータ）で計測しました。結果は次のとおりです。
| サイト | CLS値 | 判定 | LCP（参考） |
|---|---|---|---|
| mobilistica.com | 0 | 良好 | 3.2秒 |
| toshidensetsu-labo.net | 0 | 良好 | 2.3秒 |
| tabi-no-tetsuzuki.com | 0 | 良好 | 7.0秒 |
| erii-waso.com | 0.002 | 良好 | 7.1秒 |
4サイトともCLSは0.1の基準を大きく下回り、良好な水準でした。一方でtabi-no-tetsuzuki.comとerii-waso.comのLCPは7秒台です。LCP改善の手順：原因の特定から実践までで扱った基準に照らすと「不良」の水準にあります。同じサイトでもCLSとLCPの良し悪しは一致しない、という点が実測から確認できました。CLSが最初から良好になりやすいのは、後述するとおり画像サイズの指定など基本的な作りを守っているだけで悪化を避けられる指標だからです。
原因別の対策一覧表
CLSが悪化する原因は、大きく5パターンに分類できます。診断結果に出てきたキーワードと、次の表の「具体的な症状」欄を見比べてみてください。
| 原因 | 具体的な症状 | 主な対策 | 優先度 |
|---|---|---|---|
| 画像の寸法未指定 | 画像の読み込み完了時に周囲のテキストが押し下げられる | img要素にwidth・height属性またはaspect-ratioを指定 | 高 |
| Webフォントの読み込み | フォント切り替え時に文字の幅や高さが変わりズレる | font-display: optionalの活用、フォールバックフォントの近似指定 | 高 |
| 広告枠の遅延読み込み | 広告が表示された瞬間に下のコンテンツが押し下げられる | 広告枠のスペースをあらかじめ確保しておく | 中 |
| 動的に挿入される通知・バナー | Cookie同意バナーなどが後から挿入され画面全体がズレる | 表示領域を事前確保するか、既存コンテンツを押し出さない配置にする | 中 |
| position/topでのアニメーション | 要素の移動アニメーションがレイアウトのズレとして計測される | transform（GPUで処理される変形）を使ったアニメーションに置き換える | 低 |
優先度は「該当するケースの多さ」と「個々の改善幅」を基準に並べています。実装レベルの具体的な手順はweb.devのCLS最適化ガイドやweb.devのレイアウトシフト診断ガイドにも載っています。
つまずきやすいポイント・注意点
CLS改善で一番つまずきやすいのは、初回読み込み時のズレだけを対策して満足してしまうことです。CLSはページ滞在中に発生したズレをすべて対象とするため、スクロール後にユーザーの操作で追加読み込みされるコンテンツも計測対象に含まれます。
「レイアウト シフトは、表示されているコンテンツが、あるフレームから次のフレームまでの間に、その開始位置を変えるたびに発生します」（web.dev「Cumulative Layout Shift (CLS)」より）
※ ユーザーがタップやクリックの直後（500ミリ秒以内）に発生したレイアウトシフトは、操作による意図的な変化とみなされ、CLSの計測対象から除外されます。Google検索セントラルのCore Web Vitalsガイドによれば、Core Web Vitalsは複数あるページ体験シグナルの一つであり、優れたコンテンツに取って代わるものではないとも案内されています。
もう一つの注意点は、CLSだけを見てLCP（表示速度）やINP（応答性）の悪化を見落とすことです。今回の自社実測でも、CLSが良好な水準でもLCPが7秒台のサイトが2件見つかりました。3指標は独立して評価されるため、CLSを直したあとは必ず他の2指標も合わせて確認する必要があります。
よくある質問（CLS FAQ）
CLSはどれくらいの数値を目指せばいいですか？
Googleの基準では0.1以下が「良好」です。0.1〜0.25は「要改善」、0.25を超えると「不良」と判定されます。まずは0.25切り、次に0.1切りという2段階で目標を置くと進めやすくなります。
画像にwidthとheightを指定するだけでCLSは改善しますか？
画像の寸法未指定が原因の場合は効果がありますが、原因がWebフォントや広告枠であれば画像だけ直しても数値は変わりません。まず診断結果の「診断」タブでどの要素がズレの原因かを確認してから対策を選ぶ順番が欠かせません。
広告を減らせばCLSは良くなりますか？
広告自体をなくさなくても、表示領域を事前に確保しておけばズレは発生しません。広告の有無よりも、読み込み前にスペースを確保しているかどうかが評価を左右します。
CLSは他の2指標より軽視してもいいですか？
軽視はおすすめしません。Mobilisticaの自社実測でも4サイトすべてでCLSは良好でしたが、これは基本的な実装を守った結果であり、油断すると広告の追加やバナー挿入で簡単に悪化します。定期的な再計測が必要です。
まとめ
つまり、CLS改善で押さえておきたいポイントは次の3つです。
- CLSは複数の小さなズレの積み重ねで、ユーザー自身も気づきにくい
- 原因を画像・Webフォント・広告・動的コンテンツ・アニメーションの5系統に切り分けて対策する
- 良好な水準でも油断せず、他の2指標（LCP・INP）と合わせて定期的に再計測する
Mobilisticaが自社運営4サイトを実測した結果、CLSはいずれも良好な水準でしたが、同じサイトでもLCPは大きくばらついていました。安定性と表示速度は評価される仕組みが異なるため、片方だけ見て安心しないことが大切です。施策全体の着手順を先に知りたい方は、表示速度改善の進め方：効果が大きい施策から着手する方法も参考にしてください。CLSの実測記録は、今後もMobilisticaの複数サイトで継続して蓄積していく予定です。
※本記事はPageSpeed Insightsによる公開時点（2026年8月12日）の計測をもとに作成しており、測定値は測定環境やタイミングにより変動します。
※本記事は一般的な情報提供を目的としており、個人の見解を含む内容です。実際の改善効果はサイトの構成によって異なるため、ご自身のサイトでの再計測をおすすめします。
最終更新: 2026年8月12日
Mobilisticaの運営者情報はこちらをご覧ください。