アスペクト比計算機完全ガイド：16:9・4:3・カスタム比率の計算とCSS実装

アスペクト比は、計算しようとするまで当然の概念に思えます。YouTubeが16:9で、古い家族写真がワイドスクリーンテレビで変に見えることは知っているのに、いざ動画をリサイズしたりレスポンシブな画像コンテナを設計したりすると、計算でつまずきます。このガイドでは定義からCSS実装まで、無料オンライン計算機とともにすべてを解説します。

アスペクト比を即座に計算 →

アスペクト比とは

アスペクト比は長方形の幅と高さの比例関係を 幅:高さ の形式で表します。1920×1080のディスプレイのアスペクト比が16:9なのは、両寸法の最大公約数が120であり、1920÷120=16、1080÷120=9 だからです。

比率は形状を表すものであり、サイズを表すものではありません。640×360のサムネイルと3840×2160の4Kモニターはどちらも16:9のアスペクト比を持ちます——異なるスケールで同じ形状です。

アスペクト比が登場する場面：

• ディスプレイとモニター — 画面解像度の仕様は常にアスペクト比を意味する
• 動画制作 — エクスポート設定、プラットフォームのアップロード要件
• 写真 — センサーのクロップファクター、印刷サイズ
• Webデザイン — レスポンシブ画像コンテナ、埋め込みラッパー
• モバイルUI — セーフエリア計算、スプラッシュ画面サイズ

主なアスペクト比

16:9 — 現代の標準

16:9が主流のワイドスクリーン標準になったのは、4:3（旧TVスタンダード）と2.39:1（シネマワイドスクリーン）の相乗平均だからです。どちらのコンテンツタイプでもレターボックスやピラーボックスが最小限で済みます。

使用例：YouTube・Netflix・Vimeo、ほとんどのノートPCとデスクトップモニター、フルHD（1920×1080）、4K UHD（3840×2160）、HD（1280×720）。

4:3 — レガシーテレビ

4:3の比率は2000年代中頃まで、テレビとコンピュータモニターを支配していました。16:9より正方形に近いため、動画には時代遅れに見えますが、一部のドキュメントやプレゼンテーションレイアウトには適しています。PowerPointの元のスライド形式は4:3です。

使用例：レガシーSD動画、iPad（ほぼ4:3）、一部のドキュメントレイアウト。

21:9 — ウルトラワイド

ウルトラワイドモニターは21:9を使用します（より正確にはシネマでは2.39:1、2560×1080モニター規格では64:27）。映画作品は2.39:1または2.35:1で撮影されることが多く、それが標準16:9ディスプレイで黒帯が表示される理由です。

使用例：ウルトラワイドゲーミングモニター（2560×1080、3440×1440）、映画マスタリング。

1:1 — 正方形

正方形フォーマットはInstagramの初期フィードで広まりました。対称性が重要なプロフィール画像・アルバムアート・ソーシャルサムネイルに適しています。

使用例：Instagramの投稿、アプリアイコン、アルバムカバー、アバター。

9:16 — 縦型動画

9:16は16:9の縦向きの逆——縦向きに持ったスマートフォン用に設計されています。ショートフォーム動画が横型プラットフォームを超えたことで、9:16はモバイルファーストコンテンツの主流フォーマットになりました。

使用例：TikTok・Instagram Reels・YouTube Shorts・Snapchat Stories・モバイルフルスクリーン広告。

アスペクト比の計算方法

アルゴリズム：

1. ユークリッドのアルゴリズムで幅と高さの最大公約数（GCD）を求める。
2. 両方の寸法をGCDで割る。

JavaScript:

function gcd(a, b) {
  return b === 0 ? a : gcd(b, a % b);
}

function aspectRatio(width, height) {
  const divisor = gcd(width, height);
  return `${width / divisor}:${height / divisor}`;
}

console.log(aspectRatio(1920, 1080)); // "16:9"
console.log(aspectRatio(2560, 1440)); // "16:9"
console.log(aspectRatio(1280, 960));  // "4:3"
console.log(aspectRatio(1080, 1920)); // "9:16"

Python:

from math import gcd

def aspect_ratio(width: int, height: int) -> str:
    divisor = gcd(width, height)
    return f"{width // divisor}:{height // divisor}"

print(aspect_ratio(1920, 1080))  # 16:9
print(aspect_ratio(3840, 2160))  # 16:9
print(aspect_ratio(1080, 1350))  # 4:5  (Instagram縦型)

整数でない比率（2.39:1など）の場合、GCDを実行する前に両辺に大きな整数（例：100）を掛けてから簡約します。

リサイズ時のアスペクト比維持

元の寸法がわかっていて比率を維持しながらリサイズする場合、比例計算式を使います。

幅がわかっている場合、高さを求める：

新しい高さ = (新しい幅 × 元の高さ) / 元の幅

高さがわかっている場合、幅を求める：

新しい幅 = (新しい高さ × 元の幅) / 元の高さ

例： 元は1920×1080。幅を1280にリサイズしたい。

新しい高さ = (1280 × 1080) / 1920 = 720

結果：1280×720、これはまだ16:9です。

コードで：

function resizeByWidth(originalWidth, originalHeight, newWidth) {
  return Math.round((newWidth * originalHeight) / originalWidth);
}

function resizeByHeight(originalWidth, originalHeight, newHeight) {
  return Math.round((newHeight * originalWidth) / originalHeight);
}

// 1920×1080を幅800px以内に収めてリサイズ
const newH = resizeByWidth(1920, 1080, 800); // 450
console.log(`800×${newH}`); // 800×450

CSSでのアスペクト比

CSSにはレスポンシブレイアウトでアスペクト比を維持するための2つの確実な方法があります。

aspect-ratio プロパティ

モダンな方法——すべての現行ブラウザでサポート（Chrome 88+、Firefox 89+、Safari 15+）：

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.square-thumbnail {
  width: 200px;
  aspect-ratio: 1;
}

.portrait-card {
  width: 300px;
  aspect-ratio: 9 / 16;
}

ブラウザに他の寸法を処理させながら比率を強制することもできます：

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

padding-topハック（レガシーサポート）

古いブラウザのサポートには、親の幅のパーセンテージとして padding-top を使用するイントリンシック比率テクニックがあります：

.ratio-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* (9 / 16) × 100 */
}

.ratio-16-9 > * {
  position: absolute;
  inset: 0;
}

パディングパーセンテージの計算式：(高さ / 幅) × 100

比率	padding-top
16:9	56.25%
4:3	75%
1:1	100%
9:16	177.78%
21:9	42.86%

aspect-ratio CSSプロパティは現在すべてのブラウザでサポートされており、新しいプロジェクトでは優先的に使用すべきです。

レスポンシブ埋め込み

<iframe> 埋め込み（YouTube・Vimeo・Google Maps）をレスポンシブにスケールさせるラッパー：

<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</div>

.embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

オンラインでアスペクト比を計算

手で計算する代わりに、ZeroToolのアスペクト比計算機がブラウザ上で直接計算します。幅・高さ・目標寸法のうち任意の2つを入力すると、比率・不足寸法・一般的な標準の等価解像度を計算します。サインアップ不要、データはサーバーに送信されません。

ZeroTool アスペクト比計算機を試す →