サイトで使用する画像の縦横比（アスペクト比）

WordPressのテーマを新しいバージョンに変更しました。それに伴い、前バージョンで適応していた css や直接触っていたphpファイルなどを差分をチェックしながら、反映していました。

反映していると、アイキャッチ画像のサイズのバラつきが気になり出したのです。次の投稿から統一しようかと思っていたのですが、記事数も少ないので、今ある投稿も統一しようと思い立ったのです。しかし、いざ対応しようかと思うと、「画像の幅・高さの割合はいくつにしようか」と悩むことに。。。

結果としては、「幅1000px × 高さ550px」と決めたのですが、悩んでいる際に「黄金比」「白銀比」「16:9」などのきれいな画像を作るための比率について調べたのでそれについて触れてみたいと思います。

先に結論から

まず、「幅1000px × 高さ550px」となった理由を書いておきます。

きれいな画像になる比率をいくつか試してみたのですが、しっくりきたのが「幅1000px × 高さ550px」のサイズの画像でした。実際は、縮小されるのですが、比率はこの割合がちょうど良く感じました。「16：9」に近い割合です。「16：9」にしようと思ったわけではなく、下記のような理由で決めたらそうなっていたという感じです。

結論に行きつくまで

まず「幅1100px × 高さ500px」で試してみました。
ですが、記事の最初にくる画像としては若干高さが足りない印象でしたので却下しました。ただ、それがきかっけで「そういえば画像の割合はどれくらいが良いのだろう」と気になりそのことについて調べ出しました。

調べた結果「3：2」や「黄金比」「白銀比」を見つけたので、それらを試してみました。ですが、どれも「高さがある」と感じました。
きれいなのは確かなのですが、感覚的にファーストビューが気になりました。これは仕事でウェブ制作をする際に気にしている点だからかもしれません。

実際は、最近のPC（パソコン）は解像度が高かったり、ディスプレイ自体も大きいなど、画像の高さが少しあったところで、ファーストビューに大きく影響はないかと思うのですが、それでもある程度の収まりになればと思っていました。

もう一点、アイキャッチ画像のサイズを決めるに際して、「覚えやすい数値」にしたいとも考えていました。理由は画像サイズの調整時に毎度サイズを確認するのは手間なので、楽したいためです。

そういった理由や「僕がきれいだと思うサイト・ブログ」等を参考にし、「2：1」より少し少し高さがあるくらいがちょうど良いかなと思い、「幅1000px × 高さ550px」にしました。
大きな理由は「幅1100px × 高さ500px」で試して若干高さが足りない印象というのと、覚えやすい点から幅のサイズは1000pxで決めて割合から高さをキリの良い数字にしようと思った結果です。
実際に参考にしたサイト等も同じくらいの割合でしたので、決定としました。