アスペクト比計算

アスペクト比とは何か — 縦横比の基本

アスペクト比（aspect ratio）とは、画面・画像の幅と高さの比率のことです。「16:9」と表記する場合、横16に対して縦9の割合であることを意味します。実際のピクセル数がいくらであっても、この比率を保っていれば見た目のプロポーションは同じになります。たとえば1280×720・1920×1080・3840×2160はすべて16:9です。

アスペクト比を知っておくことで、異なる解像度への変換や、トリミング・リサイズ後に縦横比が狂わないかの確認が正確にできます。動画編集・バナー制作・プリント入稿など、サイズ指定が厳しい制作現場で特に重要です。

主要プラットフォームの推奨サイズと比率

SNS・動画プラットフォームごとに推奨サイズが異なるため、用途に合った比率を把握しておくと作業効率が上がります。同じ画像でも比率が違うとトリミングされたり、黒帯が入ったりして意図した見え方にならない場合があります。

YouTubeの標準比率は16:9です。サムネイル（1280×720）・動画本体（1920×1080 / 3840×2160）はいずれも16:9で、最低でも1280×720での書き出しが推奨されています。

Instagramは3つの比率を使い分けます。フィード正方形投稿は1:1（1080×1080）、縦長フィード投稿は4:5（1080×1350）、ストーリー・Reelsは9:16（1080×1920）です。プロフィールグリッドは1:1で表示されるため、縦長で投稿した画像はグリッド上でトリミングされます。

比率の計算方法と最簡比率への変換

アスペクト比の計算は「幅 ÷ 高さ」の比率を求めることが基本です。1920÷1080を計算すると約1.78（16/9）が得られます。この小数を整数比に戻すには、幅と高さの最大公約数（GCD）で両方を割る方法が使われます。

たとえば1280×720であれば、GCD(1280, 720) = 80 です。1280÷80 = 16、720÷80 = 9 となり、16:9が得られます。このツールでは任意のサイズを入力すると最簡比率（これ以上割り切れない最小の整数比）を自動的に表示します。

既存の画像を別サイズにリサイズするとき、比率を保つ計算式は「新しい高さ = 幅 × (元の高さ / 元の幅)」です。16:9で幅を1920から800に変更する場合、高さは 800 × (9/16) = 450 となります。

// アスペクト比を保ったリサイズの計算
// 幅を基準にした場合
const newHeight = Math.round(newWidth * (originalHeight / originalWidth));

// 高さを基準にした場合
const newWidth = Math.round(newHeight * (originalWidth / originalHeight));

// 最大公約数（ユークリッドの互除法）
function gcd(a, b) {
  return b === 0 ? a : gcd(b, a % b);
}
const g = gcd(1920, 1080); // => 120
console.log(`${1920/g}:${1080/g}`); // => "16:9"

比率を変えずに画像をクロップ・パディングする方法

元画像のアスペクト比が目標の比率と違う場合、「クロップ（切り抜き）」または「レターボックス・ピラーボックス（余白追加）」の2つの対処法があります。

クロップは目標比率に合わせて画像の一部を切り落とす方法です。被写体が中央にある場合はセンタークロップが一般的です。縦長の4:5素材を正方形（1:1）にトリミングする場合、上下を均等にカットします。

レターボックス・ピラーボックスは余白を追加する方法です。黒や白などの単色パディングで足りない部分を埋めます。16:9の動画を9:16のフォーマットで使う場合、左右に黒帯を入れてフィットさせます。この手法はアスペクト比を変えずに全体を見せたいときに適しています。

• クロップ：被写体を残して余白をトリミング。情報が失われるが全画面に広がる
• レターボックス（横帯）：横長コンテンツを縦長フォーマットに入れるときの黒帯
• ピラーボックス（縦帯）：縦長コンテンツを横長フォーマットに入れるときの黒帯
• ズーム（フィル）：比率を無視して引き伸ばす。最も避けたい方法
• コンテンツを意識したクロップ：重要な部分（顔・製品）を残してトリミング

よくある質問