CLS改善を経営判断で進める 逸失利益を止める4つの優先順位

問い合わせボタンを押そうとした瞬間に広告が差し込み、指先が別の場所に触れてしまう。フォームの確認ボタンがエラー文の表示で押し下げられ、離脱につながる。商品一覧で画像の高さがそろわず、比較の途中で視線が切れる。こうしたずれは、単なる見た目の乱れではありません。流入獲得に投じた費用を、最後の操作で取りこぼす構造的な損失です。

web.dev の Web Vitals 解説 と Google のページ エクスペリエンスに関する説明 を読むと、Core Web Vitals は検索評価だけのためにある指標ではなく、読み込み、操作、視覚安定性を通じて利用体験を測る考え方だと分かります。だからこそ、CLS改善をSEO担当だけの採点競争で終わらせてはいけません。経営、編集、広告運用、開発の共通課題として扱う必要があります。

特に、月間自然検索流入が1万セッションを超え、主要CVページのCLSが0.1を超えている事業組織は、次回改修まで待つべきではありません。今期の改善項目として切り出し、重点URLから直すべきです。反対に、月間流入が数百しかなく、CV導線も持たない古いお知らせページまで一斉に対応する必要はありません。CLSは全ページに同じ重みで向き合う品質課題ではなく、成果導線の危険箇所を止血する施策です。

CLSを点数ではなく逸失利益で判断する視点

CLSは0.1以下が良好、0.25を超えると不良という基準で整理されることが多く、web.dev の CLS 解説 でもその閾値が示されています。ただ、経営判断でそこだけ見ても十分ではありません。0.08でも送信ボタンの直前で跳ねるページは危険ですし、0.16でも記事末尾だけで起きるなら優先度は下がります。見るべきなのは、どのずれがどの成果を削っているかです。

経営会議で共有する判断軸は、次の三つに絞るとぶれません。

1. ずれが発生する場所が成果導線に近いか

問い合わせ、資料請求、カート投入、価格表、予約導線の周辺で起きるCLSは、最優先で扱うべきです。

1. ずれが発生する流入量が十分に大きいか

月間自然検索流入が3,000未満のページ群なら後回しもありえます。一方、月間1万以上の流入を持つ主要ページは、軽度でも放置コストが膨らみます。

1. ずれが再発しやすい運用か

広告差し込み、埋め込み、CMS入力、フォント差し替えに依存するページは、一度直しても終わりません。改修だけでなく、運用規則まで必要になります。

実務では、概算でもよいので逸失利益を置いて判断すると優先順位が固まります。たとえば、月間2万セッションのLPでCVRが2.5%、1件あたりの粗利が4万円、送信直前のずれでCVRが0.2ポイント落ちているなら、月次の逸失利益はおおむね16万円です。改善に20万〜40万円かかっても、回収の見込みは立つでしょう。逆に、流入が少ない採用ページの末尾で起きる軽微なずれに同額を投じるのは、判断として重すぎます。

結論は明快です。CLSはスコア順ではなく、逸失利益が大きい順に並べるべきです。まずCVページ、次に収益記事、次に主要カテゴリ、最後に軽微な情報ページ。この順番を崩して「全ページ一律で0.1未満を目指す」と進めると、重要ページの改修が遅れます。

例外もあります。大規模なリブランディングや全体テンプレートの更新が近いなら、個別ページへの応急処置を最小限にとどめ、共通部品の設計変更に投資した方が合理的です。また、配信終了が数週間以内の短期キャンペーンページなら、作り直しではなく枠の予約だけで止血する判断も妥当です。

計測の順番を誤ると改善投資はほぼ外れる

CLS改善で最初に決めるべきなのは、どの計測値を信じるかではありません。現場値、再現値、事業指標の順で読むという手順です。この順番を逆にすると、再現はできるものの本番では影響が小さい問題と、本番でだけ悪化している厄介な問題を取り違えます。

入口として最も使いやすいのは PageSpeed Insights です。ここでは実際の利用状況を示す実測値と、その場で再現するラボ値の両方を確認できます。最初に見るべきなのは、ページ上部に出る実測値です。実測値が良好で、ラボ値だけが悪いなら優先度は一段落として構いません。逆に、実測値でCLSが0.1を超えているなら、そのURL群は今期の改善対象に入れるべきです。

次に、Chrome DevTools の Performance 機能 で再現調査に進みます。ここでは次の手順を固定してください。

1. シークレットウィンドウで開く
2. 幅375px前後のモバイル表示にする
3. CPUを4倍程度遅くして記録する
4. 主要導線まで実際に操作する
5. ずれた瞬間の前後2〜3秒を確認する

この手順を守るだけで、PCだけでは見えないモバイルの不安定さや、同意バナー、広告配信後の押し下げを見つけやすくなります。特にBtoBの問い合わせページと広告収益型の記事ページは、スマートフォンの方が悪化しやすい。PC確認だけで完了にするのは避けるべきです。

三つ目に重ねるのがGA4です。離脱率、スクロール率、CVR、デバイス別の差分を並べると、「数値は悪いが事業影響は小さいページ」と「数値は中程度でも売上に効いているページ」が分かれます。GA4の設計が曖昧なら、先に GA4の使い方を初心者向けに整理 SEO実装で迷わない計測設計と活用の基本 を確認し、計測の粒度を整えた方が早いでしょう。CVの定義が曖昧なままでは、改善の成否を判断できません。

規模別の進め方も明確です。月間PV10万未満なら、まず主要10〜20URLの手作業確認で十分です。月間10万〜100万なら、記事詳細、カテゴリ、LP、フォームページなど、テンプレート単位で整理するべきです。月間100万を超えるなら、URL単位ではなく「広告枠」「商品画像」「フォーム部品」のように部品単位で管理しないと追いつきません。

なお、CLSだけを切り離して見るのも危険です。Core Web Vitals改善の進め方 最新評価軸に合わせて表示速度と操作体験を立て直す の通り、LCPやINPとあわせて見た方が改修のやり直しは減ります。画像先読みでLCPを改善したつもりが、重い部品の追加でINPを悪化させる例は珍しくありません。

原因調査は動いた要素より発生条件から追う

現場でよくある失敗は、「どの要素が動いたか」で議論を終えてしまうことです。大切なのは、その要素がどんな条件で動くのかです。同じ広告枠でも、初回訪問時だけ崩れるのか、同意バナー表示後だけ崩れるのか、会員ログイン時だけ崩れるのかで、対処はまったく変わります。

web.dev の CLS改善ガイド では、サイズ未指定の画像、広告や埋め込み、動的に挿入される要素、Webフォントが主な原因として整理されています。実務では、そこにフォームのエラー表示や比較表の後差し込みが加わります。まずは次の表で当たりを付けると、調査が早くなります。

実務では、最初に広告枠、埋め込み、フォーム周辺を疑うべきです。画像寸法の未指定は確かに多いものの、売上やCVへの打撃が大きいのは、送信直前や読了直前の押し下げです。BtoBならフォーム、ECなら商品画像とレビュー部品、広告メディアなら本文途中の広告。最初に疑うべき箇所は、サイト種別ごとにほぼ決まっています。

調査の手順も固定した方が速くなります。

1. 同じテンプレートで「ずれるURL」と「ずれないURL」を3本ずつ並べる
2. ログイン状態、広告表示、同意バナー表示の有無で差を取る
3. 375px前後のモバイル幅で再現する
4. 画像読み込み後、タグ配信後、フォント切り替え後を順に観察する
5. DevToolsの記録とGA4の離脱増加ページを照合する

さらに、TTFBの解説 や クリティカル レンダリング パスの解説 も見ておくと、「なぜ後からまとめて出てくるのか」が理解しやすくなります。サーバー応答が遅いページでは、要素の挿入時刻が後ろにずれ、その結果としてCLSが悪化することがあります。つまり、CSSだけ直しても止まらないケースがあるということです。

優先順位は売上導線に近い箇所から決めるべき

CLS改善で最初に直すべきなのは、スコアを大きく押し下げている箇所ではありません。成果導線の近くでユーザーの判断を狂わせる箇所です。ここを外すと、レポートの数字は良くなっても、問い合わせも売上も戻りません。

優先順位は、次の五段階で決めるのが現実的です。

1. ファーストビュー内のCTA、価格、主要画像
2. フォーム周辺、エラー表示、送信ボタン
3. 商品一覧、比較表、記事本文中の広告や埋め込み
4. 見出し、ナビ、パンくず周辺のフォント切り替え
5. 画面下部や読了後の軽微なずれ

最初の一手は、画像、広告、フォーム領域の高さ予約に絞るべきです。これらは短期間で効きやすく、再発防止の規則にも落とし込みやすい。反対に、0.01を削るための細かな余白調整やアニメーションの微修正は、後回しで構いません。

判断を迷わせないために、次のように切り分けてください。

例外も押さえておく必要があります。ブランドLPで上部の世界観が収益に直結する場合、見出しやファーストビューの安定性は通常より重く見て構いません。また、広告収益比率が高いメディアでは、枠を大きく取りすぎると広告の視認性や回遊率に影響するため、面ごとの高さ設計を先に詰めるべきです。

LCPとINPもあわせて確認してください。LCP改善の解説 と INP改善の解説 が示す通り、表示の速さと操作の軽さはCLSと切り離せません。たとえば、画像の高さを予約しても、重いJavaScriptで入力反応が鈍ければフォーム体験は改善しません。月次の改善会議では、CLS、LCP、INP、CVRを同じ表で見るべきです。

CV設計そのものが粗いなら、GA4のコンバージョン設定で迷わない 事業判断に効く設計とベストプラクティス を先に見直した方がよいでしょう。CVの定義が曖昧な状態でCLSだけ直しても、何が良くなったのか説明できません。

サイト規模と収益モデルで打ち手を変える基準

CLS改善は、どの事業組織にも同じ順番が当てはまるわけではありません。月間PV、更新頻度、開発体制、収益モデルによって、最適な打ち手は変わります。ここが曖昧だと、改善対象だけが広がって進まなくなります。

まずはサイト規模で整理してください。

次に、収益モデルで最初の優先箇所を決めます。

• リード獲得型なら、フォーム周辺と料金訴求周辺を最優先にするべきです。問い合わせ送信率が主KPIなら、本文途中の軽微なずれより、送信前の不安定さを止める方が効果は出ます。
• ECなら、商品画像、バリエーション選択、カート導線の順に直すべきです。比較中の視線を切るずれは、回遊率より先に購入率を落とします。
• 広告収益型メディアなら、ファーストビューと本文中広告枠を先に固めるべきです。記事末尾のわずかなずれに時間を使うより、本文途中の大きな押し下げを止める方が収益への効きは大きくなります。

さらに、三つの場面ごとに推奨を整理すると判断しやすくなります。

月間十万PV未満のBtoBサイトでの推奨

主要CVページが10本前後に絞れるなら、まず手修正で止血するべきです。CMS入力規則の整備、画像寸法の必須化、フォームエラー領域の確保までを2〜3週間で終える方が、監視基盤を先に整えるより効果が出ます。例外は、来月以降にページ量産が確定している場合です。そのときはテンプレート側の修正を優先してください。

月間五十万PV前後のメディアでの推奨

広告とSEOを両立する段階なら、本文途中の広告枠を最初に設計し直すべきです。画像寸法の修正だけでは体感は戻りません。配信面ごとに最小高さを持たせ、関連記事やレコメンドの差し込み位置を整理する方が再発を防げます。例外は、広告比率が低く、CV導線が明確なホワイトペーパー獲得型メディアです。その場合はフォーム直前を優先して構いません。

月間百万円超のECや大規模サービスでの推奨

この規模では、URL単位の修正をやめて部品単位の基準を作るべきです。商品画像、レビュー、配送情報、クーポン表示、在庫表示の各部品に高さ規則を持たせ、リリース前の確認項目に入れる必要があります。例外は、短期で終了する販促特集だけです。そこは共通部品への反映を待たず、個別に枠予約で対応しても構いません。

JPSM SEO 編集事業部でも、初回診断の場ではスコア一覧より先に、重要ページ群、主要CV、広告面構成、CMS入力ルールを確認します。ここを飛ばして数値だけ眺めても、経営判断にはつながりません。

再発を防ぐ運用設計まで整えて初めて終わる

CLS改善が失敗する典型は、一度の修正で終わったつもりになることです。実際には、キャンペーンバナーの追加、広告設定の変更、比較表の差し替え、フォーム文言の更新で簡単に再発します。だからこそ、修正だけでなく運用設計まで含めて完了とみなすべきです。

最初に整えるべき運用規則は次の通りです。

1. 画像は比率別テンプレートを決め、寸法入力を必須にする
2. 広告と埋め込みは差し込み位置と最小高さを文書化する
3. フォームはエラー文の表示領域を最初から確保する
4. Webフォントは見出しと本文で役割を分ける
5. 同意バナーや告知帯は押し下げ方式を避ける
6. 新しい部品を公開する前にモバイル幅で確認する

この六つを決めないまま「一括修正したから完了」としてしまうと、二週間から一か月で元に戻りやすくなります。特に編集部門と広告運用部門が日常的に更新するサイトでは、開発側だけで抱え込まないことが重要です。

実務チェックリストも、抽象論ではなくそのまま使える形にしておきます。

• PageSpeed Insightsで主要10〜20URLの実測値を確認した
• CLSが悪いURLをテンプレート別に分類した
• 375px前後のモバイル幅で主要導線を再現した
• DevToolsでCPUを落としてずれた瞬間を記録した
• 画像、広告、埋め込み、フォーム、フォントの順に原因を切り分けた
• GA4でCVR、離脱率、スクロール率の差を確認した
• 改善後に同条件で再計測した
• CMS入力規則と部品仕様に修正内容を反映した

この八項目を満たしていないまま公開すると、改善の再現性を担保できません。逆に、ここまで整えば、公開後に多少の追加要素が入っても崩れにくくなります。Googleの ページ エクスペリエンスに関する説明 でも、ページ単位で体験が見られることが示されています。トップページだけ整えても、流入の多い下層ページが不安定なら成果は戻りません。

四週間で意思決定まで進める実行計画を組む

CLS改善を経営判断に落とし込むなら、長期計画より先に最初の四週間を切るべきです。ここで「どこから直せば成果が戻るのか」を示せれば、次の投資判断がしやすくなります。

一週目は重点URLと損失仮説を固める

自然検索流入上位、CV寄与上位、広告収益上位から、それぞれ5本前後のURLを選びます。ここで全ページを追う必要はありません。月間流入、CVR、粗利、広告収益をもとに、逸失利益の大きいページを先に置くべきです。主要ページの実測値はPageSpeed Insightsで確認し、GA4の指標と横並びにしてください。

二週目は発生条件を記録して原因を切る

DevToolsでモバイル再現を行い、ずれた瞬間の前後2〜3秒を録画します。この週の目的は、部品名を並べることではなく、「広告表示後だけ崩れる」「初回訪問だけ崩れる」「送信エラー時だけ崩れる」といった条件を確定することです。条件が定まれば、担当部門も切り分けやすくなります。

三週目は最も効く修正だけに集中する

多くのサイトでは、画像枠、広告枠、フォーム領域、同意バナーの表示方式のいずれかが主戦場になります。ここでは改善項目を増やしすぎてはいけません。まずは逸失利益の大きい箇所だけに絞り、LCPやINPへの副作用も同時に確認します。

四週目は再計測して次の投資判断に戻す

再計測では、CLSの数値だけでなく、CVR、離脱率、スクロール率、広告表示後の行動変化も見てください。CLSが0.18から0.09に改善してもCVRが変わらないなら、優先順位がずれていた可能性があります。逆に、CLSが0.12止まりでもCVRが改善したなら、その修正には投資価値があったと判断できます。

四週間でここまで進めば、次の会議で「さらにテンプレート改修に投資するべきか」「運用規則だけで十分か」を具体的に決められます。CLS改善は見た目の調整ではなく、投資対効果を判断するための材料づくりでもあります。

今週中に着手する三つの行動を具体的に決める

最後に、次の一手を曖昧にしないことが重要です。CLS改善で成果を出したいなら、今週中に次の三つを実行してください。

1. 主要10〜20URLを選び、PageSpeed Insightsの実測値とGA4のCV指標を横並びにする
2. 問い合わせ、価格表、広告本文、商品一覧のいずれでずれが起きているかをモバイル幅で記録する
3. 画像枠、広告枠、フォーム領域の予約を今月の修正対象に決め、再発防止の入力規則まで文書化する

CLSは、点数の良し悪しを競うための指標ではありません。どのずれが、どの利益を削っているかを見極め、そこから止血するための判断材料です。優先順位が決まらないときは、技術難易度ではなく「送信直前か」「流入が多いか」「再発しやすいか」の三点に戻ってください。その三つがそろうページから直す。これが、経営判断としてのCLS改善です。