アスペクト比計算ツール(無料・登録不要)
印刷サイズ換算(DPI指定)
- 幅・高さ → 比率: 解像度(例: 1920×1080)からアスペクト比を求める。動画や画像のサイズ確認に
- 比率・幅 → 高さ: 幅が決まっていてアスペクト比から高さを出す。Webデザイン・バナー制作に
- 比率・高さ → 幅: 高さが決まっていてアスペクト比から幅を出す
- 比率・短辺 → 長辺: 短辺を基準に長辺を求める。印刷サイズ計算に
aspect-ratio プロパティのコードをワンクリックでコピーできます。CSSのpadding-topハックも生成します。
アスペクト比とは
アスペクト比(縦横比)とは、画像・動画・ディスプレイの幅と高さの比率を表した数値です。「16:9」は幅16に対して高さ9という意味で、現在のHD動画やスマートフォン横向き表示の標準比率です。アスペクト比を保ったままサイズを変更することで、画像の歪みを防ぎます。
GCD(最大公約数)による最簡形式
1920×1080 のアスペクト比は、GCD(最大公約数)= 120 で割ると 16:9 になります。本ツールはGCDを自動計算し、最もシンプルな形式で比率を表示します。例: 1280×1024 → GCD = 256 → 5:4。
主要なアスペクト比の用途
| 比率 | 主な用途 | 代表的なサイズ |
|---|---|---|
| 16:9 | HD動画・YouTube・ゲーム・PC | 1920×1080 / 1280×720 |
| 4:3 | 旧テレビ・プレゼン・デジカメ | 1024×768 / 800×600 |
| 1:1 | Instagram正方形・プロフィール | 1080×1080 |
| 9:16 | スマホ縦動画・ストーリーズ | 1080×1920 |
| 21:9 | シネスコープ・ウルトラワイド | 2560×1080 |
| 3:2 | 一眼レフ・35mmフィルム | 6000×4000 |
| 5:4 | モニター(旧SXGA) | 1280×1024 |
| 16:10 | MacBook・WUXGAモニター | 1920×1200 |
各SNSの推奨サイズとアスペクト比の一覧です。本ツールのSNSプリセットからワンクリックで計算できます。
| SNS | 用途 | 推奨サイズ | アスペクト比 |
|---|---|---|---|
| フィード(正方形) | 1080×1080px | 1:1 | |
| フィード(縦型・推奨) | 1080×1350px | 4:5 | |
| ストーリーズ・リール | 1080×1920px | 9:16 | |
| X(旧Twitter) | プロフィール画像 | 400×400px | 1:1 |
| ヘッダー画像 | 1500×500px | 3:1 | |
| 投稿画像(1枚) | 1200×675px | 16:9 | |
| YouTube | サムネイル | 1280×720px | 16:9 |
| チャンネルアート | 2560×1440px | 16:9 | |
| 投稿・シェア画像 | 1200×630px | ≈ 1.91:1 | |
| 投稿画像 | 1200×627px | ≈ 1.91:1 | |
| TikTok | 動画・プロフィール | 1080×1920px | 9:16 |
※ 2026年5月現在の情報。各SNSの仕様変更により推奨サイズが変わる場合があります。
印刷解像度とアスペクト比の関係
印刷では解像度(DPI: Dots Per Inch)が重要です。一般的な印刷品質は 300 DPI。A4(210×297mm)を 300DPI で印刷する場合、必要なピクセル数は幅 2480px × 高さ 3508px。アスペクト比は約 5:7(正確には √2 ≈ 1:1.414)です。
主要印刷サイズ一覧
| サイズ | mm(W×H) | 300DPIピクセル | アスペクト比 |
|---|---|---|---|
| A4 | 210×297 | 2480×3508 | ≈ 1:1.41(√2) |
| A5 | 148×210 | 1748×2480 | ≈ 1:1.41(√2) |
| B5 | 182×257 | 2149×3035 | ≈ 1:1.41 |
| L判(写真) | 89×127 | 1051×1500 | ≈ 1:1.43 |
| 2L判(写真) | 127×178 | 1500×2102 | ≈ 1:1.40 |
| 名刺 | 91×55 | 1075×650 | ≈ 5:3 |
DPIを考慮したサイズ計算方法
mm → ピクセル の変換: ピクセル = mm × DPI ÷ 25.4。例: A4の幅210mm × 300DPI ÷ 25.4 = 2480px。本ツールの「比率・幅→高さ」モードで1:1.414を入力すれば、A判の縦横を計算できます。
CSS aspect-ratio プロパティ(現代的な方法)
CSS の aspect-ratio プロパティで要素のアスペクト比を維持できます。本ツールで生成したコードをそのまま使用できます。
/* 16:9の場合 */
.element {
width: 100%;
aspect-ratio: 16 / 9;
}
/* 対応ブラウザ: Chrome 88+ / Firefox 89+ / Safari 15+ */
padding-topハック(旧来の方法・IE対応)
古いブラウザへの対応が必要な場合は padding-top ハックを使います。本ツールのコードコピーから生成できます。
/* 16:9の場合: 9/16 = 56.25% */
.wrapper {
position: relative;
padding-top: 56.25%;
height: 0;
}
.wrapper > .content {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
レスポンシブ画像のアスペクト比指定
HTMLの img タグに width と height 属性を明示することで、ブラウザがCLS(レイアウトシフト)を防ぎます。本ツールで比率を確認してから記述することを推奨します。
<img src="photo.jpg" width="1920" height="1080"
style="width:100%;height:auto;" alt="説明文">
- Q アスペクト比とは何ですか?
- A アスペクト比(縦横比)とは、画像・動画・画面の幅と高さの比率を「16:9」のように表したものです。同じアスペクト比なら、解像度が異なっても形の比率は同じです。例えば 1920×1080 も 1280×720 も、どちらも 16:9 のアスペクト比です。
- Q 「最簡形式」とはどういう意味ですか?
- A 幅と高さの最大公約数(GCD)で割った、これ以上シンプルにできない形の比率です。例えば 1920:1080 の GCD は 120 なので、1920÷120 = 16、1080÷120 = 9 となり「16:9」が最簡形式です。
- Q 16:9と1920×1080の違いは何ですか?
- A 16:9 はアスペクト比(形の比率)で、1920×1080 は解像度(実際のピクセル数)です。1920×1080・1280×720・960×540 はすべて 16:9 のアスペクト比を持ちますが、解像度(画質・ファイルサイズ)が異なります。
- Q YouTube動画に最適なアスペクト比は?
- A YouTubeは 16:9(横長)が標準です。推奨解像度は 1920×1080(Full HD)または 1280×720(HD)。スマホ縦動画(ショート)は 9:16 を使用します。アスペクト比が合わない場合、YouTubeが自動的に黒帯(レターボックス)を追加します。
- Q Instagramに投稿する画像の最適なアスペクト比は?
- A Instagramフィードは 4:5(縦型・1080×1350px)が最も表示面積が大きく推奨されます。正方形は 1:1(1080×1080px)。ストーリーズ・リールは 9:16(1080×1920px)が標準です。
- Q CSSのaspect-ratioプロパティはどのブラウザで使えますか?
- A CSS aspect-ratio プロパティは Chrome 88以降・Firefox 89以降・Safari 15以降・Edge 88以降で対応しています(2026年現在、主要ブラウザすべてで利用可能)。IE11は未対応のため、IE対応が必要な場合は padding-top ハックを使用してください。本ツールでどちらのコードも生成できます。
- Q 印刷に使う場合の解像度はどう計算しますか?
- A 印刷解像度の計算式は「ピクセル数 = mm × DPI ÷ 25.4」です。A4(210×297mm)を300DPIで印刷する場合、幅は 210 × 300 ÷ 25.4 ≈ 2480px になります。本ツールの「幅・高さ→比率」モードで 2480×3508 を入力すると、A判のアスペクト比を確認できます。