こんにちは！ ひろみです。
SNSやブログでアイキャッチ画像を設定した際「一部が見切れてしまった！」そんな経験はありませんか？
それはサイズや比率が合っていないことが原因です。
今回は、SNSやブログに最適なアイキャッチ画像のサイズをご紹介します。
この記事をすべて読むと、アイキャッチ画像を正しく表示するサイズを網羅することができます。
Twitterに最適なアイキャッチ画像のサイズは？
タイムライン投稿画像サイズ
Twitterへ写真やイラストなどを投稿する際の画像サイズです。
横1280px×縦720px
最適と言われるアスペクト比16:9に対応させた数値です。
Retinaディスプレイに対応させるため、倍のサイズで書き出しをしています。実際に表示されるサイズは640px×360pxです。（専門知識なので一般の方は覚える必要はありません。）
Twitterカードとは？OGP設定について
Twitterでリンク付き投稿をした際、自動的に表示されるアイキャッチ画像とテキストの総称を「Twitterカード」と呼びます。
Twitterカードで表示するアイキャッチ画像にはサイズが２種類あります。
- ①Summary Card…小さめのサイズが「Summary Card」「横144 × 縦 144px」で、比率は「1：1」
- ②Summary Card with Large image…大きめのサイズが「Summary Card with Large image」「横300 × 縦157px」で、比率は「2：1」
「Summary Card」は、テキストを目立たせたいときに使用するのがおすすめです。
「Summary Card with Large image」は画像を目立たせたいときに使用するのがおすすめです。
Twitterのアイキャッチ画像をFacebookにも対応させたい場合の最適なサイズは、「横630 × 縦314px」または「横1200 × 縦630px」です。
参考 https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
プロフィール
400px×400px
ヘッダー
1500px×500px
facebookに最適なアイキャッチ画像のサイズは？
Facebookのアイキャッチ画像のサイズも２種類あります。
①サイズを「横630 ×縦315 px」未満に設定した場合は小さめの表示になり、比率は「1：1」です。
②「横630 ×縦315 px」以上のサイズに設定すると大きめの表示になり、比率は「1.91：1」です。
公式では高解像度のデバイスで表示させる場合、「横1080px」以上とすることを推奨しています。
アイキャッチ画像の比率がFacebookと合わない場合は、上下左右が切り取られ、中心部分が表示されます。そのため表示させたい情報は、必ず中心部分に収まるようにしましょう。
参考 https://developers.facebook.com/docs/sharing/best-practices
はてブに最適なアイキャッチ画像のサイズは？
「はてなブックマーク」のアイキャッチ画像は、ホットエントリーした場合にのみ自動的に表示されます。
アイキャッチ画像のサイズはPC用が「横400 ×縦280 px」、モバイル用が「横198 ×縦139 px」で、どちらも比率は「1.43：1」です。
比率が合わない場合は、左上に合わせて切り取られる形で表示されます。
比率・表示位置ともに特殊なので、はてブに合わせてアイキャッチ画像のサイズを調整するのは難易度が高いといえます。
wordpressに最適なアイキャッチ画像のサイズは？
wordpressではテーマごとに、アイキャッチ画像の比率を設定することができます。
テンプレート毎に比率を選んで利用することができるので、自分好みのサイズを探してみましょう！
ここでは代表的なアイキャッチ画像の比率と、最適なサイズについてご紹介します。
黄金比率「1：1.618」
人間にとってもっとも美しくみえる比率です。アップルのロゴも黄金比率を用いてつくられています。
白銀比率「1：1.414」
黄金比率と同じく人間にとって美しくみえる比率です。人気キャラクターに多く用いられています。
一眼「3：2」おもに一眼レフを中心としたカメラで用いられており、安定感があります。
ワイド「16：9」デジタルテレビやyoutubeのサムネイル画像に用いられています。
モバイルで表示すると少し横長な印象です。
スタンダード「4：3」アナログテレビやパワーポイントのスライドに用いられています。
スマホカメラの標準サイズにもなっており、モバイルで見やすい印象です。
シネマスコープ「2：1」映画館のスクリーン「2.35：1」に近い比率です。
スクエア「1：1」
スマホの普及とともに増加した比率で、モバイルで見やすい比率といえます。
Instagramで用いられています。
結論・まとめ
今回はアイキャッチ画像の最適なサイズについてご紹介しました。
TwitterやFacebookで用いる場合は「1200 × 630px」にするのがおすすめです。
ブログの場合は、ご自身が設定した比率にあわせてサイズを調整し、最適なアイキャッチ画像のサイズを攻略して、見やすさアップを目指しましょう。
