cls seoの基本！レイアウトシフトの定義とSEOへの影響

Google Search Consoleから「CLS に関する問題」という通知が届き、どのように対処すべきか頭を抱えていませんか？SEO担当者やエンジニアにとって、Core Web Vitals（コアウェブバイタル）の改善は避けて通れない課題です。

特にCLS（Cumulative Layout Shift）は、ユーザーが記事を読んでいる最中に突如レイアウトが崩れ、意図しないクリックを誘発するなど、ユーザー体験（UX）を著しく損なう要因となります。

本記事では、CLSの定義から具体的な改善コード、検証手順までを網羅的に解説します。
この記事を読み終える頃には、自信を持って改善指示を出せるようになっているはずです。

記事制作数1億本以上、取引社数5,300社超の実績

豊富な制作実績と蓄積されたノウハウで、成果につながるコンテンツマーケティングを実現。
記事制作のみならず戦略設計から運用支援まで、ワンストップで対応します。

お問合せはコチラ

cls seoの基本！レイアウトシフトの定義とSEOへの影響

CLS（Cumulative Layout Shift）とは、ページ読み込み中に視覚的な要素がどれだけ予期せず移動したかを測定する指標です。Googleが掲げる「コアウェブバイタル」の3つの指標の一つであり、検索順位を決定するランキング要因として採用されています。

とあるECサイトでは、CLSのスコアが「不良」だったために、モバイル検索での順位が停滞していた事例がありました。
レイアウトがガクガクと動くサイトは、ユーザーにストレスを与え、結果として直帰率の悪化やコンバージョン率の低下を招きます。SEOで上位を狙うなら、まずはこの「視覚的安定性」を確保することが大前提となります。

clsとは？ユーザー体験を左右する視覚的安定性の指標

CLSは、ユーザーが意図しない「表示要素の移動」を数値化したものです。例えば、読み進めていた文章が急に下にズレたり、クリックしようとしたボタンが移動して別のリンクを踏んでしまったりする現象を指します。

Googleはこれを「視覚的安定性」と呼び、ユーザーがページを快適に操作できるかどうかを判断する重要な基準としています。CLSのスコアが低い（＝ズレが少ない）ほど、ユーザーにとってストレスのない良質なサイトと評価されます。

core web vitalsにおけるclsの評価基準とスコアの見方

CLSのスコアは、移動した面積と移動距離を掛け合わせて算出されます。Googleが定める評価基準は以下の通りです。

ステータス	スコア（CLS）	ユーザー体験の評価
良好 (Good)	0.1以下	非常に安定しており、快適
改善が必要 (Needs Improvement)	0.1超～ 0.25以下	やや不安定で、改善の余地あり
不良 (Poor)	0.25超	不安定で、ユーザーに悪影響

目標とすべきは「0.1以下」の良好ステータスです。 0.25を超えると、サーチコンソールで「不良」として警告が出るため、早急な対策が必要になります。

記事制作数1億本以上、取引社数5,300社超の実績

お問合せはコチラ

サーチコンソールでclsの問題を特定し測定する方法

CLSの改善を始める第一歩は、「どのページで」「どの要素が」問題を起こしているかを正確に把握することです。闇雲に修正を始めても、工数ばかりがかかって成果が出ないことが多いため、まずはGoogleが提供するツールを使い倒しましょう。

私が現場で診断を行う際は、まずGoogle Search Consoleで全体像を掴み、次にPageSpeed Insightsで個別の原因を深掘りするというステップを徹底しています。

PageSpeed Insightsを活用した詳細な原因分析

PageSpeed Insightsは、特定のURLを入力するだけでCLSの原因となっている要素をピンポイントで指摘してくれる強力なツールです。

診断結果の「診断」セクションにある「レイアウトシフトの大幅な変更を避けてください」という項目を確認してください。ここでは、どのHTML要素がどれだけスコアを悪化させているかがリストアップされます。

ラボデータ
制御された環境での測定値。開発中の修正確認に適しています。
フィールドデータ
実際のユーザーが体験した過去28日間の統計値。SEO評価に直結するのはこちらです。

サーチコンソールで「不良URL」を抽出する手順

Google Search Consoleの「ウェブに関する主な指標」レポートを開き、「モバイル」または「PC」の詳細レポートを確認します。

「CLS に関する問題: 0.25 超（不良）」などのステータスをクリックします。
同様の問題を抱えている「URLグループ」が表示されます。
代表的なURLをクリックし、右側に表示される「PageSpeed Insights」へのリンクから詳細分析へ飛びます。

「不良URL」を優先的に修正することで、サイト全体の評価を効率的に底上げすることが可能です。

自社サイトの現状を把握したら、次は詳細な原因分析に進みましょう。

clsが悪化する3つの主な原因と具体的な改善対策

CLSが悪化する原因の多くは、ブラウザが「要素のサイズ」を事前に把握できないことにあります。私がこれまで数百サイトを診断してきた経験上、原因の8割は「画像」「広告」「フォント」の3点に集約されます。

以下のチェックリストを参考に、自社サイトの該当箇所を確認してみてください。

CLS改善クイックチェックリスト

画像にwidth/height属性は入っているか？
広告ユニットの表示エリアは確保されているか？
Webフォントの読み込みでガクつきが起きていないか？

画像要素へのwidthとheight属性の明示

最も頻出する原因が、<img>タグにサイズ指定がないケースです。サイズ指定がないと、画像が読み込まれた瞬間に周囲のテキストが押し下げられ、大きなレイアウトシフトが発生します。

対策として、必ずHTML上でwidth（幅）とheight（高さ）を指定してください。

<!-- 悪い例：サイズ指定なし -->
<img src="sample.jpg" alt="説明文">

<!-- 良い例：サイズを指定 -->
<img src="sample.jpg" width="800" height="450" alt="説明文">

現代のブラウザは、この属性値からアスペクト比（縦横比）を計算し、画像がダウンロードされる前からその分のスペースを確保してくれます。

広告や埋め込みコンテンツの表示領域の確保

Googleアドセンスなどの自動広告や、YouTube、SNSの埋め込み（iframe）は、コンテンツよりも遅れて表示されるため、CLSの天敵です。

対策は、CSSであらかじめ「表示領域（高さ）」を確保しておくことです。

プレースホルダーの設置
広告が表示される親要素（divなど）に、min-heightを設定します。
最大サイズに合わせる
配信される可能性がある広告の最大高さに合わせて領域を確保しておけば、表示された際のズレをゼロにできます。

Webフォント読み込み時のレイアウト崩れ防止

Webフォントは、フォントファイルがダウンロードされるまで代替フォント（MS Pゴシックなど）で表示され、ダウンロード完了後に切り替わります。この際、文字の幅や高さが変わることでレイアウトがズレることがあります。

対策として、CSSのfont-display: swap;を活用しましょう。

また、最新の手法では、代替フォントとWebフォントのサイズ差を調整するsize-adjustプロパティを使用することもありますが、まずは「読み込みの最適化」を優先してください。

これらの対策は、エンジニアへの指示書作成にもそのまま活用いただけます。

記事制作数1億本以上、取引社数5,300社超の実績

お問合せはコチラ

実装時に役立つcls改善の技術的テクニック

基本対策に加えて、モダンなCSSを活用することで、よりスマートにCLSを制御できます。特にレスポンシブデザインを採用しているサイトでは、デバイスごとに画像サイズが変わるため、固定値での指定が難しい場合があります。

そこで役立つのが、比較的新しいCSSプロパティであるaspect-ratioです。

CSSのaspect-ratioプロパティによる比率固定

aspect-ratioを使用すると、要素の幅に合わせて高さを自動計算し、比率を維持したまま領域を確保できます。

/* 画像や動画の親要素に比率を指定 */
.image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0; /* 読み込み中の背景色 */
}

.image-container img {
  width: 100%;
  height: auto;
}

この1行を追加するだけで、画像が読み込まれる前の「ガクつき」を劇的に抑えることが可能です。 5年前には一般的ではなかった手法ですが、現在の主要ブラウザではほぼ全て対応しており、テクニカルSEOの現場では必須のテクニックとなっています。

技術的な実装が難しい場合は、専門の制作チームへの相談も検討しましょう。