2019年4月13日土曜日

画像に最適な大きさとアスペクト比を見つけてしまった

最適な画像サイズを追っててとんでもないものを見つけてしまった

どうしよう

ウェブ画像におすすめの大きさと縦横比

経緯

はじめに用いていたのは、黄金比。特に気に入ったわけではなく、何か基準が欲しかったので採用していました。

1:(1+√5)/2 ≒ 1:1.618

よく使われる比で表すと 16:9 が、まあまあ近い数値です。

最近気が付いたのは、黄金比は無理数であること。

ディスプレイは点の集まりで、1以上の整数なので正確な黄金比にはならず、必ずブラウザにより小数点以下が丸められる結果になります。

疑問を感じはじめていたころ、レスポンシブの可変幅に適した「約数の多い数というのはあるのかな?」と、なにげなく調べてみると…、なんとありました

高度合成数

高度合成数 - Wikipedia

高度合成数(こうどごうせいすう、英: highly composite number)とは、自然数で、それ未満のどの自然数よりも約数の個数が多いものをいう。

ちょっと見てみると、敬愛する数学者ラマヌジャンさんの考案とのことで、俄然興味を惹き付けられました。

1200 px あたりでうまい数字はないものかと眺めていると、良さそうなペアを発見。

1260 × 840 px

3 : 2 です。写真でよく使われているアスペクト比の、16:9、4:3 とならび 3:2 もよく使われるのでぴったりです。

1260 px は、1200 px 以上であることからきています。

Facebook の og:imageGoogle 構造化データの Article (記事)Google Discover で推奨される画像は全て、1200 px 以上です。

より小さい数と大きい数

1260 px だとファイルサイズが大きくなりすぎる場合もあるので、少し小さいセカンダリを探してみるも、こちらは少し難しい。半分にした、630 × 420 px は高度合成数ではないんですね。不思議です。

() は高度合成数ではない数字です。

1260 × 840 = 3:2
840 × (560) = 3:2
720 × (480) = 3:2
360 × 240 = 3:2
240 × (160) = 3:2
180 × 120 = 3:2

360 x 240 px がサムネイルなどに使えそうですが、丁度よい縦横幅が中々ありません。

840 px と 720 px が 1:1 の画像には使えそうです。

より大きいものになると、1680 × 1260 = 4:3 がありますね。

1680 × 1260 = 4:3
1260 × (945) = 4:3
840 × (630) = 4:3
720 × (540) = 4:3
360 × (270) = 4:3

もっと大きくても構わないなら、よいのがあって

2520 × 1680 = 3:2

2520 × 1260 = 2:1

1 から 10 のうち、8 を除いた全ての整数で割り切れる最小の数: 1260
1 から 10 の全ての整数で割り切れる最小の数: 2520

2520 px はかなり大きいですが、高解像度写真にはこれ以上のものがゴロゴロ存在します。

ウェブ画像でも、ロゴなど縦横を大きくしてもファイルサイズがさほど変化しない種類の画像が結構あるので、それ程、現実離れした数字ではないです。また、ベクトルの SVG は、この大きさと比に合わせてみると面白いでしょう。

ソーシャルメディアでの見え方

1260 x 840 px

1260 x 630 px (Twitter - summary_large_image)

1260 x 660 px (Facebook - og:image)

少し感じが変わりますね。Padding は 100 px ほど余裕をみるのが良さそうです。

メージャーなアスペクト比の使いどころ

16 : 9

16 : 9 = 1 : 0.5625

16 : 9

横に長い。幅100% でも高さが少なく、ページ先頭のアイキャッチに向いている。また、ワイド画面は他の比率とは、ひと味違った雰囲気がだせる。

ページ本文内での使用は他の比率が多くなりそうですが、コンテンツの区切りで一休みする時などにも使えそうです。

Facebook や Twitter のシェア画像にそのまま転載しやすいのもメリット。

3 : 2

3 : 2 ≒ 1 : 0.67

3 : 2

一番バランスが良く、どこでも使いやすい。アイキャッチには少し向かない感じはするが、使っても問題ない程度。

4 : 3

4 : 3 = 1 : 0.75

4 : 3

3 : 2 より高さがあり画面を占拠するので、ページ内では気持ち使いにくいけど、スマホ表示でボリュームを出せる。両方とも汎用性が高いと思う。

幅一杯のアイキャッチにはあまり使わないかも。この辺はページのデザイン次第といったところ。

1 : 1

1 : 1

本文以外では使いにくいけど使用頻度は高い。

横一杯に広げると他のアスペクト比より縦に大きく場所をとるのでアイキャッチ画像には全く向かない。

ただ、1 : 1 は SEO 対策において引用などで非常に重要な役割があり、アイキャッチ画像には向かないと知りつつ、大きな画像をファーストビューの目立つ場所に置いておきたいジレンマがある。

黄金比と白銀比

黄金比

1.618 : 1

spoo

美しい比率で描かれたスプー

白銀比

1.414 : 1

有名な画伯の絵は白銀比だった

黄金比は Webデザインに使えるのか?

黄金比が美しいかは別にして、横に長過ぎて画面に合わせにくく使いにくい印象が強く残りました。

サイトのレイアウトの比に用いようとしたところ、どうにも合わないので黄金比の短辺を何倍かして無理矢理納得しました。もはや黄金比でもなんでもない。

一方で 16:9、4:3 、3:2 は多く存在します。これらの比の始まりは思いのほか適当な理由からなのですが、それはさておき、 人間は見慣れたものに安心感を覚えます。これはれっきとした事実で、あるアスペクト比の調査でも選ばれた回数が多いとか。

黄金比や白銀比を使わないというのではなく、たとえば、アイキャッチのみとか、ポイントを絞って使えば目立つうえに印象に残るのではないでしょうか。