Google Search Consoleで「CLS に関する問題: 0.25 超（モバイル）」というエラーが表示されていませんか？
このエラーは、あなたのウェブサイトのモバイル版ページで、ユーザーが予期しない大きなレイアウトのずれが発生していることを意味します。
今回は、CLSとは何か、なぜ問題なのか、そして具体的な原因と対策について詳しく解説します。
「CLS に関する問題: 0.25 超（モバイル）」とは？
「CLS に関する問題: 0.25 超（モバイル）」とは、Googleがウェブサイトの品質を評価する指標「コアウェブバイタル」の一つであるCLS（Cumulative Layout Shift、累積レイアウトシフト）のスコアが、モバイル版ページにおいて0.25を超えている状態を示すものです。
CLS（累積レイアウトシフト）とは？
CLSは、ウェブページが読み込まれる際に、コンテンツが予期せず移動する度合いを測定する指標です。ユーザーが以下のような体験をした場合、CLSのスコアが高くなります。
- テキストを読んでいる途中で、突然現れた画像や広告によってテキストが押し下げられる
- ボタンをクリックしようとした瞬間に、レイアウトがずれて別の要素をクリックしてしまう
CLSは、このような視覚的な安定性の低さを数値化したものです。
CLSのスコアの目安
Googleは、CLSのスコアを以下の基準で評価しています。
- 0.1 以下: 良好
- 0.1 ～ 0.25: 改善が必要
- 0.25 超: 不良
Search Consoleでこのエラーが表示されている場合、あなたのウェブサイトのモバイル版は、ユーザー体験を損なう可能性が高いとGoogleに評価されていることになります。
なぜCLSが重要なのか？
CLSが低いことは、ウェブサイトにとって非常に重要です。
- ユーザーエクスペリエンスの向上: ページが安定して表示されることで、ユーザーはストレスなくコンテンツを閲覧し、操作できます。
- SEOへの影響: Googleは、コアウェブバイタルを検索ランキングの要素の一つとして考慮しています。CLSを改善することは、検索順位の向上につながる可能性があります。
CLSの主な原因と対策（Google Adsense広告を含む）
CLSが発生する原因は様々ですが、ここでは特にGoogle Adsense広告が関連する場合と、それ以外の一般的な原因と対策について解説します。
Google Adsense広告が原因となる場合の対策
Google Adsenseの広告は、CLSの大きな原因となることがあります。以下の点に注意して対策を行いましょう。
- 広告サイズの明示的な指定: Adsenseの広告ユニット作成時に、可能な限り具体的なサイズを指定します。レスポンシブ広告を使用する場合でも、CSSなどで最小限の高さを確保しましょう。
- プレースホルダーの使用: 広告が表示される前に、その領域を確保するためのプレースホルダー（空の
<div>要素など）を配置し、CSSで高さを指定します。広告読み込み後にプレースホルダーが広告に置き換わるようにすることで、レイアウトのずれを防ぎます。 - 自動広告の設定見直し: 自動広告を利用している場合は、「ページ内広告」の設定を見直し、CLSの原因となりやすいフォーマットをオフにすることを検討します。
- 広告の配置場所の検討: ページの上部など、コンテンツの主要な部分に影響を与えやすい場所への動的な広告挿入は避けるようにしましょう。
- Adsenseヘルプの参照: Google Adsenseのヘルプには、CLSに関する具体的な対策やベストプラクティスが記載されていますので、確認してみることをおすすめします。
Adsense広告以外も含めた一般的なCLS対策
- 画像のサイズ指定:
<img>タグにwidthとheight属性を記述し、画像の表示領域を事前に確保します。CSSでレスポンシブ対応を行う場合でも、アスペクト比を維持するための設定（aspect-ratioプロパティなど）を活用しましょう。 - 遅延読み込みの注意: 画像やiframeなどの遅延読み込みを行う場合は、読み込み前に領域を確保しておかないと、読み込み後にレイアウトがずれることがあります。
- フォントの最適化: Webフォントの読み込み中に代替フォントが表示され、読み込み後にフォントが切り替わる際にレイアウトが大きく変動することがあります。
font-displayプロパティを使用して、フォントの読み込み時の挙動を制御することを検討してください（例:swap）。 - 動的コンテンツの扱い: ユーザーの操作なしにDOM構造が大きく変わるような動的なコンテンツの挿入は、CLSの原因となります。コンテンツの挿入が必要な場合は、事前に領域を確保するか、ユーザーの操作をトリガーとするなどの工夫が必要です。
CLS改善のための具体的な手順
- Google Search Consoleで影響を受けているページを確認: どのページでCLSの問題が発生しているのかを特定します。
- PageSpeed Insightsで詳細な分析: 問題のあるURLをPageSpeed Insightsに入力し、CLSに関する具体的な要因を特定します。「大きなレイアウトのずれを回避する」という項目などを確認しましょう。
- Chrome DevToolsの利用: Chromeの開発者ツールのPerformanceタブを使用すると、レイアウトシフトが発生したタイミングや要素を視覚的に確認できます。
- 修正とテスト: 特定された問題点に対して対策を行い、PageSpeed InsightsやChrome DevToolsで改善効果を確認します。
まとめ
「CLS に関する問題: 0.25 超（モバイル）」は、ウェブサイトのユーザーエクスペリエンスとSEOの両面において重要な課題です。
Google Adsense広告の表示方法を含め、今回ご紹介した対策を参考に、CLSの改善に取り組んでみてください。ユーザーにとって快適なウェブサイトを目指しましょう。
※本記事は2025年3月31日時点の情報に基づいています。最新の情報はGoogleの公式ドキュメント等をご確認ください。
※参考にされる場合は自己責任でお願いします。
