【WordPress】アイキャッチ画像の最適なサイズはこれ！

この記事はこんな人にオススメ

アイキャッチ画像の最適なサイズ、結論！

以上、2サイズのどちらか。

最近、twitterで評判をよく目にする人気テーマの推奨比率もどちらかに当てはまっていた。

なぜ横1200px以上なの？ 3つの理由

1. OGP画像の推奨サイズが1200px以上だから

OGP画像とは、Webやブログの記事がSNSでシェアされた際に表示される画像のこと。

最適なサイズは、1200×630px以上（1.91：1）となっている。

2. Google砲の推奨サイズだから

Google砲の正式名称は、Google Discover（グーグル・ディスカバー）。ユーザーの興味や関心に関連するコンテンツをTOPページに「おすすめの記事」として表示してくれる機能で、取り上げられると通常の10倍以上のアクセス数を獲得できるとか。

その発生条件の1つに、「画像は、幅1200px以上」というのが含まれる。

3. AMP推奨サイズだから

AMPとは、Googleが推奨しているモバイルページを高速に表示させるための手法のこと。

ガイドラインでは、「画像の幅は 1,200 ピクセル以上にする必要があります」と書かれている。

なぜ横幅1280pxなの？

検索すると2021年4月現在のアイキャッチ画像サイズの主流は、こちら。

横幅1200pxを推奨している記事が多いのだけれども、、、大好きなmilieu編集長・塩谷舞さんは2018年のnoteの中で

Retinaディスプレイ表示にあわせるために、画像は「通常表示サイズの倍サイズ」で仕込んでおきましょう。

引用元：塩谷舞note「残念なWebメディア10パターンと、コミュニティのこと」より

と書いているし、Cocoonを開発したわいひらさんも、

アイキャッチには、できる限り大きな画像を設定してください。（中略）今後のことも考えた場合、アイキャッチは1280×1280px以上を推奨します。

引用元：Cocoon「テーマのサムネイルをRetinaディスプレイ対応させる方法（スマホで画像がぼやける対策）」より

と言っている。また、この記事を書くにあたり参考にした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
AFFINGER5	○
THE THOR		○
OGP画像	○
AMP		○

GoogleとSNSが同盟を結び1つのフォーマットにしたら、みんなが迷わずすむのに…と思ったりしながら表を作った。

テーマ別のサイズに加え、OGP画像やAMPが推奨しているサイズも表に加えてみたので、上記以外のテーマを使っている人など、どちらにするか迷った際の参考にしていただければ。

アイキャッチ画像を作るときに、意識すること

1｜ 横1280px × 縦670px（比率1.91：1）を選んだ場合

表示される場所やブラウザの種類によって、アイキャチ画像が正方形にカットされてしまうことがある。例えば、こちらのアイキャッチ。

私はiPhoneユーザーで、画像が表示されないSafariを使っていたため、そこまで気が回らなかったのだけれど、、、人気のブラウザGoogle Chrome（グーグルクローム）では、正方形にトリミングされ文字が切れてしまうという事態に……

拡大すると、

…………。（文字が小さすぎるとか、バランスがいまいちとか、ツッコミどころは多々あると思うけれど、こちら、初めて真剣に作ったアイキャッチなので温かい目で見てもらえると嬉しいです）

ここからわかるのは、

重要なテキストや画像は、中心のエリア（670 × 670px）へ配置すると訴求力が高まる

ということ。

2｜ 横1280px × 縦720px（比率16：9） を選んだ場合

ここからは、私の失敗談を少し。

最初、あまり深く考えず、1328×992pxという意味不明なサイズでアイキャッチを作ってしまった。その結果、関連記事や人気記事の画像を見るたびに、

「んん？？なんで上下切れて表示されるんだろう……」

と首をかしげることに。

後でアイキャッチには最適なサイズがあると知り、ちゃんと調べておくべきだったととても後悔した。

推奨サイズに作り直す時間も余裕もないので、今は、Cocoonのサムネイル画像から白銀比（日本の木造建築に古くから使われている約7：5の比率。大和比とも呼ばれる）を採用している。理由は、1番修正しやすかったから。

白銀比（1328×948px）の場合、SNSでシェアされると、下図のように、上下126pxもトリミングされ見えなくなってしまうのだけれど、

切れてしまうことにストレスをほとんど感じたことがない。

1200×720px（16：9）の場合、切れるのは上下25pxなので、枠ぎりぎりまで文字を配置しなければ、許容できる場合が多いのではないのかな、と思う。

＊追記　2021年10月現在、アイキャッチサイズは、今後テーマをSWELLに移行する予定があるため、1600×900pxに変更済み

アイキャッチ画像のサイズ、まとめ

という訳で、後半は私の失敗をさらけ出して長くなってしまったわけだけれども、はじめにしっかりと調べていたら、後で全部のアイキャッチをリサイズするなんてことはなかっただろうなぁと。

たった1つの情報を知らなかっただけで、私のように後で苦労しないように、と思いながら文字に起こした。誰かのお役に立てたらうれしい。

もう1度復習すると、アイキャッチ画像の最適なサイズは、

おしまい。

文章： yoko（ @_yoko51_）