![CLSとは?用語の意味や数値化する方法について徹底解説!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/c52802a9cbfc47fab293a8592f45eadf/Group%20677.png?w=1200&fm=webp)
SEO
更新日: 2024/4/29
CLSとは?用語の意味や数値化する方法について徹底解説!
![character_balloon](/media/character/yellow_question_left.png)
ねえ、ブルー!CLSって何だろう?ブルーは詳しいよね?
もちろん、得意分野だよ。
![character_balloon](/media/character/blue_smile_right.png)
![character_balloon](/media/character/yellow_smile_left.png)
ぜひ教えて!
いいよー!
![character_balloon](/media/character/blue_normal_right.png)
CLSとは?
![character_balloon](/media/character/blue_inspiration_left.png)
CLSはコアウェブバイタルの1つなんだよ
ウェブバイタルって何?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
ウェブバイタルは、Googleが設定しているサイトの健全性を表す指標のことだよ
![character_balloon](/media/character/blue_normal_left.png)
コアウェブバイタルは、ウェブバイタルを測るなかでコア(中核)となる指標のことをいうんだ
![character_balloon](/media/character/blue_up_left.png)
コアウェブバイタルにはLCP、FID、CLSがあるよ
![character_balloon](/media/character/blue_inspiration_left.png)
ちなみに、LCP(Largest Contentful Paint)はページの読み込み速度、表示時間の指標で、FID(First Input Delay)はインタラクティブ性を示す指標だよ
![character_balloon](/media/character/blue_inspiration_left.png)
インタラクティブ性というのは、サイト内で最初にアクションを起こした時の反応の速さを示す指標だね
リンクへ早く飛べるか、サクサク進むかをみるんだよね!
![character_balloon](/media/character/yellow_inspiration_right.png)
![character_balloon](/media/character/blue_normal_left.png)
CLS(Cumulative Layout Shift)は累積レイアウトシフトという意味で、ページコンテンツの視覚的な安定性を示す指標のことだよ
![character_balloon](/media/character/blue_normal_left.png)
サイトのページ内のレイアウトのずれなどを数値化するんだ
![character_balloon](/media/character/blue_down_left.png)
イエローは次のような経験はない?
1.ページにアクセスしたら最初は画像が大きかったのに後から小さくなった
2.本文を読んでいたら、途中で突然画像が出てきて読んでいた文章が下に行ってしまった
3.リンクをクリックしたタイミングで広告が突然表示されて誤って広告ページに飛んでしまった
経験あるよ!急に予期せぬページに飛んだりするからびっくりしちゃうね
![character_balloon](/media/character/yellow_surprised_right.png)
![character_balloon](/media/character/blue_painful_left.png)
このような現象が起きると、UXが下がってしまうんだ
小さなことだけどストレスを感じちゃうね
![character_balloon](/media/character/yellow_troublesome_right.png)
戻ってやり直せばいいけど、読む意欲を低下させてしまう可能性もあるから、早く改善した方がいいよね!
![character_balloon](/media/character/yellow_troublesome_right.png)
CLSはどうやって数値化するの?
CLSってどうやって数値化するの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_happy_left.png)
CLSは「ズレが生じた表示面積の比率×実際にズレていた比率」で計算できるよ
![character_balloon](/media/character/blue_happy_left.png)
スコアが0.1未満なら良好、0.25以下なら改善が必要、0.25以上なら不良と評価されるんだ
![character_balloon](/media/character/blue_normal_left.png)
例えば、画面のちょうど半分のところに広告が出てきてしまって、その分、文章が下にズレてしまったとするよ
![character_balloon](/media/character/blue_normal_left.png)
ズレた面積は画面全体の50%(0.5)ということになるよね
![character_balloon](/media/character/blue_question_left.png)
広告面積が画面全体の15%(0.15)とすると、計算式はどうなると思う?
「0.5(ズレが生じた表示面積の比率)×0.15(実際にズレていた比率)=0.075」かな?
![character_balloon](/media/character/yellow_up_right.png)
![character_balloon](/media/character/blue_normal_left.png)
そうだね。この場合、0.075でスコアが0.1を下回るから良好といえるよ
こういった感じで算出していくんだね〜!
![character_balloon](/media/character/yellow_smile_right.png)
CLSをチェックするには?
CLSをチェックするときは、どうしたらいいの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_painful_left.png)
CLSをチェックするための万能ツールはないんだ
![character_balloon](/media/character/blue_normal_left.png)
だから、次のような複数のツールを使い分けていくことが重要なんだよ
1.Google search Console
2.Page Speed Insights
3.ChromeやEdgeの開発者ツール
4.Light House
いろんなツールがあるんだね!
![character_balloon](/media/character/yellow_inspiration_right.png)
1.Google search Console
![character_balloon](/media/character/blue_normal_left.png)
Google search Consoleは、SEO効果を測定するツールで、サイト全体の診断結果を蓄積しているよ
![character_balloon](/media/character/blue_up_left.png)
過去90日分の診断結果を常に蓄積しているし、自動で調査と集計をしてくれるんだ
自動で調査してくれるなんてすごく便利!
![character_balloon](/media/character/yellow_happy_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
ただし、改善点の特定に少し弱くて、サイト内の全ページが漏れなく調査されるわけではないことが注意点だね
2.Page Speed Insights
![character_balloon](/media/character/blue_normal_left.png)
Page Speed Insightsは、Googleが提供しているWebサイトを診断するツールだよ
![character_balloon](/media/character/blue_up_left.png)
Webサイトから利用できてURLの入力でユーザーがアクセスした環境の実測値とシミュレーションで測定した値を10秒ほどで算出するんだ
![character_balloon](/media/character/blue_up_left.png)
ページごとの改善箇所や改善方法が詳しく把握できるよ
Google search Consoleで全体を見て、Page Speed Insightsで細かく見ていくんだね
![character_balloon](/media/character/yellow_normal_right.png)
3.ChromeやEdgeの開発者ツール
![character_balloon](/media/character/blue_normal_left.png)
ChromeやEdgeの開発者ツールは、SEOチェックツールとして活用されているよ
![character_balloon](/media/character/blue_normal_left.png)
非公開サイトであっても、HTTP/HTTPSプロトコルを通っていてブラウザに表示されていれば使用できるよ
そうなんだ!非公開でも使用できるのはいいよね〜
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_painful_left.png)
ただし、チェックするときはPCの通信速度によってスコアが変わる可能性があるから注意してね
4.Light House
![character_balloon](/media/character/blue_confidence_left.png)
Light Houseは、自動でレポートを作成して、コアウェブバイタルを含めたウェブバイタル全体を測定するよ
![character_balloon](/media/character/blue_happy_left.png)
SEO対策が十分に行われているかなども測定してくれるんだ
![character_balloon](/media/character/blue_happy_left.png)
利用方法が簡単な点も良いポイントだね
今回紹介してくれた4つのツールの意味や使い方を知っておくと、サイトの分析が早くできるね!
![character_balloon](/media/character/yellow_up_right.png)
CLSが低下する原因と改善方法
そもそも、CLSって何で低下するんだろう?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
まず、なぜレイアウトがズレてしまうのかというとリソース(画像など)が非同期的に読み込まれてしまったり、動的に追加されたりするからなんだ
それってどんなとき?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
具体的には次のようなことが挙げられるよ
1.画像や動画のサイズ指定がされていない
2.広告がサイズ指定されていない
3.動的コンテンツを多数入れている
4.Webフォントの読み込みに問題がある
1.画像や動画のサイズ指定がされていない
![character_balloon](/media/character/blue_sigh_left.png)
画像や動画のサイズ指定がされていないと、CLSが低下してしまうんだ
![character_balloon](/media/character/blue_sigh_left.png)
ブラウザは軽量なテキストから読み込んでいくんだけど、大きさの指定をしないで画像を読み込むと、画像の大きさの分だけズレてしまうんだよね
![character_balloon](/media/character/blue_normal_left.png)
画像タグ(〈img〉)や動画のタグ(〈video〉)を付けるときに幅や高さを設定しないといけないよ
そうすることでブラウザが読み込む前から表示枠を確保してくれるんだね!
![character_balloon](/media/character/yellow_normal_right.png)
2.広告がサイズ指定されていない
![character_balloon](/media/character/blue_panic_left.png)
サイズ指定されていない広告が読み込まれると、レイアウトの表示がズレてしまうんだ
![character_balloon](/media/character/blue_normal_left.png)
Googleマップやiframe(ページ上に別のWebページを読み込んで表示する)もこれに当てはまるから注意してね
![character_balloon](/media/character/blue_up_left.png)
対策としては、広告をできるだけ下部に表示するようにしよう
上部じゃいけないの?
![character_balloon](/media/character/yellow_inspiration_right.png)
![character_balloon](/media/character/blue_sigh_left.png)
広告が上部にあると、レイアウトの問題もあるけど、SEOの評価から見てもあまり良くないんだ
![character_balloon](/media/character/blue_normal_left.png)
あとは、画像のときと同じように読み込む前に表示枠を確保しておくといいね
3.動的コンテンツを多数入れている
![character_balloon](/media/character/blue_painful_left.png)
ユーザーの操作とは関係ないタイミングで挿入される動画コンテンツを入れると、レイアウトが大きくズレてしまう場合がある
![character_balloon](/media/character/blue_up_left.png)
静的な表示にするか、タグの設定をするのがおすすめだよ。
![character_balloon](/media/character/blue_up_left.png)
それと、動画も画像と同様に画面の下部にレイアウトするようにしよう
ここでも下部にした方がいいんだね!
![character_balloon](/media/character/yellow_inspiration_right.png)
4.Webフォントの読み込みに問題がある
Webフォントって何?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
Webフォントとは、サーバーの中にあるフォントファイルのことだよ
![character_balloon](/media/character/blue_normal_left.png)
Webフォントを使用すれば、ユーザーの閲覧環境に関係なく同じフォントで表示されるんだ
![character_balloon](/media/character/blue_up_left.png)
WebフォントがなぜCLSを低下させるのかというと、「FOIT(Webフォントを読み込むときにテキストが一時的に見えなくなってしまう)」と「FOUT(再レンダリング)」が理由に挙げられるんだ
![character_balloon](/media/character/blue_troublesome_left.png)
読み込むWebフォントが多いほどFOITとFOUTの階数も増えるから、文字幅の変化などのズレが起こってしまうんだよ
![character_balloon](/media/character/blue_up_left.png)
あらかじめWebフォントのレンダリングの最適化を行ったり、Webフォントの使用を抑えたりすることで改善されるよ
![character_balloon](/media/character/blue_normal_left.png)
CLSについてまとめたよ
まとめ
◆CLSとは、コアウェブバイタルの1つ。累積レイアウトシフトという意味で、ページコンテンツの視覚的な安定性を示す指標のこと
◆CLSは「ズレが生じた表示面積の比率×実際にズレていた比率」で計算され、スコアが0.1未満なら良好、0.25以下なら改善が必要、0.25以上なら不良と評価される
◆CLSをチェックするための万能ツールはなく、Google search ConsoleやPage Speed Insightsなどの複数のツールを使い分けていくことが重要
◆CLSが低下する原因は、画像や動画のサイズ指定がされていない、広告がサイズ指定されていない、動的コンテンツを多数入れている、Webフォントの読み込みに問題があることが挙げられる
![character_balloon](/media/character/blue_happy_left.png)
CLSはSEO対策にも影響してくる重要なことだから、知っておいて損はしないね
CLSを低下させないように気を付けるよ!
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR