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

キップム
キップム

ブログのアイキャッチ画像のサイズって
どのくらいがいいのかな??

yoko
yoko

最初はわからなくて迷うよね。

キップム
キップム

そうなの…

yoko
yoko

でも、安心して!この記事を読めば、アイキャッチ画像のサイズでもう悩まなくなるよ

キップム
キップム

うわぁ、やったー!ぜったい読むっ

スポンサーリンク

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

  • アイキャッチのサイズに悩んでいる人
  • ブロガー初心者

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

1| 横1280px × 縦670px(比率1.91:1)

2| 横1280px × 縦720px(比率16:9)

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

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

キップム
キップム

後で調査結果も発表するから、見てね!

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

twitter・Facebook・Googleのロゴ

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 ピクセル以上にする必要があります」と書かれている。

キップム
キップム

1200px以上にすると、Googleに評価されやすくなるよ!

なぜ横幅1280pxなの?

Retinaなど高解像度ディスプレイでも、アイキャッチをキレイに表示させるため

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

  •  横1200px × 縦630px(比率1.91:1)
  •  横1200px × 縦675px(比率16:9)

横幅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
SWELL*2
AFFINGER5
THE THOR
OGP画像
AMP

*1 Cocoonの初期設定は16:9。それ以外に4種類のサイズが用意されている。詳しくはこちら
*2 SWELLは、高解像度ディスプレイで表示されることを想定し、横幅1600pxを推奨している。

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

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

yoko
yoko

あくまで私調べなので、鵜呑みにせず、マニュアルの確認はしてね!

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

1| 横1280px × 縦670px(比率1.91:1)を選んだ場合

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

正方形(670 × 670px)にトリミングされることを想定し作る

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

正方形にトリミングされる前のアイキャッチ画像

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

正方形にトリミングされたアイキャッチ画像

拡大すると、

正方形にトリミングされたアイキャッチ画像

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

ここからわかるのは、

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

ということ。

2| 横1280px × 縦720px(比率16:9) を選んだ場合

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

正方形(720 × 720px)にトリミングされること

SNSでシェアされた場合、上下25pxが切れること、

この2つを意識する

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

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

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

と首をかしげることに。

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

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

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

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

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

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

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

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

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

1|横1280px × 縦670px(比率1.91:1)

2| 横1280px × 縦720px(比率16:9)

おしまい。

文章: yoko( @_yoko51_

Comment