どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
今までブログのアイキャッチ画像は、600px × 600px程度の正方形サイズを使っていましたが、ここ最近になって改めてサイズを考え直してみることにしました。
特にこのサイズを使っている明確な理由はなく、少し大きめで正方形であればある程度ことには対応できるだろうと考えていましたが、SNSで表示した時にはどうしても画像が見切れてしまう。
「そろそろなんとかせねば!」と感じてきたので、ようやくその対策を考えるべくアイキャッチの改善に乗り出しました。
そこで今回はブログとSNSの両方で表示した時に、問題なく使えるアイキャッチ画像の最適ななサイズを、私なりに考えましたのでご紹介したいと思います。
4つのSNSで表示される画像サイズ
ブログを運営されている方は、複数のSNSと連携されていることが多いと思いますが、私が現在使っているSNSはこちらの4つになります。
- Google+
- はてなブックマーク
ブログのコンテンツを効率良く拡散するには必要不可欠なSNSなので、まだ利用されていないものがある方は、ぜひ連携して活用されてみて下さい。
参考:4方向からブログに集客!SNSと連携して最大限アクセスを高める方法 |
上記4つのSNSでアイキャッチ画像を表示しようとすると、それぞれに指定されているサイズに自動的にリサイズされてしまう為、各SNSで使用されているサイズを把握しておく必要があります。
そこでまずは、1つ1つSNSで最適に表示されるアイキャッチ画像のサイズを、しっかり確認しておきましょう。
Facebookの場合
SNSには「OGP」というアイキャッチ画像を正しく表示するための設定があり、Facebookの場合は横縦比率が 1.91:1 になる「横1200px × 縦630px」のサイズが推奨されています。
これをそのまま使うと、このようなアイキャッチ画像になります。
これはパソコンサイズですが、スマホの場合は「横470px × 縦246px」で基本的には縮小表示されるようになっています。
画像のサイズは最低でも「横600px × 縦315px」はないと、それ以下のサイズでは画像自体がその分小さくなってしまいます。
また、縦の比率が高くなると画像の上下部分が、以下のように切り取られて表示されます。
Facebookを中心にアイキャッチ画像を作成する場合は、横縦比率が 1.91:1 のサイズが理想的になります。
Twitterの場合
Twitterでは小さい正方形タイプか、大きめの長方形タイプを指定することができますが、ここでは長方形タイプの方で考えていきます。
Twitterの場合は、横縦比率が 2:1 になる「横1024px × 縦512px」のサイズが、パソコン版で使われています。
アイキャッチ画像のサイズや形状はFacebookとほとんど変わらず、スマホの場合も「横450px × 縦253px」とほぼ同じです。
Twitterでも縦の比率が高くなると、上下部分がカットされて表示されるので、基本的にはFacebook用のサイズを使用すれば問題はなさそうです。
Google+の場合
Google+は他のSNSとは違って画像比率の指定が特にないので、アイキャッチが長方形や正方形など、どんな形でもカットされずに表示することができます。
横幅は1238px程度になっていますが縦幅はあまり長くなりすぎない限り、現状それほど気にする必要はありませんね。
Google+もFacebookサイズのアイキャッチ画像が問題なく利用できます。
はてなブックマークの場合
最後にはてなブックマークですが、このSNSは投稿という概念がなく自分が書いた記事が、「ホットエントリー」した時に表示される画像になります。
パソコン版では比率が 1.43:1 の「横400px × 縦280px」、スマホ版では「横198px × 縦139px」で基本的に表示されますが、ここで問題なのがサイズが合わなかった時のカット方法です。
上記の画像サイズはFacebookの「横1200px × 縦630px」のもので、縦は280pxに縮小されますが、横に関しては左右ではなく右側からカットされてしまいます。
因みに縦長の画像の場合は下の領域から切り取りが行われます。
つまり、これではかなり偏ったアイキャッチ画像になってしまうので、はてなブックマーク用に適切なサイズを用意する必要があります。
せっかくはてなブックマークのSNS上に自分の記事ページが紹介されたのに、こんな不格好な画像ではちょっと恥かしいですよね。
最適なアイキャッチ画像のサイズ
アイキャッチに使用する画像サイズのベースとしては、Facebookが推奨している「横1200px × 縦630px」を使えば、3つのSNSには対応できます。
ブログで表示される画像サイズは自由に調整できるのでSNSを優先して考えていきますが、私が利用しているブログ媒体はワードプレスでテーマはSTINGER8になります。
今設定している記事エリアの幅は「830px」程度なので、これに合わせるとしたらアイキャッチのサイズは、「横830px × 縦436px」になります。
ですが、このままだとはてなブックマークに対応できないので、そのことを考慮すると縦の比率を少し高くして、「横830px × 縦580px」くらいで表示してみます。
このサイズなら、はてなブックマークでも表示崩れすることなく、アイキャッチを表示できることがわかりました。
縦の比率を変更したことで、FacebookとTwitterで見切れてしまう部分があることと、正方形で表示された時にしっかり収まる領域はこちらになります。
この領域内に被写体やテキストを納めれば、自分のブログと4つのSNSに最適なアイキャッチ画像を作ることができます。
結論としては、比率が 1.43:1 の「横830px × 縦580px」のサイズがベストです!
ただ、それぞれブログで使用中の記事エリアの横幅によって微調整が必要ですし、はてなブックマークを気にしない場合は、横縦比率が 1.91:1 の「横600px × 縦315px」以上であれば、基本的には対応できるかと思います。
最適画像サイズを調べる便利ツール
各SNSに合う画像サイズを1つ1つ探していくのはかなり面倒なことなので、サクッと確認することができる便利なツールを活用するのが効率的です。
FacebookのOGP画像を調べることに特化しているのが、「OGP画像シミュレータ」というツールになります。
対象の画像ファイルをドラッグ&ドロップするだけで、Facebookで表示される様々なタイプのデザインをシミュレートすることができます。
Facebook以外にTwitterや、はてなブックマークなどのOGPも一緒に調べたいという方は、サルワカさんが提供されている「アイキャッチ画像サイズチェッカー」が便利です。
「画像を選択」をクリックして確認したい画像ファイルを選択すれば、各SNSでどう表示されるかがすぐにわかります。
また、画像比率の算出方法がよくわからないという方は、「比率計算機」というツールで横縦の数値を入力すれば、簡単に比率を算出してくれますよ。
まとめ
今までは正方形の画像を使っていて、つい最近から長方形のサイズに変更していましたが、今後は私が使用中のワードプレステーマと、4つのSNSにも最適な「1.43:1」のサイズに変更していくつもりです。
とは言ってもすでにブログ記事数は150以上になっているので、これを修正していくと考えるとデザインも変更しないといけないので、かなりの労力が必要になりそうです。
なので、アイキャッチ画像を設定する際は、記事が多くなる前にできるだけ早く自分のブログやSNSに最適なサイズを探されてみて下さい。
合わせて読んでほしい |