CLS改善の手順｜レイアウトずれの原因と直し方

サイトを開いた瞬間に、押そうとしたボタンが下にずれて別のリンクを押してしまった。そんな経験はありませんか。この「表示中に要素がガクッと動く現象」がCLSです。この記事では、CLSが起きる原因を画像・広告・フォントといった種類ごとに分けて、それぞれをどう直すのかを、コピペで使えるコードつきで解説します。

自社サイトの表示が安定せず、Search ConsoleやPageSpeed Insightsで「CLSに問題あり」と出て困っている、Web担当者や制作を内製している方に向けた記事です。読み終わる頃には、自分のサイトのどこが原因かを見つけ、優先順位をつけて直せる状態を目指します。

なお、表示速度そのものの測り方や全体像はCore Web Vitals改善｜表示速度を自分で測って直す3手順でまとめています。まず全体像から知りたい方は、先にそちらを読むとこの記事の位置づけがつかめます。

Contents / 目次

1. 結論。CLSは「表示領域の予約」でほとんど決まる
2. まず犯人を特定する。CLSの測り方と原因の見つけ方
3. 原因別の修正手順。コピペで使えるコードつき
4. 直すとどう変わるか。CLS改善で期待できる効果
5. よくある失敗と回避法。この3つは特に多い
6. 現場で見えるCLS対策の落とし穴と妥協点
7. CLS改善のよくある質問

結論。CLSは「表示領域の予約」でほとんど決まる

先に結論をお伝えします。CLSのほとんどは、後から読み込まれる要素の場所を、あらかじめ確保していないことが原因です。逆に言えば、画像・広告・埋め込み・フォントの「入る場所」を先に予約しておけば、大半のずれは止まります。

CLSとは、Cumulative Layout Shift（累積レイアウトシフト）の略で、ページ表示中に要素が予期せず動いた量を数値にした指標です。かんたんに言うと「画面のガタつき度合い」を点数化したものです。GoogleのCore Web Vitals（コアウェブバイタル）という、サイトの使い心地を測る3つの指標のうちの1つになっています。

点数の目安は決まっています。数字が小さいほど良い状態です。まずは自分のサイトが今どのゾーンにいるかを把握しましょう。

評価	CLSスコア	意味
良好	0.1以下	ほぼずれない。目標ライン
要改善	0.1〜0.25	気になるずれがある。手を入れたい
不良	0.25超	体感で分かるガタつき。優先対応

この基準は、Googleが定めるCore Web Vitalsの評価ラインです（2026年07月24日時点）。ちなみに、同じCore Web Vitalsの仲間だったFID（First Input Delay）は、その後INP（Interaction to Next Paint）という指標に置き換わりました。CLSはその変更後も引き続き主要な3指標の1つとして残っています。

やるべきことの全体像は、次の3ステップに整理できます。この順番を守るのが、遠回りに見えて一番の近道です。

• 測って原因を特定する：どの要素が、どのタイミングでずれているかを先に突き止める
• 原因の種類ごとに直す：画像・広告・フォントなど、犯人のタイプに合った直し方を当てる
• 公開前に再測定する：直したつもりが別の場所を悪化させていないか、必ず測り直す

ここが肝心。CLSは「なんとなく速くする」では下がりません。ずれている場所を特定し、その要素の入るスペースを先に確保する。この一点に集中するのが、最短で成果を出すコツです。

まず犯人を特定する。CLSの測り方と原因の見つけ方

直す前に、まずどこがずれているかを特定します。原因を見ずに手を動かすのが、CLS改善で一番ありがちな失敗だからです。ここでは無料で使える測定手段を、目的別に紹介します。

サイト全体の状況を知るならSearch Console

サイト全体でどのページにCLSの問題があるかを知りたいときは、Google Search Consoleの「ウェブに関する主な指標」を見ます。実際にサイトを訪れたユーザーの環境から集めたデータ（フィールドデータ）をもとに、問題のあるURLをグループで示してくれます。まずここで「不良」「要改善」に入っているページの一覧をつかみましょう。

Search Consoleをまだ入れていない方は、Search Console登録手順｜初心者も3ステップで所有権確認までから先に設定してください。ここが計測の出発点になります。

個別ページの原因を見るならPageSpeed Insights

問題のページが分かったら、そのURLをPageSpeed Insightsに入れて詳しく見ます。CLSのスコアに加えて「レイアウト シフトの原因になっている要素」を具体的に指摘してくれるので、どの画像やどのブロックが動いているのかが分かります。数値の読み方はPageSpeed Insightsの見方と改善手順｜見るべき3つの数字で解説しています。

ずれる瞬間を目で見るならChrome開発者ツール

「どの要素が、いつ動いたか」をピンポイントで見たいときは、Chromeの開発者ツールが役立ちます。パフォーマンスタブで表示を記録すると、レイアウトシフトが起きた瞬間と、動いた要素を視覚的に確認できます。開発者ツールの正確な操作メニューはブラウザの更新で変わることがあるため、最新の名称や場所は公式ヘルプで確認してください。

もっと手軽に日常的に見張りたい場合は、ページに次のコードを一時的に入れると、レイアウトシフトが起きるたびにその量がコンソールに出ます。標準のブラウザ機能（PerformanceObserver）だけで動く、コピペで使えるコードです。

<!-- CLSの発生をコンソールに出す。調査用なので確認後は外す -->
<script>
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // ユーザー操作の直後のずれは対象外なので除外する
    if (!entry.hadRecentInput) {
      console.log("レイアウトシフト量:", entry.value, entry.sources);
    }
  }
}).observe({ type: "layout-shift", buffered: true });
</script>

このコードを入れた状態でページを開いて上下にスクロールすると、動いた要素（entry.sources）とずれ量が順番に表示されます。数字が大きいものから直せば、効率よくスコアを下げられます。

原因別の修正手順。コピペで使えるコードつき

ここが記事の本題です。CLSの原因は大きく4タイプに分かれ、それぞれ直し方が決まっています。まず自分のサイトの犯人がどれかを下の表で当たりをつけ、該当する手順に進んでください。

よくある原因	何が起きるか	主な直し方
画像・動画のサイズ未指定	読み込み完了で急に高さが出て下が押される	width/heightかaspect-ratioで領域予約
広告・埋め込み・iframe	後から差し込まれて本文が下にずれる	枠のスペースを先に確保
Webフォントの切り替え	字体が変わって行の高さがずれる	font-display指定と代替フォント調整
動的な差し込み要素	バナーやお知らせが上から入り全体が下がる	下部配置か高さ予約

ステップ1。画像と動画に必ずサイズを指定する

CLSで最も多い原因が、画像のサイズ未指定です。画像は読み込みが終わるまでブラウザが大きさを知らないため、読み込んだ瞬間にそのぶんの高さが出て、下にある文章やボタンを押し下げます。これを防ぐには、HTMLの段階で幅と高さを教えておきます。

<!-- 実際の画像の縦横ピクセルをそのまま入れる -->
<img src="/img/hero.jpg" width="1200" height="630" alt="製品の紹介写真">

width と height を書いておくと、ブラウザは画像が届く前に「ここは1200×630の比率の場所」と分かり、先にスペースを空けます。だから画像が入ってもレイアウトが動きません。値には表示上の見た目のサイズではなく、元画像の本来のピクセル数を入れるのがコツです。あとはCSS側で幅を100%にしても、比率は保たれます。

/* 画像を親要素に合わせて伸縮させても比率が崩れないようにする */
img {
  max-width: 100%;
  height: auto;
}

CSSの背景画像で表示している、あるいは元サイズが分からない画像には、aspect-ratio（アスペクト比）を使ってスペースを予約します。これは「この枠は16対9の比率」とCSSで宣言する書き方です。

.thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* この比率ぶんの高さを先に確保する */
  object-fit: cover;
}

ステップ2。広告・YouTube・地図の枠を先に確保する

広告やYouTube動画、Googleマップのような埋め込み要素は、後から読み込まれて本文を押し下げる典型です。対策は、埋め込みが入る枠のサイズをCSSで先に決めておくことです。iframeを比率固定のラッパーで包むと、読み込み前からスペースが確保されます。

/* YouTubeやマップのiframeを比率固定の枠で包む */
.embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="embed">
  <iframe src="https://www.youtube.com/embed/動画ID" loading="lazy"></iframe>
</div>

広告枠のように高さがばらつくものは、想定される最小の高さを min-height で確保しておくと、空のうちからスペースが空き、広告が入っても本文が動きません。スマホとPCで枠サイズが違う場合は、画面幅ごとに値を分けます。

.ad-slot {
  min-height: 280px; /* PCで想定する広告の高さ */
}
@media (max-width: 768px) {
  .ad-slot {
    min-height: 100px; /* スマホ用の高さに切り替える */
  }
}

広告のレイアウトずれ対策は、Googleも公式に手順をまとめています。より踏み込んで対応したい方はGoogle for Developersのレイアウトシフトを最小化するガイドが参考になります。

ステップ3。Webフォントの切り替えずれを抑える

Webフォントの読み込みずれは、見落とされがちな原因です。デザイン用のフォントが届くまで代替フォントで表示され、届いた瞬間に字体が入れ替わって行の高さが微妙に変わり、全体がずれます。これには2つの対策を組み合わせます。

1つ目は font-display の指定です。swap を付けると、フォント読み込み中でも代替フォントで文字をすぐ表示し、あとで切り替えます。文字が一瞬消える現象（FOIT）を防げます。

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP.woff2") format("woff2");
  font-display: swap; /* 読み込み中は代替フォントで即表示する */
}

2つ目は、代替フォントと本来のフォントの大きさ・行間をできるだけ近づけることです。差が大きいほど切り替え時のずれも大きくなります。line-height を固定しておくと、字体が変わっても行の高さが変わらず、ずれを抑えられます。フォントファイルの読み込み自体を軽くしたい場合は、WordPress高速化。キャッシュ設定の手順と失敗回避もあわせて見ておくと効果が出やすくなります。

ステップ4。後から差し込む要素は上に置かない

Cookie同意バナーやお知らせ帯、チャット窓など、後から差し込まれる要素は、既存のコンテンツを押し下げない設計にします。基本は2つです。

• 画面の下部や隅に固定して、本文を動かさない配置にする
• 上部に出す場合は、あらかじめその高さぶんのスペースを空けておく

読み込み中の空白が気になるときは、スケルトンスクリーンという手もあります。これは、コンテンツが入る前にグレーの枠を同じサイズで表示しておく方法です。実際の中身と同じスペースを先に取るので、差し替わってもレイアウトが動きません。

ファーストビュー（最初に見える範囲）の主要画像には、遅延読み込み（loading=”lazy”）を付けないでください。画面上部の画像を遅延させると表示が遅れ、かえってCLSが悪化します。lazyを付けるのは、スクロールしないと見えない下の方の画像だけにします。

修正コードをAIに書かせる・確認させるときの進め方

ここまでのCSSは、AIに下書きさせると早く進みます。ただし丸投げではなく、渡す材料と確認の仕方が肝心です。使うときは、ClaudeやChatGPTのデスクトップアプリが便利です。ブラウザでも使えますが、日常的に使うなら起動が速くファイルも扱いやすいデスクトップアプリ（Mac/Windows）が実務向きです。

AIに渡すのは、PageSpeed Insightsが指摘した「ずれている要素のHTML」と「今あたっているCSS」、そして「どの数値を目標にするか」です。出発点のたたき台として、次のような短い指示から始め、あとはAIと対話しながら自社の状況に合わせて詰めていくのがおすすめです。

あなたはフロントエンドの実装者です。
次のHTMLと現在のCSSで、CLS（レイアウトシフト）が起きています。
表示領域を先に予約して、ずれを止めるCSSを提案してください。
・対象のHTML: ［ここに要素を貼る］
・現在のCSS: ［ここに該当CSSを貼る］
・条件: 見た目は変えず、スマホとPCの両方で崩れないこと

大事なのは、出てきたコードをそのまま貼らないことです。必ずテスト環境で当てて、見た目が崩れていないか、スマホ表示で横スクロールが出ていないかを目視し、PageSpeed Insightsで数値が実際に下がったかを確認します。AIはコードを作るのは得意ですが、自社サイトで本当に改善したかの最終判断は人がやる領域です。ここを飛ばすと、直したつもりで別の場所を壊すことになります。

直すとどう変わるか。CLS改善で期待できる効果

CLSを直すと、まずユーザーの誤操作が減ります。押そうとしたボタンが動いて別のリンクを踏む、フォームの送信ボタンがずれて資料請求を諦める。こうした「取りこぼし」が起きにくくなり、問い合わせや購入の完了率に効いてきます。

表示が安定して読み進めやすくなると、離脱が減って回遊が伸びやすくなります。効果の大きさは業種や運用によって大きく変わりますが、ガタつきをなくすこと自体が使い心地の底上げになります。

SEOの観点でも意味があります。CLSを含むCore Web Vitalsは、Googleがページの使い心地を評価する要素の1つです。誤解しないでほしいのは、CLSを下げれば順位が跳ね上がる、という単純な話ではないことです。実際には、内容の質が同じくらいの競合と並んだときに、使い心地の良い方が選ばれやすくなる、という後押しの効果と捉えるのが正確です。

成果を出す会社の共通点。うまくいっている現場ほど、直して終わりにせず「公開後にもう一度測る」を習慣にしています。CLSは新しい画像やバナーを追加するたびに悪化しうるので、定点観測がそのまま成果につながります。

よくある失敗と回避法。この3つは特に多い

現場で繰り返し見かける失敗を3つ挙げます。どれも「良かれと思ってやったこと」が裏目に出るパターンなので、心当たりがないか確認してください。

失敗1。原因を見ずに手当たり次第いじる

一番多いのが、測定せずにあれこれ設定を変えてしまうケースです。CLSが低い状態でCSSをやみくもに触ると、直った場所と悪化した場所が混ざり、結局どれが効いたのか分からなくなります。必ずPageSpeed InsightsやChrome開発者ツールで「動いている要素」を特定してから、その要素だけに手を入れてください。原因が1つ分かれば、施策の優先順位も自然に決まります。

失敗2。バックアップを取らずにCSSを書き換える

CLS改善のCSS変更は、サイト全体の見た目に影響することがあります。1か所直したつもりが、別ページのレイアウトを崩していた、というのはよくある事故です。作業前に必ず現在のCSSファイルやテーマのバックアップを取り、できればテスト環境で確認してから本番に反映してください。WordPressなら、子テーマや追加CSSで戻せる形にしておくと安全です。

失敗3。ファーストビュー画像を遅延読み込みにする

表示速度を上げようとして、すべての画像にloading=”lazy”を一括で付けてしまう失敗です。速度は上がっても、画面最上部の主要画像まで遅延させると表示が後ろにずれ込み、CLSが悪化します。遅延読み込みの対象は、スクロールして初めて見える下側の画像に限定し、ファーストビューの画像は通常読み込みのままにしてください。速さと安定は、要素ごとに使い分けるのが正解です。

現場で見えるCLS対策の落とし穴と妥協点

正直にお伝えすると、CLSはゼロを狙いすぎると割に合わなくなる領域があります。ここでは、教科書には書かれにくい現場の本音を共有します。相談を受けるときに、私たちが実際に線引きしている基準です。

まず、CLSは「0.1以下ならまず合格」です。0.03を0.01にするような詰めは、かかる手間のわりに体感差もビジネス成果もほとんど変わりません。完璧を目指すより、不良ゾーン（0.25超）と要改善ゾーンのページを合格ラインに乗せることに時間を使う方が、費用対効果はずっと高くなります。

次に、外部から差し込まれる要素は自分で完全にコントロールできないことがあります。広告ネットワークやCookie同意ツール、外部チャットなどは、こちらのCSSだけでは高さが読めないケースがあります。この場合は「枠の高さを固定する」「表示位置を下部にずらす」といった防御しかできず、ゼロにはできない、と割り切るのが現実的です。

もう1つの落とし穴が、WordPressのテーマやプラグイン任せの限界です。テーマ側が画像にサイズを出力していない、プラグインが動的に要素を差し込む、といった作りだと、追加CSSだけでは根本解決できないことがあります。テーマのテンプレートに手を入れる必要が出てくると、ここから先は専門知識が要る領域です。

AIで作ったサイトやVibe codingで組んだサイトも同じで、見た目は動いていても内部の領域予約が甘いことが少なくありません。この段階の判断はVibe codingのサイトが詰む前の更新設計｜非エンジニアの4手順もあわせて読むと整理しやすくなります。

切り分けの目安はシンプルです。画像のサイズ指定や埋め込み枠の確保、追加CSSで直る範囲は、社内でも十分に対応できます。一方で、テーマの改修やプラグインの挙動、外部要素の制御まで踏み込む段階になったら、無理に自力で抱え込まず専門家に相談した方が、結果的に早くて安全です。ここが内製と外注の分かれ目になります。

CLS改善のよくある質問

今日の最初の一歩として、まずは自社サイトのトップページのURLをPageSpeed Insightsに入れて、CLSの数字と「原因になっている要素」だけ確認してみてください。3分で、どこから直せばいいかの見当がつきます。さらに全体の速度を整えたい方はCore Web Vitals改善｜表示速度を自分で測って直す3手順を次に読むと、CLS以外の指標もまとめて対処できます。

ここまで読んで、原因までは分かったけれど、テーマの改修や外部要素の制御まで自社でやり切るのは難しそうだと感じた方もいるはずです。そんなときは、コレットラボのAIで作るサイト制作・運用改善の伴走支援にお声がけください。今のサイトのどこが原因で、どこまで内製できてどこから任せるべきか、現状を整理するだけの相談でも大丈夫です。AI業務システム化の詳細はこちらから、まずはお気軽にお話を聞かせてください。