会社案内ブログ採用情報お問い合わせプライバシーポリシーblogブログ画像の縦横比(アスペクト比)を変えるだけで美しくみえるって本当!?こんにちは。デザイナーの角谷です。毎日の日課は「イケてるサイトパトロール」と題した、デザインサイト集を見てまわるネットサーフィンです。パトロール後は、気になったwebサイトや「ここどーなってんの?」と疑問に思ったwebサイトをさらに検証する日々を送ってます。そのことで先日、疑問に思ったことが今回のテーマです。「ブログ」や「コラム」といったテンプレートが存在するようなコンテンツページは、画像サイズを決めておくよなーと。・・・え、ブログとかの画像サイズってどう決めてるっけ??何の気なしに見慣れていると感じている3:2のアスペクト比(縦横比)を使うことが多いけど、別にこれでなくてもいいのでは??と、ふと疑問に思いました。アスペクト比は、矩形における長辺と短辺の比率。"長辺の割合:短辺の割合"で表される。wikipediaということで、他社の事例を参考に、どんな比率が使われているのか調べてみました。・記事内の画像なるほど、なるほど。ブログに合わせて撮影した写真をそのままの比率で掲載できて運用しやすそうです。ブログメイン画像はPCで見るとまあまあ大きく見えます。スマートフォンで見る方がより見やすい印象を受けました。・ブログアイキャッチ・メイン画像なるほど、なるほど。一覧ページでの画像の占有率が大きく、画像のインパクトが強いですね。ブログメイン画像はPCで見ると結構大きく見えます。ノートPCならファーストビューいっぱいにメイン画像があり本文は見えませんでした。こちらもスマートフォンで見る方がより見やすい印象を受けました。参考サイト:webサイトデザイン集https://muuuuu.org/ギャラリーサイト系は特に使いやすそうです。PCで見ると、横に薄く長いので、画面で見えるコンテンツが多く見える気がしました。ハイビジョン規格ということもあり、なんとなく新しさを感じます。ogp画像の比率に近く、汎用性がありそうです。スマートフォンでは、やはり1カラム表示がベストだと感じました。・トップページレコメンド記事リストなど一部でなるほど、なるほど。サイズが小さいので比較しにくいですが、たしかに安定感があり、違和感を感じないです。この比率であればPCでもスマートフォンでもどちらでも見やすい印象です。白銀比(1:1.414)日本で生まれた美しいと感じる比率A版用紙など調べによると、ドラえもんやアンパンマンなどもこの比率に当てはまるそう。参考サイト検索中・・・まとめ今回は普段からチェックしているサイトを「ブログ等の画像の比率」について比較してみました。個人的感想ですが、結果としてコレ!と断言できる比率はなく、それぞれに特長があり、シーンに合わせて良きサイズで活用していきたいと思いました。今後に役立ちそうです!!個人的には、黄金比や白銀比をこっそり取り入れてツウなデザインをしたいと思いました。ちなみに参考サイトの画像サイズは上記5つの比率のうちのどれかで統一しています。横幅を入力するだけで一瞬でアスペクト比に対するpx値を計算してくれるツールです。横幅に対する画像を計算してくれるツールもあります。http://zeller-lab.com/img-width/こちらは、横幅か縦幅を入力するだけで一瞬でアスペクト比に対するpx値を計算してくれるツールです。画像をアップロードすれば各比率でシミュレーションしてくれます。余白」を生かすとは?余白について考えてみた印象が変わる!?ジャンプ率を意識してみる。~パレート図とは~多趣味を仕事に活かす!WEB広告配信準備で必要不可欠!主要のディスプレイ広告の入稿規定一覧ブログ一覧に戻るTOPブログクリエイティブ画像の縦横比(アスペクト比)を変えるだけで美しくみえるって本当!?Contactお問い合わせサイト制作、プロモーションなどご相談はお問い合わせフォームをご利用ください。