• Top
  • HTML/CSS
  • CLSで信頼を落とさない ─ “ガタつかない”画像・広告枠のHTML/CSS設計
HTML/CSS
投稿日：

CLSで信頼を落とさない ─ “ガタつかない”画像・広告枠のHTML/CSS設計

CLSで信頼を落とさない ─ “ガタつかない”画像・広告枠のHTMLCSS設計

こんにちは！株式会社ファストコーディングのWebディレクターの働くおかんです。
毎年言っている気がしますが、今年、ちょっと寒すぎないでしょうか。子供の頃は、1月も下旬になれば寒さが和らいだ気がしたんですが。エアコンはつけているものの、キーボードを叩く指がとても冷たいので、手袋をしながらブログを書いています。
＊そして今年初投稿です！今年もよろしくお願いします！

今日の話題はページのガタツキ、です。Webサイトを閲覧していると、ボタンを押そうとした瞬間に広告が出てきて誤タップしてしまう、読んでいた場所が急にずれる、といった経験はありませんか？あの「イラッ」とする現象、実はCLS（Cumulative Layout Shift）という名前がついていて、Googleも問題視している指標なんです。

今回は、このCLSを改善するためのHTML/CSSコーディングについてご紹介します。

CLSとは何か

CLSは「読み込み中にページがどれだけガタガタ動くか」を数値化したものです。Googleは0.1以下を「良好」としています。

CLSが高いと、以下のような問題が発生します。

  • 誤タップ・誤クリック：押したいボタンが移動して別の要素をタップしてしまう
  • 読んでいた位置を見失う：画像の読み込みで文章が押し下げられる
  • サイトへの不信感：ガタつくサイトは不安定な印象を与える
  • SEOへの悪影響：Core Web Vitalsの一つとして評価に影響する

特にECサイトや申し込みフォームがあるサイトでは、CLSの悪化がコンバージョン率の低下に直結します。

CLSが発生する主な原因

CLSが発生する原因は、主に以下の4つです。

  1. サイズ指定のない画像：読み込み完了後にスペースを確保する
  2. 遅延読み込みされる広告：後から表示されて他の要素を押し下げる
  3. Webフォント：フォント切り替え時に文字サイズが変わる
  4. JavaScriptで動的に追加される要素：お知らせバーやCookie同意バナーなど

今回は特に画像と広告の対策を中心にご紹介します。この2つを押さえておけば、多くのケースで改善が見込めます。

対策①：aspect-ratioで事前にスペースを確保する

最も効果的なのが、CSSのaspect-ratioプロパティです。これは「画像が読み込まれる前から、その分のスペースを確保しておく」という役割を果たします。

基本の書き方

<!-- HTML：widthとheight属性を記述する -->
<img 
  src="hero-image.jpg" 
  alt="メイン画像"
  width="1200"
  height="630"
  class="hero-image"
>
/* CSS */
.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;  /* 幅 ÷ 高さ の比率 */
  object-fit: cover;
}

重要なポイントとして、HTMLのwidthとheight属性も必ず記述してください。最近のブラウザはこの属性を見て自動でアスペクト比を計算するため、これだけでもかなり改善します。CSSのaspect-ratioと併用することで、より確実に対策できます。

よく使うアスペクト比

/* YouTube動画など → 16:9 */
.video-thumbnail {
  aspect-ratio: 16 / 9;
}

/* 正方形（SNS投稿風） → 1:1 */
.square-image {
  aspect-ratio: 1 / 1;
}

/* OGP画像（SNSシェア用） → 1.91:1 */
.ogp-image {
  aspect-ratio: 1.91 / 1;
}

サイトで使用する画像比率が決まっている場合は、あらかじめクラスとして定義しておくと運用が楽になります。

対策②：読み込み中のプレースホルダーを表示する

スペースを確保できたら、次は「読み込み中であること」を視覚的に伝えることが重要です。真っ白なままだと、表示が壊れているように見えてしまいます。

シンプルな背景色を設定する方法

.image-container {
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;  /* 薄いグレー */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

これだけでも「ここに画像が入る」ということが視覚的に伝わります。

スケルトンローディングを実装する方法

ECサイトなどでよく見かける、グレーがキラキラと光るアニメーションも実装できます。

.skeleton-image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

このアニメーションを入れることで、「読み込み中である」ことがユーザーに伝わり、待ち時間のストレスを軽減できます。

対策③：広告枠にmin-heightを設定する

広告は後から読み込まれることが多く、サイズも様々なため、CLSの原因になりやすい要素です。対策としては、「最低限の高さを確保しておく」ことが有効です。

サイズが決まっている広告の場合

<!-- 広告を入れるコンテナ -->
<div class="ad-box ad-rectangle">
  <!-- ここに広告コード -->
</div>
/* よくあるサイズ別に定義 */

/* レクタングル（300×250） */
.ad-rectangle {
  width: 300px;
  min-height: 250px;
  background-color: #fafafa;
}

/* スマホバナー（320×50） */
.ad-mobile {
  width: 320px;
  min-height: 50px;
  background-color: #fafafa;
}

レスポンシブ広告の場合

AdSenseのようなレスポンシブ広告は、どのサイズが配信されるか分かりません。その場合は、想定される最大サイズを基準に高さを確保しておきます。

.ad-responsive {
  width: 100%;
  min-height: 250px;  /* 想定される高さを確保 */
  background-color: #fafafa;
}

完璧に防ぐことは難しいですが、大きなレイアウトシフトは防げます。

対策④：YouTube・Googleマップの埋め込み

埋め込み系のコンテンツも遅れて読み込まれるため、同様にスペースを確保しておきます。

YouTubeの場合

<div class="video-box">
  <iframe src="https://www.youtube.com/embed/xxxxx"></iframe>
</div>
.video-box {
  aspect-ratio: 16 / 9;  /* YouTubeは16:9 */
  background-color: #000;  /* 黒背景がそれっぽい */
}

.video-box iframe {
  width: 100%;
  height: 100%;
}

Googleマップの場合

.map-box {
  aspect-ratio: 16 / 9;
  background-color: #e5e3df;  /* マップっぽいベージュ */
}

.map-box iframe {
  width: 100%;
  height: 100%;
}

考え方はすべて同じで、「後から来る要素の場所を先に確保する」ということです。

対策⑤：Webフォントのちらつき対策

Webフォントが読み込まれる際に文字がチラッと変わる現象も、CLSに影響します。対策は簡単です。

/* Google Fontsの場合、URLにdisplay=swapをつける */
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

これにより、フォントが読み込まれるまでシステムフォントで表示され、読み込み完了後にスムーズに切り替わります。

効果の確認方法

対策を実装したら、効果を確認しましょう。以下のツールが便利です。

  • PageSpeed Insights：https://pagespeed.web.dev/
  • Chrome DevTools：Performanceタブで詳細を確認できる
  • Web Vitals拡張機能：Chromeにインストールするとリアルタイムで計測できる

まとめ

CLS対策の基本は、「後から読み込まれる要素の場所を先に確保しておく」ということです。

  • 画像 → width/height属性とaspect-ratioで場所を確保
  • 広告 → min-heightで最低限の高さを確保
  • 埋め込み → aspect-ratioで囲む
  • フォント → display=swapを指定

レイアウトがガタつかないサイトは、それだけで「しっかり作られている」という印象を与えます。ユーザーに安心感を与えられるだけでなく、特にECサイトや申し込み系のサイトでは、コンバージョンにも影響する重要な要素です。

株式会社ファストコーディングでは、こうしたパフォーマンス改善のご相談も承っています。CLSをはじめとするCore Web Vitalsの改善でお困りの方は、ぜひ お問い合わせフォーム からご相談ください。

この記事を見た人がよく見ている記事

SEO