ブログ収益化の第一歩！初心者向けASPおすすめ6選
エミリ
MAISOCRE -メゾクレ-
【WordPress】アイキャッチ画像の最適なサイズはこれ！
エミリ
記事内に商品プロモーションを含む場合があります
ブログのアイキャッチ画像のサイズって、どのくらいがいいのかな？？
最初はわからなくて迷うよね。でも、安心して！この記事を読めば、アイキャッチ画像のサイズでもう悩まなくなるよ。
うわぁ、嬉しい！ぜったい読むっ
この記事はこんな人にオススメ
- アイキャッチのサイズに悩んでいる人
- ブロガー初心者
Contents
アイキャッチ画像の最適なサイズ、結論！
- 横1280px × 縦670px（比率1.91：1）
- 横1280px × 縦720px（比率16：9）
上記、2サイズのどちらかを選んでおけば間違いないです。
最近、twitterで評判をよく目にする人気テーマの推奨比率もどちらかに当てはまっていました。後で調査結果も発表するので、良かったら参考にしてください。
ちなみに当ブログのアイキャッチは、横1600px × 縦900px（比率16：9）。人気有料テーマ「SWELL」公式サイトで、Macなどの高解像度ディスプレイでの表示も考慮して「横幅1600px以上」を推奨していたので参考にしたよ。
なぜ横1200px以上なの？ 3つの理由
❶ OGP画像の推奨サイズが1200px以上だから
OGP画像とは、Webやブログの記事がSNSでシェアされた際に表示される画像のこと。
最適なサイズは、1200×630px以上（1.91：1）となっています。
❷ Google砲の推奨サイズだから
Google砲の正式名称は、Google Discover（グーグル・ディスカバー）。ユーザーの興味や関心に関連するコンテンツをTOPページに「おすすめの記事」として表示してくれる機能で、取り上げられると通常の10倍以上のアクセス数を獲得できるとか。
その発生条件の1つに、「画像は、幅1200px以上」というのが含まれます。
❸ AMP推奨サイズだから
AMPとは、Googleが推奨しているモバイルページを高速に表示させるための手法のこと。
ガイドラインでは、「画像の幅は 1,200 ピクセル以上にする必要があります」と書かれています。
1200px以上にすると、Googleに評価されやすくなるよ！
横幅1200pxじゃなくて、1280px以上を推奨する理由
それは、
Retinaなど高解像度ディスプレイでも、アイキャッチをキレイに表示させるため
検索すると2021年4月現在のアイキャッチ画像サイズの主流は、こちら。
- 横1200px × 縦630px（比率1.91：1）
- 横1200px × 縦675px（比率16：9）
横幅1200pxを推奨している記事が多いのですが…大好きなmilieu編集長・塩谷舞さんは2018年のnoteの中で、
Retinaディスプレイ表示にあわせるために、画像は「通常表示サイズの倍サイズ」で仕込んでおきましょう。
塩谷舞note「残念なWebメディア10パターンと、コミュニティのこと」より
と書いているし、Cocoonを開発したわいひらさんも、
アイキャッチには、できる限り大きな画像を設定してください。（中略）今後のことも考えた場合、アイキャッチは1280×1280px以上を推奨します。
と言っています。また、この記事を書くにあたり参考にした321webにも、
最新スマホの解像度は非常に高くなっておりキレイに表示させるためには1200pxではちょっと足りません。
iPhone12 Pro MAXのSuper Retina XDRディスプレイの解像度は2778×1284pxなので画質にこだわるのであればアイキャッチの横幅も1280pxにしておいてもいいかもしれませんね。
321web「ブログやYouTubeの最適なアイキャッチ画像サイズ比率はこれ！」より
とありました。
モニター環境はどんどん高解像度化しいてるので、未来のことを考えると1200pxより大きめな画像にしておいた方がいいのではないかな、と私は推測しています。
WordPress人気テーマのアイキャッチ画像おすすめ比率を調べてみた！
| テーマ | 比率1.91：1 （1280 × 670px） | 比率16：9 （1280 × 720px） |
|---|---|---|
| Cocoon | ○ （＊1） | |
| JIN / JIN:R | ○ | |
| SWELL | ○ （＊2） | |
| AFFINGER | ○ | |
| THE THOR | ○ | |
| OGP画像 | ○ | |
| AMP | ○ |
＊2 SWELLは、高解像度ディスプレイで表示されることを想定し、横幅1600pxを推奨しています。
GoogleとSNSが同盟を結び1つのフォーマットにしたら、みんなが迷わずすむのに…と思ったりしながら表を作りました。
テーマ別のサイズに加え、OGP画像やAMPが推奨しているサイズも表に加えてみたので、上記以外のテーマを使っている人など、どちらにするか迷った際の参考にしていただければ。
あくまで私調べなので、鵜呑みにせず、マニュアルの確認はしてね！
アイキャッチ画像を作るときに、意識すること
❶ 横1280px × 縦670px（比率1.91：1）を選んだ場合
正方形（670 × 670px）にトリミングされることを想定し作る
表示される場所やブラウザの種類によって、アイキャチ画像が正方形にカットされてしまうことがあります。例えば、こちらのアイキャッチ。
私はiPhoneユーザーで、画像が表示されないSafariを使っていたため、そこまで気が回らなかったのですが、、、人気のブラウザGoogle Chrome（グーグルクローム）では、正方形にトリミングされ文字が切れてしまうという事態に……
拡大すると、
…………。（文字が小さすぎるとか、バランスがいまいちとか、ツッコミどころは多々あると思いますが、こちらは、初めて真剣に作ったアイキャッチなので温かい目で見てもらえると嬉しいです）
ここからわかるのは、
重要なテキストや画像は、中心のエリア（670 × 670px）へ配置すると訴求力が高まる
ということです。
❷ 横1280px × 縦720px（比率16：9） を選んだ場合
正方形（720 × 720px）にトリミングされること
SNSでシェアされた場合、上下25pxが切れること
この2つを意識すると良いです。
ただ、切れるのは上下25pxなので、枠ぎりぎりまで文字を配置しなければ、許容できる場合が多いのではないのかな、と思います。
ここからは、私の失敗談を少し。
最初、あまり深く考えず、1328×992pxという意味不明なサイズでアイキャッチを作ってしまいました。その結果、関連記事や人気記事の画像を見るたびに、
「んん？？なんで上下切れて表示されるんだろう……」
と首をかしげることに。
後でアイキャッチには最適なサイズがあると知り、ちゃんと調べておくべきだったととても後悔しました。
結局、いろいろ不具合が多いので、2021年、数ヶ月かけて全てのアイキャッチを1600×900pxにリデザイン。作り直しながら、あまりにも大変すぎて泣きました。
アイキャッチ画像のサイズ、まとめ
という訳で、後半は私の失敗をさらけ出して長くなってしまったわけですが、はじめにしっかりと調べていたら、後で全部のアイキャッチをリサイズするなんてことはなかっただろうなぁと。
たった1つの情報を知らなかっただけで、私のように後で苦労しないように、と思いながら文字に起こしました。誰かのお役に立てたらうれしいです。
もう1度復習すると、アイキャッチ画像の最適なサイズは、
- 横1280px × 縦670px（比率1.91：1）
- 横1280px × 縦720px（比率16：9）
です。おしまい。
ABOUT ME
主な生息地は、おうち。暮らしの中で良いなと思ったことを、女性目線でじっくり調べてお届けします。
