アスペクト比一覧と計算方法|16:9・4:3の違いと写真・動画のサイズ

画像や動画を作るときに「16:9で」「4:3で」と言われても、それが何を表しているのか、どうやってサイズを決めればいいのか迷ったことはありませんか。

アスペクト比とは、画像や画面の横と縦の長さの比率のことで、写真・動画・Webサイトの画像など、あらゆる場面で形を決める基準になります。

この記事では、アスペクト比の意味と主な比率の一覧、ピクセル数から比率を求める計算方法、写真・動画・Webサイトで使われる比率、CSSでの扱い方までを、前提知識がない人にも分かるように解説します。

アスペクト比の基本

まずは、アスペクト比とは何か、そして混同しやすい「サイズ(解像度)」との違いを押さえましょう。

アスペクト比とは

アスペクト比とは、画像や画面の「横の長さ」と「縦の長さ」の比率のことです。

英語の「aspect ratio」をそのままカタカナにした言葉で、日本語では「縦横比」とも呼ばれます。

書き方は「横:縦」の順番が一般的で、「16:9」なら横が16、縦が9の割合の横長の形を表します(Androidの公式サイトの写真のアスペクト比の解説でも、横と縦の比率を「横:縦」で表すと説明されています)。

たとえば、横1920ピクセル・縦1080ピクセルの画像は、横と縦の割合が16:9なので、「アスペクト比16:9の画像」と呼びます。

ピクセルは、画面に表示される画像を作っている小さな点(画素)のことで、画像の大きさを表す単位として使われます。

アスペクト比と解像度(サイズ)の違い

アスペクト比は「形」を表し、解像度は「大きさ(ピクセルの数)」を表すもので、この2つは別のものです。

アスペクト比は比率なので、同じ形のまま大きくしたり小さくしたりしても変わらないためです。

たとえばYouTubeヘルプの動画の解像度とアスペクト比のページでは、16:9の解像度として次のような組み合わせが挙げられています。

呼び方	解像度(横×縦)	アスペクト比
2160p(4K)	3840×2160	16:9
1080p(HD)	1920×1080	16:9
720p(HD)	1280×720	16:9
360p(SD)	640×360	16:9

どれも形は同じ16:9ですが、ピクセルの数が多いほど細かいところまできれいに表示できます。

つまり、画像を作るときは「どんな形にするか(アスペクト比)」と「どのくらいの細かさにするか(解像度)」を分けて考えると、迷いにくくなります。

解像度の意味や、Web・印刷に必要なピクセル数の目安は解像度とは?で解説しています。

横長・縦長・正方形の見分け方

アスペクト比は、左の数字(横)が大きければ横長、右の数字(縦)が大きければ縦長、同じなら正方形です。

「横:縦」の順番で書くと決まっているので、数字の大小を比べるだけで形が分かるためです。

たとえば16:9は横長、9:16は同じ形を縦に置いた縦長、1:1は正方形です。

同じように、4:3を縦にすると3:4、3:2を縦にすると2:3になります。

アスペクト比一覧

ここでは、よく使われるアスペクト比を、形の見本・ピクセル数の例・主な用途と合わせて一覧にします。

主なアスペクト比の早見表

まずは、それぞれの比率がどんな形になるのかを、高さをそろえた箱で見比べてみましょう。

21:9

16:9

16:10

3:2

4:3

1:1

4:5

9:16

次の表は、それぞれの比率の形と、ピクセル数の例、主な用途をまとめたものです。

アスペクト比	形	ピクセル数の例(横×縦)	主な用途
21:9	とても横長	2560×1080(正確には64:27)	横に長いパソコン用モニター(ウルトラワイド)など
16:9	横長	1920×1080、1280×720	動画・テレビ・プレゼン資料
16:10	やや横長	1920×1200	一部のパソコンの画面
3:2	やや横長	1200×800	デジタル一眼カメラの写真
4:3	少し横長	1600×1200、1024×768	スマートフォンのカメラの写真
1:1	正方形	1080×1080	SNSの投稿・プロフィール写真
4:5	少し縦長	1080×1350	縦長の写真・バナー
9:16	縦長	1080×1920	スマートフォンで見る縦長の動画

ピクセル数は一例で、同じ比率であれば、大きさは用途に合わせて自由に決められます。

カメラの比率は、Androidの公式サイトの解説で、スマートフォンでは4:3、デジタル一眼レフでは3:2が一般的と紹介されています。

16:9と4:3の違い

16:9と4:3はどちらも横長ですが、4:3のほうが正方形に近く、同じ横幅なら縦が高くなります。

横を1としたときの縦の長さが、16:9では約0.56、4:3では0.75と違うためです。

たとえば横幅1200ピクセルで作る場合、16:9なら縦は675ピクセル、4:3なら縦は900ピクセルになります。

16:9は横に広がる風景や動画、プレゼン資料に向き、4:3はスマートフォンのカメラの写真のように、上下にも余裕のある構図に向いています。

4:3の写真を16:9のスライドに貼ると、両側に余白ができるか、上下が切れてしまうので、使う場所の比率に合わせて選ぶことが大切です。

写真プリント(L判・2L判)の比率

写真をプリントするときによく使うL判と2L判は、3:2や4:3とぴったり同じ比率ではありません。

キヤノンの印画紙サイズの解説によると、L判は89×127mm、2L判は127×178mmで、計算するとどちらも約1:1.4になるためです。

サイズ・比率	短い辺を1としたときの長い辺
4:3	約1.33
2L判(127×178mm)	約1.40
L判(89×127mm)	約1.43
3:2	1.5

L判・2L判は3:2と4:3のあいだの比率なので、横長の写真を用紙いっぱいにプリントすると、3:2の写真は左右の端が、4:3の写真は上下の端が少し切れます(切らずに全体を入れる設定にすると、代わりに余白が出ます)。

端に大事なものが写っている写真をプリントするときは、注文の画面で切り取られる範囲を確認しておきましょう。

アスペクト比の計算方法と変更の仕方

ここでは、ピクセル数からアスペクト比を求める方法と、比率から縦や横の長さを求める方法、比率を変えるときの3つの方法を紹介します。

ピクセル数からアスペクト比を求める

ピクセル数からアスペクト比を求めるには、横と縦の数を、同じ数でこれ以上割れなくなるまで割っていきます(約分)。

比率は、両方を同じ数で割っても変わらないので、いちばん小さな整数の組み合わせにすれば、ほかの比率と見比べやすくなるためです。

横1920ピクセル・縦1080ピクセルの画像を例に、手順を見てみましょう。

横と縦の数を「1920:1080」のように並べて書きます。
両方を割り切れる数で割ります。
どちらも10で割れるので、192:108になります。
まだ割れる数があれば、続けて割ります。
4で割ると48:27、さらに3で割ると16:9になります。
両方を割り切れる数(1以外)がなくなったら完成です。
1920×1080のアスペクト比は16:9です。

両方を割り切れる数のうち、いちばん大きい数を「最大公約数」と呼び、最初からこの数で割れば1回で済みます(1920と1080の最大公約数は120で、1920÷120=16、1080÷120=9)。

最大公約数がすぐに分からないときは、上の手順のように小さな数で少しずつ割っていけば、同じ答えにたどり着きます。

割り切れないときは小数で比べる

約分してもきれいな数にならないときは、「横÷縦」を計算して、小数で近い比率を探します。

実際の画面や画像には、よく知られた比率にぴったり合わないピクセル数のものもあるためです。

たとえば1366×768は、約分すると683:384という分かりにくい数になりますが、1366÷768は約1.78で、16÷9の約1.78とほぼ同じなので、「ほぼ16:9」と考えられます。

アスペクト比	横÷縦
21:9	約2.33
16:9	約1.78
16:10	1.6
3:2	1.5
4:3	約1.33
1:1	1
4:5	0.8
3:4	0.75
9:16	約0.56

アスペクト比を「1.78:1」のように、縦を1としたときの横の長さで書くこともあり、この表の数値はその書き方とも対応しています。

横幅から高さを求める(高さから横幅を求める)

比率と片方の長さが決まっていれば、もう片方の長さは次の式で計算できます。

求めたいもの	計算式
高さ	横幅 × 比率の縦の数 ÷ 比率の横の数
横幅	高さ × 比率の横の数 ÷ 比率の縦の数

画像を作るときは、置く場所の横幅が先に決まっていることが多いので、この式で高さを出せば、比率どおりのサイズで作れます。

分かっていること	計算	答え
横幅1200px・16:9	1200 × 9 ÷ 16	高さ675px
横幅1080px・4:5	1080 × 5 ÷ 4	高さ1350px
高さ1080px・4:3	1080 × 4 ÷ 3	横幅1440px
横幅1000px・16:9	1000 × 9 ÷ 16	高さ562.5px(562か563に丸める)

答えが小数になったときは、整数に丸めて使います。

1ピクセルの違いは見た目にはほとんど分かりませんが、ぴったりの比率にしたいときは、横幅を割り切れる数(16:9なら16の倍数)にしておくと小数が出ません。

アスペクト比を変更する3つの方法

画像のアスペクト比を変えるには、「切り取る」「余白を足す」「引き伸ばす」の3つの方法がありますが、形をゆがめないのは切り取るか余白を足す方法です。

画像の中身は元の比率で作られているので、比率を変えると、どこかを削るか、何かを足すか、中身を変形させるかのどれかになるためです。

4:3の写真(見本A)を16:9に変えた場合を見比べてみましょう。

見本A:元の写真(4:3)

見本B:切り取る(上下が少し切れる)

見本C:余白を足す(両側に帯ができる)

NG 見本D:引き伸ばす(丸がつぶれて楕円になる)

切り取る(トリミング):画像の一部を切り落として、目的の比率にします。
形はゆがみませんが、端に写っているものは見えなくなります。
余白を足す:足りない部分に帯や背景色を足して、目的の比率にします。
画像は全部見えますが、帯の分だけ画像が小さく見えます。
引き伸ばす:画像を縦か横だけに伸び縮みさせて、目的の比率にします。
丸が楕円になったり、人の顔が横に広がったりと形がゆがむので、基本的には使いません。

写真の加工アプリや画像編集ソフトで「切り取り」「トリミング」と呼ばれている機能の多くは、比率を選んで切り取る方法です。

大事な被写体が切れないように、比率を選んだあとで切り取る範囲を動かして調整しましょう。

場面別のアスペクト比とサイズ

ここでは、動画・写真・SNS・Webサイトなど、場面ごとによく使われるアスペクト比と、サイズを決めるときの考え方を紹介します。

YouTubeの動画とサムネイル

YouTubeの通常の動画とサムネイルは16:9、ショート動画のサムネイルは9:16で作ります。

YouTubeヘルプの動画の解像度とアスペクト比のページでは、パソコンでのYouTubeの標準のアスペクト比は16:9とされています。

9:16の縦向きの動画をパソコンのブラウザで見る場合などは、動画と画面の比率に合わせて余白が追加されることがある、とも書かれています。

サムネイル(動画の一覧に表示される見出し画像)の推奨サイズは、YouTubeヘルプのカスタムサムネイルのページで次のように案内されています。

種類	アスペクト比	推奨の解像度(横×縦)
動画のサムネイル	16:9	3840×2160
ショート動画のサムネイル	9:16	2160×3840

どちらも横幅は最小640ピクセルとされていて、ファイルの大きさの上限は、パソコンとスマートフォンのどちらから設定するかで違います。

推奨サイズは変わることがあるので、作り始める前にヘルプのページで現在の値を確かめておきましょう。

カメラやスマホで撮る写真

写真のアスペクト比は、撮ったあとにどこで使うかから逆算して選ぶのがおすすめです。

撮影したあとで比率を変えると、切り取りや余白が必要になり、構図が崩れることがあるためです。

Androidの公式サイトの解説では、スマートフォンでは4:3、デジタル一眼レフでは3:2が一般的とされ、3:2はL判プリントに近い比率、16:9は動画やテレビ、広い風景の撮影に向く比率として紹介されています。

使い道	選びやすい比率
写真をプリントする	3:2または4:3(L判・2L判はその中間)
プレゼン資料や動画に入れる	16:9
正方形の枠に表示する(アイコンなど)	1:1
使い道がまだ決まっていない	カメラの標準の比率(スマホなら多くは4:3)のまま、被写体の周りを広めに撮る

多くのスマートフォンのカメラアプリでは、撮影画面で比率を切り替えられるので、機種の説明書やヘルプで切り替え方を確認しておきましょう。

使い道が決まっていないときに被写体の周りを広めに撮っておくと、あとでどの比率に切り取っても、大事な部分が切れにくくなります。

SNSに投稿する画像

SNSに投稿する画像は、サービスごとに対応している比率と、一覧や投稿画面での切り取られ方が違うので、投稿先の公式ヘルプで現在の仕様を確認してから作ります。

SNSの画像の仕様はアプリの見た目の変更に合わせて変わることがあり、少し前の情報が今は当てはまらないこともあるためです。

たとえばInstagramは、正方形だけでなく縦長や横長の写真も投稿できますが、プロフィールの一覧(グリッド)での表示のされ方はこれまでにも変わってきているため、この記事では具体的な数値は載せていません。

どのSNSでも共通して役立つのは、文字や顔など大事な要素を画像の中央寄りに置き、端が切れても伝わるように作ることです。

表示される場所の都合で切り取られても困らない安全な範囲を「セーフエリア」と呼び、その考え方はバナーの外側の余白とは?で解説しています。

リンクを共有したときの画像(OGP)

WebページのURLをSNSで共有したときに表示される画像は、OGP(Open Graph Protocol)という仕組みで、ページ側から指定します。

OGPは、ページのタイトルや説明文、画像などを、共有先のサービスに伝えるためのHTMLの書き方の決まりです。

OGPの公式サイト(英語)では、画像のURLをog:imageで、画像の横幅と高さをog:image:width・og:image:heightで伝えられると説明されていますが、推奨のサイズや比率は決められていません。

実際にどの比率で表示され、どこが切り取られるかは共有先のサービスごとに決まるので、主に共有されるSNSの開発者向けの案内を確認し、大事な要素は中央に寄せておきましょう。

Webサイトのメインビジュアル

Webサイトのトップに置く大きな画像(メインビジュアル)は、PCでは横長、スマートフォンでは縦長に近い比率で、別々に用意するのが基本です。

PCの画面は横長、スマートフォンの画面は縦長なので、PC用の横長の画像をそのままスマートフォンで表示すると、画像も文字も小さくなったり、大事な部分が切れたりするためです。

PC用とスマホ用の画像の組み立て方や、画面の幅に合わせて画像を出し分けるHTMLの書き方は、メインビジュアルとは?で解説しています。

スマートフォンの縦長の画面から先にレイアウトを考える進め方は、モバイルファーストとは?も参考にしてください。

Web制作でのアスペクト比の扱い方(CSS)

ここからは、Webサイトを自分でコーディングする人向けに、CSSでアスペクト比を扱う2つのプロパティを紹介します。

CSSは、Webページの見た目(色・大きさ・配置など)を指定するための言語で、プロパティはその指定の項目のことです。

aspect-ratioで比率を固定する

CSSのaspect-ratioプロパティを使うと、横幅が変わっても、指定した比率を保ったまま高さが自動で決まる箱を作れます。

MDNのaspect-ratioのページによると、値は16 / 9のように「横 / 縦」の順にスラッシュで区切って書き、画面の大きさが変わっても、ブラウザーが比率を保つように大きさを調整します。

たとえば、YouTubeなどの埋め込み動画(iframe)を、画面の横幅いっぱいに16:9で表示するには、次のように書きます。

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

横幅を100%、高さをauto(自動)にしておくことで、横幅に合わせて高さが16:9になるように計算されます。

MDNでは、横幅と高さの両方を自動以外の値で指定すると、aspect-ratioは効かないと説明されているので、どちらか一方は自動にしておきましょう。

object-fitで画像の収め方を決める

画像の比率と、表示する枠の比率が違うときは、CSSのobject-fitプロパティで「切り取る」「余白を残す」などの収め方を指定します。

何も指定しないと、初期値のfillが使われ、画像が枠に合わせて引き伸ばされてしまうためです。

MDNのobject-fitのページをもとに、主な値をまとめると次のとおりです。

値	収め方	この記事の見本でいうと
`fill`(初期値)	枠いっぱいに合わせて引き伸ばす	見本D(引き伸ばす)
`contain`	比率を保ったまま、全体が枠に収まるように縮める	見本C(余白を足す)
`cover`	比率を保ったまま枠全体を埋め、はみ出た部分を切り取る	見本B(切り取る)
`none`	大きさを変えない	―
`scale-down`	`none`と`contain`のうち、小さく表示されるほうになる	―

たとえば、比率がばらばらの写真を、記事一覧のサムネイルとしてすべて16:9にそろえて表示するには、aspect-ratioとobject-fit: coverを組み合わせます。

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

このCSSを、<img class="thumbnail" src="photo.jpg" alt="写真の説明">のような画像に指定すると、どの写真も16:9の枠に、中央を基準に切り取られて表示されます。

切り取る位置を中央以外にずらすobject-positionや、画像の大きさをそろえるほかの方法は、CSSで画像サイズを合わせる方法で詳しく解説しています。

カードを2列・3列に並べる一覧では、画像の比率をそろえておくと、段組み(カラム)の高さがそろって整って見えます(段組みの考え方は2カラムとは?で解説しています)。

アスペクト比で失敗しないためのポイント

最後に、アスペクト比を扱うときに起こりやすい失敗と、よくある質問をまとめます。

注意点・よくある間違い

画像の横幅だけを変えて、形がゆがんでしまうことがあります。
大きさを変えるときは、縦と横を同じ割合で変え、比率を変えたいときは切り取るか余白を足しましょう。
比率を変えるために切り取ったら、文字や顔など大事な部分が切れてしまうことがあります。
大事な要素は中央寄りに置き、切り取る範囲を確かめてから書き出しましょう。
比率さえ合っていれば、小さな画像を大きく表示しても大丈夫だと思ってしまうことがあります。
比率が同じでもピクセル数が足りないと、拡大したときにぼやけるので、表示する大きさに見合った解像度で用意しましょう。
「16:9」「21:9」などの呼び名を、ぴったりその比率だと思い込んでしまうことがあります。
1366×768や2560×1080のように、実際のピクセル数は近い比率をまとめて呼んでいるだけのこともあるので、正確なサイズはピクセル数で確認しましょう。
CSSで横幅と高さの両方を指定して、aspect-ratioが効かないことがあります。
比率を保ちたいときは、横幅か高さのどちらかをautoにしましょう。

よくある質問

Q. 16:9と9:16は同じもの?
A. 同じ形を横に置いたか縦に置いたかの違いで、向きが逆です。
アスペクト比は「横:縦」の順で書くので、16:9は横長、9:16は縦長を表します。
Q. 写真のアスペクト比はどれがおすすめ?
A. 使い道によって変わります。
プリントするなら3:2や4:3、動画やプレゼン資料に入れるなら16:9が合わせやすいでしょう。
使い道が決まっていなければ、カメラの標準の比率のまま、被写体の周りを広めに撮っておくと、あとから切り取りやすくなります。
Q. スマホの画面のアスペクト比は?
A. 機種によって違い、16:9とは限りません。
Webサイトを作るときは特定の比率に決め打ちせず、画面の幅や高さに合わせて伸び縮みするように作るのが基本です。
画面の大きさを基準にサイズを決めるCSSの単位は、CSS ビューポート単位vw、vh、vmin、vmaxの完全ガイドで紹介しています。
Q. アスペクト比を手早く計算する方法は?
A. 横と縦のピクセル数を、両方を割り切れる数で割れなくなるまで割れば求められます。
片方の長さを求めたいときは、「高さ=横幅×縦の数÷横の数」の式を使います。
電卓やパソコンの計算機アプリがあれば、それだけで計算できます。