こんにちは、阿久梨絵です！
「 画像 が潰れて見える」「はみ出してレイアウトが崩れる」「余白がバラバラになる」——そんなUIトラブル、原因はほぼ“ 縦横比 ”です。
この記事では、画像の 縦横比 がUIを崩す理由と、CSSでの防ぎ方を解説します。
UIが崩れる原因：縦横比が“設計とズレている”
よくある症状
・横長画像が縦長枠に入って潰れる
・サムネイルがバラバラでグリッドが崩れる
・背景画像が切れて見える／拡大されすぎる
原因
・画像の実寸サイズと表示枠の比率が合っていない
・CSSでwidthやheightだけ指定して、比率を無視している
縦横比は“見た目のテンポ”を決める設計要素。ズレるとUIが崩れるのは当然
防ぎ方①：CSSで`aspect-ratio`を指定する
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
object-fit: cover;
}
・aspect-ratioで比率を固定
・object-fit: coverで枠に収めつつ切り取り表示
これだけで「潰れる／はみ出す／余白が変」問題はほぼ解決
防ぎ方②：画像の比率を“設計に合わせて選ぶ”
| UI用途 | 推奨比率 | 理由 |
|---|---|---|
| サムネイル | 1:1 | グリッドが揃いやすく、汎用性高い |
| ヒーロー画像 | 16:9 / 21:9 | 横長で“雑誌的テンポ”を演出できる |
| 人物写真 | 3:4 / 2:3 | 顔が潰れず、視線誘導しやすい |
| アイコン | SVG（比率自由） | 拡大縮小に強く、UIに馴染みやすい |
「横長＋白抜き＋シャドウ」でビジュアルを演出するのが◎
防ぎ方③：背景画像は`background-size`で制御
NG例（崩れやすい）
background-size: cover;
→ 枠に合わせて拡大されるため、画像の重要部分が切れることも
正しい使い方
background-size: contain;
background-position: center;
background-repeat: no-repeat;
→ 比率を保ちつつ、中央に表示／切れない／繰り返さない
背景画像は“演出”なので、見せたい範囲を明確に設計することが重要
比率で“テンポ感”を作る
・画像の比率を揃えることで、UI全体のリズムが整う
・縦長画像は余白を広めに取って“呼吸感”を演出
・横長画像は見出しと並べて“視覚と語感のテンポ演出”を作る
比率は“見え方”ではなく“感じ方”を設計する要素
まとめ
画像 の縦横比がズレると、UI全体のテンポ・視線・印象が崩れる。
CSSでの比率指定＋画像選定＋表示設計を整えることで、“崩れない・印象に残るUI”が完成します。
弊社では、こうした“見え方から設計するUX”を今後も発信していきます。
阿久梨絵でした！
