最適な画像サイズを追っててとんでもないものを見つけてしまった
どうしよう
ウェブ画像におすすめの大きさと縦横比
黄金比
はじめに用いていたのは、黄金比。特に気に入ったわけではなく、何か基準が欲しかったので採用していました。
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:image や Google 構造化データの 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 がサムネイルなどに使えそうですが、丁度よい縦横幅が中々ありません。もっとも、比率にこだわらなければ高度合成数の組み合わせは無数にある。
より大きいものになると、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 は、この大きさと比に合わせてみるのも面白いでしょう。
適当なこと言ってると思いますか？運営サイトの画像は 1260px × 840px です。
ソーシャルメディアでの見え方
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
横に長い。幅100% でも高さが少なく、ページ先頭のアイキャッチに向いている。また、ワイド画面は他の比率とは、ひと味違った雰囲気をだせる。
ページ本文内での使用は他の比率が多くなりそうですが、コンテンツの区切りで一休みする時などにも使えそうです。
Facebook や Twitter のシェア画像にそのまま転載しやすいのもメリット。YouTube 動画のアスペクト比も 16 : 9 です。
3 : 2
3 ： 2 ≒ 1 : 0.67
一番バランスが良く、どこでも使いやすい。アイキャッチには少し向かない感じはするが、使っても問題ない程度。迷ったら 3 : 2 で良いでしょう。
4 : 3
4 : 3 = 1 : 0.75
3 : 2 より高さがあり画面を占拠するので、スマホ表示でボリュームを出せる。両方とも汎用性が高いと思う。個人的には 3 : 2 や 1 : 1 でしっくりこないときに選択することが多い。
幅一杯のアイキャッチにはあまり使わないかも。このへんはページのデザイン次第といったところ。
1 : 1
プロフィールやアイコンなど使用頻度は高い。
『これは花だ！』とか商品画像など、被写体を中心に見せたい目的に向いている。
横一杯に広げると他のアスペクト比より縦に大きく場所をとるのでアイキャッチ画像には全く向かない。
ただ、1 : 1 は SEO 対策において引用などで非常に重要な役割があり、アイキャッチ画像には向かないと知りつつ、大きな画像をファーストビューの目立つ場所に置いておきたいジレンマがある。
黄金比と白銀比
1.618 : 1
美しい比率で描かれたスプー
1.414 : 1
有名な画伯の絵は白銀比だった
黄金比は Webデザインに使えるのか?
黄金比が美しいかは別にして、横に長過ぎて画面に合わせにくい印象が残りました。
サイトのレイアウトの比に用いようとしたところ、どうにも合わないので黄金比の短辺を何倍かして無理矢理納得しました。もはや黄金比でもなんでもない。
一方で 16:9、4:3 、3:2 は多く存在します。これらの比の始まりは思いのほか適当な理由からなのですが、それはさておき、人間は見慣れたものに安心感を覚えます。これはれっきとした事実で、あるアスペクト比の調査でも選ばれた回数が多いとか。
黄金比や白銀比を使わないというのではなく、たとえば、アイキャッチのみとか、ポイントを絞って使えば目立つうえに印象に残るのではないでしょうか。