アスペクト比の基礎——16:9・4:3・21:9・1:1の違いと使い分け

アスペクト比とは——「横:縦」の比率

アスペクト比（aspect ratio）は、画像や画面の横の長さと縦の長さの比です。「16:9」なら、横幅1600pxのとき縦が900px、横3200pxなら縦1800pxという意味。比率さえ同じなら、絶対的なサイズが違っても見た目の縦横バランスは変わりません。

英語表記は「16:9」と「16/9」「16x9」が混在します。本ツールでは「16:9」を採用しています。CSSの世界では aspect-ratio: 16 / 9 と斜線（/）を使うので、両方覚えておくと混乱しません。

主要な6つの比率と歴史

CSS aspect-ratio プロパティで「常に16:9」を作る

Web制作では、画像の枠を「常に16:9」に保ちたい場面が頻出します。CSS Color Level 4以降のブラウザはaspect-ratioプロパティで一行解決できます。

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

このコードを書くと、横幅100%（親要素いっぱい）に対して、自動的に高さが16:9で計算されます。レスポンシブで画面サイズが変わっても、比率は常に保たれます。MDNの仕様によれば、aspect-ratio の値は 1 / 1 や 0.5（縦長）など、任意の数値が指定できます。

HTML <img> の width/height は「比率」

現代のHTMLでは <img width="1280" height="720"> のように書きます。これは「1280pxで表示しろ」という意味ではなく、画像の本来の縦横比をブラウザに教えるための属性です。MDNの仕様によれば、width と height を両方指定すると、ブラウザは画像読み込み前から比率を確保するため、レイアウトシフト（CLS）の軽減に直結します。

表示サイズはCSS側で width: 100%; height: auto; のように指定すれば、属性値はあくまで「比率の伝達」だけになります。Lighthouse の Performance スコアでも「画像の縦横比を明示する」が推奨されています。

比率が同じ＝同じ印象に見えるとは限らない

16:9 の比率は「黄金比」ではないですが、長辺/短辺が約1.778で「映画的」とされる比率です。一方、4:3（1.333）は「映像の伝統的なバランス」で、写真の3:2（1.5）はやや横長。1:1 は完全に中立的。21:9（2.333）は「ものすごく横長」で、対象を強調する映画的演出向きです。

重要なのは、同じ「横長」でも比率により視覚的な印象が変わること。説明的な写真は3:2、動的な動画は16:9、ドラマチックな演出は21:9、というように使い分けると効果的です。

本ツールでの活用フロー

1. 用途を決める（動画／写真／SNS／印刷）。
2. 用途別の標準比率を選ぶ（16:9／3:2／1:1／A判など）。
3. /aspect-ratio/ でプリセットから選択→必要な横幅または高さを入力→もう片方を取得。
4. 素材画像の比率が違う場合は 画像トリミング で目的の比率に切り抜き。
5. サイズ調整は 画像リサイズ で。