Webサイト改善の施策事例
- ECサイト改善
ECサイトにおけるテクニカルSEO【CLS対策】によるUX品質の改善
概要と担当範囲
大規模ECサイトにおいて、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の混在により、ページ読み込み時にコンテンツがズレるCLS（Cumulative Layout Shift）が悪化していた状況に対する改善支援を行いました。
当社はレンダリングプロセスの解析から、CSS設計による描画領域の実装までを担当しました。
- SEO対策
- UI／UX設計
課題背景
ページ読み込み時の画面のガタつき（CLS）に起因し、以下の課題が発生していました。
- 後から表示されるレコメンドやバナーが、既に表示されている静的コンテンツを押し下げている
- 購入ボタンを押そうとした瞬間にバナーが割り込み、別リンクを誤クリックしてしまう
- Google Search Console上のCLS評価が「不良」となっており、検索順位への悪影響リスクがある
- ECサイトとしてCV（購入）に関わる深刻なUX毀損が発生している
これは見た目の問題ではなく、SSR/CSR混在環境におけるレンダリング設計の問題として整理する必要がありました。
改善の考え方
CLSの本質は「後から読み込まれる要素のための場所が、あらかじめ確保されていない」ことです。この問題に対し、CSSレベルで描画領域を事前に確保し、「中身はまだ届いていないが、場所（箱）は確保されている」状態を作るアプローチを取りました。
当社の関与領域
- レンダリングプロセス解析
- CSS設計
- フロントエンド実装
CLS解消とUX品質の担保のため、以下の領域に関与しました。
- Chrome DevTools等を用いたレイアウトシフト原因のDOM操作特定
- ページ読み込みプロセスのフレーム単位での分析
- アスペクト比（aspect-ratio）とmin-heightのCSS定義による描画領域の事前確保
- スケルトンスクリーン（読み込み中のプレースホルダー表示）の実装
- 実装後のCore Web Vitals計測と検証
SSR（サーバーサイドレンダリング）CSR（クライアントサイドレンダリング）混在環境での実装には、レンダリングプロセスの理解も求められるため、解析から実装を一貫して対応しました。
主な取り組み
- レイアウトシフトの原因となる動的要素の特定と優先順位付け
- 画像・動的バナーの読み込み前にブラウザが描画領域を確保するCSS設計
- 読み込み待ち時間にグレーのプレースホルダーを表示するスケルトンスクリーンの実装
- 体感速度の向上と視覚的な安定感の提供
原理はシンプルですが、SSR/CSR混在環境での実装には、各要素のレンダリングタイミングを正確に把握する必要があります。
変化・成果
- Google Search Console上のCLS評価が「不良」から「良好（0.1未満）」へ改善
- ページ読み込み途中の誤クリックが解消され、ユーザビリティが向上
- スケルトンスクリーンにより、実際の読み込み速度は変わらなくても「速く感じる」体験を実現
- 上場企業のECサイトとしての品質面のブランド毀損リスクが解消された
※具体的な数値は非公表（CLS評価の改善は公開情報に基づく）
Tips
お役立ち情報も発信しています 一覧はこちら
-
BtoB製造業がホームページから問い合わせを増やすために必要な5つのコンテンツを伴走支援会社がご紹介します
View more -
テクニカルSEOとコンテンツSEOの違いとは？現場目線での施策や優先度について所感を交え解説します
View more -
【担当者必見】自社ECサイトに最適なコンサルティング会社とは？運用代行や支援導入で得られる3つの成果と失敗しない選び方
View more -
ECサイトの売上改善法とは？商品数が多い総合通販型で有効な分析方法と施策を解説します
View more -
SEO対策とは？主な種類のご紹介と、同時に行うと効果的な施策をご紹介します
View more -
通販サイト（ECサイト）の種類と特徴について、ビジネスモデル／販売形態／システム構築にわけて解説します
View more