アイキャッチ画像の最適なサイズを知りたいです。
なぜそのサイズが最適なのか、その理由も併せて教えて欲しいです。
この記事では、こういった疑問にお答えします。
- アイキャッチ画像の最適なサイズは1200×630ピクセル
- 1,200ピクセルがアイキャッチ画像に最適な理由2つ
- ブログのアイキャッチ画像を設定する時のポイント3つ
なお、本記事の筆者はブログ歴が17年以上あり、15年近くブログ収益でご飯を食べています。
ブログのアイキャッチ画像は何ピクセルで設定すれば良いのかお悩みですか？
この記事では、アイキャッチ画像の最適なサイズや比率、設定する時の注意点を解説します。
アイキャッチ画像の最適なサイズは1200×630ピクセル
結論から言うと、アイキャッチ画像の最適なサイズは「1,200px（横） × 630px（縦）」です。
- 画像のサイズ → 1200px（横） × 630px（縦）
- 画像の比率 → 1：1.91（縦：横）
アイキャッチ画像を設定する場合、上記のサイズ、あるいは上記の比率でアイキャッチ画像を設定するのがおすすめです。
1200ピクセルがアイキャッチ画像に最適な理由2つ
1,200ピクセルがアイキャッチ画像に最適な理由は下記2つです。
- SNSでシェアされた時にピッタリ表示されるサイズだから
- Google Discoverの推奨サイズだから
上記のとおり。
SNSでシェアされた時にピッタリ表示されるサイズだから
SNS（X（旧Twitter）やFacebook）で記事をシェアされると、アイキャッチ画像が表示されますが、1,200 x 630ピクセルで設定すると画像がピッタリ表示されます。
なお、各SNSごとに推奨サイズが若干異なりますので、TwitterとFacebookの推奨サイズを個別に解説します。
- X（旧Twitter）の場合
- Facebookの場合
X(旧Twitter)の場合
X（旧Twitter）の場合、記事をシェアされる時に表示されるアイキャッチ画像の比率は「2：1」となっていますが、実際に表示される画像は1,200×600pxとなります。
そのため、上下15pxが切れて表示されます。
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300×157 or maximum of 4096×4096 pixels.
出典：Summary Card with Large Image Twitter Developer
切れて表示されるとはいえ、わずか15px程度のことなので、ほぼほぼピッタリ表示されます。
X（旧Twitter）でシェアされた時のアイキャッチ画像の確認方法
X（旧Twitter）のCard validatorという機能を使うと、Twitterでシェアされた時、アイキャッチ画像がどのように表示されるのかを事前に確認できます。
公式サイト Card Validator | Twitter Developers
使い方は簡単で、URLを入力するだけでアイキャッチ画像が表示されます（要ログイン）。
Facebookの場合
Facebookの場合、1,200ピクセルを推奨している訳ではありませんが、1.91:1の比率を推奨しています。
Open Graphストーリー以外の画像は長方形で表示されます。1.91:1の画像比(600 x 314ピクセルなど)を使用してください。
出典：ベストプラクティス – シェア機能 – ドキュメンテーション – Facebook for Developers
1,200 x 630pxの画像の比率は「1.91:1」です。
ですので、1,200 x 630pxの画像を使っておけば問題ありません。
Facebookでシェアされた時のアイキャッチ画像の確認方法
Facebookのシェアデバッカーを使うと、Facebookでシェアされた時にアイキャッチ画像がどのように表示されるのかを確認できます。
公式サイト シェアデバッガー – Facebook for Developers
使い方は簡単で、記事のURLを入力するだけです（要ログイン）。
ちなみに、公式ツールではありませんが「OGP画像シミュレータ」というWebツールを使うと、画像をドラッグ＆ドロップでアップロードするだけで、アイキャッチ画像を確認できます。
参考リンク OGP画像シミュレータ
Google Discoverの推奨サイズだから
Google Discover（Googleディスカバー）は、ユーザーの興味・関心にマッチするコンテンツをトップページに「おすすめの記事」として表示するニュース配信機能のことを言います（「Google砲」とも呼ばれてます）。
Googleディスカバーに表示されるのは簡単ではありませんが、アイキャッチ画像が1,200ピクセル以上が推奨されています。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。
もちろん、アイキャッチ画像を推奨サイズにしたからといって、Googleディスカバーに表示される訳ではありません。
でも、1,200ピクセル以上の画像を設定しておかないと、そもそも表示されるチャンスすら巡ってきませんので、アイキャッチ画像は1,200ピクセル以上の画像を設定しておくといいですよ。
ブログのアイキャッチ画像を設定する時のポイント3つ
ブログのアイキャッチ画像を設定する時のポイントは下記3つです。
- テキストを入れる時はテキストを中央に寄せて作る
- アイキャッチ画像のサイズを統一する
- 圧縮してからアップロードする
上記のとおり。
テキストを入れる時はテキストを中央に寄せて作る
アイキャッチ画像にテキストを入れる時は、テキストを中央に寄せて作るのがおすすめです。
基本的に、「1,200 × 630px」で作っておけばSNSでピッタリ表示されますが、下記の場合、画像が正方形で表示されるため、両端がカットされ、全ての画像が表示されません。
- 検索結果にアイキャッチが表示された時
- Googleディスカバーに表示された時
しかし、下図のようにテキストを中央に寄せておけば、全てのテキストが表示されますので、なるべく、中央に寄せると良いです。
アイキャッチ画像のサイズを統一する
アイキャッチ画像のサイズを統一すると、下図のように統一感が出て見栄えが良いです。
アイキャッチ画像のサイズがバラバラだと、下図のように統一感が出ませんし、サムネイル画像を並べて表表すると、サイズの違いによるすき間が目立ちます。
圧縮してからアップロードする
横幅1,200ピクセル以上の画像をそのままアップロードして使用すると画像のデータ容量が大きいため、読み込みが遅くなります。
必ず、データ容量を圧縮してからアイキャッチ画像を設定するようにしましょう。
なお、ページの表示速度が及ぼす悪影響については別記事の「ページの表示速度が遅いのは致命的！測定方法や改善方法を解説」をどうぞ。
画像データを軽量化するWebツール「TinyPNG」
「TinyPNG」というWebツールを使うと、画像をアップロードするだけで簡単に軽量化できます。
公式サイト tinypng
TinyPNGに画像をアップロードするだけで、6～7割程度、画像データを圧縮できるのでおすすめです。
ブログのアイキャッチ画像を作れるおすすめなツール2選
最後に、ブログのアイキャッチ画像を作れるおすすめなツールを2つ紹介します。
- Canva（キャンバ）
- Googleスライド
上記のとおり。
Canva（キャンバ）
Canvaは、無料から使えるデザインツールです。
公式サイト Canva(キャンバ)
最初に、サイズ指定でアイキャッチ画像を作れば、後はテンプレートしてテキストを変更するだけで使いまわせるので便利です。
無料で多くのデザインが使えますし、1つの素材単位で画像素材を購入する事もできるので、使い勝手が良いです。
Googleスライド
Googleスライドはシンプルで使いやすく、画像にテキストを挿入するのも簡単なので、アイキャッチ画像作成に向いてます。
公式サイト Googleスライド
Googleスライドも、1度、サイズ指定してスライドを作れば、テキストを変えるだけで使いまわせるので、使いやすいです。
Canvaのように素材は用意されていないので、画像素材サイトやパワーポイントテンプレートサイト等で素材を用意する必要があります。
まとめ
以上、ブログのアイキャッチ画像に最適なサイズと比率を解説しました。
アイキャッチ画像の最適なサイズは「1,200 x 630px」です。
このサイズでアイキャッチ画像を設定すれば、SNSでシェアされた時にピッタリ表示されます。
Googleディスカバーに表示される可能性も出てきますので、アイキャッチ画像を作る時は1,200 x 630pxのサイズで作るのがおすすめです。