アイキャッチ画像ぐらいは黄金比を意識しよう。計算は便利なWebアプリ『METALLIC RATIO』で。

黄金比の計算に便利なWebアプリ『METALLIC RATIO』を紹介します。

リンク METALLIC RATIO / 貴金属比 [黄金比・白銀比などを計算]

ブログを書いていると画像を取り扱うことが多々あるかと思います。その画像すべてで黄金比を計算して…というのはちょっと大変ですが、せめて記事冒頭のアイキャッチ画像とか、その程度は黄金比を意識してサイズを決めてみてはどうでしょうか。

黄金比を意識して画像サイズを決めるとブログが美しくなる

このブログのアイキャッチ画像は黄金比を意識しています。といっても、正確にはSilver Ratio(白銀比)を、さらにそれをそのまま適用した比率ではなく応用した比率で計算した縦横比なのですが、一応意識しています。

具体的には横幅680pxに対して1:1.414の比率で分けた時の1の方の幅を画像の縦幅に適用した「横680px縦282px」というサイズです。ややこしいですねw このサイズに固定してすべての記事のアイキャッチ画像を作成しています。

写真素材そのままのアイキャッチはダサい

よく、写真素材そのままをドカッと表示させたアイキャッチ画像を見かけます。別に美的感性は人それぞれなのでいいのですが、個人的には何かダサいなあと感じてしまいます。野暮ったいというか。

もちろんブログの価値は記事の中身にこそ核があるので、見た目の美しさなんか気にしてもアクセス数の向上やブログの認知度アップにはもしかしたら1ミリも影響しないかもしれません。

でも、ブログの書き手である自分のテンションには多少なりとも影響します。その意味で、そのことだけでも「ブログを少しでも美しくしようと心がける」ことには価値があるんじゃないかなと思います。

ブログで意識したい黄金比

私自身が今このブログで黄金比を意識しているのはアイキャッチ画像ぐらいです。でもブログ運営していく中で黄金比を意識することによってより美しくできるポイントはちらほらあります。

以前は私もかなりいろいろ意識していたこともあったのですが、面倒なので今は止めてしまいました。もし美の探求に労力を注ぐことを厭わない場合は、次のポイントあたりで黄金比を応用してみるとよりブログが美しくなるかと思いますので、参考にしてみてください。

記事内で使う画像のサイズを黄金比で固定する

記事内に挿入する画像に黄金比を応用すると、記事の見栄えが良くなります。

もちろん写真そのものに芸術的価値を見いだして撮っているものなら話は別ですが、たとえばレビュー用に撮影した写真とか、そういうのは縦横比を黄金比に修正してあげると記事のパッと見の見栄えが良くなります。

具体的には、写真の長辺に合わせて短辺をいくらか削ります。横長の写真であれば短辺の縦方向の幅を少し削ることになります。

元写真

横幅をそのままに黄金比を適用すると縦幅を少し削る必要がある。

構図的なバランスを考え、下辺を基準に上方を削って黄金比にした場合。

記事内で使う画像のサイズを黄金比で決める

あまりに大きい画像が多用されていると記事本文が非常に読みづらくなります。なので画像はたとえ説明用画像であっても必要以上に大きくしない方が親切です。

ではどの程度のサイズにしたらベストか? その時にまた黄金比です。記事を表示する領域の横幅に対して黄金比率となる長さを画像の横幅の基準にすると、その画像を挿入した記事の見栄えが良くなります。

このブログで言えば記事の表示領域は横幅680pxなので、それに対する黄金比は420:260になります。なので表示領域いっぱいに表示しない画像の場合は横幅を420pxにするよう意識しています。徹底はしていませんが、大抵の画像はそうしています。

そしてその画像そのものの縦横比もなるべく黄金比にするように意識します。

他にもあれこれ、比率を意識できるところが沢山

いろいろ言い出すとキリがないので適当にまとめて、1つの画像で比率を考えられる部分を書き込んでみました。

本当は「コンテンツの表示領域」と「余白」とのバランスが何よりサイトやブログの見栄え・見やすさに直結する部分だと思うんですが、まあなかなかそこまで追求できませんね。話がややこしくなり過ぎてしまいます。

おわり

もう何年もの長きに渡って私のブックマークにあり続けるWebアプリを改めて紹介してみました。

リンク METALLIC RATIO / 貴金属比 [黄金比・白銀比などを計算]

昔のGoogle検索ではこういう便利なサイトが「黄金比」と検索した時に上位に出てきてくれたものですが、今はなかなかそういう使い勝手の良い検索エンジンではなくなってしまったのが悔やまれるところです。

意識しだすと色んな場面で使えるので、黄金比を活用してみてください。

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ ブログの話


トップへ戻る