CLSは「テクニカルSEO」の中でも、ユーザーエクスペリエンス向上の重要な指標の一つです。本記事では、ECサイトにおけるCLSとSEOの関係性をわかりやすく解説します。

1. CLS（レイアウトシフト）とは？基本概念とECサイトで重要視される理由

CLSの定義と基本概念

CLS（Cumulative Layout Shift：累積レイアウトシフト）とは、ページの読み込み中に予期せず発生するレイアウトの変化を測定する指標です。ECサイトでよく見られる具体例としては、以下のような状況でCLSが発生します：

• 商品画像が読み込まれたときに、その下の価格や説明文が下に押し下げられる
• バナーが動的に挿入されて、既存のコンテンツが突然移動する
• Webフォントが読み込まれたときに、商品名や価格のテキストのレイアウトが変わる
• おすすめ商品や関連商品が動的に追加されて、ページの構造が変化する

CLSスコアは0から始まり、数値が大きいほどレイアウトシフトが多く発生していることを意味します。Googleが推奨する理想的なCLSスコアは0.1以下とされています。

Core Web VitalsにおけるCLSの位置づけと評価基準

CLSは、Googleが提唱するCore Web Vitals（コアウェブバイタル）の3つの主要指標の1つです（他にLCP、INP）。

CLSスコアの評価基準：

• 良好（Good）：0.1以下（推奨）
• 要改善（Needs Improvement）：0.1～0.25
• 不良（Poor）：0.25以上

CLSスコアは、Google Search Consoleの「Core Web Vitals」レポートやPageSpeed Insightsで確認できます。

ECサイトにおいてCLSが重要視される理由

ECサイトでCLSが重要視される理由は、以下の3つです：

1. ユーザー体験の観点：レイアウトシフトはストレスや誤操作を招き、離脱率・コンバージョン率の低下につながる（特にモバイルでは誤タップが発生しやすい）
2. Googleの検索ランキングへの直接的な影響：CLSはCore Web Vitalsの主要指標として、SEO評価に直接影響する
3. ECサイト特有の構造上の問題：商品画像や動的コンテンツが多いため、他の業種に比べてCLSが発生しやすい

2. ECサイトでCLSが発生しやすい理由と原因

ECサイト特有の構造がCLSを引き起こす

ECサイトは、他のWebサイトと比較して、CLSが発生しやすい構造を持っています。その理由は、ECサイトが持つ以下の特徴によるものです：

• 多数の商品画像：商品ページには複数の画像が配置され、それらが順次読み込まれる
• 動的なコンテンツ：在庫状況、価格、カート機能などが動的に更新されることがある
• レコメンド商品：関連商品やおすすめ商品が動的に挿入される
• 複雑なUI：カート、お気に入り、比較機能など、多くのインタラクティブな要素がある

これらの特徴が組み合わさることで、ECサイトでは特にCLSが発生しやすくなっています。

商品画像

ECサイトで最も一般的なCLSの原因は、商品画像の読み込みです。商品画像が読み込まれる際、以下のような問題が発生します：

1. 画像のサイズが指定されていない：画像のサイズが事前にブラウザに伝えられていないため、画像が読み込まれるまでスペースが確保されない
2. レスポンシブ画像の処理：異なる画面サイズに対応するため、画像のサイズが動的に変更される
3. 遅延読み込み（Lazy Loading）：画像の遅延読み込みが適切に実装されていない場合、スクロール時に突然画像が表示される

これらの問題により、商品画像が読み込まれた瞬間に、その下のコンテンツ（価格、説明文、ボタンなど）が下に押し下げられ、レイアウトシフトが発生します。

テクニカルSEOの観点からは、画像の圧縮と最適化と併せて、商品画像やバナー画像の領域をあらかじめ確保することで、読み込み途中でレイアウトが「ガタつく」のを防ぐことが重要です。画像の最適化は、ページの読み込み速度（LCP）の改善にもつながるため、CLSとLCPの両方を改善する効果的な施策となります。

動的コンテンツ

ECサイトには、キャンペーンバナーや商品ランキングなど、動的に更新されるコンテンツが多く存在します。これらの動的コンテンツも、CLSの原因となります。具体的には：

• キャンペーンなどのバナーを表示するカルーセルが動的に表示される：キャンペーンバナーやお知らせを表示するカルーセルが動的に読み込まれると、レイアウトが変化する
• おすすめ商品の挿入：「ランキング」「この商品を見た人はこちらも見ています」などのおすすめ商品が動的に挿入される

これらの動的コンテンツは、ユーザー体験を向上させるために必要な機能ですが、適切に実装されていない場合、CLSの原因となります。

埋め込みコンテンツ

ECサイトでは、外部サービスの埋め込みコンテンツ（ソーシャルメディアのウィジェット、レビュー機能など）が多く使用されます。これらのコンテンツも、CLSの原因となります。

埋め込みコンテンツがCLSを引き起こす主な理由は、読み込みタイミングのずれ、サイズの予測困難性、動的な挿入（A/Bテストやパーソナライズエリア）などです。

またECサイトでは、複数の広告代理店やツールベンダーが同じような変数の設定やJavaScriptの処理を重複して設定することで、ブラウザの処理負荷が高まり、読み込みスピードに影響が出るケースも少なくありません。テクニカルSEOの観点からは、タグマネージャーによるタグ発行タイミングの最適化や、各コンテンツエリアの事前確保により、CLSを抑制することが重要です。

フォント読み込み

ECサイトでは、ブランドイメージを伝えるために、カスタムフォント（Webフォント）が使用されることが多くあります。しかし、このカスタムフォントの読み込みも、CLSの原因となります。

フォント読み込み遅延がCLSを引き起こす主な原因は、FOIT（フォント読み込みまでテキストが表示されない）、FOUT（代替フォントからカスタムフォントへの切り替え）、フォントメトリクスの違い（幅や高さの違いによるレイアウト変化）です。特に、ECサイトの商品名や価格など、重要な情報がテキストで表示される場合、フォント読み込み遅延によるCLSは、ユーザー体験とSEO評価の両方に悪影響を与えます。

テクニカルSEOの観点からは、Webフォントの使用を精査・最適化することが推奨されます。フォントファイルのダウンロードが多発すると、読み込みスピードにも悪影響を与えるため、必要最小限のフォントのみを使用し、適切な読み込み戦略を実装することが重要です。

フォント選定に関しては、デザイン時に検討されることが多いため、実装時に気づいても後戻りできない可能性があります。弊社でECサイトを制作を行う際は、デザインチームとエンジニアが連携し、CLSを考慮してフォント選定を行っています。

3. ECサイトでのCLS改善事例

これまで解説した改善ポイントについて、弊社で行った実際の事例を元に説明します。以下で紹介するCLS改善の事例は、弊社が提供するEC特化型テクニカルSEOサービスECSEO（エクシオ）によって実際に実現したものです。

商品詳細ページでの改善事例

あるECサイトの商品詳細ページでは、商品画像部分の遅延表示対応により、CLSを0.60から0.15に改善しました。この改善により、パフォーマンススコアが18ポイント向上しています。

この改善事例では、商品画像が読み込まれる際に発生していたレイアウトシフトを抑制するため、以下の対策を実施しました：

• 画像領域の事前確保：商品画像の表示領域（高さ）をあらかじめ確保し、画像が読み込まれるまで「仮の画像枠（プレースホルダー）」を表示
• 画像サイズの明示：HTMLのwidthとheight属性を指定し、ブラウザに画像サイズを事前に伝達
• 遅延読み込みの最適化：ファーストビュー内の商品画像は遅延読み込みさせず、優先的に読み込むように設定

商品詳細ページは、ECサイトにおいて最も重要なコンバージョンに直結するページの一つです。CLSの改善により、ユーザーが商品画像や価格情報をスムーズに確認できるようになり、ユーザー体験の向上とSEO評価の改善を同時に実現できました。

商品一覧ページでの改善事例

別のECサイトの商品一覧ページでも、複数の対策を組み合わせることで、CLSを0.28から0.02に改善しました。この改善により、パフォーマンススコアが10ポイント向上しています。

商品一覧ページは、商品画像や絞り込みメニュー、動的に追加されるコンテンツなど、CLSが発生しやすい要素が多いページです。この改善事例では、以下の3つの対策を実施しました：

1. 表示領域の事前確保（高さの固定・仮枠の設置）

商品一覧や画像、絞り込みメニューなど、あとから読み込まれるコンテンツの表示スペース（特に高さ）をあらかじめ確保しました。「スケルトンスクリーン（コンテンツ読込中を示す灰色の仮枠）」や「プレースホルダー（仮の画像など）」を配置する方法を用いることで、コンテンツ読み込み完了時に既存レイアウトが押し下げられるのを防ぎました。

2. ファーストビューでの遅延読み込み（Lazy Load）の見直し

ページを開いて最初に表示される画面（ファーストビュー）内の画像やリストは、遅延読み込みをせず、最初から表示するように変更しました。これにより、スクロールしていないのに画像が表示されてレイアウトがずれてしまう現象を防止できました。これらのコンテンツを優先的に読み込むことで、LCP（Largest Contentful Paint）の改善にもつながり、CLSとLCPの両方を効果的に対策できます。

3. 動的コンテンツの表示方法の調整

スクロールで切り替わるヘッダーや、あとから挿入されるバナー・通知などがページレイアウトを急激に変化させないように、表示タイミングや方法を調整しました。具体的には、固定表示にする・高さを事前に固定するなどの工夫を施しました。特にページ上部に表示するヘッダーやバナーは、レイアウトシフトによる影響範囲が広くなるため注意が必要です。

自社ECサイトでCLS改善を検討する際は、これらの事例と同様に、サイトの構造や課題に合わせた対策を実践することが重要です。

4. テクニカルSEO全体におけるCLSの位置づけ

CLSは、ECサイトのテクニカルSEOにおいて、ユーザーエクスペリエンスの向上を実現するための重要な指標です。テクニカルSEOは「ユーザーエクスペリエンスの向上」と「クローラビリティの向上」の2つの領域で構成されており、CLSは前者の重要な要素です。

ECサイトでは商品ページやカテゴリページといった構造的な要素が多いため、一般的なサイトと比較して、テクニカルSEOの重要性が非常に高く、その中でもCLSの改善は優先的に対応すべき課題といえます。

テクニカルSEOの優先順位を決める際は、PageSpeed Insightsでテストし、パフォーマンススコアの下にあるリンク、計算ツールを参考に、どの指標を改善するとインパクトが大きいかを確認することをおすすめします。

CLSを含むテクニカルSEOの全体像については、「ECのSEO対策とは？ コンテンツとテクニカルの違いや注力ポイントを解説」の記事で詳しく解説していますので、CLSと他のテクニカルSEO施策との関係性を理解する上で、ぜひ合わせてご覧ください。