アスペクト比とは

アスペクト比（縦横比）は、画像や動画の幅と高さの比率を表します。「16:9」は幅16に対して高さ9という意味で、現代のワイドスクリーンテレビやYouTube動画の標準形式です。

主要なアスペクト比と用途

  • 16:9：YouTubeなどの動画・PCモニター・テレビの標準。「ワイドスクリーン」とも呼ばれる。
  • 4:3：かつてのテレビ・デジタルカメラの標準。現在はプレゼンスライドで使われることも。
  • 1:1：Instagram正方形投稿・プロフィール画像・アイコン
  • 4:5：Instagramの縦型投稿（フィードで最も面積が大きく表示される）
  • 9:16：TikTok・Instagram Reels・YouTube Shortsの縦型動画
  • 2:1（1.91:1）：TwitterカードやOGP画像の推奨比率

CSSでのアスペクト比指定

CSS のaspect-ratioプロパティを使うと、要素のアスペクト比を維持できます。

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.thumbnail {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

レスポンシブデザインでの活用

以前はアスペクト比の維持にpadding-topハックを使っていましたが、aspect-ratioプロパティが主要ブラウザで対応済みとなり、シンプルに書けるようになりました。