アスペクト比計算機
幅と高さを入力すると、16:9や4:3のような単純化されたアスペクト比と小数比を計算します。リサイズモードに切り替えれば、元の比率を保ったまま新しい幅に合わせた高さもすぐに求められます。
この計算の仕組み
比率モードでは、幅と高さの最大公約数(GCD)を求めて両方をその数で割ります。分数を約分するのと同じ考え方です。1920×1080の最大公約数は120なので、両辺を割ると16:9になります。小数比は幅÷高さで求められ、きれいな整数比に単純化できない比率同士を比較するときに便利です。
リサイズモードでは、元の幅と高さの関係を保ったまま、足りない値を計算します: 新しい高さ = 元の高さ × (新しい幅 ÷ 元の幅)。幅と高さの比率が変わらないため、リサイズした画像や動画は伸びたり潰れたりせず、元の比率をそのまま保ちます。
どちらのモードも、幅と高さが同じ単位である限り、画面や画像用のピクセルでも、印刷用のセンチメートルやインチでも使えます。
計算例
よく使われるアスペクト比
画面・写真・動画で最もよく使われる比率です:
| 比率 | 小数 | 主な用途 |
|---|---|---|
| 1:1 | 1.0000 | 正方形 — Instagram投稿、アルバムジャケット、プロフィール写真 |
| 4:3 | 1.3333 | クラシックなテレビ、旧型モニター、標準サイズの写真プリント |
| 3:2 | 1.5000 | 一眼レフ・ミラーレスカメラのセンサー、4×6プリント |
| 16:10 | 1.6000 | 一部のノートPC・デスクトップモニター |
| 16:9 | 1.7778 | HD/4K動画、ワイドスクリーンテレビ、多くの最新モニター |
| 21:9 | 2.3333 | ウルトラワイドモニター、シネマティック・アナモルフィック映像 |
| 9:16 | 0.5625 | 縦型動画 — ストーリーズ、リール、ショート |
リサイズ時に同じアスペクト比を保つ理由
幅と高さを個別に変更すると、画像や動画が伸びたり潰れたりして、円が楕円に、顔が歪んで見えてしまいます。リサイズ時に幅と高さの比率を一定に保つ(両辺を同じ倍率で拡大縮小する)ことで元の比率が正確に維持されます。そのため、デザインツールや動画編集ソフトは通常、デフォルトでアスペクト比をロックし、片方のハンドルだけをドラッグできるようにしています。
レターボックスとピラーボックス
- レターボックス: クロップや引き伸ばしをせずに横長のコンテンツを縦長の画面に収めるため、上下に黒帯を追加する方式(例: 16:9のテレビで上映される21:9の映画)。
- ピラーボックス: 縦長のコンテンツを横長の画面に収めるため、左右に黒帯を追加する方式(例: 16:9のディスプレイで再生される旧型の4:3映像)。
- クロップ(切り抜き): 黒帯を追加する代わりに、画面を埋めるためコンテンツの端を切り取る方式 — 黒帯は出ないが、元の映像の一部が失われる。
- 引き伸ばし(非推奨): 比率を無視して画面いっぱいに引き伸ばすと、画像内のすべての形が歪む。
CSSやデザインツールでの比率の活用
最新のCSSにはaspect-ratioプロパティ(例: aspect-ratio: 16 / 9)があり、コンテナのサイズが変わっても要素の比率を固定できます。これはレスポンシブな動画埋め込みや、読み込み中にレイアウトがずれないようにする画像プレースホルダーに便利です。FigmaやPhotoshopなどのデザインツールも、フレームを描画・調整する際にこの計算機と同じ幅と高さの関係で比率をロックする機能を提供しています。