先日はてなブログのサムネイルが500×500pxに大きくなりました。今後、テーマを作るときなんかにもこのサイズがポイントになるかもしれないので、改めてサムネイル（アイキャッチ）のサイズについて考えてみました。あんまりまとまってないです。
SNS等で表示される画像と切り取り領域
TwitterやFacebookなどでURLを乗せると、そのページのアイキャッチ画像が表示されることがあります。はてなブログのページならアイキャッチに設定した画像が表示されると思います。
ただ、その設定した画像は全部が表示されるわけではなく、大抵は各SNSごとに決められたサイズ（縦横比）に収まるように拡大縮小そして切り取りが行われます。どの部分が切り取られ、どの部分が表示されるかは抑えておいたほうが良いです。
はてなブックマークの場合
はてなブックマークで表示されるアイキャッチ画像は、PC版とアプリとでサイズが異なります。PC版は400×280pxが198×139pxで表示されます。アプリ版はピクセル数は端末によって異なりますが1:1の正方形になります。
アイキャッチに設定された画像が上記のサイズと縦横比が合わないと、一部が切り取られることになります。アプリ版では縦長横長どちらでも中央の正方形が切り取られます。以下はPC版での例。
横長画像の時
縦を280pxに拡大縮小し、画像の左側から400pxまでが切り取られます。中央ではなく左寄せです。
横長画像の時
横を400pxに拡大縮小し、画像の上側から280pxまでが切り取られます。中央ではなく上寄せです。
たいていのSNSでは画像の中央が切り取られるのに対し、はてなブックマークは左上を基準として切り取られます。これがけっこうやっかいですね。
※2018年12月現在では中央が切り取られるように変更されてます。（この記事時点では左上でしたが、ほどなくして中央に変更されました。）
Twitterの場合
Twitterカードを使ったときのサムネイル表示で考えます。小さな正方形のもありますが、ここでは大きなサイズのものを取り上げます。画像のサイズは504×252pxです。
これは単純に中央が切り取られ、上下が表示されません。
Facebookの場合
Facebookの場合もサイズが複数あるようですが、とりあえず大きな画像は476×249pxです。（環境によってピクセル数変わるのかも。）
これも単純に中央が切り取られ、上下が表示されません。ピクセル数は環境によって変わるかもしれませんが、基本的には1.9:1だそうです。1200×630pxが基準っぽいです。Twitterよりも表示領域は若干縦に広い感じです。
はてなブログの場合
はてなブログの場合…というか、記事一覧ページおよびトップページの一覧形式で表示されるサムネイルの場合です。
これも中央が切り取られます。切り取られたあとが500×500とちょっと大きめです。なお、640×360といった画像を設定した場合、まず889×500に引き伸ばされ、そこから500×500を切り取ります。なので短辺500以上の画像を設定したほうが良さそうです。
最適なサイズを考える
Facebookが確か1200×630以上を推奨していたと思います。なのでこれに合わせるのがいいのかな、とも思いますがちょっと大きすぎると思うかもしれません。でもはてなブログのサムネイルが500×500なので、短辺500は欲しい、となると952×500が最小でしょうか。
縦横比を考える
私は横幅の数字をぴったりな数字にするのが好きなので横幅960とすると960×504ですね。このサイズで画像を作った時に、それぞれのサイトで表示される領域は…
これを元画像およびFacebookとすると…
はてなブックマーク
Twitter
正方形
うーん…やはり、はてなブックマークでの表示が難です。では縦横比をはてなブックマークに合わせてみましょう。
これを元画像およびはてなブックマークとします。
Twitter
Facebook
正方形
どこを重視するのか
まぁ、結局はどのSNSを一番重視するのか、というところですよね。Facebookからの流入が殆ど無い（見込めない）のにFacebookに最適化してもしかたないですし。（逆に今見込めないから増やしたいのなら最適化はアリでしょうけど。）
私の場合はTwitter及びはてなブックマークです。はてなブックマークが候補に入るのであれば、それに合わせるのが良いかな、と思います。はてなブログのサムネイル用に縦を500pxとして、縦横比を合わせると714×500になります。
うーん…このブログの今の本文エリアの横幅が728なんですけど、これに合わせると728×510…
うーん…でかい。
それぞれでの表示領域はこんな感じ。あー…この縦横比なら「どの場合でも表示される領域」がわりと広いし画像を作る時にあんまり考えなくていいから楽かな…。
アイキャッチ画像の作成
私の場合はPhotoshopを使って画像を作成しているので、こんな感じにガイドを作ったテンプレートファイルを用意しておくのが良いのかもしれません。見切れて困るテキストなどは中央の四角に入るようにすれば、どのSNSでも切れることはないと思います。
今後の方針
今のこのブログのテーマだと、トップの画像は16:9にしてあります。テーマを新しくしたいとも考えているので、次のテーマははてなブックマークのサムネイルに合わせた縦横比もいいかな、と思っています。
またいろいろやっていきたいですね。
