CLSとは？｜SEO関連用語集

2025年10月28日

読み方: シーエルエス（Cumulative Layout Shift）

概要

CLSとは、ページの読み込み中に予期せぬレイアウトのズレが発生する程度を測定するCore Web Vitalsの指標で、視覚的安定性を評価します。

詳細説明

CLS（Cumulative Layout Shift）とは、ページの読み込み中にコンテンツが予期せず移動する現象（レイアウトシフト）を定量化するCore Web Vitalsの指標です。スコアは0以上の数値で表され、0.1以下が「良好」、0.1〜0.25が「改善が必要」、0.25超が「不良」とされています。CLSは、影響を受けた要素の表示領域の割合（impact fraction）と移動距離（distance fraction）を掛け合わせて計算されます。主な原因には、サイズ未指定の画像や動画、動的に挿入される広告、Webフォントの読み込み、遅延読み込みされるコンテンツなどがあります。2021年にランキングシグナルとして導入されて以降、ユーザー体験を測る最重要指標の1つとなっています。

重要性

CLSが重要な理由は以下の通りです。

Googleの検索ランキング要因の1つであり、ページ体験シグナルとして順位に直接影響する
CLSが悪いと、ユーザーが誤ったボタンをクリックしてしまう、読んでいるテキストを見失う、意図しないリンクを踏むなどの問題が発生する
ユーザー体験を著しく損ない、特にモバイルデバイスでは深刻な問題となり、フラストレーションにつながる
Googleの調査では、CLSが0.25を超えるページはユーザーのエンゲージメントが大幅に低下することが示されている
コンバージョン率や滞在時間に直接影響し、ビジネス成果にも関わる

具体例・実践方法

CLS改善のための実践方法

画像・動画のサイズ指定

`width`と`height`属性を明示的に設定
CSSの`aspect-ratio`プロパティを使用
レスポンシブ画像でも`aspect-ratio`でアスペクト比を保持

広告スペースの事前確保

広告が表示される領域をあらかじめ確保（`min-height`を設定）
広告が読み込まれない場合も領域を維持
スティッキー広告は慎重に実装

Webフォントの最適化

`font-display: optional`または`font-display: fallback`を使用
`font-display: swap`は避ける（レイアウトシフトの原因）
システムフォントへのフォールバックを設計

動的コンテンツの配慮

新しいコンテンツは既存コンテンツの上ではなく下に挿入
モーダルやバナーはユーザー操作後に表示
コンテンツ挿入時は領域を事前確保

CSSアニメーション

`transform`と`opacity`プロパティを使用（レイアウトに影響しない）
`top`、`left`、`width`、`height`などのレイアウトプロパティのアニメーションは避ける

注意点・補足

CLS最適化における注意点は以下の通りです。

CLSは単一イベントではなく、ページのライフサイクル全体で累積されるスコアのため、全体を通じた視覚的安定性を確保する必要がある
ユーザーの操作による意図的なレイアウト変更（ボタンクリック、アコーディオン展開など）は、500ミリ秒以内であればCLSにカウントされない
動的広告やサードパーティウィジェット（チャットボット、SNS埋め込みなど）は、特にCLSを悪化させる主要因となる
SPA（Single Page Application）でのページ遷移時のレイアウトシフトも2025年から評価対象となっている
Chrome DevToolsの「Layout Shift Regions」を使用してシフト箇所を視覚的に確認できる

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

CLSとは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元