【Spotlightの使い方】アイキャッチ画像に最適のサイズとは？
Spotlightで記事を書く際のアイキャッチ画像に最適のサイズを解説します。
先に要点を書きます。
- 記事アイキャッチの表示サイズは約 736 × 386 ピクセル
- 最新記事サムネイルの表示サイズは 420 × 189 ピクセル
- 過去記事サムネイルの表示サイズは 96 × 96 ピクセル
※画像は自動リサイズ・自動トリミングされる
以下、サンプル画像を使って、表示される領域を詳しく解説します。
↓サンプルに使う画像はこれ。
ベルギービールとチーズと生ハムのお店の「サンタルヌー」で、店主ヨースケが美味しそうな生ハム原木を切ってる写真です。
世界初のNEM決済のお店であり、ICOにて店舗移転を実行したお店です。
↓実際に記事のアイキャッチ画像として使用したらこうなりました。写真の上下が切れてしまいましたね。
↓ソースコードを拝見。記事アイキャッチの表示サイズは約 736 × 386 ピクセルのようです。（小数点は切り上げました）
↓つまり、約19:10の長方形にトリミングされ、グレーになっている部分は表示されません。（上下が切れる）
↓Spotlightに投稿した直後は、最新記事としてトップページに表示されます。ここでの表示サイズも考慮しましょう。
↓ソースコードを拝見。最新記事サムネイルの表示サイズは 420 × 189 ピクセルのようです。
↓約22:10の長方形にトリミングされ、グレーになっている部分は表示されません。（記事アイキャッチよりさらに上下が切れる）
↓また、過去の記事は正方形のサムネイルで表示されます。かなり左右が切れているようですが、ここでの表示サイズも見てみましょう。
↓ソースコードを拝見。過去記事サムネイルの表示サイズは 96 × 96 ピクセルのようです。
↓1:1の正方形にトリミングされ、グレーになっている部分は表示されません。（左右が切れる）
↓結果、必ず表示される領域は真ん中の部分だけだということが分かりました。文字等の重要な情報は、画像の真ん中部分に配置するようにしたほうが良いでしょう。
上記のように、記事のトップには横長の画像が表示され、記事一覧では正方形に画像がシステム的にトリミングされて表示されます。
↓記事トップの画像でも、過去記事のサムネイルでも、文字や絵の位置を積極的にコントロールしたい場合は、画像を19:10（横:縦）の比率で作成してください。
このように作成すると、記事のトップの画像はそのまま表示され、過去記事のサムネイルでは左右が切れるだけで、上下は切れません。
なお、このやり方では、最新記事のサムネイルで少々上下が切れますが、記事トップがイメージ通り表示されることを優先させて、最低サイズ736 × 386 ピクセルの19:10の比率で作成するのが良いでしょう。
Twitterに記事を投稿した際にツイートに表示される画像サイズも約19:10で、記事トップのアイキャッチと似た比率で表示されます。
参考画像に使ったサンタルヌーですが、現在は閉店しております。
代わりに、表参道スパイス研究所としてカレーを販売しておりますのでご確認ください。（Amazon）
関連リンク
SpotlightとMonappy：クリプト系ブログサービスの比較
【Spotlightの使い方】記事にチャットアプリ風の吹き出しを表示させる方法
おすすめリンク
