「ページを開いたらボタンの位置が動いてしまった」「タップしようとした瞬間に広告が表示されて違う場所を押してしまった」。
このような経験はありませんか？
実はこうした現象は、Googleが評価指標として採用しているCLS（Cumulative Layout Shift）に関係しています。
CLSはSEOにも影響する指標のひとつであり、ホームページの使いやすさにも直結します。
特にスマートフォン利用者が多い現在では、表示の安定性は非常に重要です。
この記事では、CLSとは何か、SEOとの関係、発生する原因や改善方法について、ホームページ制作会社の視点から分かりやすく解説します。
CLSとは？
CLS（Cumulative Layout Shift）とは、ページの表示中に発生するレイアウトのズレを測定する指標です。
GoogleのCore Web Vitals（コアウェブバイタル）のひとつとして採用されており、ユーザー体験を評価するために利用されています。
例えば次のような状態です。
- 画像が後から表示されて文章が下にずれる
- ボタンの位置が突然変わる
- 広告が読み込まれてレイアウトが崩れる
- フォント変更で文字サイズが変わる
ユーザーがページを操作しようとしたタイミングで画面が動くと、Googleは「使いにくいサイト」と判断する可能性があります。
CLSはSEOに影響するのか？
結論から言うと、CLSはSEO評価の要素のひとつです。
ただし、CLSだけで検索順位が大きく変動するわけではありません。
Googleはコンテンツの品質を最も重視していますが、同じような内容のページが競合している場合には、ページ体験の良し悪しが差になることがあります。
ユーザーが快適に閲覧できるホームページを作ることが、結果的にSEOにもプラスになります。
Googleが推奨するCLSの基準
| スコア | 評価 |
|---|---|
| 0.1未満 | 良好 |
| 0.1〜0.25 | 改善が必要 |
| 0.25以上 | 不良 |
できる限り0.1未満を目指すことが推奨されています。
CLSが発生する主な原因
画像サイズが指定されていない
最も多い原因のひとつです。
画像の横幅や高さが指定されていない場合、ブラウザは表示領域を確保できません。
そのため画像が読み込まれた瞬間にレイアウトが動いてしまいます。
特にWordPressでは、古いテーマやカスタム実装部分で発生することがあります。
広告の後読み込み
Google AdSenseなどの広告が後から表示されると、そのスペース分だけコンテンツが押し下げられることがあります。
広告エリアの高さを事前に確保しておくことが重要です。
スライダーやカルーセル
トップページに設置されたスライダーはCLSの原因になりやすい要素です。
画像サイズがバラバラだったり、JavaScriptの読み込み後に高さが変更されたりすると表示ズレが発生します。
Webフォントの切り替え
ページ表示時は標準フォントで表示され、後からWebフォントへ切り替わるケースがあります。
その際に文字サイズや行間が変化するとレイアウトが動いてしまいます。
ポップアップや追従バナー
お問い合わせバナーやキャンペーン告知を後から表示する場合も注意が必要です。
特にスマホ画面ではCLSの悪化につながりやすくなります。
WordPressでよくあるCLSの問題
ホームページ制作の現場で実際によく見かけるのは次のようなケースです。
- アイキャッチ画像のサイズ未設定
- SwiperやSlickなどのスライダー
- Lazy Loadによる画像遅延読み込み
- Google AdSense
- ポップアッププラグイン
- お問い合わせフォームの後読み込み
PageSpeed InsightsでCLSの警告が出ているサイトの多くは、画像やスライダーが原因になっています。
CLSを改善する方法
画像にwidthとheightを指定する
最も効果的な改善方法です。
画像サイズを指定することで、ブラウザが事前に表示領域を確保できます。
広告エリアの高さを確保する
広告が表示される前からスペースを確保しておくことで、表示ズレを防げます。
スライダーの高さを固定する
ファーストビューのスライダーは特に注意が必要です。
高さを事前に指定し、画像サイズも統一しましょう。
フォントの最適化を行う
font-display: swapを利用することで、フォント読み込みによる影響を軽減できます。
不要なポップアップを減らす
ユーザー体験を損なうポップアップはCLSだけでなく離脱率の増加にもつながります。
本当に必要なものだけを設置することをおすすめします。
CLSの確認方法
GoogleSearchConsoleを利用する
Googleが無料で提供している分析ツールです。
サイトの検索キーワードやインデックス状況も確認することが出来ます。
PageSpeed Insightsを利用する
Googleが無料で提供している分析ツールです。
CLSだけでなく、表示速度や改善点も確認できます。
Chrome DevToolsを利用する
Chromeの開発者ツールでは、実際にどの要素が移動しているか確認できます。
原因調査には非常に役立ちます。
よくある相談
CLSが悪いと必ず順位が下がりますか？
必ず下がるわけではありません。
ただし、競合サイトと比較した際に不利になる可能性があります。
PageSpeed Insightsで少し悪いだけなら問題ありませんか？
極端に悪くなければ大きな問題にならないケースもあります。
ただし改善できるなら早めに対応しておくことをおすすめします。
まとめ
CLSはホームページの表示ズレを測定する指標であり、SEOだけでなくユーザーの使いやすさにも大きく関わります。
- 画像サイズを指定する
- 広告スペースを確保する
- スライダーの高さを固定する
- フォントやポップアップを最適化する
特にWordPressサイトでは画像やスライダーが原因となるケースが非常に多いため、まずはそこから確認すると効率的です。
aswebでは、ホームページ制作だけでなく表示速度やSEO改善のご相談にも対応しています。
「PageSpeed Insightsで警告が出ている」「CLSを改善したいけれど原因が分からない」という場合は、お気軽にご相談ください。
