【初心者でもわかる！CLSの基本と改善ポイント】Google評価にも直結する表示ズレを解消し、快適なサイト作りを実現しよう！

CLS（Cumulative Layout Shift）とは？― サイトの見た目がズレる原因とSEOへの影響

CLS（Cumulative Layout Shift）は、ページを表示している途中で画像やテキスト、ボタンなどの位置が予期せずズレてしまう現象を指します。たとえば、「読んでいる途中に広告が表示されてリンクボタンの位置が急に変わってしまう」「クリックしようと思ったら下に流れてしまい、間違ったボタンを押してしまった」など、思いもしない動きがユーザーにストレスを与えます。

このCLSという現象は、Googleの検索順位にも大きく関わる重要な SEO指標 に位置づけられています。
CLSのスコアが0.1以下であれば画面の安定感が高まり、ユーザーの離脱や誤クリックを防ぐことができます。反対に0.25以上になると、SEO評価が下がるだけでなく、ビジネスの成果にも悪影響が出やすくなりますので、早めの対策が求められています。

CLSの生まれる仕組み ― なぜ見た目の“ジャンプ”が起きるのか

CLS（レイアウトシフト）が発生する主な原因は、画像や動画が後から読み込まれて大きさが変わる、広告や動的なコンテンツが急に現れる、Webフォントの表示が遅れるなどです。
画面の表示中にこれらの要素処理が遅れると、レイアウト全体が「カクッ」と動き、特にスマートフォンのような狭い画面では影響がより大きくなりがちです。このような動きはユーザー体験を著しく損なう原因になります。

Core Web Vitals ― CLSは「使いやすさ」の指標のひとつ

CLSは、Googleが公式に重視する「Core Web Vitals」という指標群のひとつです。「ページの表示速度（LCP）」「操作のしやすさ（INP）」と並び、ユーザーが快適にサイトを使えるかどうかを測定するうえで非常に大切なものとされています。

もしCore Web Vitalsに問題があると、検索順位が下がりやすくなったり、モバイルでのSEOに不利となるため注意が必要です。

CLSスコアの意味 ― 他のユーザー体験指標との違いを知る

LCPは「表示の速さ」、INPは「操作への反応の速さ」、CLSは「見た目が安定しているかどうか」に特化した指標です。特にCLSは、ユーザーが「どれだけズレを不快に感じるか」を、数字としてはっきり分かるのが特徴です。

目安として0.1以下なら問題なく、0.25以上は必ず見直しが必要なラインとされています。

CLS計算ロジックと具体例 ― 「困るズレ」だけを見極める仕組み

セッションウィンドウ／インパクト・ディスタンスフラクションとは

CLSスコアは、ズレが起こった範囲（インパクトフラクション）とどれだけ動いたか（ディスタンスフラクション）の掛け算で計算されます。この値を一定期間ごとにまとめて、最も大きなジャンプがあったタイミングで最終的なCLSスコアとして記録します。
たとえば、画面上部の大きな画像が後から表示され、他の要素が一気に押し下げられた場合は、高いCLSスコアとなります。

「操作による変化」はカウントされない

ユーザーが自分でクリックしたときや、アコーディオンメニューを展開したときなど、「期待通りの動き」はCLSに含まれません。逆に、何もしていないのにバナーや動画が突然入り込む場合などは、予想外の変化としてCLSスコアの悪化につながります。

CLSが高いとどうなる？― 離脱やビジネス影響のリスク

CLSが悪化していると、ユーザーはイライラしたり離脱が増えたりしやすくなります。スマートフォンの場合、見た目のズレが少なくても、体感的なストレスはとても大きくなります。

モバイルの影響度とビジネスリスク

スマホでは通信や画面が不安定なぶん、CLSが高くなりやすい傾向があります。たとえば、広告ブロックを解除した瞬間にバナーが現れてコンテンツが急に下がることなどが典型例です。このようなズレは、ユーザー体験に大きなダメージを与えるため、特にモバイルでは「CLSを0.1以下」に保ちましょう。

よくある体験談と失敗例

商品ページで「カートに入れる」ボタンを押す直前に広告が入ってきて、間違って別のボタンを押してしまう――。こうした小さなストレスの蓄積で「もうこのサイトは使いたくない」と判断されがちです。
離脱率の増加、SEO順位の下落、コンバージョン率の悪化など、ビジネスにもさまざまなマイナス影響が出ます。

CLSの計測と診断 ― どのツールでどうスコアをチェックするのか

CLS（Cumulative Layout Shift）の計測は、SEOやユーザー体験の改善を行ううえでとても重要です。スマートフォン時代に合ったツールや使い分け方を知ることで、なぜズレが発生するのか、その原因も発見しやすくなります。

代表的な計測ツールとその選び方

PageSpeed Insightsは初心者の方でも簡単に使えます。LighthouseやDevToolsは、より詳しいデバッグや「どの要素が問題を起こしているか」を深くチェックしたいときに役立ちます。CrUXやSearch Consoleは、実際のユーザーがどのように感じているかを追いかけるのに活躍します。

フィールドデータとラボデータ

フィールドデータは本物のユーザーの体験結果、ラボデータは理想的なテスト環境での再現データです。両方の数値を見比べることで、本当の改善効果や思わぬ問題がないかを定期的にチェックしましょう。

CLSが悪化する主な原因と見つけ方

CLSが悪化する原因は実に多様です。画像や動画のサイズ指定不足、広告のスペース不足、Webフォントの遅延、動的なコンテンツの急な表示など、画面に「ジャンプ現象」を引き起こすものが数多くあります。下記のポイントを意識して「どこがジャンプの犯人か」を特定しましょう。

よくあるCLS悪化の犯人

画像や動画・iframeのジャンプ対策

サイズ指定とaspect-ratioがカギ

読み込み時に画像や動画のサイズ（width・height）を明確に書いておかないと、表示順でレイアウトが大きく変動してしまいます。
対策： すべての画像・動画・iframeに必ずサイズを指定しましょう。もしくは、aspect-ratioプロパティで枠の比率を事前にキープするのも効果的です。

プレイスホルダーやスケルトンスクリーン活用も有効

画像や動画の読み込み待ち時間には、「スケルトンスクリーン」や「プレイスホルダー」で同じ大きさの仮画像や枠を表示しておくと、見た目のガタつきを防げます。サイズ違いになると逆効果なので、実物と同じ寸法の仮枠を使いましょう。

広告枠・動的コンテンツのズレ防止

スペース予約とサイズ最大化で安定化

広告やサードパーティのウィジェット枠は、最初から最大サイズのスペースを予約しておくことが大切です。
heightやmin-heightを設定することで、実際の読み込みタイミングに左右されず、レイアウトのズレを最小限にできます。

プラグイン追加時、必ず再度CLSを確認

特にWordPressなどのCMSでは、新しいプラグインやコード追加で思いがけずジャンプが発生することがあります。追加やアップデートの際は、テスト環境でCLS値の変化を確認しましょう。

Webフォント、アニメーションによるタイミングずれ

font-display設定とpreloadが効果的

Webフォント遅延によるFOUT・FOIT（文字一時消失/一瞬表示）は、font-display: swapなどの設定で見た目の大きな変化を防げます。さらにpreloadでフォントをあらかじめ読み込むとズレも減ります。

フォールバックフォントのサイズ調整でさらに安定

Webフォントとフォールバック（代替）フォントのサイズが極端に違うと、切り替わった瞬間に段落全体がズレる現象が起こります。size-adjustプロパティや本番環境でのサイズ検証も丁寧に行いましょう。

CLSスコアを改善する７つの実践テクニックとトレンド

CLS（Cumulative Layout Shift）の最適化は、SEOやユーザー体験、さらにはコンバージョンアップにもつながります。目標は0.1未満。ここでは効果の高い改善策をまとめます。

① 画像・動画・iframe・広告の寸法とアスペクト比の明示

すべての画像・動画・iframe、広告枠には必ずwidth/heightまたはaspect-ratioを記述しましょう。これだけで「読み込みによるジャンプ」はほぼ解消できます。

② サブリソース完全指定と仮スペースの設置

画像や動画が外部から読み込まれる場合も、あらかじめ正確なサイズを指定しておき、スケルトンスクリーンや仮領域でレイアウトを確保しておくことが大切です。

③ 大きなバナーやカルーセルの動的高さ設定

ヒーローイメージやバナー、カルーセル部分はコンテンツ入れ替え時も「最大想定サイズ」を仮領域として確保しておくと、急なジャンプを防げます。

④ Webフォント最適化、font-display・preload・size-adjustの活用

Webフォントではfont-display: swapやpreloadの設定に加え、size-adjustでフォント差も吸収しましょう。FOUT・FOIT現象にも同時対応できます。

⑤ アニメーション・動的UIをtransform・opacityで制御

UIの動きはtransformやopacityのみで行い、displayやpositionの切り替えではなく前後のレイアウトを一定に保つ設計がポイントです。

⑥ プラグインやカスタムスクリプト導入時はチェックリストを徹底

チェックリスト例:
1. テスト環境でCLS再チェック
2. 既存カスタムJSやCSSとの兼ね合いをテスト
3. 本番投入直前にPageSpeed InsightsやLighthouseで数値確認
問題が見つかった場合は、その都度キャッシュクリアを行い修正記録も残しましょう。

⑦ 定期的な自動モニタリングと施策履歴の管理

PageSpeed InsightsやSearch Consoleで自動化し、全ページ・端末・拠点で数値を一元的に管理。ログを残しておけば改善の変化も把握しやすくなります。
万一、異常値が出た場合にはリアルタイムで通知を受けられるようアラート設定も活用しましょう。

SEOと他のWeb Vitals指標を意識したバランス改善

CLSだけではなく、LCP（表示速度）やINP（操作性・応答速度）と合わせてユーザー体験全体を意識しましょう。「すべての指標がバランス良く向上しているか」を、定期モニタリングとパフォーマンスバジェット（サイト全体で許容できるリソース量）の設定などで管理します。

最新技術やUX改善トレンドも積極的に活用

最近のトレンドでは、プリフェッチ・PWA・SSRなどサーバーサイドでのレンダリングや事前読み込みの工夫によって、CLSやLCP全体の改善が進んでいます。今後は「開発プロセスの中に常にCLS監視を入れる」ことが当たり前になっていきます。