ブログのアイキャッチ完全攻略!最適なサイズは?【初心者向け】

ブログのアイキャッチ完全攻略!最適なサイズは?【初心者向け】

ブログのアイキャッチは、訪れてくれた読者が最初に目にするところ。人間は第一印象が大事であるように、アイキャッチも非常に重要である。

この記事では、アイキャッチの最適なサイズや、オススメの設定方法を解説する。

アイキャッチとは

アイキャッチとは、記事の冒頭に表示される、視覚的な見出しとなる画像のこと

アイキャッチとは、ブログ記事の冒頭や一覧ページに表示される「視覚的な見出し」となる画像のことである。

アイキャッチEye – 目、Catch – 捕まえる)の名の通り、読者の関心を引き、記事の内容をわかりやすく伝える役割がある。

適切なアイキャッチを設定することで、ブログのクリック率向上が期待でき、SEO対策にも繋がると言われている。

適切なアイキャッチ画像のサイズ・形式

サイズ

適切なアイキャッチ画像のサイズは1280px × 720px

適切なアイキャッチ画像のサイズは、Wordpressの「テーマ」ごとに変わってくる。

当ブログで用いているテーマ「Cocoon」の場合は、「横1280px × 高さ720px」がよい。

「Cocoon」では、公式に「横幅1280px以上」、「縦横比16:9」が推奨されているため。
参考:テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法

Cocoon以外のテーマの場合、調べると色々なサイズが出てくるのだが、個人的にはCocoonと同じ1280px × 720pxか、一回り落とした1200px × 675pxがよいのかなと思っている。

横幅の考え方

小さいと、アイキャッチ画像として設定した際に不格好になったり、拡大して表示されることで画質が落ちたりする。800px以上は確保したく、1200px程度がちょうどいい印象。

大きすぎると画像サイズが大きくなって表示速度が落ちるので、程よい所で。

縦横比の考え方

Googleでは「16:9」が推奨されている。 参考:Google検索セントラル

また、X(Twitter)などの共有を意識して「1.91:1」を推奨するブログが散見されるが、やや情報が古そう。2025年5月現在、Xは「16:9」に対応しているようで、見切れることなく表示される。なので、Googleに合わせて「16:9」でよさそう。

形式

写真があるなら「.jpg」、写真がないなら「.png」がよい

写真がある場合は「.jpg」, 写真なし(文字・図形だけ)の場合は「.png」がよい。

写真がある場合、「.jpg」のほうがファイルサイズが小さくなり、ページを開いたときの読み込み速度が上がるためである。読み込み速度はブログを開いたときの快適さに影響するし、SEO的にも読み込み速度が速いほうがよいとされている。

写真がない場合、ファイルサイズには大差ないが、「.png」のほうがやや小さくなる傾向がある。また、画質が「.png」のほうがよいので、この場合は「.png」のほうが優れている。

実際に実験すると、下のような感じ。写真がある場合のファイルサイズは大差がある。写真がないときは正直どっちでもよいような気も…

実際に、写真があるときのファイルサイズは大きな差がある。

アイキャッチ画像の作り方

デザインソフト

お手持ちのデザインソフトで作るとよい。

特に何もデザインソフトがない!という方には「Canva」がオススメ。基本無料で、直感的に使えるので、すぐに使いこなせるようになる。当ブログのアイキャッチ画像も「Canva」で作っている。

デザインの方向性

アイキャッチ画像は使いまわさず、1つ1つデザインするほうがよい。

1つの画像を使いまわすと非常に楽なのだが、そうするとSEO上はあまりよろしくないらしい。(スパムのように見なされる)

手間ではあるが、1つ1つデザインするのがオススメ

とはいえ、当ブログのアイキャッチも、基本的なスタイルは統一して、少し装飾を変えているだけである。参考になるようだったら真似していただいて構わない。Canvaなら写真やアイコンの素材が検索できるので、すぐ作れる。

余談:余白は必要?

アイキャッチ画像が見切れてしまう場合があるので、多少の余白はあったほうがよい。自分は上下左右に50pxの余白を持たせて作っている。

また、ブログによっては正方形に情報を収めるようにすべきという情報がある。Google検索時にアイキャッチが正方形に切り取られて表示されることがあるからである。
個人的な意見としては、正方形に収めようとすると文字サイズが小さくなってしまい、デザイン的にも余白がやたら大きくなってしまうので、そこまでする必要はないかなと思う。

アイキャッチの設定

設定する手順

アイキャッチ画像を設定する手順
  • STEP 01
    記事を書く画面で、「投稿」タブの「アイキャッチ画像を設定」をクリック
  • STEP 02
    「ファイルをアップロード」タブで、「ファイルを選択」をクリック。開いた画面でアイキャッチ画像を選択する。
  • STEP 03
    代替テキスト、タイトル、キャプションを入力する。
    • 代替テキスト → ブログのタイトルを入力する。
    • タイトル → ファイル名がそのまま反映される。画像の内容がわかるようなファイル名にしておく。
    • キャプション → 記事の簡単な説明を入力する。
  • STEP 04
    「アイキャッチ画像を設定」をクリックする。

これでアイキャッチ画像の設定は完了。

Q. 代替テキストやタイトル、キャプションの入力は何のため?

A. 検索エンジンに画像の内容を伝えるため。
検索エンジンは画像を認識できないらしいので、文字で内容を伝える必要がある。
文字で内容を伝えておくことで、掲載順位の向上が見込まれる。

まとめ

この記事では、アイキャッチの最適なサイズや、オススメの設定方法を解説した。お役に立てたなら幸い。