Google Search Consoleで「CLSに関する問題: 0.1超」の警告を受け取り、悩んでいませんか？

CLSスコアが0.1を超えると、ページ体験の評価が下がり、検索順位にも影響します。

この問題の主な原因は、画像サイズ未指定、広告の動的挿入、Webフォントの読み込み、動的コンテンツの5つです。

本記事では、各原因に対する具体的な改善方法をコード付きで解説します。

「CLSに関する問題: 0.1超」とは？

Google Search Consoleに表示されるこれらの警告は、ページのレイアウトが不安定で、コンテンツが読み込み中に予期せず移動していることを示しています。

CLSスコアは0～1の数値で評価され、Googleは0.1未満を「良好」、0.1～0.25を「改善が必要」、0.25超を「不良」と判定します。

「0.1超」は改善が必要な状態で、画像やテキストが突然ずれてユーザーが誤タップする可能性があります。

「0.25超」はさらに深刻で、頻繁なレイアウト崩れによりユーザー体験が著しく損なわれ、SEO評価も大きく低下します。

これらの警告が出た場合、画像サイズの未指定、広告の遅延表示、Webフォントの読み込みなどが原因として考えられ、早急な対応が求められます。

放置すると検索順位の下落や直帰率の上昇につながります。

そもそもCLSって？評価基準は？

CLS（Cumulative Layout Shift：累積レイアウトシフト）は、ページ読み込み中にコンテンツが予期せず移動する量を数値化した指標です。

画像が突然表示されてテキストが下にずれたり、広告が挿入されてボタンの位置が変わったりする現象を測定します。

Googleはこの数値でページの安定性を評価し、0.1未満を「良好」、0.1～0.25を「改善が必要」、0.25超を「不良」と判定します。

CLSはCore Web Vitalsの1つとして、SEO評価とユーザー体験の両方に直接影響する重要な指標です。

参考記事：CLSとは？

CLSの3つの判定基準

GoogleはCLSスコアを3段階で評価します。0.1未満が「良好」で、レイアウトが安定しており理想的な状態です。

0.1～0.25が「改善が必要」で、ユーザー体験に悪影響が出始めており早急な対応が求められます。

0.25超が「不良」で、頻繁なレイアウト崩れによりユーザビリティが著しく損なわれ、SEO評価も大幅に低下します。

Search Consoleで「0.1超」または「0.25超」の警告が表示された場合、該当する判定基準に応じた優先度で改善策を実施する必要があります。

「CLSに関する問題0.1超」で起きる問題

CLSスコアが0.1を超えると、ユーザー体験、SEO評価、コンバージョン率の3つの領域で深刻な悪影響が発生します。

レイアウトの不安定さはサイト全体の信頼性を損ない、ビジネス成果に直結する問題となります。

ユーザー体験の低下

ページ読み込み中にコンテンツが突然移動することで、ユーザーは意図しないリンクやボタンをクリックしてしまいます。

特に記事を読んでいる最中に広告が挿入されてテキストが下にずれる、商品ページで購入ボタンの位置が変わるといった現象が頻発します。

この予期せぬレイアウト変動により、ユーザーはストレスを感じ、サイトへの信頼感が低下します。

結果として直帰率が20～30%上昇し、滞在時間も短縮されます。モバイル端末では画面が小さいため、誤操作の影響がさらに深刻になります。

SEO評価の低下

GoogleはCLSをCore Web Vitalsの重要指標として検索順位の判定に使用しています。

CLSスコアが0.1を超えると「改善が必要」と判定され、ページ体験シグナルの評価が下がります。

同じコンテンツ品質の競合サイトがCLS 0.1未満を達成している場合、検索結果で上位表示される可能性が高まります。

特に2021年のページ体験アップデート以降、Core Web Vitalsの重要性が増しており、CLSの改善はSEO戦略の必須項目となっています。

放置すれば段階的に順位が下落し、オーガニック流入が減少します。

コンバージョン率の低下

レイアウトシフトによる誤操作は、購入や申し込みといった重要なアクションの完了を妨げます。

ECサイトでは、カートに入れるボタンを押そうとした瞬間に広告が表示されて別ページに飛ばされる、フォーム入力中に項目がずれて誤った情報を送信してしまうといった問題が発生します。

Googleの調査によると、ページ体験が悪化するとコンバージョン率が最大24%低下することが報告されています。

CLSスコア0.1超の状態では、せっかく獲得した訪問者を購入直前で逃してしまい、売上機会の損失に直結します。

「CLSに関する問題0.1超」のページを特定する方法と手順

まずは実際にどのページが「CLSに関する問題0.1超」に該当しているのか？

ページの特定と原因を確認する手順をお伝えします。

１：Google Search Consoleで確認する

最も基本的な特定方法は、Google Search Consoleの「ページエクスペリエンス」レポートです。

左メニューから「エクスペリエンス」→「ウェブに関する主な指標」を選択し「モバイル」「PC」など確認したい方のリンクをクリックします。

CLSに問題がある場合は「CLSに関する問題: 0.1超（モバイル）」または「CLSに関する問題: 0.1超（パソコン）」という警告が表示されます。

問題のあるURL一覧が確認でき、デバイス別（モバイル/PC）の評価も分かれて表示されます。

この情報は実際のユーザーからのフィールドデータに基づいており、28日間の実測値を反映しています。

ただし、データ反映には2～4週間のタイムラグがあるため、改善後すぐには結果が見られない点に注意が必要です。

２：PageSpeed Insightsで詳細分析する

PageSpeed InsightsにURLを入力すると、CLSスコアが即座に表示されます。

「ラボデータ」セクションでは、Lighthouseによるシミュレーション結果が、「フィールドデータ」セクションでは実際のユーザー体験データ（Chrome User Experience Report）が確認できます。

CLSスコアが0.1を超えている場合、「改善できる項目」に具体的な問題要素が表示されます。

例えば「画像要素に明示的なwidthとheightがありません」「サイズが指定されていない画像」などの警告から、どの要素がレイアウトシフトを引き起こしているか特定できます。

モバイルとデスクトップを切り替えて両方の評価を確認することが重要です。

３：Chrome DevToolsで原因要素を特定する

最も詳細な分析には、Chrome DevToolsのパフォーマンスパネルを使用します。

Chrome DevToolsを開き（F12キー）、「パフォーマンス」タブを選択して、下部に出てくるレイアウトシフトのタブを開きます。

この状態で再度、ページの読み込みを行いましょう。

レイアウトシフトが起きている場合は、ここに特定の箇所が表示されます。

ここにカーソルを合わせると画面ページのどこがレイアウトシフトしているかがわかりやすく表示されます。

「CLSに関する問題0.1超」の原因

CLSスコアが0.1を超える主な原因は5つあります。

それぞれ解説していきます。

5つの主要原因パターン

主に画像、フォント、動的なコンテンツ、JavaScript処理などが関わってきます。

PageSpeed Insightsの改善項目として、下記のような表示項目が出てきます。

• 画像要素に明示的な width と height がありません
• サイズが指定されていない画像
• 最大コンテンツの描画
• レイアウトシフトの要因
• ウェブフォントの読み込み中にテキストが表示されない
• iframe 要素に明示的な width と height がありません

それぞれ下記で解説していきます。

「CLSに関する問題0.1超」の改善方法

画像やメディアにwidth と heightを指定する

この警告は、<img>、<video>、<iframe>タグにwidthとheight属性が指定されていないため、ブラウザが画像の表示領域を事前に確保できず、画像読み込み時にレイアウトシフトが発生することが原因で表示されます。

PageSpeed Insightsでも下記のような項目が出ている場合に有効です。

• 「画像要素に明示的な width と height がありません」
• 「サイズが指定されていない画像」
• 「iframe要素に明示的なwidthとheightがありません」

改善方法としては、imgタグにwidthとheight属性を指定し横幅、縦幅を指定することで解決します。

基本的な記述例（画像の場合）

<!-- 悪い例：サイズ未指定 -->
<img src="hero.jpg" alt="メインビジュアル">

<!-- 良い例：サイズ指定 -->
<img src="hero.jpg" alt="メインビジュアル" width="1200" height="630">

記述の際に重要なポイントとしては、下記を抑えておくといいでしょう。

• widthとheightは実際の画像の元サイズ（ピクセル値）を指定します
• 単位（px）は不要で、数値のみ記述します
• CSSでmax-width: 100%を併用すればレスポンシブ対応できます

レスポンシブにも対応する場合は、下記のようなCSSを追加してあげると良いでしょう。

レスポンシブ対応のCSS

img {
  max-width: 100%;
  height: auto;
}

このCSSと組み合わせることで、widthとheight属性でアスペクト比が保持され、画面サイズに応じて適切にリサイズされます。

広告や動的コンテンツに事前のスペース確保

広告やJavaScriptで後から挿入されるコンテンツは、CLSの最大の原因です。

Google AdSenseなどの広告は、ページ読み込み後に非同期で挿入されるため、既存のコンテンツを突然押し下げてしまいます。

これを防ぐには、CSSでmin-heightやaspect-ratioを使って事前にスペースを確保します。

動的にLCP要素が挿入される場合、事前にスペースを確保しておきます。

例ではありますが、下記のようなdivタグでLCP対象となるコンテンツを囲います。

<div class="hero-placeholder">
  <!-- 動的に画像が挿入される -->
</div>

CSSで高さを指定

.hero-placeholder {
  width: 100%;
  min-height: 600px; /* LCP要素の最小高さを確保 */
  background-color: #f0f0f0; /* プレースホルダー色 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .hero-placeholder {
    min-height: 400px;
  }
}

例えば、レクタングル広告ならmin-height: 250px、目次エリアならmin-height: 200pxを設定し、プレースホルダー的に背景色を薄く表示しておきます。

SNSウィジェット、関連記事、アフィリエイトバナーも同様に、挿入前の高さを予約することで、コンテンツが後から挿入されても既存の要素が移動せず、レイアウトが安定します。

この対策により、CLSスコアを平均0.05～0.15改善できます。

「ウェブフォントの読み込み中にテキストが表示されない」の改善方法

この警告は、Webフォントの読み込み中にテキストが非表示（FOIT: Flash of Invisible Text）になり、フォント読み込み完了後に突然表示されることで、レイアウトシフトとユーザー体験の悪化を引き起こしていることを示しています。

Webフォントの読み込み動作には3つのパターンがあります。

1. FOIT（Flash of Invisible Text）→フォント読み込み中、テキストが非表示（警告の原因）
2. FOUT（Flash of Unstyled Text）→フォント読み込み中、代替フォントで表示され、読み込み完了後に切り替わる（軽微なシフト）
3. 最適な状態→テキストが常に表示され、シフトが最小限

この警告が出る場合、ブラウザがFOITで動作しており、ユーザーが数秒間テキストを読めない状態になっています。

下記の方法で改善を行いましょう。

改善方法①：font-display: swap を使用

font-display: swapを指定することで、フォント読み込み中も代替フォントでテキストを即座に表示し、読み込み完了後にWebフォントに切り替えます。

下記のようなサンプルソースで対応しましょう。

自己ホスティングフォントの場合

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'MyFont', sans-serif;
}

Google Fonts の場合

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>

font-display: swap;を追加するだけで、フォント読み込み中もテキストが即座に表示されます。

「CLSに関する問題0.1超」を改善する際の注意点

改善施策の実施時に注意が必要なポイントをまとめます。

影響度の高い要素から優先的に対策

改善施策を進めるにあたり、影響度が高いものから着手することをお勧めします。

PageSpeed Insightsの「レイアウトシフトの要因」には、各要素のシフトスコアが数値で表示されます。

例えば、広告が0.15、画像が0.08、目次が0.02といった具合です。

• div.ad-container (シフトスコア: 0.15) ← 優先度高
• img.hero-image (シフトスコア: 0.08) ← 優先度中
• div#toc (シフトスコア: 0.02) ← 優先度低

スコアの大きい要素ほどCLSへの影響が大きいため、最も数値が高い要素から順に改善することで、効率的に0.1未満を達成できます。

小さなシフトを多数修正するより、大きなシフト1つを解消する方が効果的です。

Chrome DevToolsのPerformance Insightsでも各Layout Shiftのスコアを確認でき、優先順位を判断できます。

モバイルとデスクトップの両方を確認

CLSスコアはデバイスによって大きく異なります。

モバイルでは画面が小さいため広告やコンテンツの配置が変わり、デスクトップでは問題なくてもモバイルで0.1を超えるケースが頻繁にあります。

特に、レスポンシブ広告のサイズ、画像のアスペクト比、フォントサイズの変化がデバイスごとに異なる影響を与えます。

PageSpeed Insightsでは「モバイル」と「デスクトップ」のタブを切り替えて両方測定し、それぞれのCLSスコアと警告内容を確認してください。

Google Search ConsoleのCore Web Vitalsレポートも、モバイルとPCで別々に評価されます。

CSS メディアクエリで各デバイスに適したmin-heightやaspect-ratioを設定し、両環境で0.1未満を達成することが重要です。

検索順位はモバイルファーストインデックスのため、特にモバイル対応を優先してください。

改善後は必ず実測で確認するようにしましょう。

過度なスペース確保を避ける

広告や動的コンテンツのスペースを確保する際、実際のサイズより大きく設定しすぎると、巨大な空白が表示されユーザー体験が悪化します。

例えば、レクタングル広告（300×250px）にmin-height: 1000pxを設定すると、広告読み込み前に不自然な余白が目立ちます。

適切なサイズは実際のコンテンツの高さに合わせ、レクタングル広告なら250px、目次なら200～300px程度に留めます。

Chrome DevToolsで実際の要素の高さを測定し、その値をmin-heightに設定することで、CLSを防ぎながら自然な見た目を維持できます。

フィールドデータの反映には時間がかかる

CLS改善後、PageSpeed Insightsのラボデータは即座に改善されますが、Google Search Consoleのフィールドデータ（実際のユーザー体験データ）には2～4週間のタイムラグがあります。

これは過去28日間の実ユーザーデータを集計しているためです。

改善直後にSearch Consoleの警告が消えなくても焦らず、PageSpeed Insightsのラボデータで効果を先行確認してください。

1か月後にフィールドデータが更新され、「CLSに関する問題: 0.1超」の警告が解消されます。

継続的にモニタリングし、長期的な視点で評価することが重要です。

「CLSに関する問題0.1超」まとめ

CLS 0.1未満を達成することは決して難しくありません。

すべてを一度に完璧にする必要はなく、影響度の高い要素から一つずつ改善していけば、確実に目標に到達できます。

0.1を少し超える程度なら、ユーザー体験への影響は限定的です。

過度に神経質にならず、0.1未満という「良好」ラインを目指して、できることから始めましょう。

CLSの改善は、ユーザーにとってより快適なサイト体験を提供する第一歩です。

一つずつ着実に対策を進めていけば、必ず結果はついてきます。