CLSとは？SEOへの影響と測定・改善方法を初心者向けにわかりやすく解説

ウェブサイトを閲覧しているとき、突然広告が読み込まれてクリックしたかった場所がずれてしまった経験はありませんか。このような現象は「CLS（Cumulative Layout Shift）」と呼ばれ、ユーザー体験を大きく損なう要因となっています。Googleはこのような視覚的な安定性を重視しており、CLSはコアウェブバイタルの重要な指標の一つとして検索順位にも影響を与えています。本記事では、CLSの基本概念からSEOへの影響、測定方法、そして具体的な改善手順まで、初心者の方にもわかりやすく解説します。CLSを理解し適切に対策することで、ユーザー体験の向上とともに検索順位の改善も期待できるでしょう。

CLSとは何か

CLS（Cumulative Layout Shift）とは、ウェブページの視覚的な安定性を測定する指標です。日本語では「累積レイアウトシフト」と訳され、ページ読み込み中や閲覧中に発生するレイアウトのずれを数値化したものです。

この指標は、Googleが提唱するコアウェブバイタル（Core Web Vitals）の3つの主要指標の一つとして位置づけられています。コアウェブバイタルには、読み込み速度を測るLCP（Largest Contentful Paint）、操作への応答性を測るINP（Interaction to Next Paint）、そして視覚的な安定性を測るCLSが含まれています。

CLSが発生する仕組み

CLSは、ページ上の要素が予期せず移動したときに発生し、移動した距離と影響を受けた領域の大きさに基づいて計算されます。具体的には、ビューポート内で移動した要素の影響分率と距離分率を掛け合わせた数値がスコアとなります。

たとえば、記事を読んでいる最中に上部の広告が遅れて読み込まれると、テキスト全体が下にずれてしまいます。このとき、ずれた領域が大きく、移動距離も大きいほどCLSスコアは高くなります。スコアが高いほど、ユーザー体験は悪化していることを意味します。

CLSの評価基準

Googleは、CLSスコアに対して明確な評価基準を設けています。この基準を理解することで、自サイトの改善目標を設定しやすくなります。

評価	CLSスコア	状態
良好（Good）	0.1以下	ユーザー体験が優れている
改善が必要（Needs Improvement）	0.1〜0.25	対策を検討すべき状態
不良（Poor）	0.25以上	早急な改善が必要

サイト全体の75パーセンタイル値（上位25%を除いた値）で0.1以下を達成することが、良好なCLSの目標とされています。つまり、ほとんどのユーザーがレイアウトのずれをほぼ感じない状態を目指す必要があります。

CLSが重要視される背景

CLSが重要視されるようになった背景には、モバイルデバイスの普及があります。スマートフォンでは画面サイズが限られているため、小さなレイアウトのずれでも大きなストレスとなります。

また、ユーザーが意図しないボタンをクリックしてしまう「ミスクリック」の原因にもなります。これは特にEC サイトや広告が多いページで問題となり、ユーザーの離脱率上昇や信頼性の低下につながる可能性があります。

CLSがSEOに与える影響

CLSは、Googleの検索ランキング要因の一つとして正式に採用されています。2021年6月からページエクスペリエンスアップデートの一部として導入され、検索順位に影響を与えるシグナルとなっています。

ただし、CLSだけで検索順位が大きく変動するわけではありません。コンテンツの質や関連性が最も重要な要素であることに変わりはありませんが、同程度の品質のコンテンツが競合する場合、CLSを含むページエクスペリエンスが差をつける要因となり得ます。

検索順位への直接的な影響

Googleは、コアウェブバイタルを含むページエクスペリエンスシグナルをランキング要因として使用していることを公式に発表しています。CLSスコアが不良のページは、良好なページと比較して検索順位で不利になる可能性があります。

特にモバイル検索においては、ページエクスペリエンスの重要性が高く、CLSの改善がSEO効果に直結しやすい傾向があります。モバイルファーストインデックスが標準となった現在、モバイルでのCLS対策は欠かせません。

ユーザー行動指標への影響

CLSは検索順位だけでなく、ユーザー行動指標にも大きく影響します。レイアウトのずれが多いページでは、ユーザーがストレスを感じて離脱する確率が高まります。

直帰率の上昇や滞在時間の減少は、間接的にSEOに悪影響を及ぼす要因となります。ユーザーが求める情報にスムーズにアクセスできない状態は、サイト全体の評価を下げることにつながるでしょう。

競合サイトとの差別化

同じキーワードで上位表示を狙う競合サイトが多い場合、CLSを含むページエクスペリエンスが差別化の要因となります。コンテンツの質が同程度であれば、技術的な最適化が進んでいるサイトが優位に立つ可能性があります。

特に競争の激しいキーワードでは、わずかな順位の違いがトラフィックに大きく影響するため、CLSの最適化は費用対効果の高い施策といえます。

CLSの測定方法

CLSを改善するためには、まず現状のスコアを正確に把握する必要があります。幸い、Googleをはじめとする各社から無料で使える測定ツールが提供されています。

測定には大きく分けて「ラボデータ」と「フィールドデータ」の2種類があります。ラボデータは特定の条件下でのシミュレーション結果であり、フィールドデータは実際のユーザーから収集された実測値です。両方のデータを活用することで、より正確な状況把握が可能になります。

PageSpeed Insightsの使い方

PageSpeed Insightsは、Googleが無料で提供するウェブパフォーマンス分析ツールです。URLを入力するだけで、CLSを含むコアウェブバイタルの測定結果を確認できます。

このツールの特徴は、実際のユーザーデータ（フィールドデータ）とシミュレーションデータ（ラボデータ）の両方を表示してくれる点です。フィールドデータは「このURLのChromeユーザーエクスペリエンス」として表示され、過去28日間の実測値を確認できます。

使い方は非常にシンプルで、PageSpeed Insightsのサイトにアクセスし、分析したいURLを入力して「分析」ボタンをクリックするだけです。数秒から数十秒で結果が表示されます。

Chrome DevToolsでの確認

Google Chromeに標準搭載されているDevToolsでも、CLSを測定できます。開発者向けの詳細な情報を得られるため、具体的な問題箇所の特定に役立ちます。

DevToolsを開くには、Chromeでページを表示した状態でF12キーを押すか、右クリックメニューから「検証」を選択します。その後、「Performance」タブでページを録画すると、レイアウトシフトが発生したタイミングと要素を特定できます。

「Lighthouse」タブを使えば、PageSpeed Insightsと同様のレポートをローカル環境で生成することも可能です。

Search Consoleでの確認

Google Search Consoleでは、サイト全体のコアウェブバイタルの状況を確認できます。左メニューの「ウェブに関する主な指標」からアクセスすると、問題のあるURLがグループ化されて表示されます。

Search Consoleの利点は、個別ページではなくサイト全体の傾向を把握できる点です。どのタイプのページでCLSの問題が発生しているかを俯瞰的に確認し、優先順位をつけて対策を進められます。

ツール名	データタイプ	主な用途
PageSpeed Insights	フィールド＋ラボ	個別ページの詳細分析
Chrome DevTools	ラボ	問題箇所の特定とデバッグ
Search Console	フィールド	サイト全体の傾向把握
Web Vitals拡張機能	ラボ	リアルタイム監視

これらのツールを組み合わせて使用することで、CLSの問題を多角的に分析できます。

CLSが悪化する原因

CLSを改善するためには、なぜレイアウトのずれが発生するのかを理解することが重要です。主な原因を把握することで、効果的な対策を講じることができます。

CLSが悪化する原因は多岐にわたりますが、ほとんどの場合、要素のサイズが事前に確保されていないことに起因します。ブラウザが要素を読み込んだ後にサイズを確定するため、周囲の要素が押し出されてしまうのです。

画像や動画のサイズ未指定

CLSが悪化する最も一般的な原因は、画像や動画にwidth属性とheight属性が指定されていないことです。これらの属性がないと、ブラウザは画像が読み込まれるまでその領域のサイズを確定できません。

画像が読み込まれた瞬間に、その画像のサイズ分だけ周囲のコンテンツが押し下げられます。特に記事の冒頭に大きな画像がある場合、本文全体がずれてしまい、CLSスコアに大きな悪影響を与えます。

広告やウィジェットの動的挿入

広告バナーやソーシャルメディアのウィジェットは、CLSを悪化させる主要な要因の一つです。これらは外部サーバーから読み込まれるため、ページの他の要素より遅れて表示されることが多くあります。

特にページ上部に配置された広告は、読み込み完了時に大きなレイアウトシフトを引き起こしやすい傾向があります。ユーザーがすでに記事を読み始めている状態で広告が表示されると、閲覧中のテキストが突然移動するという問題が発生します。

Webフォントの遅延読み込み

Webフォントの読み込みが遅れると、テキストの表示タイミングやサイズが変化し、レイアウトシフトが発生することがあります。いわゆるFOUT（Flash of Unstyled Text）やFOIT（Flash of Invisible Text）と呼ばれる現象です。

フォールバックフォントとWebフォントでサイズが異なる場合、フォント切り替え時にテキストの行数が変わり、ページ全体のレイアウトがずれることがあります。

動的コンテンツの挿入

JavaScriptによって動的に挿入されるコンテンツも、CLSの原因となります。たとえば、ページ読み込み後に表示される通知バー、Cookie同意バナー、ポップアップなどがこれに該当します。

これらの要素が既存のコンテンツを押し下げる形で挿入されると、レイアウトシフトが発生します。特にページ上部に挿入される要素は影響が大きくなります。

CLSを改善する方法

CLSの原因を把握したら、次は具体的な改善方法を実践していきます。ここでは、効果の高い改善策を優先順位の高いものから解説します。

改善を進める際は、まず影響の大きい要素から対処することが効率的です。画像のサイズ指定や広告スペースの確保など、比較的簡単に実装できる対策から始めることをおすすめします。

画像にサイズを指定する

すべての画像と動画にwidth属性とheight属性を指定することが、CLSを改善するための最も基本的かつ効果的な対策です。これにより、ブラウザは画像が読み込まれる前に必要なスペースを確保できます。

HTMLでの記述例としては、imgタグにwidth=”800″ height=”450″のように具体的な数値を指定します。また、CSSでaspect-ratioプロパティを使用する方法も効果的です。レスポンシブデザインの場合は、アスペクト比を維持しながらサイズを可変にする設定が推奨されます。

広告スペースを事前に確保する

広告が読み込まれる場所には、あらかじめ固定サイズのコンテナを用意しておきます。これにより、広告の読み込みタイミングに関係なく、ページレイアウトが安定します。

具体的には、CSSでmin-heightプロパティを設定し、広告の最大サイズに相当するスペースを確保します。広告が表示されない場合でも、プレースホルダーとして背景色やメッセージを表示することで、ユーザーに違和感を与えない工夫も考えられます。

改善策	難易度	効果
画像サイズの指定	低	高
広告スペースの確保	中	高
フォント表示の最適化	中	中
動的コンテンツの位置調整	高	中

改善策は難易度と効果のバランスを考慮して優先順位を決めましょう。

フォント表示を最適化する

Webフォントによるレイアウトシフトを防ぐには、font-displayプロパティを適切に設定します。font-display: optionalを使用すると、フォントの読み込みが遅い場合はフォールバックフォントが維持され、レイアウトシフトを防げます。

また、フォントファイルをプリロードすることで、読み込み速度を向上させることも有効な対策です。link要素にrel=”preload”を指定し、重要なフォントファイルを優先的に読み込むよう設定します。

動的コンテンツの配置を工夫する

動的に挿入されるコンテンツは、既存コンテンツを押し下げない位置に配置することが重要です。たとえば、通知バーは画面上部に固定表示（position: fixed）にするか、画面下部から表示させることで、メインコンテンツへの影響を最小限に抑えられます。

また、ユーザーの操作（クリックやスクロール）に応じてコンテンツを挿入する場合は、transform属性を使用したアニメーションを活用することで、レイアウトシフトとしてカウントされることを防げます。

よくある質問

CLSのスコアはどのくらいの頻度で確認すべきですか

サイトの更新頻度にもよりますが、最低でも月に1回は確認することをおすすめします。特に新しいページを追加したり、デザインを変更したりした際は、その都度測定してCLSに悪影響がないか確認しましょう。Search Consoleでは継続的にデータが蓄積されるため、定期的にチェックすることで問題の早期発見につながります。

WordPressサイトでCLSを改善するにはどうすればよいですか

WordPressの場合、まず画像のサイズ指定を確認しましょう。WordPress5.5以降では自動的にwidth/height属性が追加されますが、テーマやプラグインによっては削除されている場合もあります。また、広告プラグインの設定で広告スペースを事前確保する機能がある場合は活用してください。遅延読み込み（Lazy Load）の設定も、ファーストビューの画像には適用しないよう調整することが効果的です。

CLSの改善でSEOの効果はすぐに現れますか

CLSの改善効果がSEOに反映されるまでには、通常数週間から数か月かかります。これは、Googleがフィールドデータ（実際のユーザーデータ）を28日間の移動平均で評価しているためです。また、検索順位はCLSだけでなく多くの要因で決まるため、CLSの改善だけで劇的な順位変動が起きることは少ないです。ただし、ユーザー体験の改善による直帰率の低下などの間接的な効果は、比較的早く現れることがあります。

モバイルとパソコンでCLSのスコアが異なるのはなぜですか

モバイルとパソコンでは画面サイズやネットワーク速度が異なるため、CLSのスコアも変わってきます。モバイルでは画面が小さい分、同じピクセル数の移動でもビューポートに対する割合が大きくなり、CLSスコアが高くなりやすい傾向があります。また、モバイル回線は固定回線より遅い場合が多く、画像や広告の読み込み遅延がレイアウトシフトを引き起こしやすくなります。両方のデバイスで測定し、それぞれに適した対策を講じることが重要です。

まとめ

CLSは、ウェブページの視覚的な安定性を測定する重要な指標です。Googleのコアウェブバイタルの一つとして、検索順位にも影響を与えるため、SEO対策において無視できない要素となっています。

CLSを改善するための基本は、画像へのサイズ指定、広告スペースの事前確保、フォント表示の最適化です。これらの対策は比較的簡単に実装でき、効果も高いため、優先的に取り組むことをおすすめします。

PageSpeed InsightsやChrome DevToolsなどの無料ツールを活用して、定期的にCLSのスコアを確認しましょう。継続的な測定と改善を行うことで、ユーザー体験の向上とSEO効果の両方を実現できます。まずは自サイトのCLSスコアを確認するところから始めてみてください。