1. ホーム
2. web
3. CSSのaspect-ratioプロパティでCLS（累積レイアウトシフト）を防ぐ

CLS（累積レイアウトシフト）とは

Cumulative Layout Shift（CLS）はGoogleのCore Web Vitalsの指標の一つで、ページの視覚的な安定性を測定します。CLSスコアが高いとユーザー体験とSEOランキングの両方に悪影響を及ぼします。主な原因は、画像や動画、iframeなどのメディア要素が読み込み時に適切なスペースを確保せずに表示されることです。

CSS aspect-ratio の仕組み

aspect-ratioプロパティは、要素の幅と高さの比率を宣言的に指定できます。ブラウザはこの比率に基づいて事前にスペースを確保するため、コンテンツ読み込み時のレイアウトジャンプを防ぎます。

/* 16:9のアスペクト比を予約 */
.responsive-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

構文は直感的で、aspect-ratio: <幅> / <高さ> と記述します。小数値も使え、aspect-ratio: 2 は 2 / 1 と同義です。

画像のレイアウトシフト防止

aspect-ratio登場以前は、パディングハック（padding-bottomを利用した比率予約）が一般的でした。現在はよりシンプルに記述できます。

/* 従来のパディングハック */
.image-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

/* モダンなaspect-ratio */
.image-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

レスポンシブ画像の場合は、max-widthと組み合わせます：

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

動画とiframeへの適用

YouTubeやVimeoなどの埋め込みコンテンツは特にCLSを引き起こしやすい要素です。aspect-ratioで簡単に解決できます。

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-container iframe {
  width: 100%;
  height: 100%;
}

Core Web Vitalsへの影響

適切なaspect-ratioの使用はCLSスコアを直接改善します。比率指定なしではCLSスコアが0.25（Poor）となるケースでも、aspect-ratioを適用すれば0.02（Excellent）まで改善できます。

ブラウザサポート

古いブラウザでは、プロパティが無視されて従来通りの動作にフォールバックするため、劣化は緩やかです。

ベストプラクティス

1. <img>タグには常にwidthとheight属性を設定する（CSS読み込み前でもブラウザが比率を計算可能）
2. CSSのaspect-ratioは派生比率や複雑なレイアウトのフォールバックとして使用
3. LighthouseのCLSセクションで問題要素を特定する
4. object-fitと組み合わせて一貫した画像トリミングを実現

CSS aspect-ratioはCore Web Vitalsを改善する最も効果的なモダンCSS機能の一つです。ハックやJavaScriptに頼ることなく、動的コンテンツ読み込み時のレイアウトシフトを排除できます。