ブログの記事には欠かせないアイキャッチ画像ですが、皆さんはサイズを意識したことはありますか？
実はアイキャッチのサイズは意外と重要で、大きいサイズで作成してしまうとサムネイルからはみ出して見栄えが悪くなる可能性もあります。
そこで、今回はアイキャッチ画像の最適サイズと調べ方について解説します。
アイキャッチ画像のサイズが大事な理由
アイキャッチ画像は記事ページだとちゃんと表示されるので、サイズを適当に設定してそのまま放置している人が多いです。
しかし、記事のアイキャッチ画像は「記事一覧」や「最新記事」などのサムネイル画像としても使われます。
そのため、画像サイズが大きすぎると、サムネイルで表示される時に画像が枠に収まらず、画像に書いた文字やイラストが切れてしまう可能性があります。
例えば、以前「毎日ジョギングして感じたメリット・デメリットを明かします」という記事を作成したのですが、この時のアイキャッチ画像のサイズは「横1600px：縦1099px」。
記事内ではこんな感じで全部表示されますが(今見るとデカすぎ笑)、
記事一覧のサムネイル画像だとはみ出しています。
別に気にならないと思う読者さんもいるかもしれませんが、勝負の神様は細部に宿る(岡田武史監督の名言)ということで、細かい部分にもしっかりこだわった方が良いですね。
ブログは別に誰かと勝負するわけじゃないんですけど、こういう具合に修正しておきました。笑
最適サイズ
では、アイキャッチ画像の最適サイズはどのくらいが理想的なのでしょうか。
これはwordpressで使っているテーマによって異なります。
例えば、有料テーマ「JIN」の最適サイズは「横760px：縦428px」。
横760px：縦428pxが16:9にあたるので、これくらいの画像サイズで作成するとアイキャッチが綺麗にはまります。それ以上の大きさでも、16:9の比率を守れていると特に綺麗にはまります。
引用元：JIN MANUAL アイキャッチ画像の大きさはどれくらいが最適？
https://jin-theme.com/manual/eyecatch-img/
また、有料テーマ「SANGO」の最適サイズは「縦680px：横390px」。
アイキャッチの推奨画像サイズは680px×390pxです
引用元：PORIUP SANGOアイキャッチ画像の推奨サイズ
https://oldno07.com/poripu/eyecatch-size/
僕は有料テーマ「ストーク」を使用していますが、ストークは公式で最適サイズが発表されているわけではありません。
なので、「横730px：縦430px」を目安にサイズを設定しています。
画像サイズの調べ方
ストークのようにテーマによっては最適サイズの説明がないテンプレートもあります。
そういう場合は公式サイトの画像サイズを調べるのがおすすめです。
各テンプレートは販売・マニュアル用の公式サイトを持っています。
なので、そこで使われているアイキャッチ画像のサイズを調べて、自分のブログでもそのサイズで画像を作成すると良いでしょう。
ここではストークのサイトを例に画像サイズの調べ方を解説します。
アイキャッチ画像上で右クリックして検証
もしくはキーボードの「F12」を押します。
すると画面右側に「デベロッパーツール」というものが表示されます。
「デベロッパーツール」の左上「Select an element in the page to inspect it」をクリック。
再度アイキャッチ画像にカーソルを合わせると、画像サイズが表示されます。
このサイズを参考にしてアイキャッチ画像を作成しましょう！
まとめ
今回はアイキャッチ画像の最適サイズと調べ方について解説しました。
ちなみにサイズを設定して、アイキャッチ画像を作成するにはCanvaがおすすめ。
Canvaは自分で画像サイズを指定して、アイキャッチ画像を作成することができます。
詳しくはこちらにまとめています。
