#014
UI設計パターン
#014あすぺくとひ
アスペクト比 (Aspect Ratio)
別名・表記:Aspect Ratio縦横比
UIXHERO Definition
「縦横比」。画面や画像の形の比率。
概要
視覚的なコンテンツの「形状」を決定づける数値。
Webの黎明期は画像のピクセル数（絶対値）で指定されることが多かったが、マルチデバイス対応が必須となった現在では、比率（相対値）で管理することが一般的になった（CSSの aspect-ratio プロパティなど）。異なるデバイスや画面サイズでも一貫した視覚体験を保つため、レスポンシブデザインにおける基礎要素となる。
UXでの活用
- 一貫性: カードUIやサムネイル画像のアスペクト比を統一することで、リスト表示の整列感を出し、視覚的なノイズを減らす。
- 没入感: ヒーローイメージ（ファーストビューの画像）を画面いっぱいの16:9やシネマスコープサイズ（2.35:1）にすることで、映画のような没入感を演出する。ストーリー投稿（9:16）などもある。
💡 使いどころ
画像、動画、カード型UIのコンテナサイズを決める際。
⚠️ 注意点・誤用
アスペクト比を固定しすぎると、極端に細長いデバイスや正方形に近い画面でレイアウトが崩れたり、コンテンツが見切れたり（クロップ）する問題が発生する。`object-fit` プロパティなどを活用して柔軟に対応する。別の注意としては、画像のアスペクト比を指定しないと、読み込み時にレイアウトがずれてユーザー体験を損なうことがある（CLSの原因）。
具体例
- 16:9（Youtubeなどの動画標準）
- 4:3（古いテレビやiPad）
- 1:1（Instagram、アイコン）
- 1:1.618（黄金比）
関連用語
出典・参考文献:
- International Organization for Standardization. (2007). ISO 216: Writing paper and certain classes of printed matter — Trimmed sizes — A and B series.
- Lupton, E., & Phillips, J. C. (2015). Graphic Design: The New Basics (2nd ed.). Princeton Architectural Press.
- Google. (2020). Web Vitals. Retrieved from
関連する解説記事
関連する記事詳細が見つかりませんでした。