アイキャッチの最適なアスペクト比と画像サイズについて

みなさんはブログを書いてTwitterやFacebookに投稿する時にアイキャッチを設定して投稿されているかと思います。

それは「文字だけのツイートよりも画像があったほうが読んでみようという気になる」ためだと思います。

しかし画像があってもよくわからない画像が貼られていてはあまり効果がありません。

どのようなサイズが一番見やすいかTwitterやFacebook視点で調べてみました。

最適な画像アスペクト比

アスペクト比とは日本語で言うと縦横比のことです。

一般的によく使われるアスペクト比はこれくらいかと思います。

  • 1:1(正方形)
  • 3:2(1眼などのデジカメ)
  • 16:9(HDTVなど)
  • 4:3(昔のTV)

しかしTwitterやFacebookに最適なアスペクト比はこれではありません。

1.91:1(横長)

が最適とされています。

横 px縦 px
600314(315)
680356(355)
768402(400)
800419(420)
860450
1200628(630)

これが1.91:1のアスペクト比の計算例です。カッコ内は切りよくした数値です。

なんとも切りの悪い数字ですねw

しかしこの1.91:1にすることで、Twitterなどでは切り取られること無く綺麗に画像が表示されます。

元の画像データがほぼ正しく表示されていますね。

最適な画像サイズ

画像サイズに関しては使用するテーマによるのでなんとも言えませんが、以下のように推奨されています。

  • 最低は横幅600px
  • 推奨は横幅1200px以上

ただし実際は表示スピードや画像のファイルサイズなどを考えると600~800pxくらいと思います。

最適な画像の型式

画像の型式(拡張子)にもいろいろありますが、

  • JPEG
  • PNG

この2種類なら問題なく表示されます。GIFは避けておいたほうが無難です。

シミュレーションサイト

実際に設定したアイキャッチ画像がどのように表示されるかはテストサイトを使ってシミュレーションができます。

MEMO
本来アイキャッチの画像とTwitterやFacebookに表示されるOGPの画像は別物ですが、はてなブログやSEO対策済のWordPressでは自動でアイキャッチの画像がOGPに指定されるため深く区別する必要はありません。

こちらのサイトでシミュレーションが行えます。

参考 OGP画像シミュレータog:image Simulator

シミュレーターで特に問題なければアスペクト比を変更する必要はないと思います。

みなさんもこれを機会にアイキャッチ画像を見直してみてはいかがでしょうか(*^^*)

コメントを残す