デザイン上でよく使われるアスペクト比（縦横比率）。なんとなく言葉としては理解しているんだが実際の形状を並べて一眼で比較できるよう、一覧にしてみた。
【目次】
- 主なアスペクト比の一覧
- アスペクト比の種類
- スクエア(1:1)
- 白銀比(1.414:1)
- 黄金比(1.618:1)
- デジカメ4:3(1.333:1)
- デジカメ3:2(1.5:1)
- デジカメ16:9(1.777:1)
- アスペクト比順で並べ替えててみる
- 比率を保ったトリミングにも活用ください
- アスペクト比ジェネレーターを作りました！
- 最後に
主なアスペクト比の一覧
最初にドーンとお見せします。こちらです。どうぞ！
そもそも「アスペクト」とは何か？辞書で見ると「外観、様相」とのことです。「アスペクト比」は外観を比較する、ということなんですね。
アスペクト比の種類
上の図で取り上げたアスペクト比はこちらです
- スクエア(1:1)
- 白銀比(1.414:1)
- 黄金比(1.618:1)
- デジカメ4:3(1.333:1)
- デジカメ3:2(1.5:1)
- デジカメ16:9(1.777:1)
このうち一番上の「スクエア」は正方形。縦長、横長の方向性を持ちません。
「白銀比」「黄金比」は「貴金属比」と呼ばれ、古くからあるアスペクト比です。*1
「4:3」「3:2」「16:9」は写真や映像によく使われるアスペクト比です。
ややこしいのは貴金属比は「1.xx:1」と「1」を基準にしているが、写真や映像は「4:3」など整数で比較している部分です。
今回はカッコの中で全て「1」を基準にする形で統一しました。
スクエア(1:1)
スクエアは正方形。短辺、長編の違いがない1:1。縦横の方向性を持ちません。
レコードジャケット、CDジャケットなどは商品が円盤のため、伝統的にスクエア型デザインです*2。 また、インスタのインスパイアになったポラロイドカメラもスクエアです。
白銀比(1.414:1)
次は白銀比。比率は短辺側1に対して長辺側が約1.4です。
白銀比日本の印刷物の用紙規格であるA規格、B規格と説明した方がわかりやすいですね。この比率の紙は半分に切っても永久に縦横比率が変わらないため、印刷で扱いやすいのです。*3
（2021/03/03追記）
メモ：短辺側を1とした場合の比率 → 1:0.707
黄金比(1.618:1)
次は黄金比。比率は短辺側1に対して長辺側が約1.6です。白銀比より縦長ですね。
古くから西洋美術では美しいプロポーションと言われてきました。自然界に存在する巻貝の模様やヒマワリのタネなどの螺旋状の成長線である「フィボナッチ数列」*4と一致すると言われています。
（2021/03/03追記）
メモ：短辺側を1とした場合の比率 → 1:0.618
デジカメ4:3(1.333:1)
ここからデジカメのアスペクト比。最初は4:3。短辺側1に対して長辺側が約1.3です。白銀比の約1.4よりも正方形に近いですね。
アナログ時代のテレビはこの比率でした。DVDやコンパクトデジカメなど古くからある機器も同じです。
（2021/03/03追記）
メモ：短辺側を1とした場合の比率 → 1:0.75
デジカメ3:2(1.5:1)
次は3:2です。短辺側1に対して長辺側が1.5。きれいに割り切れます。白銀比（約1.4）と黄金比（約1.6）の間くらいの比率ですね。
この比率は一眼レフ35mmフィルムと同じ比率で、現在のデジタル一眼レフも同じです。
（2021/03/03追記）
メモ：短辺側を1とした場合の比率 → 1:0.666
デジカメ16:9(1.777:1)
最後は16:9。短辺側1に対して長辺側が約1.7。黄金比（約1.6）よりも長い比率です。
一番横長ですね！これは昔の映画の比率で、ハイビジョンテレビやブルーレイディスクも同じです。
なお、今の映画館の「シネマスコープ」は12:5（2.35:1）で、なんと長辺側が2倍を超えています！！
ちなみに日本の和室の「畳」は2:1、つまりスクエアちょうど2枚分です。四畳半の半畳がぴったりハマるのはそのためです。
（2021/03/03追記）
メモ：短辺側を1とした場合の比率 → 1:0.562
アスペクト比順で並べ替えててみる
先ほどの一覧を縦横比順で並べ替えるとこうなります。
- スクエア(1:1)
- デジカメ4:3(1.333:1)
- 白銀比(1.414:1)
- デジカメ3:2(1.5:1)
- 黄金比(1.618:1)
- デジカメ16:9（1.777:1)
- 畳(2:1)
こうして見ると、1.3から1.7まで0.1キザミにならんでいますね。
1.1〜1.2はスクエア（1:1）に近すぎ、1.8〜1.9は畳（2:1）に近すぎて、比率としては微妙なのかもしれません。
最初の図を「左上→右下」の順番で見ていくとアスペクト比順になります！
比率を保ったトリミングにも活用ください
写真のトリミングをする時に、元のアスペクト比を保ちたいときがあります。フリーハンドでドラッグすると比率がわからなくなりますよね。
そういうときは写真画像の「長辺側÷短辺側」とやると短辺側「１」に対して長辺側が「1.333」などの比率を割り出すことができます。
縦横比が割り出せたらあとは「1000px-1333px」とか「100px-133px」とかわかりやすい数字の矩形を作って、それを拡大してトリミングのマスク枠にするといいと思います。
アスペクト比ジェネレーターを作りました！
※2021/05/16作成
本記事のアスペクト比を変更することによって画面上の画像がどのような見え方になるかを確認できる「アスペクト比ジェネレーター」を作りました！
作ったものこちら
※参考：アスペクト比ジェネレーター
使い方
ソースコード
※参考：GitHub - ryo-i/aspect-ratio-generator
コードの詳細まとめ
※参考：【React】アスペクト比ジェネレーターを作った（画像の縦横比率を計算するツール） - クモのようにコツコツと
最後に
今回はFigmaで図を作りましたー。CodePenでコーディングをするのが楽でついついコードネタが増えてしまいますが、だんだんとデザインネタを増やしていきたい！
デザインシリーズ、次回は「黄金分割」など画面の分割ネタを扱いたいと思います。あと、配色ネタの構想も練っています。私が愛してやまない「Adobe Color CC」を使って。
なお、今回の写真の元ネタはインスタです。写真や図をマイペースにあげています。
それではまた！
※参考：「デザインの基本」記事まとめ
qiita.com
