Webサイトを閲覧していて、突然レイアウトがガクッと変わって「あれ？」と思った経験はありませんか？これは決して珍しい現象ではありません。実は、このレイアウトの変化は累積レイアウトシフト（CLS）という指標で評価され、SEOにも大きく影響しているのです。
最近では、GoogleのCore Web Vitalsが検索順位の要因として重要視されており、その中でもCLSは「ページの視覚的安定性」を測定する核心的な指標となっています。この記事では、レイアウトシフトを防ぎ、ユーザー体験を大幅に向上させる具体的な方法をご紹介します。
目次
累積レイアウトシフト（CLS）とは何か
CLSの基本概念
**累積レイアウトシフト（Cumulative Layout Shift, CLS）は、ページの読み込み過程で発生する「予期しないレイアウトの変化」を定量化した指標です。Google が提唱するCore Web Vitals の一つで、ユーザー体験の質を測定する重要な基準として採用されています。
CLSは、以下の3つの要素で構成されるCore Web Vitalsの一部です：
- LCP（Largest Contentful Paint）：最大コンテンツの読み込み時間
- FID（First Input Delay）：初回入力遅延時間
- CLS（Cumulative Layout Shift）：累積レイアウトシフト
レイアウトシフトが発生する瞬間
レイアウトシフトは、主に以下のような状況で発生します：
- 画像の遅延読み込み：サイズが指定されていない画像が後から表示される
- 広告の挿入：動的に挿入される広告がコンテンツを押し下げる
- Webフォントの適用：フォントファイルの読み込み完了後にテキストサイズが変わる
- 動的コンテンツの追加：JavaScriptで後から追加されるコンテンツ
これらの現象は、ユーザーが「読もうとしていたテキスト」や「クリックしようとしていたボタン」の位置を突然変えてしまうため、大きなストレスにつながります。
CLSが重要な理由
ユーザー体験への影響
レイアウトシフトがユーザーに与える影響は想像以上に深刻です：
誤操作の誘発
- 「キャンセル」ボタンをクリックしようとしたら、レイアウトが変わって「購入確定」を押してしまう
- 記事を読んでいる最中に突然レイアウトが変わり、読んでいた箇所を見失う
ユーザビリティの低下
- サイトが「不安定」「信頼できない」という印象を与える
- 閲覧体験が快適でないため、離脱率が高くなる
SEOへの直接的影響
2021年8月のGoogleのページエクスペリエンス アップデート以降、Core Web Vitalsは検索順位の決定要因として明確に位置づけられています。CLSの数値が悪いサイトは、以下のような影響を受ける可能性があります：
- 検索結果での順位低下
- 同等のコンテンツ品質の競合サイトに順位で負ける
- モバイル検索での表示機会の減少
CLSの測定方法と診断ツール
PageSpeed Insights による測定
最も手軽で正確な測定方法は、Googleが提供するPageSpeed Insightsです。URLを入力するだけで、以下の2つのデータを確認できます：
フィールドデータ
- Chrome UXレポートから取得した実際のユーザーデータ
- 過去28日間の実測値
- Googleの検索ランキングで実際に使用されるデータ
ラボデータ
- Lighthouseエンジンによるシミュレーション結果
- 制御された環境での測定値
- 改善施策の効果を即座に確認可能
Google Chrome デベロッパーツール
より詳細な分析には、Chromeの開発者ツールが有効です：
Lighthouseタブでの測定
- F12キーで開発者ツールを開く
- 「Lighthouse」タブを選択
- 「パフォーマンス」にチェックを入れて実行
レイアウトシフトの可視化
- 開発者ツールの「Rendering」タブを開く
- 「Layout Shift Regions」をチェック
- ページをリロードして青い枠でシフト箇所を確認
Google Search Console での一括確認
自社サイト全体の状況を把握するには、Search Consoleが最適です：
- 「エクスペリエンス」→「ウェブに関する主な指標」を選択
- 「モバイル」「PC」それぞれの結果を確認
- 問題のあるURLグループを特定
CLSの理想値と評価基準
GoogleのCore Web Vitalsでは、CLSの評価基準を明確に定めています：
良好（Good）：0.1以下
- ユーザー体験に問題なし
- SEO評価への悪影響なし
要改善（Needs Improvement）：0.1～0.25
- 改善の余地あり
- 優先的に対策を実施すべき
不良（Poor）：0.25超
- 緊急対策が必要
- SEO順位への悪影響が懸念される
重要なのは、28日間の75パーセンタイル値で評価されることです。つまり、サイト訪問者の75%が「良好」な体験を得られるレベルまで改善する必要があります。
レイアウトシフトの主な原因
1. 画像・動画のサイズ未指定
最も頻繁に発生する原因がこれです。HTML上で画像や動画のサイズを指定していないと、ブラウザは実際のファイルを読み込むまで適切なスペースを確保できません。
問題となるコード例
Copy<img src="example.jpg" alt="サンプル画像">
改善後のコード例
Copy<img src="example.jpg" alt="サンプル画像" width="800" height="600">
2. Webフォントの読み込み遅延
外部フォントファイルの読み込みが完了するまで、ブラウザは代替フォントでテキストを表示します。フォントが変わる瞬間にテキストサイズや行の高さが変わり、レイアウトシフトが発生します。
3. 動的に挿入される広告
Google AdSenseなどの動的広告は、入札処理やサイズ決定に時間がかかるため、コンテンツの読み込み後に表示されることが多く、レイアウトシフトの大きな原因となります。
4. 後から追加されるコンテンツ
以下のような要素が後から追加されると、既存コンテンツが押し下げられます：
- Cookie同意バナー
- SNSシェアボタン
- 関連記事やレコメンド
- チャットボット
レイアウトが大きく変わらないようにする具体的対策
対策1：画像・動画の適切なサイズ指定
基本的な実装方法
すべての画像・動画要素には、必ずwidthとheight属性を指定します：
Copy<img src="hero-image.jpg" width="1200" height="800" alt="ヒーロー画像">
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
</video>
重要なポイント
- 指定する値は画像の元のサイズ（実際のピクセル数）
- CSSで表示サイズを調整するため、属性値が表示サイズと異なってもOK
- 比率が重要なので、
width="4" height="3"のような相対値でも可
レスポンシブ対応とCSS
Copyimg {
width: 100%;
height: auto;
max-width: 800px;
}
対策2：アスペクト比を活用した領域確保
複数の画像サイズを出し分ける場合は、aspect-ratioプロパティで領域を確保します：
Copy.image-container {
aspect-ratio: 16 / 9;
width: 100%;
}
@media (max-width: 768px) {
.image-container {
aspect-ratio: 4 / 3;
}
}
対策3：Webフォントの最適化
フォントの事前読み込み
Copy<link rel="preload" href="/fonts/noto-sans.woff2" as="font" type="font/woff2" crossorigin>
font-displayプロパティの活用
Copy@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap; /* またはoptional */
}
font-display の選択肢
swap：フォールバックフォントを先に表示し、カスタムフォント読み込み後に切り替えoptional：100ms以内に読み込めない場合は初回訪問時はフォールバックフォントを継続使用
対策4：広告スペースの事前確保
動的広告には、最大想定サイズでスペースを確保します：
Copy<div class="ad-container">
<!-- AdSense コード -->
</div>
Copy.ad-container {
min-height: 250px; /* 最大広告サイズに合わせて調整 */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
対策5：動的コンテンツの配置戦略
推奨されるアプローチ
- 下部への配置：Cookie同意バナーやチャットボットは画面下部に配置
- オーバーレイ表示：既存コンテンツを押し下げずに重ねて表示
- 事前スペース確保：表示される可能性が高い場合は事前に領域を確保
Copy.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
/* 既存コンテンツを押し下げない */
}
実際の改善事例とその効果
事例1：ECサイトの商品画像対策
改善前の状況
- 商品画像にサイズ指定なし
- CLSスコア：0.28（不良）
- 直帰率：65%
実施した対策
- 全商品画像にwidth/height属性を追加
- 画像読み込み用のプレースホルダーを設置
- 遅延読み込み（lazy loading）の最適化
改善後の結果
- CLSスコア：0.05（良好）
- 直帰率：43%（33%改善）
- コンバージョン率：2.1%向上
事例2：メディアサイトの広告改善
改善前の状況
- 記事中の広告でレイアウトシフトが多発
- CLSスコア：0.35（不良）
- ページビュー数：月間50万PV
実施した対策
- 広告枠の最小高さを設定
- 広告読み込み中のスケルトン表示を実装
- 記事下部への広告配置を優先
改善後の結果
- CLSスコア：0.08（良好）
- ページビュー数：月間78万PV（56%増加）
- 検索流入：40%増加
高度な対策テクニック
アニメーションの最適化
レイアウトシフトを引き起こすプロパティの代わりに、transformを使用します：
避けるべき書き方
Copy.element {
transition: height 0.3s ease;
}
.element:hover {
height: 200px; /* レイアウトシフトを引き起こす */
}
推奨される書き方
Copy.element {
transition: transform 0.3s ease;
}
.element:hover {
transform: scaleY(1.2); /* レイアウトシフトを引き起こさない */
}
IntersectionObserverの活用
動的コンテンツの読み込みタイミングを制御します：
Copyconst observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 要素が表示領域に入ったときにコンテンツを読み込み
loadDynamicContent(entry.target);
}
});
});
// 監視対象の要素を登録
document.querySelectorAll('.lazy-content').forEach(el => {
observer.observe(el);
});
WordPress・CMS別の対策方法
WordPress での対策
プラグインを活用した対策
- WP Rocket：自動で画像にサイズ属性を追加
- Perfmatters：フォントの最適化機能
- Autoptimize：CSS・JavaScript の最適化
テーマファイルでの対策
Copy// functions.php に追加
function add_image_dimensions($content) {
return preg_replace_callback(
'/<img[^>]*src="([^"]*)"[^>]*>/',
function($matches) {
$image_url = $matches[1];
$image_size = getimagesize($image_url);
if ($image_size) {
return str_replace('<img', '<img width="' . $image_size[0] . '" height="' . $image_size[1] . '"', $matches[0]);
}
return $matches[0];
},
$content
);
}
add_filter('the_content', 'add_image_dimensions');
Shopify での対策
Liquid テンプレートでの実装
<img src="{{ product.featured_image | img_url: '800x600' }}"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}"
alt="{{ product.featured_image.alt }}">
モバイル環境での特別な配慮
モバイル特有の課題
モバイル環境では、以下の要因でレイアウトシフトが発生しやすくなります：
- 通信速度の不安定性：4G/5G環境の変動
- 画面サイズの多様性：異なる解像度での表示
- タッチ操作の特性：タップ時のレイアウト変化
モバイル向け最適化テクニック
ビューポートの適切な設定
Copy<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
メディアクエリでの最適化
Copy@media (max-width: 768px) {
.hero-image {
aspect-ratio: 4 / 3;
width: 100%;
}
.ad-container {
min-height: 100px; /* モバイル広告サイズに調整 */
}
}
測定と継続的な改善
定期的な監視体制
CLS対策は一度実施すれば終わりではありません。継続的な監視と改善が必要です：
週次チェック項目
- PageSpeed Insightsでの全主要ページ確認
- Search Consoleでの新しい問題ページのチェック
- 実際のユーザー行動の分析
月次評価項目
- CLSスコアの推移分析
- 競合サイトとの比較
- 新しい対策手法の調査・実装
改善効果の測定指標
CLS改善の効果は、以下の指標で総合的に評価します：
技術指標
- CLSスコアの数値改善
- First Contentful Paint（FCP）の改善
- Largest Contentful Paint（LCP）の改善
ビジネス指標
- 直帰率の改善
- セッション継続時間の延長
- コンバージョン率の向上
- 検索順位の上昇
よくある質問と回答
Q1：画像にサイズを指定すると表示が崩れませんか？
A：CSSでwidth: 100%; height: auto;を指定することで、レスポンシブ対応を維持しながらアスペクト比を保てます。HTML属性のサイズ指定は、ブラウザが適切なスペースを確保するためのヒントとして機能します。
Q2：外部サービスの埋め込みコンテンツはどう対策すればいいですか？
A：外部サービス（YouTube、Twitter、Instagramなど）の埋め込みは、事前にサイズを調査してコンテナ要素で領域を確保しておきます。多くのサービスは推奨サイズを公開しているので、それを参考にしてください。
Q3：CLSスコアが0.05から0.08に悪化しました。何が原因でしょうか？
A：以下の要因が考えられます：
- 新しく追加した画像やコンテンツ
- 広告配信の変更
- Webフォントの読み込み遅延
- 第三者スクリプトの追加
Chrome DevToolsの「Layout Shift Regions」機能で具体的な原因箇所を特定できます。
まとめ
レイアウトが大きく変わらないようにするための対策は、現代のWebサイト運営において避けて通れない重要な課題です。ユーザー体験の向上とSEO効果の両面から、以下のポイントを押さえて継続的に改善していくことが大切です：
immediate action（今すぐ実行すべき対策）
- 全画像・動画要素へのwidth/height属性追加
- PageSpeed Insightsでの現状把握
- 明らかな問題箇所の特定と修正
継続的な改善施策
- Webフォントの最適化とfont-display設定
- 動的コンテンツの配置戦略見直し
- 広告スペースの事前確保
監視・分析体制
- Search Consoleでの定期的な全体チェック
- 主要ページのCLSスコア追跡
- 改善効果のビジネス指標での評価
レイアウトシフトの改善は、技術的な知識と継続的な取り組みが必要な分野です。しかし、適切な対策を実施することで、ユーザー満足度の大幅な向上と検索エンジンでの優位性を獲得できます。
LandingHubでは、こうした表示速度改善やCLS対策を含む、包括的なWebサイト最適化サービスを提供しています。専門的な知識と豊富な実績をもとに、お客様のサイトパフォーマンスを最大化するお手伝いをさせていただきます。
是非、今日から実践できる対策から始めて、ユーザーにとって快適で、検索エンジンからも評価される優れたWebサイトを構築してください。継続的な改善により、必ず成果は現れるはずです。
