ブログを運営していて、「アイキャッチ画像のサイズってどうすればいいの？」と悩んだことはありませんか。私自身、ブログ歴14年で累計100サイト以上を運営してきましたが、初期の頃はアイキャッチサイズの設定で何度も失敗しました。画像が切れて表示されたり、読み込みが遅くて離脱率が上がったり…。
特に厄介なのは、プラットフォームごとに最適なサイズが異なるという点です。WordPressで完璧に表示されていても、TwitterやFacebookでシェアすると画像が中途半端に切れてしまう。こうした問題を解決するには、体系的な知識が必要です。
この記事では、ブログアイキャッチサイズについて、基本の推奨設定から、プラットフォーム別の最適化、表示速度との兼ね合い、さらにはブログジャンル別の効果的なサイズ選択まで、実践的なノウハウを全てお伝えします。14年間の運営経験と、実際のクリック率データに基づいた内容ですので、きっとあなたのブログ運営に役立つはずです。
ブログアイキャッチの基本サイズ｜推奨設定の結論
まず結論からお伝えします。ブログアイキャッチ画像の最適サイズを選ぶ際、最も重要なのは汎用性と表示速度のバランスです。私が100以上のサイトで検証した結果、万能なサイズというものは存在しませんが、最も汎用性が高いのは1200×630pxのサイズです。
結論：最も汎用性の高いサイズは1200×630px（OGP対応）
1200×630px（アスペクト比1.91:1）は、Facebook、Twitter（X）、LINEなどの主要SNSのOGP（Open Graph Protocol）画像として最適化されたサイズです。このサイズを基本設定にしておけば、ブログ記事がSNSでシェアされた際に、画像が適切に表示されます。
私のブログでも、以前は16:9の比率（1280×720px）を使用していましたが、Facebookでシェアした際に上下が微妙に切れる問題が発生しました。1200×630pxに統一してからは、SNSでのクリック率が約15%向上した実績があります。
ただし、このサイズはあくまで「SNSシェア」を重視する場合の推奨値です。ブログ本体のデザインや、ターゲットとする読者層によって、最適なサイズは変わってきます。
アスペクト比の選び方｜16:9 vs 1.91:1 vs 4:3の比較
アイキャッチ画像のアスペクト比は、ブログの見た目や用途に大きく影響します。主要な3つの比率を比較してみましょう。
16:9（1920×1080px、1280×720px）
動画やプレゼンテーションで一般的な比率です。横長で視覚的にダイナミックな印象を与えます。特に、旅行ブログや写真ブログなど、ビジュアルを重視するジャンルに適しています。ただし、SNSでシェアする際に上下が若干トリミングされる可能性があります。
1.91:1（1200×630px）
前述の通り、SNSのOGP画像として最適化されたサイズです。汎用性が高く、SNSからの流入を重視するブログには最適です。私が運営するAI×ブログの特化サイトでは、このサイズを標準としています。
4:3（1200×900px）
やや縦長の比率で、テキスト情報を含むインフォグラフィックや、縦スクロールが主流のスマホ表示に適しています。レシピブログや、手順解説系の記事で効果的です。ただし、PCで見ると余白が多く感じられる場合があります。
私の経験では、ブログジャンルによって最適な比率が異なるため、後述の「ブログジャンル別のサイズ選択戦略」も参考にしてください。
ファイルサイズの上限｜Core Web Vitals対応は200KB以下が目安
画像の「ピクセルサイズ」だけでなく、「ファイルサイズ」も非常に重要です。Googleは2021年からCore Web Vitalsをランキング要因に組み込んでおり、特にLCP（Largest Contentful Paint）という指標が重要視されています。
LCPは「ページの主要コンテンツが読み込まれるまでの時間」を測る指標で、アイキャッチ画像はこの対象になることが多いです。私が500記事以上で検証した結果、アイキャッチ画像のファイルサイズは200KB以下に抑えるべきという結論に至りました。
200KBを超えると、特にモバイル回線での表示速度が顕著に低下し、離脱率が上がります。実際、私が運営していたブログで、500KB以上の高画質画像を使用していた時期は、ページ表示速度が3.5秒を超え、直帰率が65%に達していました。画像を最適化して200KB以下に抑えたところ、表示速度が1.8秒に改善し、直帰率も48%まで低下しました。
ファイルサイズを抑える具体的な方法については、後ほど「表示速度を落とさない画像最適化テクニック」で詳しく解説します。
プラットフォーム別の最適サイズ一覧【実測データ付き】
ブログプラットフォームやCMSによって、アイキャッチ画像の表示仕様は大きく異なります。ここでは、主要プラットフォームでの推奨サイズを、実測データとともに紹介します。
WordPress主要テーマ20選のアイキャッチサイズとトリミング挙動
WordPressは世界で最も使われているCMSですが、テーマによってアイキャッチ画像の表示サイズやトリミング方法が異なります。私が実際に検証した主要20テーマの推奨サイズをまとめました。
Astra、Generatepress、Kadence（汎用テーマ）
推奨サイズ：1200×675px（16:9）
これらの軽量テーマは柔軟性が高く、16:9の比率であれば自動的に最適化されます。トップページのブログカード表示でも綺麗に収まります。
Cocoon、SANGO、JIN（日本製テーマ）
推奨サイズ：1200×630px（OGP対応）
日本製テーマの多くは、SNSシェアを意識した設計になっています。Cocoonは特にOGP設定が充実しており、1200×630pxが公式推奨です。
AFFINGER、THE THOR（アフィリエイト特化）
推奨サイズ：1200×675px または 1920×1080px
これらのテーマは高解像度表示に対応しており、大きめの画像でも最適化されます。ただし、ファイルサイズには注意が必要です。
Divi、Avada（海外有料テーマ）
推奨サイズ：1200×800px または 1200×630px
海外テーマは設定の自由度が高い反面、デフォルト設定のままだと意図しないトリミングが発生することがあります。
私の経験では、テーマ変更時に最も注意すべきは「中央トリミング」の挙動です。あるテーマでは画像の中央を基準にトリミングされますが、別のテーマでは上部を基準にすることがあり、過去記事の画像が全て不適切に表示されるトラブルに見舞われたことがあります。
はてなブログ・note・Amebaブログの推奨設定
無料ブログサービスでも、それぞれ最適なアイキャッチサイズが異なります。
はてなブログ
推奨サイズ：1200×630px
はてなブックマークでのシェアを考慮すると、OGP対応の1200×630pxが最適です。記事一覧では自動的に正方形にトリミングされるため、重要な要素は画像の中央に配置することが重要です。
note
推奨サイズ：1280×670px
noteは独自の表示比率を採用しています。横長の画像が推奨されており、縦長すぎると上下が大きくカットされます。テキストを含む画像を使用する場合は、中央寄せが安全です。
Amebaブログ
推奨サイズ：800×450px（16:9）
アメブロは比較的小さめの画像でも綺麗に表示されます。高解像度画像を使用してもアップロード時に自動圧縮されるため、適度なサイズで十分です。
サブスク型CMSサービス（Wix、Shopify）の設定方法
Wixは、ブログ機能でのアイキャッチ画像に1200×800pxを推奨しています。Wixの画像管理システムは自動最適化機能が優秀で、多少サイズが異なっても自動調整されます。
Shopifyでブログ機能を使う場合、1024×1024px（正方形）または1200×628pxが推奨されます。ECサイトとの統一感を重視するなら、商品画像と同じ正方形が効果的です。
SNS表示を最適化するOGP画像サイズ【最新版】
ブログ記事がSNSでシェアされた際、アイキャッチ画像はOGP画像として表示されます。各SNSの最新仕様に合わせた最適サイズを解説します。
Twitter（X）の最新表示仕様とサイズ推奨
Twitterは2023年にXへリブランディングされましたが、OGP画像の仕様は基本的に変わっていません。推奨サイズは1200×675px（16:9）または1200×630pxです。
Twitter Cardには「Summary Card」と「Summary Card with Large Image」の2種類があり、後者の方がタイムライン上で目立ちます。私のブログでは、Twitter Cardの設定を最適化したことで、Twitterからのクリック率が22%向上しました。
注意点として、Twitterは画像の端を若干トリミングする傾向があるため、テキストや重要な要素は画像の中央80%のエリアに配置することをおすすめします。
Facebook・Instagram・LinkedInの設定
Facebookの推奨OGPサイズは1200×630pxです。これより小さいと画質が劣化し、大きすぎても自動圧縮されます。Facebookは画像のアスペクト比に厳密で、1.91:1から大きく外れるとトリミングが発生します。
Instagramは正方形（1080×1080px）が基本ですが、ブログ記事をストーリーズでシェアする場合は1080×1920px（9:16）が推奨されます。
LinkedInはビジネス向けSNSとして、1200×627pxを推奨しています。Facebookとほぼ同じですが、LinkedInの方が画像の圧縮率が低く、高画質で表示される傾向があります。
Pinterest・はてなブックマークでの表示最適化
Pinterestは縦長画像が主流のプラットフォームです。推奨アスペクト比は2:3（1000×1500px）で、ビジュアル重視のジャンル（料理、ファッション、インテリア）では非常に効果的です。私が運営していた料理ブログでは、Pinterestからの流入が全体の35%を占めていました。
はてなブックマークは1200×630pxが最適です。はてブ経由のアクセスは質が高く、滞在時間も長い傾向があるため、適切なアイキャッチ設定は重要です。
デバイス別の見え方検証｜スマホ・タブレット・PCでの表示比較
同じアイキャッチ画像でも、デバイスによって見え方は大きく異なります。ここでは実際の表示検証データを元に解説します。
実機検証：各サイズでの表示シミュレーション
私が運営する複数のブログで、実際のデバイスでの表示検証を行いました。
スマホ（iPhone、Android）
画面幅が375px〜430px程度のため、1200px幅の画像は自動縮小されます。重要なのは、縮小されても文字が読めるか、主要な被写体が認識できるかという点です。私の失敗例として、細かいテキストを詰め込んだアイキャッチ画像を使ったところ、スマホでは全く読めず、クリック率が大幅に低下しました。
スマホ表示を考慮すると、テキストは大きめ、要素は少なめが鉄則です。また、縦スクロールが主流のため、縦長画像（4:3や2:3）の方が自然に見える場合もあります。
タブレット（iPad等）
画面幅が768px〜1024px程度で、PCとスマホの中間的な表示です。タブレットユーザーは全体の10〜15%程度ですが、無視できない割合です。1200×675pxの16:9画像が最もバランス良く表示されます。
PC（デスクトップ、ノート）
画面幅が1200px以上あるため、高解像度画像の美しさが際立ちます。ただし、ファイルサイズが大きすぎると読み込みに時間がかかるため、WebP形式での最適化が必須です。
レスポンシブ対応で注意すべきトリミング位置
レスポンシブデザインでは、画面サイズに応じて画像が自動トリミングされます。この際、トリミングの基準点（アンカーポイント）が重要です。
多くのWordPressテーマは、デフォルトで「中央トリミング」を採用しています。つまり、画像の中央を基準に、デバイスに合わせてトリミングされます。そのため、重要な要素（顔、商品、キャッチコピー）は画像の中央に配置するのが安全です。
私の経験では、人物の顔が端に配置された画像を使用したところ、スマホ表示で顔が切れてしまい、クリック率が大幅に下がったことがあります。この失敗以降、必ず中央配置を徹底しています。
表示速度を落とさない画像最適化テクニック
どれだけ美しいアイキャッチ画像でも、表示速度が遅ければ意味がありません。ここでは、画質を保ちながら表示速度を最適化する実践的なテクニックを紹介します。
WebP形式への変換で70%軽量化する方法
WebP（ウェッピー）は、Googleが開発した次世代画像フォーマットです。JPEGやPNGと比較して、同じ画質で約70%のファイルサイズ削減が可能です。
私のブログでは、全ての画像をWebP形式に統一したところ、ページ全体の読み込み速度が平均で1.2秒短縮されました。特にアイキャッチ画像は、記事の最も目立つ位置に配置されるため、WebP化の効果は絶大です。
WebPへの変換方法は複数あります。WordPressを使用している場合、「EWWW Image Optimizer」や「ShortPixel」などのプラグインが自動変換してくれます。手動で変換する場合は、「Squoosh」（Googleの無料ツール）や「XnConvert」などのツールが便利です。
注意点として、古いブラウザはWebPに非対応です。ただし、主要ブラウザは全てWebPをサポートしているため、2026年現在では問題ありません。
画質を保ちながら圧縮する推奨ツール5選
画像圧縮ツールは数多くありますが、私が実際に使用して効果的だったツールを5つ紹介します。
1. TinyPNG
オンラインで使える無料ツール。PNG、JPEGに対応し、視覚的な劣化をほぼ感じさせずに50〜70%圧縮できます。1度に20枚まで処理可能で、ブログ運営初心者にも使いやすいです。
2. Squoosh
Googleが提供する無料ツール。WebP、AVIF、MozJPEGなど、様々なフォーマットに対応。圧縮前後の画像を並べて比較できる機能が便利です。
3. ImageOptim（Mac専用）
ドラッグ&ドロップで一括圧縮できるMac用アプリ。メタデータの削除も自動で行い、極限まで軽量化できます。
4. EWWW Image Optimizer（WordPressプラグイン）
WordPressにアップロードした画像を自動圧縮してくれるプラグイン。過去の画像も一括最適化できる機能があり、既存ブログの高速化に最適です。
5. ShortPixel（WordPressプラグイン）
EWWWよりも高圧縮率で、WebP変換も自動対応。月100枚まで無料で、それ以上は有料プランになります。私は複数サイトで使用しており、費用対効果は高いと感じています。
遅延読み込み（Lazy Load）の実装方法
遅延読み込み（Lazy Load）は、画面に表示されるタイミングで画像を読み込む技術です。ファーストビューに表示されないアイキャッチ画像を遅延読み込みにすることで、初期表示速度が大幅に向上します。
WordPress 5.5以降では、標準でLazy Load機能が実装されています。ただし、より細かく制御したい場合は、「a3 Lazy Load」や「Lazy Load by WP Rocket」などのプラグインを使用すると良いでしょう。
私のブログでは、記事一覧ページのアイキャッチ画像に遅延読み込みを適用したところ、ページ表示速度が0.8秒短縮され、直帰率が5%改善しました。
ブログジャンル別のサイズ選択戦略【実例とCTRデータ】
ブログのジャンルによって、効果的なアイキャッチサイズやアスペクト比は異なります。ここでは、私が実際に運営・コンサルした複数のブログでのデータを元に解説します。
テキスト重視ブログ vs ビジュアル重視ブログでの違い
テキスト重視ブログ（ノウハウ系、ビジネス系、解説系）
推奨サイズ：1200×630px（1.91:1）
このジャンルでは、アイキャッチ画像にキャッチコピーや記事タイトルを含めることが多いです。SNSシェアを考慮すると、OGP対応の1.91:1が最適です。私が運営するAI×ブログの特化サイトでは、タイトル文字を大きく配置したアイキャッチを使用し、Twitterからのクリック率が平均8.2%を記録しています（業界平均は2〜3%）。
ビジュアル重視ブログ（写真、旅行、ファッション、料理）
推奨サイズ：1920×1080px（16:9）または1000×1500px（2:3、Pinterest用）
美しい写真が主役のジャンルでは、高解像度で広いアスペクト比が効果的です。特に旅行ブログでは、風景の広がりを表現できる16:9が有利です。ただし、ファイルサイズは必ず200KB以下に圧縮してください。
縦長画像が効果的なジャンル（レシピ、インフォグラフィック）
一部のジャンルでは、横長ではなく縦長画像の方が効果的です。
レシピブログ
推奨サイズ：1000×1500px（2:3）
Pinterestは料理ジャンルで圧倒的な影響力を持っており、縦長画像が標準です。私がコンサルしたレシピブログでは、横長から縦長に変更したことで、Pinterestからの流入が3.5倍に増加しました。
インフォグラフィック、リスト記事
推奨サイズ：1200×1800px（2:3）または1200×2400px
情報を縦に並べるインフォグラフィックは、縦長フォーマットが自然です。特にスマホでの閲覧が多いジャンルでは、縦スクロールに最適化された縦長画像が効果的です。
よくある失敗例とトラブルシューティング
アイキャッチ画像の設定では、様々なトラブルが発生します。ここでは、私自身が経験した失敗例と、その解決策を紹介します。
画像が切れて表示される原因と対処法
「アイキャッチ画像の端が切れてしまう」という問題は、非常に多いトラブルです。原因は主に2つあります。
原因1：テーマのトリミング設定
WordPressテーマによっては、独自のトリミングルールが設定されています。例えば、正方形にトリミングするテーマで横長画像を使うと、左右が切れてしまいます。
対処法：テーマの推奨サイズを確認し、それに合わせた画像を用意する。または、テーマのカスタマイズ設定で「トリミングなし」に変更する。
原因2：OGP画像とブログ本体のサイズ不一致
ブログ本体では正しく表示されていても、SNSでシェアすると切れるケースがあります。これは、OGP画像のサイズ設定が間違っている可能性が高いです。
対処法：OGP設定を1200×630pxに統一する。「All in One SEO」や「Yoast SEO」などのプラグインで、OGP画像を個別に設定できます。
アップロード後に画質が劣化する問題の解決
「元画像は綺麗なのに、アップロードすると劣化する」という問題もよくあります。
原因：プラットフォームの自動圧縮
WordPress、はてなブログ、noteなどは、アップロード時に自動的に画像を圧縮します。特にJPEG形式の場合、圧縮率が高く設定されていると、明らかに画質が劣化します。
対処法：アップロード前に自分で圧縮することです。TinyPNGやSquooshで、視覚的に問題ないレベルまで圧縮してからアップロードすれば、プラットフォームの自動圧縮による劣化を最小限に抑えられます。また、WordPressの場合、「functions.php」にコードを追加してJPEG圧縮率を変更することも可能です（ただし、中級者以上向け）。
過去記事の画像を一括リサイズする効率的な方法
ブログを長く運営していると、過去記事のアイキャッチ画像が統一されていない問題が発生します。私も100記事以上の過去記事を持つブログで、この問題に直面しました。
WordPress向けの方法
「Regenerate Thumbnails」プラグインを使えば、過去にアップロードした画像を一括で再生成できます。テーマを変更した際や、推奨サイズを変更した際に非常に便利です。ただし、元画像が小さすぎると引き伸ばされて劣化するため、注意が必要です。
「ShortPixel」の一括最適化機能を使えば、過去画像を一括でWebP変換・圧縮できます。私はこの機能で、3000枚以上の画像を一括最適化し、サイト全体の表示速度を40%改善しました。
手動での一括リサイズ
Photoshopの「バッチ処理」機能や、「XnConvert」などの無料ツールを使えば、ローカルで一括リサイズ・圧縮が可能です。フォルダ内の全画像を同じサイズ・形式に変換できるため、大量の画像を扱う場合に効率的です。
まとめ：状況別の最適サイズ選択フローチャート
ここまで、ブログアイキャッチサイズについて、基本設定からプラットフォーム別の推奨値、デバイス別の表示検証、画像最適化テクニック、ジャンル別の戦略まで、幅広く解説してきました。最後に、あなたのブログに最適なサイズを選ぶためのフローチャートをまとめます。
ステップ1：ブログの目的を明確にする
・SNSからの流入を重視する → 1200×630px（1.91:1）
・ビジュアルの美しさを重視する → 1920×1080px（16:9）
・Pinterest流入を狙う → 1000×1500px（2:3）
ステップ2：使用プラットフォームの推奨サイズを確認
・WordPress → テーマの推奨サイズに従う（多くは1200×675pxまたは1200×630px）
・はてなブログ → 1200×630px
・note → 1280×670px
ステップ3：ファイルサイズを最適化
・WebP形式に変換
・200KB以下に圧縮
・遅延読み込み（Lazy Load）を実装
ステップ4：デバイス別表示を確認
・スマホ、タブレット、PCで実際に表示確認
・重要な要素が中央に配置されているかチェック
・SNSでシェアして表示を確認
ステップ5：定期的に効果測定
・Google AnalyticsやSearch Consoleでクリック率を確認
・A/Bテストで異なるサイズ・デザインを比較
・表示速度をPageSpeed Insightsで定期チェック
私自身、14年間のブログ運営の中で、アイキャッチ画像の最適化は最も費用対効果の高い施策の一つだと確信しています。適切なサイズ設定と最適化を行うだけで、クリック率は15〜30%改善し、表示速度も大幅に向上します。
特に、AI×ブログを実践している方にとって、画像の自動生成と最適化は大きな武器になります。私が開発したAIツールでも、記事内容に応じた最適なアイキャッチ画像を自動生成し、WebP形式で適切なサイズに最適化する機能を実装しています。
この記事で紹介した知識とテクニックを実践すれば、あなたのブログのアイキャッチ画像は、見た目も表示速度も大幅に改善されるはずです。まずは、現在使っているアイキャッチ画像のサイズとファイルサイズを確認し、200KB以下に最適化することから始めてみてください。小さな改善の積み重ねが、ブログの成長につながります。
コメント