「WordPressのアイキャッチ画像って、どのサイズで作ればいいの?」「サイズを間違えると、SNSでシェアした時に画像が切れてしまう…」こんな悩みを抱えていませんか?
実は、アイキャッチ画像のサイズ選びを間違えると、**サイトの表示速度低下やSNSでの見栄え悪化**など、様々な問題が発生します。せっかく時間をかけて作った画像が台無しになってしまうのは避けたいですよね。
結論から言えば、**WordPressのアイキャッチ画像は「横1200px × 縦630px」が最も汎用的で推奨されるサイズ**です。このサイズなら、Google Discoverへの掲載条件を満たし、Facebook・X(旧Twitter)・LINEなど主要SNSでも美しく表示されます。
この記事では、以下のことがわかります。
・アイキャッチ画像の最適サイズと選び方の基準
・人気テーマ別の推奨サイズ一覧
・ファイル容量を軽くする最適化テクニック
・WordPressでの設定方法と便利なプラグイン
この記事を読めば、もう画像サイズで迷うことはありません。ブログの見栄えとパフォーマンスを両立させたい方は、ぜひ最後までお読みください。
アイキャッチ画像の最適サイズが1200×630pxである理由
Googleが推奨する画像サイズの基準
WordPressのアイキャッチ画像サイズを考える上で、まず押さえておきたいのが**Googleの推奨基準**です。
Googleは公式ドキュメントで「サイズの大きい画像は、**幅を1,200ピクセル以上**とし、max-image-preview:largeの設定またはAMPを使用して有効にする必要があります」と明記しています。
これは**Google Discover**(Googleアプリやスマホのホーム画面に表示されるおすすめ記事)への掲載条件の一つです。Google Discoverに記事が表示されると、大量のアクセスを獲得できる可能性があるため、この条件を満たしておくことは非常に重要です。
横幅1200px以上の画像を使用することで、Google Discoverへの掲載チャンスが広がります。SEOを意識するなら、この基準は必ず守りましょう。
SNSシェア時のOGP画像として最適なサイズ
アイキャッチ画像は、SNSで記事がシェアされた際に自動で表示される「OGP画像」としても使われます。各SNSの推奨サイズは以下の通りです。
| SNS | 推奨サイズ | アスペクト比 |
|---|---|---|
| 1200×630px | 1.91:1 | |
| X(大カード) | 1200×628px | 1.91:1 |
| LINE | 1200×630px | 1.91:1 |
| 1000×1500px | 2:3 |
ご覧の通り、**Facebook・X・LINEはすべて「1200×630px」前後が推奨サイズ**です。つまり、1200×630pxでアイキャッチ画像を作成すれば、主要SNSすべてで美しく表示されるということです。
Pinterestだけは縦長の画像が推奨されますが、ブログ記事のシェアがメインであれば、1200×630pxで問題ありません。
1:1.91のアスペクト比が重要な理由
アイキャッチ画像で重要なのは、ピクセル数だけでなく**アスペクト比(縦横比)**です。
1200×630pxは、計算すると**約1:1.91**の比率になります。この比率を守っていれば、多少サイズが異なっても表示は問題ありません。
ただし、サイズが小さすぎると画像がボヤけて表示されてしまいます。最低でも横幅1200px以上を確保しましょう。
画像サイズが小さいと起こる問題
「画像サイズが大きいと読み込みが遅くなるから、小さめにしよう」と考える方もいるかもしれません。しかし、**画像サイズが小さすぎると以下の問題が発生**します。
・**Google Discoverに掲載されにくくなる**
・**SNSでシェアした時に画像がボヤける**
・**高解像度ディスプレイで粗く見える**
・**サイトの信頼性・プロフェッショナル感が損なわれる**
画像の読み込み速度を改善したい場合は、サイズを小さくするのではなく、**圧縮やWebP形式への変換**で対応しましょう(後述します)。
目的別の推奨サイズまとめ
状況に応じて、以下のサイズを参考にしてください。
・SNS対応を重視:1200×630px(最も汎用的)
・高解像度対応:1600×900px または 1920×1080px
・表示速度を優先:800×450px(圧縮必須)
・テーマ指定がある場合:テーマの推奨サイズに従う
迷ったら**1200×630px**を選んでおけば、ほとんどのケースで問題ありません。
人気WordPressテーマ別の推奨アイキャッチサイズ
Cocoonの推奨サイズと設定
無料テーマとして絶大な人気を誇る**Cocoon**では、**800×450px**または**1280×720px**が推奨されています。
Cocoonは表示速度を重視した設計になっているため、比較的小さめのサイズが推奨されています。ただし、SNSでのシェアやGoogle Discoverを意識するなら、**1200×630px**または**1280×720px**を選ぶことをおすすめします。
**Cocoonでの設定方法:**
1. WordPress管理画面から「Cocoon設定」を開く
2. 「画像」タブを選択
3. アイキャッチの設定項目で、表示方法やサイズを確認
4. 必要に応じてサムネイルサイズを調整
SWELLの推奨サイズと設定
有料テーマの中でも特に人気の高い**SWELL**では、**1200×630px**が公式推奨サイズです。
SWELLはSNS対応やOGP設定を意識した設計になっており、1200×630pxで作成すれば、サイト内表示もSNSシェア時も美しく表示されます。
また、SWELLには画像の遅延読み込み(Lazy Load)機能が標準搭載されているため、大きめの画像を使っても表示速度への影響を最小限に抑えられます。
JIN・JIN:Rの推奨サイズ
ブロガーに人気の**JIN**および後継テーマの**JIN:R**では、**760×428px**が公式推奨サイズとなっています。
JINは独自のカード型レイアウトを採用しており、このサイズがテーマデザインに最適化されています。ただし、SNS対応を重視する場合は、1200×630pxで作成し、テーマ側で自動リサイズさせる方法もあります。
AFFINGER・SANGOなど他テーマの対応
その他の人気テーマの推奨サイズは以下の通りです。
| テーマ名 | 推奨サイズ | 備考 |
|---|---|---|
| AFFINGER6 | 1200×630px | OGP対応重視 |
| SANGO | 680×390px | テーマ最適化 |
| THE THOR | 1200×675px | 16:9比率 |
| Lightning | 1200×630px | ビジネス向け |
テーマを変更した時の画像サイズ問題と対処法
WordPressのテーマを変更すると、**アイキャッチ画像のサムネイルサイズが変わり、表示が崩れる**ことがあります。
これは、テーマごとに生成するサムネイルサイズが異なるためです。例えば、旧テーマで生成された800×450pxのサムネイルは、新テーマの推奨サイズ1200×630pxには対応していません。
**対処法:Regenerate Thumbnailsプラグインを使う**
- Step1: 「Regenerate Thumbnails」プラグインをインストール・有効化
- Step2: 「ツール」→「Regenerate Thumbnails」を選択
- Step3: 「すべてのサムネイルを再生成」をクリック
- Step4: 処理完了まで待つ(画像数によっては時間がかかる)
この作業を行うことで、現在のテーマに最適化されたサムネイルが再生成されます。
ファイル容量を軽くする画像最適化テクニック
適切なファイル容量の目安は200KB以内
アイキャッチ画像のサイズ(ピクセル数)と同じくらい重要なのが、**ファイル容量(KB/MB)**です。
ファイル容量が大きいと、ページの読み込み速度が遅くなり、以下の問題が発生します。
・**ユーザーの離脱率が上がる**(表示が遅いとユーザーは去ってしまう)
・**SEO評価が下がる**(Googleはページ速度を評価要素にしている)
・**サーバー負荷が増える**(特に共有サーバーでは影響大)
**目安として、アイキャッチ画像は1枚あたり200KB以内**を目指しましょう。理想は100KB以下です。
WebP形式への変換で容量を大幅削減
2025年現在、画像の最適化で最も効果的なのが**WebP形式**への変換です。
WebPはGoogleが開発した画像フォーマットで、JPEGやPNGと比べて**同じ画質で25〜34%程度ファイルサイズを削減**できます。
・JPEG/PNGより軽量で高画質
・透過(アルファチャンネル)にも対応
・主要ブラウザすべてで対応済み
・WordPressプラグインで自動変換可能
EWWW Image Optimizerで自動圧縮する方法
WordPressで最も人気の画像最適化プラグインが**EWWW Image Optimizer**です。
このプラグインをインストールすると、画像をアップロードするだけで自動的に圧縮・WebP変換が行われます。
- Step1: プラグイン「EWWW Image Optimizer」をインストール・有効化
- Step2: 「設定」→「EWWW Image Optimizer」を開く
- Step3: 「WebP」タブでWebP変換を有効にする
- Step4: 「一括最適化」で既存画像を圧縮
オンラインツールでの圧縮方法
プラグインを使わずに画像を圧縮したい場合は、オンラインツールが便利です。
**おすすめの無料圧縮ツール:**
・**Squoosh**(squoosh.app):Googleが提供する高機能圧縮ツール
・**TinyPNG**(tinypng.com):PNG/JPEG圧縮の定番
・**iLoveIMG**(iloveimg.com):一括圧縮にも対応
これらのツールを使えば、ドラッグ&ドロップで簡単に画像を圧縮できます。
圧縮しすぎによる画質劣化を防ぐコツ
画像を圧縮しすぎると、画質が劣化して見栄えが悪くなります。以下のポイントを意識しましょう。
・JPEG品質は70〜80%を目安に(それ以下は劣化が目立つ)
・文字やロゴがある画像は劣化が目立ちやすいので控えめに
・圧縮前後で必ずプレビュー確認する
・元画像は必ずバックアップを取っておく
WordPressでアイキャッチ画像を設定する方法
投稿画面でのアイキャッチ設定手順
WordPressでアイキャッチ画像を設定する基本的な手順を解説します。
- Step1: 投稿または固定ページの編集画面を開く
- Step2: 右サイドバーの「投稿」タブを選択
- Step3: 下にスクロールして「アイキャッチ画像」セクションを見つける
- Step4: 「アイキャッチ画像を設定」をクリック
- Step5: メディアライブラリから画像を選択、または新規アップロード
- Step6: 「アイキャッチ画像を設定」ボタンをクリックして完了
クラシックエディター(旧エディター)を使っている場合は、投稿画面の右下あたりに「アイキャッチ画像」ボックスがあります。
メディアライブラリでの画像管理
WordPressのメディアライブラリでは、アップロードした画像を一元管理できます。
**効率的な画像管理のコツ:**
・**ファイル名を分かりやすく**:「eyecatch-wordpress-size.jpg」など内容がわかる名前にする
・**代替テキスト(alt属性)を設定**:SEOとアクセシビリティに重要
・**定期的に不要画像を削除**:サーバー容量の節約
メディアライブラリ画面では、リスト表示に切り替えると、ファイルサイズや寸法を確認しやすくなります。
アイキャッチが表示されない場合の対処法
アイキャッチ画像を設定したのに表示されない場合、以下の原因が考えられます。
**原因1:テーマがアイキャッチに対応していない**
→ 対応テーマに変更するか、functions.phpに「add_theme_support(‘post-thumbnails’);」を追加
**原因2:キャッシュが残っている**
→ ブラウザのキャッシュをクリア、またはキャッシュプラグインをクリア
**原因3:画像ファイルが壊れている**
→ 別の画像で試す、または再アップロード
**原因4:プラグインの競合**
→ プラグインを一つずつ無効にして原因を特定
一括でアイキャッチを変更する方法
大量の記事のアイキャッチ画像を変更したい場合は、**「Quick Featured Images」**プラグインが便利です。
このプラグインを使えば、特定のカテゴリーやタグの記事に対して、一括でアイキャッチ画像を設定・変更・削除できます。
サイトリニューアルやブランディング変更の際に重宝します。
デフォルトアイキャッチを設定する方法
アイキャッチ画像を設定し忘れた記事のために、デフォルト画像を設定しておくと便利です。
**「Default Featured Image」**プラグインを使えば、アイキャッチ未設定の記事に自動でデフォルト画像が表示されます。
これにより、SNSでシェアされた際に「画像なし」で表示されることを防げます。
SNS対応のOGP画像設定とプラグイン活用法
OGP画像とは?なぜ設定が必要なのか
**OGP(Open Graph Protocol)**とは、SNSでWebページがシェアされた際に表示される情報(タイトル・説明文・画像)を指定する仕組みです。
OGP画像を正しく設定していないと、SNSでシェアされた時に以下の問題が発生します。
・**意図しない画像が表示される**
・**画像が切れて表示される**
・**画像がまったく表示されない**
これらはクリック率の低下につながるため、OGP設定は必ず行いましょう。
All in One SEOでのOGP設定
**All in One SEO**プラグインを使えば、OGP画像を簡単に設定できます。
- Step1: All in One SEOをインストール・有効化
- Step2: 「All in One SEO」→「ソーシャルネットワーク」を開く
- Step3: 「Facebook」「Twitter」タブでデフォルト画像を設定
- Step4: 各投稿で個別にOGP画像を設定することも可能
Yoast SEOでのOGP設定
**Yoast SEO**でもOGP設定が可能です。
「SEO」→「ソーシャル」からFacebook・Twitterのデフォルト設定を行い、各投稿の編集画面で「ソーシャル」タブからOGP画像を個別設定できます。
アイキャッチ画像を自動でOGP画像として使用する設定も可能なので、多くの場合はアイキャッチを設定するだけでOKです。
SNSでの表示をシミュレーターで確認する方法
OGP設定が正しく反映されているか、公開前に確認することが重要です。
**おすすめのシミュレーター:**
・**Facebook Sharing Debugger**:Facebookでの表示を確認
・**X Card Validator**:X(旧Twitter)での表示を確認
・**OGP確認ツール**(ogp.buta3.net):複数SNSをまとめて確認
これらのツールにURLを入力するだけで、SNSでの表示イメージを確認できます。また、キャッシュのクリアもこれらのツールから行えます。
X(Twitter)とFacebookで画像が切れる場合の対処法
OGP画像が正しく設定されているのに、SNSで画像が切れて表示される場合は、以下を確認してください。
**X(Twitter)の場合:**
・推奨サイズ:1200×628px
・大カード(Summary Large Image)の設定になっているか確認
・文字やロゴは中央に配置(上下左右が切れる場合がある)
**Facebookの場合:**
・推奨サイズ:1200×630px
・正方形にトリミングされる場合があるので、重要な要素は中央に
・Sharing Debuggerでキャッシュをクリア
アイキャッチ画像を作成するおすすめツール
Canvaで簡単にアイキャッチを作る方法
**Canva**は、デザイン初心者でも簡単にアイキャッチ画像を作成できる無料ツールです。
・豊富なテンプレートがある
・ドラッグ&ドロップで直感的に操作
・1200×630pxのサイズをカスタムで指定可能
・フリー素材も豊富
・ブラウザで動作(インストール不要)
Canvaでアイキャッチを作成する際は、「カスタムサイズ」で「1200×630px」を指定してから作業を始めましょう。
Adobe Expressでプロ級のデザインを
**Adobe Express**(旧Adobe Spark)は、Adobeが提供する無料のデザインツールです。
Canvaと同様にテンプレートベースで作成でき、Adobeならではの高品質なデザインが特徴です。Adobe Creative Cloudユーザーなら、Photoshopなど他のAdobeツールとの連携も可能です。
フリー素材サイトの活用と注意点
アイキャッチ画像に使う素材は、著作権フリーのサイトから入手しましょう。
**おすすめのフリー素材サイト:**
・**Unsplash**:高品質な写真素材
・**Pixabay**:写真・イラスト・ベクター
・**いらすとや**:日本語圏で人気のイラスト素材
・**O-DAN**:複数の素材サイトを横断検索
・利用規約を必ず確認する
・商用利用可能か確認する
・加工・編集が許可されているか確認する
・クレジット表記が必要な場合は必ず記載する
AIで画像を生成する最新の方法
2025年現在、AIを使った画像生成が急速に普及しています。
**アイキャッチ画像に使えるAIツール:**
・**Midjourney**:高品質なアートワークを生成
・**DALL-E 3**:OpenAIの画像生成AI
・**Adobe Firefly**:商用利用しやすいAdobe製AI
・**Canva AI**:Canva内蔵のAI画像生成機能
AIで生成した画像は、オリジナル性が高く、他サイトと差別化できるメリットがあります。ただし、商用利用の規約や著作権については各サービスの利用規約を確認してください。
スマホでアイキャッチを作成する方法
外出先でもアイキャッチ画像を作成したい場合は、スマホアプリが便利です。
**おすすめのスマホアプリ:**
・**Canva**(iOS/Android):PC版と同じ機能が使える
・**Phonto**(iOS/Android):文字入れに特化
・**PicsArt**(iOS/Android):多機能な画像編集アプリ
スマホで作成する場合も、サイズは1200×630pxを意識しましょう。
よくある質問Q&A
Q. アイキャッチ画像のサイズは統一した方がいい?
**はい、統一することを強くおすすめします。**
サイズがバラバラだと、記事一覧ページやカテゴリーページでの表示がガタガタになり、サイトの見栄えが悪くなります。また、テーマ変更時にも問題が起きやすくなります。
すべての記事で1200×630pxに統一しておけば、一貫性のある美しいサイトを維持できます。
Q. 画像ファイル名は日本語でも大丈夫?
**英数字でつけることをおすすめします。**
日本語ファイル名はサーバー環境によっては文字化けしたり、URLが長くなったりする可能性があります。「eyecatch-wordpress-size.jpg」のように、内容がわかる英数字のファイル名にしましょう。
ファイル名はSEOにも若干影響するため、キーワードを含めるとなお良いです。
Q. PNG、JPEG、WebPのどれを使えばいい?
基本的には以下の使い分けがおすすめです。
・**写真**:JPEG(またはWebP)
・**イラスト・ロゴ**:PNG(またはWebP)
・**すべての用途**:WebP(対応ブラウザで自動表示)
2025年現在、WebP形式は主要ブラウザすべてで対応しているため、WebPを第一選択にしても問題ありません。
Q. Retinaディスプレイ対応は必要?
**可能であれば対応しておくとベターです。**
Retinaディスプレイ(高解像度ディスプレイ)では、通常サイズの画像がボヤけて見えることがあります。完全対応するには、表示サイズの2倍のピクセル数で画像を用意します。
例えば、600×315pxで表示される場所に対応するには、1200×630pxの画像を用意します。1200×630pxで作成しておけば、多くの場合Retina対応も問題ありません。
Q. アイキャッチ画像にテキストを入れるべき?
**記事の内容が一目でわかるテキストを入れることをおすすめします。**
ただし、以下の点に注意してください。
・テキストは中央に配置(SNSでの切り抜きに対応)
・読みやすいフォントサイズを選ぶ
・文字数は少なめに(タイトル全文を入れる必要はない)
・背景とのコントラストを確保する
Q. 古い記事のアイキャッチも更新すべき?
**アクセスの多い記事は更新する価値があります。**
検索上位に表示されている記事や、SNSでシェアされる可能性のある記事は、最適なサイズのアイキャッチに更新することで、クリック率向上が期待できます。
すべての記事を更新するのは大変なので、まずはアクセス上位20記事から始めてみましょう。
Q. アイキャッチ画像の容量が大きすぎるとどうなる?
**ページの読み込み速度が遅くなり、様々な問題が発生します。**
具体的には以下のような影響があります。
・ユーザーの離脱率が上がる(表示に3秒以上かかると53%が離脱するというデータも)
・SEO評価が下がる(Googleはページ速度をランキング要素にしている)
・モバイルユーザーのデータ通信量を消費する
・サーバーへの負荷が増加する
200KB以内を目安に圧縮し、WebP形式への変換も検討しましょう。
Q. 無料テーマと有料テーマで推奨サイズが違うのはなぜ?
**テーマごとにデザインコンセプトや表示領域が異なるためです。**
無料テーマのCocoonは表示速度を重視した設計で、比較的小さめの800×450pxが推奨されています。一方、有料テーマのSWELLはSNS対応やビジュアルの美しさを重視し、1200×630pxを推奨しています。
ただし、どのテーマを使う場合でも、SNS対応やGoogle Discover対策を考えると1200×630pxで作成しておくのが安心です。テーマ側で自動的にリサイズしてくれます。
Q. 画像のalt属性(代替テキスト)も設定すべき?
**必ず設定しましょう。SEOとアクセシビリティの両面で重要です。**
alt属性は、画像が表示されない場合や、視覚障害のある方がスクリーンリーダーを使用する際に読み上げられるテキストです。また、Googleの画像検索でのランキングにも影響します。
アイキャッチ画像のalt属性には、記事の内容を簡潔に説明するテキストを設定しましょう。キーワードを自然に含めると、SEO効果も期待できます。
まとめ:アイキャッチ画像は1200×630pxで統一しよう
この記事では、WordPressのアイキャッチ画像の最適サイズと設定方法について解説してきました。
・アイキャッチ画像の推奨サイズは1200×630px(アスペクト比1:1.91)
・このサイズならGoogle Discover、Facebook、X、LINEすべてに対応
・ファイル容量は200KB以内を目安に圧縮する
・WebP形式への変換で容量を25〜34%削減できる
・EWWW Image Optimizerで自動圧縮するのが便利
・テーマ変更時はRegenerate Thumbnailsでサムネイル再生成
・OGP設定でSNSでの表示も最適化する
- Step1: 次に作成するアイキャッチは1200×630pxで作る
- Step2: EWWW Image Optimizerをインストールして画像を自動圧縮
- Step3: OGP確認ツールでSNSでの表示をチェック
アイキャッチ画像は、ブログの「顔」とも言える重要な要素です。適切なサイズで作成し、最適化を行うことで、サイトの見栄えもパフォーマンスも向上します。
最初にルールを決めて設定しておけば、その後の記事作成がグッと楽になります。今日からアイキャッチ画像のサイズを統一して、プロフェッショナルなブログを目指しましょう!
