WordPressのアイキャッチ画像サイズ完全ガイド

WordPressのアイキャッチ画像のサイズ、なんとなくその場のノリで決めていませんか。

私もブログを始めたころは、サイズも比率もよく分からずにアップして、画像がぼやけたり、スマホで上下が切れたりして「なんかダサいな…」と感じていました。

この記事では、そんなモヤモヤをなくすために、WordPressのアイキャッチ画像サイズの考え方を一通りまとめました。

先に結論だけ言うと「横幅1200px前後で、比率は1.91:1（1200×630）か16:9、容量はできるだけ軽く」が、ほとんどのブログで大きく失敗しないラインだと考えています。

WordPressのアイキャッチ画像サイズはこの組み合わせが鉄板

代表的なWordPressアイキャッチ画像サイズの比較表

まずは、よく選ばれているアイキャッチ画像サイズを表で整理してみます。

用途・考え方	サイズ（px）	比率	主な特徴・使いどころ
汎用おすすめサイズ	1200×630	1.91:1	多くのブログや解説記事で定番とされているサイズです。横長で扱いやすく、アイキャッチにもOGP画像にもそのまま流用しやすいバランスの良い形です。
16:9の汎用サイズ	1200×675	16:9	動画のサムネイルでもおなじみの比率です。Cocoonなどのテーマで推奨されることが多く、横長レイアウトのページとの相性が良いです。
Cocoonでよく使われるサイズ	1280×720	16:9	公式マニュアルや運営者の発信などでよく見かけるサイズです。少し大きめなので、PCで大きく見せたいときに向いています。
SNS正方形サムネ向け	1080×1080 など	1:1	Instagramなど、正方形中心のSNS用に作るときのサイズです。WordPressのアイキャッチにも使いたい場合は、上下が多少切れても大丈夫な構図にしておく必要があります。
軽さ重視のミニマムサイズ	800×450 など	16:9	どうしても表示速度を最優先したいサイト向けのサイズです。ただし、Discoverや一部のカード型表示を狙うなら、できれば横幅1200px以上を確保したいところです。

私がクライアントワークや自分のブログで使うときは、基本を1200×630にしておき、Cocoonのようなテーマでは1200×675か1280×720も候補に入れる、という決め方をよくしています。

迷ったら「横1200px以上・1.91:1か16:9」にしておけばOK

ここまで見てきて「いろいろパターンがあって結局どれにすればいいの？」と感じたかもしれません。

そんなときは、次の3つだけ覚えておけば十分です。

• 横幅は1200px以上にしておく
• 縦横比は「1.91:1（1200×630）」か「16:9（1200×675や1280×720）」のどちらかにする
• 文字やメインのモチーフは、画像の中央付近に寄せる

この条件を満たしておけば、WordPressテーマを変えたときや、SNSでシェアしたとき、さらにはDiscoverなどでカード表示されたときにも、大きく崩れることはほとんどありません。

WordPressのアイキャッチ画像が表示される場所と役割

WordPressのどこにアイキャッチが表示されるのか

一般的なWordPressブログでは、アイキャッチ画像は次のような場所に登場します。

• 記事詳細ページの上部（タイトルのすぐ下や背景）
• トップページやカテゴリーページの一覧に並ぶサムネイル
• 関連記事や人気記事ウィジェットの小さなサムネイル
• SNSでURLを貼り付けたときに出てくるカード画像（OGP画像）

私も最初は「記事の上についているただの写真」くらいの感覚でしたが、一覧やSNSのタイムラインを眺めていると、実はかなり目立つパーツだと気づきました。

アイキャッチ画像がSEOやユーザー行動に与える影響

アイキャッチ画像のサイズや見え方は、次のようなポイントにじわじわ効いてきます。

幅が足りずにぼやけてしまうと、せっかく良い記事でも「少し古いサイトかな」と感じられてしまいます。

逆に、やたらと大きな画像を無圧縮で使うと、表示が重くなり、離脱されやすくなります。

このあたりのバランスを取るために、WordPressのアイキャッチ画像サイズを軽くでも設計しておくことが大事だと私は感じています。

テーマ別に変わるWordPressアイキャッチ画像サイズの考え方

人気テーマのアイキャッチ画像サイズ目安

代表的なWordPressテーマのアイキャッチ画像サイズの目安を、私がよく見る情報をもとにまとめると、だいたい次のような感じです。

テーマ名	よく使われるアイキャッチサイズ	比率	メモ
SWELL	1200×630	1.91:1	運営者やユーザーの記事でよく見かける組み合わせです。OGP画像と共通で扱いやすいサイズです。
Cocoon	1200×675 / 1280×720 など	16:9	16:9の横長レイアウトが前提のテーマなので、この比率にそろえると見え方が安定しやすいです。
SANGO・JIN など	1200×630〜675 前後	1.91:1〜16:9	横幅1200px以上の横長画像を推奨するケースが多く、基本は1200×630近辺を基準に考えると大きく外しません。
海外テーマ全般	1200×630 前後	1.91:1	FacebookやXのカード画像に合わせて、1.91:1の比率を前提にしているテーマが多い印象です。

細かい値はテーマやバージョンによって変わることもあるので、公式ドキュメントがあれば一度目を通しておくと安心です。

自分のサイト幅から最適なアイキャッチ画像サイズを決めるステップ

テーマ名だけではよく分からない、という場合は、自分のサイトの本文幅から逆算する方法がシンプルです。

大まかな考え方は次のとおりです。

例えば、本文が800pxくらいなら、アイキャッチは1200px前後にしておくと、PCでもスマホでも余裕を持って表示できます。

この方法だと、テーマを変えたときにも考え方をそのまま流用しやすいので、私はよくクライアントにもおすすめしています。

PC・スマホ・Retinaディスプレイを意識したサイズの考え方

見るデバイスによって、求められる画像サイズの感覚は少しずつ変わります。

ざっくりとした目安を表にまとめると、次のようなイメージです。

デバイス	想定表示幅の目安	アイキャッチの推奨横幅	コメント
PC	1000〜1400px	1200〜1600px	フル幅レイアウトでは大きめのアイキャッチが映えます。背景として使う場合は、やや余裕を持たせると安心です。
タブレット	700〜1000px	1200px前後	多くのテーマではPC用画像をそのまま縮小して表示するため、PC基準で作っておけば問題ありません。
スマホ	360〜480px	800〜1200px	高精細なディスプレイでは、実際の表示サイズの2倍程度の画像を使うときれいに見えます。1200pxあればほとんどのケースで足ります。

スマホ表示で上下が切れやすいテーマもあるので、重要な文字や人の顔はなるべく中央寄りに集めておくと安全です。

アイキャッチ画像サイズとページ表示速度・容量のベストバランス

画像形式ごとの特徴（JPEG・PNG・WebP）

よく使う画像形式それぞれの特徴を、ざっくり分かりやすくまとめると次のとおりです。

形式	向いている用途	特徴
JPEG（JPG）	写真がメインのアイキャッチ	フルカラー写真と相性の良い圧縮形式です。適切な画質設定にすれば、そこそこ軽くて見た目もきれいに保ちやすいです。
PNG	ロゴ・イラスト・透過が必要な画像	透過やくっきりした線に強い一方で、容量が大きくなりがちです。アイキャッチ全体をPNGにすると、ページが重くなることがあります。
WebP	写真とイラストの両方	JPEGよりも軽くしやすい次世代フォーマットです。ブラウザの対応もかなり広がってきていて、画像圧縮プラグインから自動変換するケースも増えています。

私の運用では、まずはJPEGで書き出して、あとはプラグイン側で必要に応じてWebPに変換してもらう、という形に落ち着いています。

ファイル容量の目安と圧縮のコツ

WordPressのアイキャッチ画像のファイル容量は、軽すぎても画質が荒くなり、重すぎるとページ表示が遅くなります。

私が目安にしているラインは次のとおりです。

• 理想的な範囲：100〜200KBくらい
• 許容ライン：300KB前後まで
• それ以上：枚数が多いと体感で重くなってくる

この範囲に収めるために、次のような工夫をするとバランスが取りやすくなります。

• 元画像を必要以上に大きくしない（2000pxなどはできるだけ避ける）
• 画像編集ソフトやCanvaで、画質80％前後を目安に書き出す
• WordPressの画像圧縮プラグインで、自動圧縮とフォーマット変換を任せる

これだけでも、PageSpeed Insightsの「画像を最適化してください」という警告がかなり減り、体感速度も変わってきます。

WordPressプラグインを使った画像最適化

毎回手作業で圧縮するのは現実的ではないので、実務ではほとんどの人がプラグインに頼っています。

代表的な画像圧縮プラグインを、特徴と合わせてまとめておきます。

プラグイン名	特徴・得意分野
EWWW Image Optimizer	自動圧縮とWebP変換に対応した定番プラグインです。設定次第で、ほぼ「入れて放置」で使えるので、初めての人にも扱いやすい印象があります。
TinyPNG系プラグイン	Compress JPEG & PNG imagesなど、オンラインのTinyPNGサービスと連携するタイプです。高圧縮でも画質がきれいに保ちやすいのが魅力です。
Imagify	圧縮レベルを段階的に選べます。JPEGやPNGだけでなく、WebPにも対応しており、細かく調整したい人に向いています。
ShortPixel	高い圧縮率とWebP・AVIF変換に対応したプラグインです。画像枚数が多いサイトで、容量をしっかり削りたいときに活躍します。

どれを選ぶかは好みもありますが、ひとつ導入しておくだけでも、WordPressのアイキャッチ画像サイズと容量の悩みはかなり軽くなります。

Canvaで作るWordPressアイキャッチ画像のデザインとサイズ

Canvaでwordpress向けアイキャッチサイズを設定する手順

CanvaでWordPress向けのアイキャッチ画像を作るときの基本的な流れは、次のとおりです。

• Canvaで「デザインを作成」から「カスタムサイズ」を選ぶ
• 幅に「1200」、高さに「630」または「675」など、決めたサイズを入力する
• 背景写真や色を敷き、文字を中央付近に配置する
• 書き出し形式をJPGにし、画質80％前後でダウンロードする

このときのポイントは、「上下が多少切れても読める」構図にしておくことです。

スマホで表示されたときや、SNSでシェアされたときにトリミングされることを考えて、タイトル文字やメインのモチーフは、真ん中寄りの四角いエリアに収めておくと安心です。

クリックされやすいアイキャッチデザインのコツ

デザインは感覚的な部分も大きいですが、最低限のルールを決めておくと、見た目のクオリティが安定します。

項目	NGパターン	OKパターン
テキスト量	説明文を詰め込みすぎて、スマホでは読めない	キーワードと短いフレーズに絞り、本文で詳しく説明する
色数	原色を多用して、全体がチカチカしている	ベースカラー2色とアクセント1色程度に抑える
フォント	手書き風や装飾フォントをたくさん混ぜる	読みやすいゴシック体を中心に、使うフォントは2種類までにする
配置	文字が端ギリギリまで広がり、余白がない	しっかり余白を取り、中央寄りに文字をまとめる

私自身、ノリでいろいろ盛ったアイキャッチを作っていた時期があるのですが、結局シンプルにしたほうがクリックされやすいなと感じることが増えました。

ブログ全体で、アイキャッチのトーンやフォントをそろえておくと、「この画像はあのブログだ」と一目で分かるようになり、ブランド感もじわっと出てきます。

WordPress側の設定でアイキャッチ画像サイズを調整する方法

メディア設定でサムネイル・中・大サイズを見直す

WordPressでは、画像をアップロードするときに「サムネイル」「中サイズ」「大サイズ」といった複数のサイズを自動で作成します。

管理画面の「設定」→「メディア」を開くと、それぞれのサイズがどれくらいのピクセル数になっているかを確認できます。

項目	初期設定の一例	説明
サムネイルのサイズ	150×150	記事一覧やウィジェットでよく使われる小さな正方形サムネイルです。
中サイズ	300×300	本文中の小さめの画像用としてよく使われるサイズです。
大サイズ	1024×1024	比較的大きめの表示に使われます。テーマによっては、このサイズをもとにレイアウトされることもあります。

アイキャッチ画像として実際にどのサイズが使われるかはテーマ次第ですが、ここを見直しておくと、無駄に大きな画像が大量に生成されることを防げます。

functions.phpでアイキャッチサイズをカスタマイズする考え方

少し踏み込んだ話になりますが、テーマのfunctions.phpでは独自の画像サイズを追加できます。

ざっくりしたイメージとしては、次のようなことができます。

• add_image_sizeで「1200×630のアイキャッチ用サイズ」などを定義する
• テンプレートの中で、the_post_thumbnail(‘定義したサイズ名’); のように呼び出す

実際にコードを書くときは、必ず子テーマ側に追記し、元のテーマがアップデートされても消えないようにしておきましょう。

また、functions.phpを触る前には、必ずバックアップを取っておくのがおすすめです。

既存画像を一括で作り直すときのポイント

メディア設定やadd_image_sizeを変更したあと、そのままでは既にアップロードされている画像のサイズは変わりません。

このときに役立つのが、Regenerate Thumbnails系のプラグインです。

• 新しく画像サイズを追加したとき
• メディア設定のサイズを変更したとき
• テーマを乗り換えて、別のアイキャッチ画像サイズが必要になったとき

こういったタイミングで一括再生成を行うと、WordPress内で使われているサムネイルが新しいサイズに合わせて作り直されます。

結果として、アイキャッチ画像が変に引き伸ばされたり、一覧だけ妙に小さく表示されたりするトラブルを減らせます。

アイキャッチ画像とOGP画像・SNS用画像サイズの関係

ブログ内のアイキャッチとSNS用OGP画像を分けるべきか

基本的には、アイキャッチ画像とOGP画像を同じものにしても問題ありません。

特に、1200×630などのサイズで作っておけば、多くのテーマでそのままOGPとして使えるようになっています。

ただ、次のようなケースではOGP画像を別に用意するのもおすすめです。

• ブログ内では縦長のメインビジュアルを使いたいとき
• SNSでは、テキストを大きく入れてクリックを誘いたいとき
• シェア用に、ロゴ入りの共通テンプレートを使いたいとき

All in One SEOやSEO SIMPLE PACKなどのSEOプラグインを使えば、記事ごとにOGP用の画像を指定できます。

「ブログ内用のアイキャッチ」と「SNS用の見せ方重視の画像」を分けたい場合は、この仕組みを活用するとスムーズです。

Discover・SNSを意識した画像サイズの基本

Discoverや主要SNSで無難に表示させたいときの基本ルールを、まとめておきます。

このあたりを意識しておけば、「SNSではいい感じなのに、ブログ内では変」「ブログ内ではきれいだけど、SNSで切れてしまう」といったズレを減らせます。

よくある質問：WordPressアイキャッチ画像サイズの悩み

Q1. アイキャッチ画像がぼやけてしまいます。サイズ設定のどこを見直せばいいですか？

A. 元の画像サイズが足りないか、テーマ側で拡大されている可能性が高いです。

• アイキャッチとして表示される幅より小さい画像を使っていないか
• 横幅800px以下の画像を、PCで大きく引き伸ばして表示していないか
• サムネイルや中サイズを無理やり使っていないか

まずは、横幅1200px前後の画像を用意してみてください。

それでもぼやける場合は、元画像自体の画質が荒くなっていないか、圧縮しすぎていないかも確認してみると良いです。

Q2. スマホで見るとアイキャッチ画像の上下が切れてしまいます。どう調整すればいいですか？

A. 画像の比率とデザインの両方を見直すのがおすすめです。

• 比率が極端な横長や縦長になっていないか確認する
• 1.91:1か16:9といった扱いやすい比率で作り直してみる
• タイトル文字や人物など、重要な要素を中央寄りに再配置する

WordPressのテーマによっては、スマホ表示時に上下が少しトリミングされる作りになっていることもあります。

そういったテーマでは、「どこが切れてもいいか」を考えながら配置するのが現実的な解決策です。

Q3. テーマを変えたらアイキャッチ画像サイズが合わなくなりました。作り直すしかありませんか？

A. すべて作り直す前に、設定と再生成でどこまで対応できるか試してみましょう。

• 新しいテーマが推奨しているアイキャッチ画像サイズを確認する
• 必要に応じてメディア設定やadd_image_sizeでサイズを調整する
• Regenerate Thumbnails系のプラグインで、既存画像のサムネイルを一括再生成する

普段から横幅1200px以上・比率1.91:1か16:9でそろえておけば、多くのテーマで流用しやすくなります。

どうしても合わない画像だけ、優先度の高い記事から順番に作り直していく、という現実的なやり方もありだと思います。

まとめ：WordPressアイキャッチ画像サイズで迷わないために

最後に、ここまでの内容をコンパクトに振り返ります。

今日からできる最初の一歩は、とてもシンプルです。

まずは自分のブログで「使うアイキャッチサイズ」を一つ決めてしまいましょう。

例えば「1200×630で作る」と決めたら、Canvaでそのサイズのテンプレートを1つ作り、今後のアイキャッチは基本的にそのテンプレから作るようにします。

それだけで、毎回サイズに迷う時間が減り、サイト全体の見た目もそろってきます。

あとは、この記事の内容を思い出しながら、実際にいくつかの画像を試してみて、自分のブログにいちばんしっくりくるWordPressアイキャッチ画像サイズを見つけていってください。