てもとツール
ツール紹介

縦横比から画像・動画サイズを逆算する

16:9 などの縦横比から幅と高さを求める手順を紹介します。割り切れないときに丸めた寸法がどれだけずれるか、枠に入れたときの余白が何 px になるかまで確かめる方法も説明します。

公開読了目安 約5分

この記事の要点

  • 幅か高さの片方を入れると残りが出る
  • 割り切れないときは丸めた事実とずれを画面に出す
  • 幅と高さが両方とも整数になる近いサイズが並ぶ
  • 動画向けに 2・4・8 の倍数へそろえた候補も出る
  • 入力した数値はブラウザの中だけで処理される
目次

「16:9 で幅が 1000px なら高さは何 px か」を知りたいときは、アスペクト比計算ツールに数値を入れてください。答えは 562.5 で、整数にすると 563 になります。

アスペクト比計算ツールの初期画面。比率を調べる・サイズを逆算する・枠に合わせるの 3 つのボタンが並んでいる

「たぶん 16:9」で進めると後で困る

画像や動画のサイズは、比が少し違っても見た目ではまず分かりません。ところが並べて置いた瞬間に、右端だけ数 px はみ出す形で表面化します。

比が合っていない原因の多くは、割り算の端数です。16:9 の高さは幅の 16 分の 9 なので、幅が 16 の倍数でないと必ず小数になります。

多くの計算ツールはこの小数を黙って四捨五入して、整数だけを返します。返ってきた数字がどれだけ元の比からずれているかは、画面のどこにも出ません。

まず幅と高さから比を確かめる

上部の「比率を調べる」を選び、幅と高さを入れてください。最小整数比・小数比・向き・総画素数が同時に出ます。

1920 と 1080 を入力した画面。最小整数比 16 と、定番比とぴったり一致した旨が表示されている

1920 × 1080 なら 16:9 です。定番の比とぴったり合ったときは、その名前と用途も一緒に表示されます。

CSS の指定に使う aspect-ratio: 16 / 9; もそのまま出るので、コピーして貼り付けるだけで済みます。

定番比に「近いだけ」の寸法を見分ける

ここが手計算では気づきにくいところです。1366 × 768 の最小整数比は 683:384 で、16:9 ではありません。

1366 と 768 を入力した画面。最小整数比 683 と、16 から 0.0488% ずれている旨が一覧で表示されている

683:384 という数字だけを見せられても、合っているのかどうか判断できません。そこで近い定番比を、ずれの小さい順に 3 つ並べる形にしました。

上の画面では 16:9 から 0.0488% のずれと出ています。ノート PC の画面でよくある寸法で、動画を全画面にすると細い帯が出る理由もここにあります。

割り切れないときは丸めた内訳が出る

「サイズを逆算する」を選び、比率のボタンから 16:9 を押します。基準にする辺(幅か高さ)を決めて、その値を入れてください。

16 で幅 1000 を入力した画面。求めた高さ 563 と、丸めの内訳・ぴったり合う近いサイズが表示されている

幅 1000 なら高さは 562.5 です。画面には丸めた 563 が主役として出ますが、その下に内訳が続きます。

  • 厳密な値 562.5 px → 丸めて 563 px(+0.5 px)
  • 丸めた後の実際の比 1.7762(目標 1.7778)
  • 目標の比からのずれ 0.0888 %

さらに下には、幅と高さが両方とも整数になる近いサイズが 2 つ並びます。小さい側が 992 × 558、大きい側が 1008 × 567 です。

比をきっちり合わせたいなら、この 2 つのどちらかを選ぶのが早道です。1000 という半端な幅にこだわる理由がなければ、8 px 動かすだけで済みます。

動画に書き出すなら偶数にそろえる

「動画向け: 幅と高さを偶数にそろえる」を開くと、2・4・8 の倍数それぞれの候補が出ます。

偶数そろえの候補を開いた画面。2 の倍数・4 の倍数・8 の倍数の寸法とずれが並んでいる

なぜ偶数かというと、動画の一般的な保存形式が色の情報を縦横それぞれ半分に間引いて記録するからです。幅か高さが奇数だと、書き出しの段階でつまずくことがあります。

16:9 の幅 1000 なら、2 の倍数は 992 × 558、4 と 8 の倍数はどちらも 1024 × 576 になります。いずれも比はぴったり 16:9 で、ずれは 0 です。

ぴったりの解が無い比のときは、いちばんずれの小さい寸法とその数値を出します。近い値へ黙って寄せることはしません。

使用例

たとえば、社内向けの操作説明動画を作っている担当者を想像してください。素材の画面録画を書き出そうとしたら、幅が半端な値になっていて設定でつまずきました。

録画の幅は 1000 px でした。16:9 に合わせた高さは 562.5 px なので、そのままでは指定できません。

そこで偶数そろえの候補を見て、1024 × 576 を選びました。比はぴったり 16:9 で、幅も高さも 8 の倍数です。

書き出しの設定でつまずくこともなくなり、資料に貼ったときの見た目もそろいました。半端な幅に合わせ続けるより、近い定番サイズへ寄せるほうが早いと分かった場面です。

枠に入れたときの帯の幅を先に知る

「枠に合わせる」を選ぶと、元のサイズと枠のサイズから 2 通りの結果が出ます。枠に収める形と、枠を埋める形です。

1920×1080 を 1080×1350 の枠に合わせた画面。収めると上下に 371px の余白、埋めると左右に 660px のはみ出しと表示されている

横長の動画を縦長の枠に入れると、収める形では 1080 × 608 になり、上下に 371 px ずつの余白が出ます。これがいわゆる上下の帯です。

埋める形なら帯は消えますが、2400 × 1350 まで拡大されて左右が 660 px ずつ切れます。どちらを選ぶかは、切れて困るものが端にあるかどうかで決まります。

半端な入力は連結せずエラーにする

19 20 のように数字のあいだへ空白が入った入力は、1920 とは読みません。読み替えて答えを返すと、入力ミスがエラーにならないまま先へ進んでしまうからです。

桁区切りのカンマは、1,920 のように 3 桁でそろっているときだけ外します。19,20 のような並びはエラーにして、読めなかったことを画面で知らせます。

全角の数字とコロンは半角へ寄せて読みます。192016:9 をそのまま貼り付けても計算できます。

関連するツール

まとめ

縦横比の計算そのものは掛け算と割り算だけです。難しいのは、割り切れなかったときにどう扱うかという判断のほうです。

このツールは丸めた事実とずれを毎回画面に出し、比がぴったり合う近いサイズも並べます。数字を見てから決められるので、後で並べ直す手間が減ります。

入力した数値はブラウザの中だけで処理されるため、公開前の企画の寸法もそのまま扱えます。

あわせて読みたい

同じテーマ・関連ツールの記事です。