使い方
- 比率を求める: 幅と高さを入れると、約分したアスペクト比（例: 16:9）、小数の比率（例: 1.78:1）、最も近い一般的な比率、最大公約数が表示されます。
- サイズを求める: 比率と、わかっている一方の長さ（幅または高さ）を入れると、もう一方の長さが表示されます。単位は px、cm など何でもかまいません。結果も同じ単位です。
- よく使う比率のボタン: 16:9、4:3、21:9 などのボタンを押すと、「比率を求める」ではその比率の例の解像度が、「サイズを求める」では比率の欄が入ります。
- 結果の下には、代表的な解像度の表とコピーできる CSS の
aspect-ratio値があります。比率のプレビューは、モバイルでは入力欄の上、デスクトップでは右側に表示されます。
比率の計算のしくみ: 最大公約数
アスペクト比は、幅と高さを 2 つの数の最大公約数で割って約分したものです。最大公約数はユークリッドの互除法で求めます。大きい数を小さい数で割った余りを求め、余りが 0 になるまで繰り返すと、最後に割った数が最大公約数です。
たとえば 1920 と 1080 なら、1920 ÷ 1080 の余りは 840、1080 ÷ 840 の余りは 240、840 ÷ 240 の余りは 120、240 ÷ 120 の余りは 0 なので、最大公約数は 120 です。1920 ÷ 120 = 16、1080 ÷ 120 = 9 で、16:9 になります。
297 × 210.5 のように小数が含まれる場合は、両方に 10 の累乗を掛けて整数にしてから約分します。約分しても大きな数が残る比率では、最も近い一般的な比率とその差もあわせて表示します。
サイズの計算と整数にならない結果
もう一方の長さは、比率どおりに比例式を解いて求めます。比率が 16:9 で幅が 1280 なら、高さは 1280 × 9 ÷ 16 = 720 です。
ピクセルのように整数が必要なサイズでも、計算結果が小数になることがあります。約分した比率が 16:9 で幅が整数の場合、幅が 16 の倍数のときだけ高さも整数になります。このツールは四捨五入した結果を表示し、整数でない場合は丸める前の計算値も示します。入力した長さが整数なら、同じ比率を保つ近い整数サイズも案内します。たとえば幅が 1000 なら高さは 562.5 で、近い整数サイズは 992 × 558 と 1008 × 567 です。cm などの単位で計算する場合は、丸める前の計算値を使ってください。
動画・写真・SNS でよく使われる比率
- 16:9: テレビやモニター、オンライン動画の標準的な横長画面です。HDTV 規格（ITU-R BT.709）の 1920 × 1080 と UHDTV 規格（ITU-R BT.2020）の 3840 × 2160 はどちらも 16:9 です。
- 9:16: 16:9 を縦にした比率で、縦型動画によく使われます。スマートフォンの画面比率によっては余白ができたり、一部が切り取られたりします。
- 4:3 と 3:4: 4:3 は以前のテレビやモニターの比率で、写真でもよく使われます。3:4 はそれを縦にした比率です。
- 3:2 と 2:3: カメラで撮った写真によく見られる比率です。
- 1:1: 正方形で、プロフィール画像やサムネイルのように縦横が同じ画像に使います。
- 4:5: やや縦長の写真の比率で、1:1 より縦方向に画面を広く使います。
- 16:10: ノートパソコンやモニターで使われる比率で、16:9 より少し縦に長めです。
- 21:9 と 32:9: ウルトラワイドモニターのような、とても横長の画面です。
SNS や動画プラットフォームの推奨サイズはサービスごとに異なり、よく変わります。投稿する前に各サービスの公式ヘルプを確認してください。
CSS の aspect-ratio で使う
CSS の aspect-ratio プロパティに比率を指定し、要素の幅を決めると、高さが自動（height: auto）の場合に比率に合わせて計算されます。幅と高さの両方を固定すると、このプロパティではサイズが調整されません。値は aspect-ratio: 16 / 9; のように幅 / 高さで書くほか、数値 1 つ（aspect-ratio: 1.5;）でも書けます。このツールは約分した 2 つの整数で値を作るので、そのままコピーして使えます。動画の領域やサムネイルの場所をあらかじめ確保すると、画像の読み込みが遅れたときのレイアウトのずれを抑えられます。