画像の縦横比（アスペクト比）を変えるだけで美しくみえるって本当！？｜スタッフブログ

画像の縦横比（アスペクト比）を変えるだけで美しくみえるって本当！？

こんにちは。デザイナーの角谷です。

毎日の日課は「イケてるサイトパトロール」と題した、デザインサイト集を見てまわるネットサーフィンです。
パトロール後は、気になったwebサイトや「ここどーなってんの？」と疑問に思ったwebサイトをさらに検証する日々を送ってます。

そのことで先日、疑問に思ったことが今回のテーマです。

webで使う画像サイズ、ちょうどいいのってなんやろ？？

最近のwebデザインは、いろんなサイズの画像を使ったデザインが多く、自由にレイアウトができ、デザインの幅も増えているなと感じる一方で、「ブログ」や「コラム」といったテンプレートが存在するようなコンテンツページは、画像サイズを決めておくよなーと。・・・
え、ブログとかの画像サイズってどう決めてるっけ？？
何の気なしに見慣れていると感じている３：２のアスペクト比（縦横比）を使うことが多いけど、別にこれでなくてもいいのでは？？

と、ふと疑問に思いました。

アスペクト比とは：アスペクト比は、矩形における長辺と短辺の比率。 "長辺の割合:短辺の割合"で表される。 wikipedia

ということで、他社の事例を参考に、どんな比率が使われているのか調べてみました。

代表的なアスペクト比は５つ

その１　3:2

主に多くのカメラで使われている比率

参考サイト：LIGさん
https://liginc.co.jp/

【使われている場所】
・ブログアイキャッチ
・メイン画像
・記事内の画像

なるほど、なるほど。
ブログに合わせて撮影した写真をそのままの比率で掲載できて運用しやすそうです。
ブログメイン画像はPCで見るとまあまあ大きく見えます。
スマートフォンで見る方がより見やすい印象を受けました。

その２　4:3

主にアナログテレビやPCのディスプレイ等で使われている比率（スタンダード）

参考サイト：マーケターのよりどころ ferret
https://ferret-plus.com/

【使われている場所】
・ブログアイキャッチ
・メイン画像

なるほど、なるほど。
一覧ページでの画像の占有率が大きく、画像のインパクトが強いですね。
ブログメイン画像はPCで見ると結構大きく見えます。ノートPCならファーストビューいっぱいにメイン画像があり本文は見えませんでした。
こちらもスマートフォンで見る方がより見やすい印象を受けました。

参考サイト：webサイトデザイン集
https://muuuuu.org/

ギャラリーサイト系は特に使いやすそうです。

その３　16:9

デジタルテレビ等で使われている比率（ワイド）
Youtubeは以前は4:3だったが16:9が標準になった

参考サイト：baigieさん
https://baigie.me/work/

【使われている場所】
・制作実績一覧画像など

なるほど、なるほど。
PCで見ると、横に薄く長いので、画面で見えるコンテンツが多く見える気がしました。
ハイビジョン規格ということもあり、なんとなく新しさを感じます。
また、ogp画像の比率に近く、汎用性がありそうです。
スマートフォンでは、やはり１カラム表示がベストだと感じました。

ogp画像とは
FacebookやTwitterなどのSNSでシェアされた時にタイムラインに表示されるサムネイル画像のこと

その４　黄金比（1：1.618）

古くから人が最も美しいと感じる比率
名刺やカードなど

参考サイト：リスクル
https://liskul.com/

【使われている場所】
・トップページレコメンド記事リストなど一部で

なるほど、なるほど。
サイズが小さいので比較しにくいですが、たしかに安定感があり、違和感を感じないです。
この比率であればPCでもスマートフォンでもどちらでも見やすい印象です。

その５　白銀比（1:1.414）

日本で生まれた美しいと感じる比率
A版用紙など
調べによると、ドラえもんやアンパンマンなどもこの比率に当てはまるそう。

参考サイト検索中・・・

まとめ

今回は普段からチェックしているサイトを「ブログ等の画像の比率」について比較してみました。
あくまで個人的感想ですが、結果としてコレ！と断言できる比率はなく、それぞれに特長があり、シーンに合わせて良きサイズで活用していきたいと思いました。
今後に役立ちそうです！！
個人的には、黄金比や白銀比をこっそり取り入れてツウなデザインをしたいと思いました。

ちなみに参考サイトの画像サイズは上記５つの比率のうちのどれかで統一しています。当ててみてください＾＾