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で決めて割合から高さをキリの良い数字にしようと思った結果です。
実際に参考にしたサイト等も同じくらいの割合でしたので、決定としました。
理由まとめ
- ファーストビューにある程度テキストを見えるようにしたい
- 覚えやすい数値が良い
- 画像がきれいにみえる割合
黄金比
黄金比は約「1:1.618」となります。最も美しいとされる比率です。
やはり「美しい」と感じます。
ですが、やはり高さがあると感じます。文中にこの画像が出てくるのであれば特に気になりませんが、投稿の最初に出てくる画像としては個人的にしっくりきませんでした。サイトのコンテンツ幅自体がもう少し狭ければ、問題ないように思います。
白銀比
白銀比は2つあります。1つは約「1:1.41421356」、もう1つは「1:2.41421356」です。この白銀比も安定した比率です。
身近なもので言うと、A4の紙です。A4サイズの寸法は「210mm ☓ 297mm」です。210×1.41421356=296.9848476≒297。1つ目の白銀比になっています（僕も初めて知ったのですが）。ISO 216規格で決まっているんですね。
もう1つの方は明らかに片方が長くなる比率なので、今僕が考えているアイキャッチ画像には適さないように思います。
↑こちらの「白銀比」の安定感は抜群ですが、やはり「黄金比」と同じく、高さが気になります。
↑こちらの「白銀比」に関しては、「幅1100px × 高さ500px」と同じく高さが足りない印象でした。
写真のアスペクト比
その他、身近で良く出てくる比率は下記の通りです。
※それぞれの詳しい説明などに興味がある方はその他サイトなどで調べてみてください
「16:9」・・・ハイビジョンテレビの画面と同じ
「3:2」・・・35ミリフィルムのほとんどを占める規格
「4:3」・・・一般的なテレビ画面・コンピュータのディスプレイと同じ
↑こちらの「16:9」が最終的にしっくりきました。実際は高さ550pxと覚えやすい数値で着地しましたが、割合としてはここに落ち着いた形となりました。
↑こちらの「3:2」に関しても、「黄金比」と同じく、高さが気になります。画像としては、非常に見慣れたサイズだとは感じます。投稿一覧などの並列に並べるコンテンツの画像などの比率は「3:2」が多いのかもしれないです。ですので、やはりサイト幅が小さい場合は良い感じになるかもしれないです。
↑こちらの「4:3」に関しても、「黄金比」と同じく、高さが気になります。
まとめ
結果としては、だいたい「16:9」に落ち着きました。この画像サイズ「幅1000px×高さ550px」は自分のアイキャッチ画像のサイズにちょうど良さそうというものです。
その他色々と調べた比率に関しては、コンテンツ内の幅感などで参考になるように思います。メインビジュアルなども同様です。何か比率に迷ったときには、これらの比率を参考に考えてみようかと思います。
スポンサーリンク