「GoogleサーチコンソールでCLSが0.25を超えています」と表示されたけど、何をどう直せばいいかわからない…。
そもそも、CLSが何かわからない？
そんな方のために、この記事では 専門用語をできるだけ使わずに CLSとは何か、なぜ大事なのか、そして初心者でもできる改善方法をわかりやすく解説します。
CLSとは？
このような表示が、Googleサーチコンソールの「Webに関する主な指標」をクリックすると表示されることがあります。
特にモバイルで発生することが多いようです。
CLSとは、聞きなれない専門用語ですね！
簡単に説明すると「ページが読み込まれるときに画面がどれくらい動くか」を示す数値です。
詳しくは、CLSは「Cumulative Layout Shift」の略で、ユーザーがページを閲覧中に「突然レイアウトが動く現象」の度合いをスコア化したものです。
CLSの目安は次の通りです。
- 0.1以下：合格ライン（良好）
- 0.1〜0.25：改善した方が良い
- 0.25以上：要注意！SEO評価に悪影響の可能性あり
例えば、ボタンを押そうとした瞬間に画面がズレて、違うところを押してしまった経験はありませんか？
これがCLSが高い状態です。
特にスマホでは指が画面を覆うため、誤タップの原因になりやすくなります。
なぜCLSが大事なの？
ユーザーが快適にページを見られるかを決める重要な指標だからです。
数値が悪いと「使いにくいサイト」と判断され、検索順位が下がることもあります。
特にモバイルでは通信環境や画面サイズの制限があり、CLSが悪化すると誤タップや読みにくさの原因となり、直帰率が上昇しやすくなります。
つまり、ユーザーが見にくいサイトになり、Googleのサイト評価に影響が出るリスクがあるということです。
CLSが高くなる主な原因
原因1. 画像や広告のサイズが決まっていない
読者がページを読み込んだとき、表示される画像や広告の枠が急にズレてしまうことがあります。
その結果、CLSが悪化します。
例：「ブログのアイキャッチ画像が急に大きく表示されて、文字が下に押し出される」
原因2. フォントの切り替えが遅い
最初は普通の文字で表示されていたのに、途中でおしゃれなフォントに変わってズレることがあります。
デザイン的なフォントの要素を取り入れる時に注意が必要です。
原因3. ページ途中でバナーが突然出てくる
スクロールしていたら、急に「おすすめ記事」や「クーポン」などのバナーが表示されて、画面が押し下げられるケースがあります。
原因4. ページの表示が完全に終わる前に動く仕組みが多い
特にアニメーションや動きのある要素が多いサイトは注意が必要です。
理由は、読み込み中にレイアウトが変わりやすくなり、CLSを悪化させるリスクがあるからです。
初心者でもできる４つのCLS改善方法
初心者でも簡単にできる改善方法を説明します。
改善方法1. 画像サイズをあらかじめ決めておく
画像をアップロードする前に、使うサイズを決めておきます。
例：横幅600pxなら、すべて同じ幅で揃える。
改善方法2. フォントは「標準的なもの」を使う
特別なWebフォントは読み込みが遅いことがあるので、最初は標準フォントを使うのがおすすめです。
改善方法3. ページ途中に広告やバナーを入れない
どうしても入れたい場合は、固定の位置に設置する（記事の一番下など）。
改善方法4. ページをシンプルにする
動きの多いアニメーションや後から読み込まれる仕組みは避け、まずはシンプルなデザインで作りましょう。
チェックリスト（初心者用）
| やること | 実施状況 |
|---|---|
| 画像のサイズを揃えたか | [ ] |
| フォントを標準的なものに変更したか | [ ] |
| バナーや広告を突然表示させないようにしたか | [ ] |
| ページのデザインをシンプルにしたか | [ ] |
| PageSpeed InsightsでCLSが改善されたか確認したか | [ ] |
Googleが提供する以下のツールで、CLSの数値を確認しましょう。
Googleアドセンスの自動広告がCLSに与える影響
ブログで収益化をしている方の多くが利用している Googleアドセンスの自動広告ではないでしょうか。
自動広告は収益アップにとっても、広告配置にとっても、便利な機能です。
しかし、時にはこれがCLSを悪化させる原因になることがあります。
なぜ自動広告でCLSが悪化するの？
自動広告はページの読み込み中に広告枠を自動で挿入する機能があります。
その結果、自動挿入中にページのレイアウトが押し下げられたりズレたりして、CLSが高くなってしまいます。
特にモバイルでは画面が小さいため、広告が挿入されるとページ全体が大きく動くことがあり、ユーザーにとっては醜いサイトとなってしまいます。
改善策（初心者向け）
1. 自動広告の「挿入位置」を制御する
Googleアドセンスの管理画面で「広告の配置」を調整することができます。
重要な点は、ページの中央や本文途中に入れすぎないようにすることです。
2. 広告サイズを安定させる
アドセンスの「広告設定」でレスポンシブ広告を使う場合が多いのではないでしょうか。
レスポンシブ広告を使う場合は、「幅を固定する」「高さを大きくしすぎない」など、見た目が大きく変わらない設定を選ぶことで回線することがあります。
3. 自動広告と手動広告を併用する
自動広告だけに頼らず、手動広告を併用する方法で改善することがあります。
その方法は、記事の下部など レイアウトに影響しにくい位置 に手動で広告を入れることも一つの改善方法です。
チェックリスト（アドセンス利用者向け）
| やること | 実施状況 |
|---|---|
| 自動広告の配置を調整したか | [ ] |
| 広告サイズを安定させたか | [ ] |
| 手動広告を使ってレイアウトを固定したか | [ ] |
| 広告変更後にPageSpeed InsightsでCLSを再チェックしたか | [ ] |
まとめ
CLSが0.25を超えていても、初心者でもできる改善方法はたくさんあります。画像サイズを揃えたり、フォントやバナーの扱いを見直すだけでスコアは大きく改善します。
あるブログサイトでは、CLSが 0.38 → 0.09 に改善されたことで以下の効果が得られたといいます。
- モバイル直帰率：20％改善
- 滞在時間：平均+15秒
- 検索順位：主要キーワードで3位から1位に上昇
これは「画像サイズの固定」と「フォント対応」だけで達成できた結果です。
まずはチェックリストを使って1つずつ対応し、PageSpeed Insightsで結果を確認しましょう。
