画像サイズの比率計算方法

儂は数字が嫌いです。数字が嫌いだけども、必要な数値の内訳がよくわからないのは気持ち悪いという面倒な人間なので調べた。
だから間違ってたら儂のせいなのでごめんねと最初に言っておく。
数学的に正しい説明とかもできないんで、計算は合ってても表記方法に問題があるかもしれない。
完璧な回答解説じゃなくて自分で理解する手助け程度にしてください(重要な文言)

画像(イラスト)のサイズの比率計算法を知ってどうするのか?
イラストではよく黄金比や白銀比とかいう、見栄えがよくバランスのいい比率の話とかあるじゃないっすか。
または、Twitterでは画像が16:9比率のサイズだと、トリミングされずに表示されるらしいとか。じゃそれキャンバスサイズいくつにすりゃええの、と思ったとき。
計算した答えが知りたいだけなら数値を出してくれる計算サイトはありますね。便利。助かる。
だけど同時に、なんでその数値になるのか?がわからん、それは自分の中で気持ち悪い。そしてわからんから応用はできない。
わかれば、便利そうな情報と出会った時自分で使えるかなと。
応用機会はいつになるか知らんが、とにかく今、この、わからんモヤモヤを解消するのが第一目的です。

おまえに説明されなくても知ってるよっていう人はここには来ないと思いますが、興味もあるし面白い世界史以外は学校の勉強ぜんぶ忘れました、っていう人の参考になれば嬉しいですね(それお前やん)

まず最初に、計算方法を書いておきます。

すでに決まった比率から画像サイズを決める方法

例:16:9
まず長い辺か短い辺どちらかのサイズを決めます。
ここでは長い辺を1280とします。
長い辺が1280で16:9比率の画像サイズにしたい場合
1280 ÷ 16 = 80
80 × 9 = 720
なので、サイズは 1280 x 720

例:1:1.618 (黄金比率)
短い辺が1280で1:1.618比率の画像サイズにしたい場合
1280 × 1.618 = 2071.04 (約2071)

長い辺が1280で1:1.618比率の画像サイズにしたい場合
1280 ÷ 1.618 = 791.10… (約791)

なので、サイズは 1280 x 2071 または 1280 x 791

画像サイズから比率を割り出す方法

例:1000 x 1400 (1000:1400)
比率を使うにはまず簡素化します。
比率を簡素化するには各数値を最大公約数で割る。
(最大公約数は素因数分解などで調べることができますが、大きい数値の場合、一瞬でやるのは無理っぽいので、最大公約数を計算してくれるサイトを使ったほうが早いです)
1000 と 1400 の最大公約数は 200

1000 ÷ 200 = 5
1400 ÷ 200 = 7

1000 x 1400 ( 1000:1400) の比率を簡素化した数値は 5:7

です。以上の方法を応用すれば16:9以外の比率の画像サイズも決定できるし
自分がよく使ってるキャンバスサイズの比率を出して、その同じ比率かつ違うサイズのキャンバスサイズを決定することもできます。
5:7比率で短い辺が3600としてサイズを決める場合

3600 ÷ 5 = 720
720 × 7 = 5040
サイズは 3600 x 5040

になります。
だからそもそもなんでそうなるのかわかんねーんだぜ。
という、つまり儂のような数字を見ると死にたくなるような人でもわかるように、以下、詳しく説明を書きます。わかるように、書いたつもりです。
でも考え方は人ぞれぞれなのでわからなかったら最後にリンクを貼った参考サイトを読んで自分なりに考えれば、わかるようになるとは思います。
モヤモヤが無くなるといいよね。

目次


比率とは

二つ以上の数値を比べた時の割合。

よく見かけるのは、料理でだし汁4:醤油1とか。
儂が料理の紹介でこういう数字を見たとき思うのは、それ実際何ml基準なん?という疑問。それによって全然変わっちゃうじゃん???という。
たぶん映像で大さじで入れてれば大さじ(=15ml)基準であろうし、文章で書いてるならどっかにその4が大さじ4なのか400mlなのかとか書いてるかもしれない。
それをそのまま言えばいいのでは…?

とにかく
大さじ、ml、または人数など、なんの数を基準に説明してるのか?
これがわかれば、比率はその数がどれだけあり、どういうバランスであるかを言ってるだけ。
だから混乱する必要ない、と。

その数がなにを基準にした数でどれだけあり、どういうバランスか
この結びつきを守れば、比率を増やしても減らしても同じバランスを維持できる、と。
たとえばさっき書いた調味料の例を使えば、だし汁大さじ4:醤油大さじ1 はだし汁が大さじ4杯、醤油が大さじ1杯あり、このバランスを守れば増やしても減らしても醤油味のだし汁だが
だし汁大さじ1:醤油大さじ4になってしまったらだし味の醤油になってしまう。
てことかな。
だから比率では、なにを基準にした数でどれだけあり、どういうバランスかを把握して結びつきを守るのが大切ということだ。


比率から画像サイズを決定する

黄金比率とか16:9の比率でサイズを作成するってのはどういうことか。

16:9はサイズを表してる数値
長い辺:短い辺が16と9の割合ですよってことっすね。
だから例えば横1280で16:9のサイズにしたかったら
1280 ÷ 16 = 80
80 × 9 = 720
と計算して1280 x 720とすればいいわけです。

たぶんこれが一番早いです。
バランスを保ちながら増やしたり減らしたりするためには比率に同じ数を掛ける/または割ることになりますね。
今回は16の側を1280のサイズにしたい。つまり増やしたいので、16と9の両方に同じ数を掛けたい。
16側が1280とすると、それが16にいくつを掛けた数なのか?がわかれば、その数を9にも掛けることができる。
16にいくつを掛けた数なのかは、言い換えれば16が何個あれば1280になるのか?
それを知るには1280を16個に分ければいい。
だから16個に分けるために16で割ります。

で、80でしたと。
ていうことは、16と9の両方に掛ける同じ数は 80 ということです。
なので80を9に掛ける。すると720。

だから横が1280で16:9の画像サイズは
1280 x 720
てことです。

もちろん設定するサイズによって割り切れず小数点が出る場合もありますが、そこは四捨五入すればいい。
人間の目ではそんなミリ単位わからないし約16:9であればいいので。

この計算方法じゃないかもだが、計算サイトではこれを自動でやってくれてるということっすね。

16:9でよく使われるサイズはなぜこれなのか

16:9でよく使われるサイズとして例に挙がる
1280 x 720 ピクセル
1920 x 1080 ピクセル

これらはテレビの規格でHDとFull HDと言われるサイズと同じです。YouTubeの画質設定で720pとか1080pとかできるけど、あれも同じもんだと思う。
だからみんなが慣れてるサイズてことですね。
(さっきの計算例に、すでに規格として存在する1280 x 720を使ったのは、1280×720が実際に16:9であるとわかりやすくするためにしました)

Twitterでトリミングされない画像サイズまでなぜ16:9なのかは理由は知らないが、そういうことらしいんで
1280 x 720 とか 1920 x 1080 というサイズでイラストを描けばトリミングされないようです。

ただイラストとかは自分が普段描いてるサイズというもんがあるんで、微調整したいぜ、だけど計算サイトは使わないぜっていう謎の時は上記のように計算できるというわけで。

ちなみに黄金比率の場合

黄金比率は1:1.618なので
1280 × 1.618 = 2071.04 (約2071)
または
1280 ÷ 1.618 = 791.10… (約791)
と計算して 1280 x 2071 または 1280 x 791
とできます。

なんでこうなるか、なんで1:1.618の1は使わないのか

さっき16:9の時に書いた文は↓これですが

今回は16の側を1280のサイズにしたい。つまり増やしたいので、16と9の両方に同じ数を掛けたい。
16側が1280とすると、それが16にいくつを掛けた数なのか?がわかれば、その数を9にも掛けることができる。
16にいくつを掛けた数なのかは、言い換えれば16が何個あれば1280になるのか?
それを知るには1280を16個に分ければいい。
だから16個に分けるために16で割ります。

これを1:1.618に置き換えると↓そりゃ1は使わねーわというのがわかります。

今回は1の側を1280のサイズにしたい。つまり増やしたいので、1と1.618の両方に同じ数を掛けたい。
1側が1280とすると、それが1にいくつを掛けた数なのか?がわかれば、その数を1.618にも掛けることができる。
1にいくつを掛けた数なのかは、言い換えれば1が何個あれば1280になるのか?
それを知るには1280を1個に分ければいい。
だから1個に分けるために1で割ります。

くどい。アホ文になっちまう。いや1は1個しかねーだろと。
さっきは16個に分けたいから16で割ったけど、1個しかなければ分けられないから割る必要はないわけっすね。

だから1に対応する数がいくつか決まれば、その数が1.618に掛ける数になるので、たとえば1280なら、1280を1.618に掛ければいいだけ
1280 × 1.618 = 2071.04 (約2071)
ということです。

これは短い方が1280だったらという話で
長い方が1280ならこんどは1.618側が1280になる。
てことは1.618が何個あれば1280になるのか?
1280 ÷ 1.618 = 791.10… (約791)

つまり1と1.618 両方に約791 を掛けた ものが ??? x 1280
この場合も当然計算するまでもなく1に対応する数は約791なので
791 x 1280
になるわけです。

 


画像サイズから比率を割り出す

どういう需要があるのか知りませんが、自分で知りたかったので調べました。

結論から言えば、元の数値を簡素化する。
ということらしい。
やり方は、元の各数値をその最大公約数で割る。
そして簡素化できた比率を他のサイズにも適用したい場合、比率から画像サイズを決定する、で説明した方法で計算すればよい。

例: 1000 x 1400 ( 1000:1400) という比率の簡素化

1000 と 1400 の最大公約数=200

1000 ÷ 200 = 5
1400 ÷ 200 = 7

1000 x 1400 ( 1000:1400) の比率を簡素化した数値は 5:7

て感じです。

比率というのは最初に言ったとおり
二つ以上の数値を比べた時の割合
のことなので大さじ1:大さじ2がすでに比率であるように
1000 x 1400 のキャンバスサイズの絵があったら
1000:1400がその絵の比率というのも正しいわけです。

ただこれじゃ大さじとかの時と違って数が大きすぎるので、他のサイズへの応用が難しすぎる。
16:9では16と9が何個あるのか?と説明しましたが、1000が何個あるのか、とか言い出したら数字が膨れ上がりすぎる。
だから小さくして、16:9のように使いやすくしたい、ていうことだよね?(聞くな)

だから 1000 x 1400 であれば
1000 と1400 をその最大公約数(複数の整数に共通する約数で一番大きい数)で割るのです。ハイ。

約数は整数を割り切れる整数のこと。

1000 と 1400 を割り切れる数の中で一番大きい数を探して、それで割るっつうことで。

はっきり言ってこの約数を探すのは泥沼化する。
色々方法があるようですが、まだ小さい数ならいいけど1000単位とかになると生きて帰って来られないかもしれない。そんなときは、入力した数の約数をすべて出してくれるサイトがあるんだぜ。
ていうかもっと言えば同じサイトで最大公約数をダイレクトに出せるページがあるぜ。すごいぜ。これなら一瞬だぜ。

最大公約数(2つの数)|約数・倍数の計算|計算サイト

それでも最大公約数も自分で計算したい!
とかは
正直考えないほうがいいな…(^o^)
スイスイ割り切れる数ならいいですが、数値が大きくてスイスイ割り切れない場合は死ぬ。10の位までなら全然いいと思いますけどね。それ以上は死ぬぞ。

約数を漏れなく簡単に見つける方法|小学生でも素因数分解ができると便利!|数学FUN

このサイトに書いてある方法がわかりやすいですが、正直こればかりは計算システムを使ったほうがいいなと自分で計算することを実践して思いました。死ぬぞ。

最大公約数を求める時には素因数分解を使う方法があり、これが一番早いらしいが自分にはむじゅかしいでしゅ、と思いました。

素因数分解は自然数を素数で割り続けて(答えが1になるまでやる)、割るのに使った素数を積のかたちにすること。
素数は自然数のなかで、1とその数自体でしか割り切れない数(素数は割る数字が1とその数自体という二つになるものなので、1は素数ではない)

素因数分解で積を出すまではまぁいいとして約数を出すやり方が儂にとっては非常に5000%やりにくかった。
なので10とか100の位程度だったら1から順に割り切れる数を探していくほうがわかりやすかった。時間はかかるかもだが。

というわけなので1000と1400の最大公約数を計算サイトでババンと出していただくと、最大公約数は200。

1000 ÷ 200 = 5
1400 ÷ 200 = 7

なので、1000 x 1400 ( 1000:1400) の比率を簡素化した数値は 5:7です。

これで簡素化した比率が出たので、もしこの比率を他のサイズにも適用したい場合
たとえば短い辺が3600で5:7のサイズを計算する場合

3600 ÷ 5 = 720
720 × 7 = 5040
3600 x 5040

とか。このようにして数値を出せるわけです。自分で。

ということは計算サイトでできるが…
最初にも言いましたがそういうことなんですが。。
5:7とかいう変な比率の計算サイトはないかもしれないがわからん。

ただ、このように大まかなことがわかってれば、気持ち悪さが減るし(重要)
もし計算サイトで出せない数値があっても、なんとか自分で計算できるかもしれん。できんかもしれん。
自分がよく使ってるキャンバスサイズの比率を出せるのはけっこう便利だと思うんだが。
まあ、頭の体操にはなりましたよね(永眠)

今回考えた基本の計算方法はたぶん間違ってないと思いますが、それをもとにほぼすべて手動で計算してるので計算ミスがあったらごめんね。

 


参考にしたサイト

いろいろわかりやすく書いてくれている人たちが居て感謝。ありがとうございます。
何回も言ってるとおり、間違いがあれば儂の勘違いのせいだと思うんで、そこはすみません。

規格と計算サイト

計算のやり方についてのサイト

投稿者: Ugo

Posting my original novel. Eager for the world of other sun.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA