CLS(Cumulative Layout Shift)とは?

読み:しーえるえす / 分野:IT・システム
CLSとは、ページ表示中に起きるレイアウトのずれ量を数値化した、Webページの見やすさを測る指標です。

CLS(Cumulative Layout Shift)とは、Webページの読み込み中に表示要素がどれだけ予期せずずれ動いたかを示す指標です。数値が小さいほど、閲覧者が快適にページを見られることを意味します。

意味

Webページを開いたとき、画像や広告が後から読み込まれることで、文字や写真の位置が急にずれる現象があります。読もうとしていた箇所が下にずれて、誤って別のリンクやボタンを押してしまった経験がある方も多いでしょう。CLSは、このような「意図しないレイアウトのずれ」が発生した範囲と移動距離を掛け合わせて数値化したものです。Googleが提唱する「Core Web Vitals(コアウェブバイタル)」という、ページ表示の快適さを測る指標群の一つに含まれています。値が小さいほどずれが少なく、閲覧者にとって操作しやすいページと判断されます。

使われる場面と具体例

  • Web担当者が、自社サイトの表示品質を点検するために、Googleが提供する「PageSpeed Insights」などの無料ツールでCLSの値を確認する。
  • 制作会社がサイトのリニューアルを行う際、画像や広告枠のサイズを事前に指定し、読み込み中にレイアウトがずれない設計にする。
  • 経営者やマーケティング担当が、検索からの集客やコンバージョン(成果)を改善したいときに、表示品質の課題としてCLSの改善を検討材料にする。

中小企業が押さえたい点

  • CLSは無料の検査ツールで手軽に確認できるため、制作会社に依頼する前に自社サイトの現状を把握しておくと話が進めやすくなります。
  • ずれの主な原因は、サイズ指定のない画像や広告、後から読み込まれるバナーであることが多く、制作時にサイズ指定を徹底するよう依頼すると改善しやすくなります。
  • CLSはページの一部の指標に過ぎず、表示速度や操作性など他の指標と合わせて総合的に判断する必要があります。制作会社に依頼する際は、CLSだけでなく全体の表示品質を確認してもらいましょう。

よくある誤解

  • CLSは「ページの表示速度」そのものを測る指標だと誤解されがちですが、実際は「表示中のずれの大きさ」を測るものです。速度は別の指標(LCPなど)で評価されます。
  • CLSの数値が良ければ検索順位が必ず上がると考えられがちですが、順位は多くの要素で決まるため、CLSの改善はあくまで閲覧者の使いやすさを高める取り組みの一つです。

よくある質問

Q. CLSの数値はどこで確認できますか。

A. Googleが無料で提供する「PageSpeed Insights」や「Google Search Console」で確認できます。制作会社に依頼して定期点検してもらう方法もあります。

Q. CLSが悪いとどんな影響がありますか。

A. 閲覧者が誤操作をしやすくなり、ページから離脱する原因になります。結果として問い合わせや購入などの成果に影響することがあります。

Q. 自社で改善できますか。

A. 画像サイズの指定などで一定の改善は可能ですが、サイトの構造に関わる修正は制作会社や担当エンジニアへの相談が確実です。

関連する用語

関連記事

ほかの用語を探す

AI・IT・ビジネス用語集のトップへ戻る

著者:デジタルレクリム株式会社 代表取締役 | AIマーケティング専門家

中村匠吾(なかむら しょうご)は、デジタルマーケティングとAI活用を専門とする経営者。20代前半からウェブ制作業界でキャリアを積み、デジタルレクリム株式会社を設立。「デジタルの力で企業と顧客を結ぶ」を理念に、AI・ChatGPTを活用したマーケティング手法で企業のDX推進を支援。2024年11月、著書『もしも、Chat-GPTがあなたの仕事の悩みを解決してくれたら ~杏奈と探る、AIとの付き合い方~』(デザインエッグ社)を出版。

著者:デジタルレクリム株式会社 代表取締役 | AIマーケティング専門家をフォローする

Webとテクノロジーで、
貴社のビジネスを次のステージへ

AI活用・Web制作・SEO・広告運用など、まずはお気軽にご相談ください。

無料相談・お問い合わせ
  • 初回相談無料
  • オンライン対応
  • 貴社に最適なご提案