CLS（レイアウトのずれ）とは？読み込み中に画面が動く原因

CLSとは何か

CLSはCumulative Layout Shiftの略で、ページの読み込み中や操作中に、要素が予期せず動いてしまう量を累積で測る指標です。Core Web Vitalsの一つで、視覚的な安定性を表します。

CLSの値は、動いた要素の面積の割合と、動いた距離の割合を掛け合わせたスコアの合計で計算されます。大きく広い範囲がずれるほど数値が悪化します。

ユーザーがリンクを押そうとした瞬間に上の画像が読み込まれてボタンが下にずれ、別のものを押してしまう。こうした体験を防ぐためにCLSが重視されます。

レイアウトがずれる主な原因

レイアウトのずれは、表示領域を確保しないまま後からコンテンツが挿入されることで起こります。代表的な原因を押さえておくと対策しやすくなります。

• サイズ指定のない画像が後から読み込まれて高さが変わる
• 広告やバナーが遅れて差し込まれ、その下の要素が押し下げられる
• Webフォントの読み込みで文字の見た目が切り替わり行が動く
• JavaScriptで後から要素を挿入し、既存のレイアウトを押し出す
• iframeや埋め込みコンテンツのサイズが事前に確保されていない

実務ではどこで関係する？

CLSは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

CLS（レイアウトのずれ）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

CLSの基準値

CLSは0.1以下なら「良好」、0.25を超えると「不良」とされます。スコアは累積なので、小さなずれでも積み重なると悪化します。

特にモバイルでは画面が狭く、わずかなずれでも操作ミスにつながりやすいため、PCよりシビアに見たほうがよい指標です。

CLSを防ぐ手順

CLS対策の基本は「後から入るものの居場所を、最初から確保しておく」ことです。次の手順で見直してみてください。

1. すべての画像と動画に幅と高さ（またはアスペクト比）を指定する
2. 広告や埋め込みの枠は、表示前から固定サイズの領域を確保しておく
3. Webフォントは表示方法を調整し、切り替え時のずれを抑える
4. 新しいコンテンツは既存要素の上ではなく、確保済みの場所に挿入する
5. 計測ツールでずれた要素を特定し、原因の枠から順に修正する

確認・共有時にもずれを意識する

デザインを関係者に確認してもらうとき、ガタつくページは「未完成」「雑」という印象を与えてしまいます。中身が良くても評価が下がるのはもったいないことです。

特にレビューでは相手がスクリーンショットを撮ったり要素を指して指摘したりするため、レイアウトが安定していると意思疎通もスムーズです。

ギガサイト便で発行した共有URLは、同じURLのままファイルを差し替えられます。CLSを直したHTMLに更新すれば、リンクを送り直さずに改善版を確認してもらえます。