仮想サーファーの波乗り

仮想サーファーの日常

プログラミング・エンジニアのスキルアップ・ブログ運営などに関してよく書く雑記ブログ

➡ Udemyで8/27(木)まで割引セール開催中! 1,200円〜で普段の90%以上OFF!

ブログの見出し画像の最適なサイズ(縦横比率)って?各SNSシェアの画像サイズ比較した結果


f:id:virtual-surfer:20181118210200p:plain


はてなブログに見出し画像を作る時に気になるのが、その最適なサイズ・縦横比率。

気になって調べたのですがGoogle先生も答えを持っていなかったので、自分で調べてみた結果を書いておきます。

見出し画像のサイズは一度雛形を作っておけばテンプレ化できるので、画像のサイズに迷っている方の参考になればと思います。


ブログの見出し画像の最適なサイズ

結論として、見出し画像の最適な比率は「縦5cm:横9.18cm」でした( ・v・)b!!


...と、結論だけ言われても参考にならないと思うので、各SNSシェアの画像サイズを比較してみた過程も書いておきます。


各SNSシェア画像サイズ比較

今回は、Twitter・はてなブックマーク・Facebookでのシェア画像サイズを比較してみました。比較結果まとめが以下の図。

f:id:virtual-surfer:20181118123544p:plain

Facebookが横長で、はてブが一番正方形に近い縦横比率になっていますね。

各社で見出し画像のサイズくらい統一してくれよ...。


各SNSでのシェア画像のサイズがわかったので、画像をどのサイズに合わせればいいのかを考えていきます。


各SNSシェア画像サイズ比較

結論から書くと、画像サイズをTwitterのサイズに合わせ、画像に載せる文章ははてなブックマークのサイズに合わせるのが最適だと思います。

f:id:virtual-surfer:20181118123822p:plain


画像に文章を載せる見出し画像を作ることは多いと思いますが、その際に一番避けるべきことは、文章が見切れていること。

f:id:virtual-surfer:20181118124242p:plain

↑こういう見出し画像が最悪な例。変な箇所で見切れているし、画像荒いし。絶対クリックしたくない...。


こんなふうにクリックしたくなくなる見出し画像を設定してしまうと、せっかく書いた記事をクリックしてもらえなくなってしまうので、各SNSで見切れる範囲を知って変な見切れ方をしないようにしておきたいところ。


結論。見出し画像の最適縦横比率・サイズ

以上のことを考えると、最適な画像の縦横比率は下の画像のような比率です。

f:id:virtual-surfer:20181118124755p:plain

どこで見切れるのかをあらかじめ知っておけば、見切れない箇所に重要な情報を載せるように調整することができるので見切れを見切るの大事...( ・v・)/


この縦横比率で画像を作成しておけば、各SNSで重要な情報が見切れずに表示される。

f:id:virtual-surfer:20181118125039p:plain


ただし、この縦横比率は2018年11月18日現在の最適な比率なので、もしもFacebookやTwitter社が画像の比率の仕様を大幅に変えてしまうと見切れるようになってしまうかもしれません。その点にはご注意を。


補足。はてブのデフォルト見出し画像表示サイズ...

ここまで記事を書いて今気づきましたが、はてなブログのデフォルトの見出し画像サイズが強敵。各SNSは横長が基本なのに、まさかの正方形。

f:id:virtual-surfer:20181118125953p:plain


はてなブログの見出し画像はCSSを少しいじれば横長に変更できるので、横長に変更して対応する or 画像サイズを正方形にしておいて、画像に載せる文章などは中心の方に寄せておくという対応が必要そうm(_ _)m


まとめ

以上、ブログの見出し画像の最適なサイズ(縦横比率)って?各SNSシェアの画像サイズ比較した結果でした。


画像サイズの調整は一度テンプレを作ってパワポとかで雛形を作っておけば、あとはそのサイズに合わせて画像のサイズを調整するだけなので一度調整しておくことを強くオススメします。めんどくさいけどね( ´ v ` )ノ


どうせ記事を書くなら多くの人に読まれた方が嬉しいし、画像のサイズがおかしいだけでクリックされないのは悲しいですからね〜。


では!