自分にとって最適なアイキャッチ画像のサイズや縦横比を考えてみる

f:id:c-miya:20170802095626j:plain 先日はてなブログのサムネイルが500×500pxに大きくなりました。今後、テーマを作るときなんかにもこのサイズがポイントになるかもしれないので、改めてサムネイル(アイキャッチ)のサイズについて考えてみました。あんまりまとまってないです。

SNS等で表示される画像と切り取り領域

TwitterやFacebookなどでURLを乗せると、そのページのアイキャッチ画像が表示されることがあります。はてなブログのページならアイキャッチに設定した画像が表示されると思います。

ただ、その設定した画像は全部が表示されるわけではなく、大抵は各SNSごとに決められたサイズ(縦横比)に収まるように拡大縮小そして切り取りが行われます。どの部分が切り取られ、どの部分が表示されるかは抑えておいたほうが良いです。

はてなブックマークの場合

はてなブックマークで表示されるアイキャッチ画像は、PC版とアプリとでサイズが異なります。PC版は400×280pxが198×139pxで表示されます。アプリ版はピクセル数は端末によって異なりますが1:1の正方形になります。

アイキャッチに設定された画像が上記のサイズと縦横比が合わないと、一部が切り取られることになります。アプリ版では縦長横長どちらでも中央の正方形が切り取られます。以下はPC版での例。

横長画像の時

f:id:c-miya:20170802075927j:plain 縦を280pxに拡大縮小し、画像の左側から400pxまでが切り取られます。中央ではなく左寄せです。

横長画像の時

f:id:c-miya:20170802080448j:plain 横を400pxに拡大縮小し、画像の上側から280pxまでが切り取られます。中央ではなく上寄せです。

たいていのSNSでは画像の中央が切り取られるのに対し、はてなブックマークは左上を基準として切り取られます。これがけっこうやっかいですね。

Twitterの場合

Twitterカードを使ったときのサムネイル表示で考えます。小さな正方形のもありますが、ここでは大きなサイズのものを取り上げます。画像のサイズは504×252pxです。

f:id:c-miya:20170802081717j:plain これは単純に中央が切り取られ、上下が表示されません。

Facebookの場合

Facebookの場合もサイズが複数あるようですが、とりあえず大きな画像は476×249pxです。(環境によってピクセル数変わるのかも。)

f:id:c-miya:20170802083045j:plain これも単純に中央が切り取られ、上下が表示されません。ピクセル数は環境によって変わるかもしれませんが、基本的には1.9:1だそうです。1200×630pxが基準っぽいです。Twitterよりも表示領域は若干縦に広い感じです。

はてなブログの場合

はてなブログの場合…というか、記事一覧ページおよびトップページの一覧形式で表示されるサムネイルの場合です。

f:id:c-miya:20170802084804j:plain これも中央が切り取られます。切り取られたあとが500×500とちょっと大きめです。なお、640×360といった画像を設定した場合、まず889×500に引き伸ばされ、そこから500×500を切り取ります。なので短辺500以上の画像を設定したほうが良さそうです。

最適なサイズを考える

Facebookが確か1200×630以上を推奨していたと思います。なのでこれに合わせるのがいいのかな、とも思いますがちょっと大きすぎると思うかもしれません。でもはてなブログのサムネイルが500×500なので、短辺500は欲しい、となると952×500が最小でしょうか。

縦横比を考える

私は横幅の数字をぴったりな数字にするのが好きなので横幅960とすると960×504ですね。このサイズで画像を作った時に、それぞれのサイトで表示される領域は…

f:id:c-miya:20170802090123j:plain これを元画像およびFacebookとすると…

f:id:c-miya:20170802090221j:plain はてなブックマーク

f:id:c-miya:20170802090353j:plain Twitter

f:id:c-miya:20170802090425j:plain 正方形

うーん…やはり、はてなブックマークでの表示が難です。では縦横比をはてなブックマークに合わせてみましょう。

f:id:c-miya:20170802090657j:plain これを元画像およびはてなブックマークとします。

f:id:c-miya:20170802090758j:plain Twitter

f:id:c-miya:20170802090834j:plain Facebook

f:id:c-miya:20170802090907j:plain 正方形

どこを重視するのか

まぁ、結局はどのSNSを一番重視するのか、というところですよね。Facebookからの流入が殆ど無い(見込めない)のにFacebookに最適化してもしかたないですし。(逆に今見込めないから増やしたいのなら最適化はアリでしょうけど。)

私の場合はTwitter及びはてなブックマークです。はてなブックマークが候補に入るのであれば、それに合わせるのが良いかな、と思います。はてなブログのサムネイル用に縦を500pxとして、縦横比を合わせると714×500になります。

うーん…このブログの今の本文エリアの横幅が728なんですけど、これに合わせると728×510… f:id:c-miya:20170802091653j:plain うーん…でかい。

f:id:c-miya:20170802092733j:plain それぞれでの表示領域はこんな感じ。あー…この縦横比なら「どの場合でも表示される領域」がわりと広いし画像を作る時にあんまり考えなくていいから楽かな…。

アイキャッチ画像の作成

f:id:c-miya:20170802094307j:plain 私の場合はPhotoshopを使って画像を作成しているので、こんな感じにガイドを作ったテンプレートファイルを用意しておくのが良いのかもしれません。見切れて困るテキストなどは中央の四角に入るようにすれば、どのSNSでも切れることはないと思います。

今後の方針

今のこのブログのテーマだと、トップの画像は16:9にしてあります。テーマを新しくしたいとも考えているので、次のテーマははてなブックマークのサムネイルに合わせた縦横比もいいかな、と思っています。

またいろいろやっていきたいですね。