ブログのアイキャッチ画像は1200×630px、YouTubeのサムネイルは3840×2160pxを基本にします。
どちらも横長ですが、ブログやOGPで使いやすい約1.91:1と、YouTubeで使われる16:9では比率が異なります。
同じデザインを使う場合も、一つの画像をそのまま使い回すのではなく、ブログ用とYouTube用を別々に書き出す方法が確実です。
アイキャッチ画像の推奨サイズ一覧
使用する場所によって、適した画像サイズとアスペクト比は変わります。最初に、ブログやYouTubeで使う代表的なサイズを確認しておきましょう。
| 用途 | 推奨サイズ | アスペクト比 | 選び方 |
|---|---|---|---|
| ブログ・WordPress | 1200×630px | 1.91:1 | ブログの基本サイズ |
| OGP・SNSのリンクカード | 1200×630px | 1.91:1 | ブログと共用しやすい |
| Google Discover | 1280×720px | 16:9 | 幅1200px以上の16:9画像 |
| YouTubeサムネイル | 3840×2160px | 16:9 | YouTubeの推奨値 |
| 複数媒体で使う画像 | 用途別に書き出す | 1.91:1／16:9 | デザインだけ共通化する |
ブログやWordPressのアイキャッチで迷った場合は、1200×630pxで作成すれば問題ありません。
Google Discoverへの表示を特に重視する場合は、1280×720pxの16:9も用意します。
YouTubeへアップロードするカスタムサムネイルは、3840×2160px・16:9を使用してください。
複数の媒体で共用しやすい比率を優先するなら、16:9が扱いやすいでしょう。ただし、ブログとOGPでの見切れにくさを優先する場合は、1.91:1の1200×630pxが適しています。
ブログ・WordPressのアイキャッチは1200×630pxが基本
ブログのアイキャッチ画像は、1200×630pxを基本サイズとして作成するのがおすすめです。
横幅が十分にあるため、記事ページのメイン画像、記事一覧のサムネイル、OGP画像などへ展開しやすくなります。
WordPressのテーマは独自の画像サイズや切り抜き方法を設定できるため、同じアイキャッチ画像でも、使用しているテーマや表示場所によって見え方が変わります。
1200×630pxが使いやすい理由
1200×630pxは約1.91:1の横長画像です。ブログのアイキャッチとして扱いやすく、SNSへURLを投稿した際の大きなリンクカードにも使用しやすい比率になっています。
- ブログのアイキャッチに使いやすい
- OGP画像と共用しやすい
- 横幅1200pxあり画質を保ちやすい
- 一般的な記事幅で使いやすい
ただし、表示速度を考えずに画像を大きくすればよいわけではありません。
ブログ用のアイキャッチを3840pxや5000pxといった大きさで作成しても、実際の表示幅が1200px前後であれば、ファイル容量が増える割に見た目の差は小さくなります。
テーマが16:9で表示する場合は1280×720pxも選べる
使用中のWordPressテーマが記事一覧やメイン画像を16:9で表示する場合は、1280×720pxも候補になります。
1200×630pxの画像を16:9の枠へ入れると、左右または上下がわずかに切り抜かれることがあります。
一方、1280×720pxは16:9なので、次の用途へ展開しやすくなります。
- 16:9で表示されるブログのサムネイル
- Google Discover向け画像
- 動画内で使用する画像
- プレゼンテーションや横長バナー
ただし、OGP画像として表示された際には1.91:1へ近い形で切り抜かれる可能性があります。
ブログ用の標準を1200×630pxにするか、16:9へ統一するかは、使用中のテーマと主な流入経路で決めましょう。
ブログに3840pxなど4Kサイズは必要ない？
スマートフォンでは画像の実表示幅が小さく、WordPressも閲覧環境に応じて適切なサイズの画像を配信します。
そのため、ブログのアイキャッチを4Kサイズで用意しても、画質面のメリットよりファイル容量増加の影響が大きくなる場合があります。
OGP・SNS・X・Facebookで使う画像サイズ
OGPは、Webページのタイトル、説明、URL、画像などを外部サービスへ伝えるための情報です。
SNSやチャットツールへ記事URLを貼り付けると、下図のようにOGPで指定した画像がリンクカードとして表示されます。
X（Twitter）・Facebook・LinkedInなどSNSごとのOGP画像サイズ
OGP画像は、URLをシェアするサービスによって表示される比率が少し異なります。
ブログ用の画像を複数のSNSで共用する場合は、Facebook基準の1.91:1が扱いやすい比率になります。
| サービス | 比率の目安 | 作成サイズの目安 | 表示上の注意 |
|---|---|---|---|
| X（Twitter） | 2:1 | 1200×600px | 1200×630pxでは上下がわずかに切れる可能性がある |
| 約1.91:1 | 1200×630px | OGP画像の一般的な基準として使いやすい | |
| 1.91:1 | 1200×627px | 1200×630pxでもほぼ同じ比率で使用できる | |
| LINE | 固定比率の公式指定なし | 1200×630pxを共用 | アプリや表示場所によってプレビュー形式が変わる |
Xだけは2:1となっていますが、1.91との差はごく僅かなので併用しても基本的には問題はありません。
なお、Xの広告用Website Cardでは1:1と1.91:1もサポートされていますが、これは広告クリエイティブの仕様です。通常のURL投稿で表示されるリンクカードとは分けて考える必要があります。
複数のSNSへ同じ画像を使う場合は、次の方法がおすすめです。
- 基本のOGP画像を1200×630pxで作成する
- 重要な文字や被写体を中央へ配置する
- Xでの表示を重視する場合は1200×600pxも書き出す
- 各サービスへ実際にURLを貼り、公開前後の表示を確認する
すべてのSNSで完全に同じ範囲が表示されるとは限りません。背景は端まで広げ、切れてはいけない情報は画像の中央へまとめておきましょう。
OGP画像は表示場所によって切り抜かれる比率が異なる
OGP画像を1200×630pxで作成しても、すべてのサービスで画像全体がそのまま表示されるとは限りません。
次のような比率へ自動的に切り抜かれる場合があります。
- 1.91:1の横長
- 16:9の横長
- 1:1の正方形
- 4:5の縦長
サービス名や現在の表示仕様だけを基準に、数ピクセル単位で安全領域を固定する方法はおすすめできません。
表示方法はアプリ、端末、リンクカードの種類、サービス側の更新によって変わるためです。
背景や装飾は端まで広げ、文字・ロゴ・人物の顔などは中央寄りに配置しておくと、異なる比率でも内容が残りやすくなります。
Google Discover向け画像は幅1200px以上・16:9で作成する
Google Discoverへの表示を意識する場合は、幅1200px以上の16:9画像を用意します。
具体的には、次のサイズが使いやすいでしょう。
- 1200×675px
- 1280×720px
- 1600×900px
GoogleはDiscover向けの画像について、幅1200px以上、合計30万ピクセルを超える高解像度、16:9を推奨しています。
さらに、max-image-preview:largeによる大きな画像プレビューの許可と、og:imageまたは構造化データによる代表画像の指定も推奨しています。
1200×630pxとDiscover用画像は同じではない
1200×630pxは約1.91:1ですが、Google Discoverが推奨しているのは16:9です。比率は近いものの、同じではありません。
| サイズ | 比率 | 主な用途 |
|---|---|---|
| 1200×630px | 約1.91:1 | ブログ・OGP |
| 1280×720px | 16:9 | Discover・動画関連 |
一つの画像だけで対応する場合は、文字や被写体を中央へ配置し、周囲が切れても意味が変わらないデザインにします。
より確実に表示を整えたい場合は、OGP用の1200×630pxと、Discover用の1280×720pxで画像を分けて書き出してください。
YouTubeサムネイルの推奨サイズは3840×2160px
YouTubeのカスタムサムネイルは、3840×2160px・16:9で作成します。
YouTubeが案内している主な条件は次のとおりです。
| 項目 | 設定 |
|---|---|
| 推奨サイズ | 3840×2160px |
| アスペクト比 | 16:9 |
| 最小幅 | 640px |
| 対応形式 | JPG・GIF・PNG |
| パソコンからの容量上限 | 50MB |
| モバイルからの容量上限 | 2MB |
縦長動画では、ホーム、探索、チャンネル登録フィードなど一部のモバイル画面で、16:9のカスタム画像が自動生成された4:5画像へ置き換わる場合があります。
1280×720pxは使えなくなったわけではない
以前からYouTubeサムネイルに使われてきた1280×720pxも、16:9かつ最小幅640px以上なので、条件上は使用できます。
過去に作成した1280×720pxのサムネイルを、サイズだけを理由にすべて作り直す必要はありません。
Photoshopでの新規ドキュメント作成、人物の切り抜き、文字入れ、書き出しまでの操作は、次の記事で詳しく解説しています。
ブログとYouTubeでは同じ画像をそのまま使い回さない
ブログ用の1200×630pxとYouTube用の3840×2160pxでは、画像サイズだけでなくアスペクト比も異なります。
同じファイルを無理に使い回すと、次のような問題が起こります。
- 左右または上下が切れる
- 文字の位置が片側へ寄る
- 人物や商品が小さくなる
- 余白のバランスが崩れる
- YouTubeの一覧で文字が読めなくなる
効率化したい場合は、画像そのものではなく、デザインの構成要素を共通化します。
一つの制作データに2種類のサイズを用意する
IllustratorやPhotoshopで制作する場合は、一つのファイル内に次の2種類を用意すると管理しやすくなります。
- ブログ・OGP用：1200×630px
- YouTube・16:9用：3840×2160px
背景色、写真、人物、フォント、装飾などは共通化できます。
ただし、比率を変更した後は、文字や被写体の位置をそれぞれ調整してください。
単純に画像全体を縮小・拡大するのではなく、各アートボードやキャンバスで構図を整えることが重要です。
元データを大きく作っても比率調整は必要
3840×2160pxのYouTubeサムネイルを先に作り、それを1200×630pxへ縮小するだけでは、ブログ用画像にはなりません。
16:9から約1.91:1へ変更すると上下の範囲が狭くなり、1200×630pxを16:9へ変更すると上下へ余白を追加するか、左右を切り取る必要があります。
文字やロゴが切れない配置にする
すべての表示場所で共通する、完全に固定された安全領域はありません。
重要な情報を残すため、次のように配置してください。
- タイトル文字やロゴを四辺ぎりぎりへ置かない
- 人物の顔や商品の中心を端へ寄せすぎない
- 背景や装飾だけを端まで広げる
- 重要度の低い要素を外側へ配置する
- 正方形や縦長へ切り抜いても主題が分かる状態にする
一番、横幅で削れる可能性が高いのが「1:1」の比率です。正方形サイズで中心に重要な情報を配置しておけば多くの媒体に対応可能になります。
重要情報と装飾を分けて考える
切れてはいけないものと、切れても問題ないものを分けると配置しやすくなります。
| 切れないようにする要素 | 端まで配置できる要素 |
|---|---|
| 記事の主なタイトル | 背景色 |
| ロゴ | 背景写真の余白部分 |
| 人物の顔 | 図形やパターン |
| 商品の主要部分 | 光や影 |
| 重要な数字 | 装飾線 |
| 操作画面の対象箇所 | 補助的な素材 |
たとえば人物写真を使用する場合、体の一部や背景が切れることは問題ありません。
しかし、顔、商品名、重要な数字まで切れると、画像だけを見ても内容が伝わらなくなります。
小さく表示して確認する
制作画面では大きく見えていた文字も、記事一覧やスマートフォンでは小さく表示されます。
完成後は、画像を横幅300px程度まで縮小して確認してください。
小さくした際に読めない文章は、文字を大きくするだけでなく、次の方法でも改善できます。
- 文字数を減らす
- 補足文を削除する
- 強調する言葉を一つに絞る
- 背景と文字の明度差を大きくする
- 人物・写真と文字を重ねすぎない
アイキャッチの配色、文字の強調、余白などは、次の記事で詳しく解説しています。
WordPressでアイキャッチとOGP画像を確認する
WordPressへアイキャッチ画像を設定しただけで、必ず同じ画像がOGPへ出力されるとは限りません。
使用しているテーマやSEOプラグインによって、OGP画像の設定元が異なることがあります。
公開前または画像変更後は、次の項目を確認してください。
- 記事にアイキャッチ画像が設定されている
- 記事ページと記事一覧で意図した比率になっている
- HTML内の
og:imageに正しい画像URLが設定されている - 古い画像がキャッシュに残っていない
- スマートフォンでも文字や被写体が切れていない
HTML内のog:imageを確認する
ページのHTMLには、次のようなOGP情報が出力されます。
<meta property="og:type" content="article">
<meta property="og:title" content="記事タイトル">
<meta property="og:url" content="記事のURL">
<meta property="og:image" content="アイキャッチ画像のURL">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Open Graph Protocolで定義されている代表的なページ種別にはarticleとwebsiteがあります。通常は、個別記事でarticle、サイトのトップページでwebsiteを使用します。
blogはOpen Graph Protocolで定義された標準的なページ種別ではありません。
WordPressテーマやSEOプラグインを使用している場合は、自分でコードを追加せず、既存のOGP設定を使用するのが基本です。複数のテーマやプラグインからOGPを同時に出力すると、og:imageが重複することがあります。
画像を変更しても古い画像が表示される場合
アイキャッチ画像を変更した直後は、古い画像が表示されることがあります。
まずは次のキャッシュを確認してください。
- WordPressのキャッシュプラグイン
- サーバーキャッシュ
- CDNのキャッシュ
- ブラウザキャッシュ
- 外部サービス側のリンクカードキャッシュ
外部サービス側に古い画像が残っている場合は、しばらく待つか、画像のファイル名を変更して新しいURLを指定する方法があります。
アイキャッチ画像はJPGまたはPNGで書き出す
ブログやOGP、YouTubeへ同じデザインを展開する場合は、基本的にはJPGまたはPNGで書き出すことになります。
| 形式 | 向いている画像 |
|---|---|
| JPG | 写真、グラデーション、色数の多い画像 |
| PNG | 透過画像、ロゴ、図形、文字中心の画像 |
| GIF | 簡単なアニメーション |
| WebP | WordPress内で表示する軽量な画像 |
写真を使ったアイキャッチはJPGにすると容量を抑えやすく、文字、図形、ロゴを中心にしたデザインではPNGのほうが輪郭を保ちやすい場合があります。
ただし、PNGは画像の内容によって容量が大きくなります。使い分けになれるまではJPGとPNGの両方を書き出し、見た目とファイル容量を比較してみるのもおすすめです。
画像形式ごとの特徴と詳しい使い分けは、次の記事で解説しています。
Web画像ではDPIよりピクセル数を確認する
たとえばYouTubeサムネイルを作成するときは、幅3840px、高さ2160pxと指定します。
72dpi、150dpi、300dpiといった数値だけを変更しても、ピクセル数が同じなら、Web上で表示される画像の大きさは基本的に変わりません。
印刷を行わない画像では、まず幅・高さ・アスペクト比を確認してください。
アイキャッチ画像サイズのよくある質問
ブログのアイキャッチは1200×630pxと1280×720pxのどちらがよいですか？
ブログとOGPを中心に使う場合は1200×630px、16:9のテーマ表示やGoogle Discoverを重視する場合は1280×720pxが向いています。
どちらかが常に正しいわけではありません。ファイルサイズによる表示速度低下の懸念、使用中のWordPressテーマで記事一覧と記事ページがどの比率に対応しているか、などを確認して決めましょう。
WordPress公式のアイキャッチ画像サイズはありますか？
WordPress全体で共通する一つの固定サイズはありません。
テーマは独自のアイキャッチサイズや切り抜き方法を設定できます。そのため、画像を作成する前に、使用中のテーマの表示比率を確認する必要があります。
1200×630pxは何対何ですか？
1200×630pxは、約1.91:1です。厳密な2:1ではありません。
2:1へ変換すると1200×600px、16:9へ変換すると1200×675pxになります。
YouTubeサムネイルに1280×720pxは使えますか？
使用できます。
1280×720pxは16:9なので見た目的には推奨のアスペクト比となっており、途切れずに表示されます。YouTubeが示している最小幅640px以上の条件も満たしています。
作り直す必要はありませんが、推奨解像度が3840×2160pxに変更されたため、新しく作成するサムネに関しては4Kサイズで作成しておくのがおすすめです。
ブログとYouTubeで同じアイキャッチを使えますか？
デザインは共通化できますが、画像ファイルは用途別に書き出す方法がおすすめです。
ブログ用は1200×630px、YouTube用は3840×2160pxで作成し、それぞれ文字と被写体の位置を調整してください。
Google Discoverには1200×630pxでは表示されませんか？
1200×630pxでも画像として使用されるのを確認しています。
しかし、Googleが推奨しているのは幅1200px以上の16:9画像です。Discoverへの表示を重視する場合は、1200×675pxまたは1280×720pxを用意しておくほうが良いでしょう。
アイキャッチ画像の文字が切れる場合はどうすればよいですか？
重要な文字、ロゴ、人物の顔を中央寄りへ移動します。
背景や装飾は端まで広げても構いませんが、切れてはいけない情報を四辺ぎりぎりへ置かないでください。ブログの記事一覧、スマートフォン、正方形、4:5、16:9の各比率で確認すると、切れやすい場所を見つけやすくなります。
アイキャッチ画像の容量はどのくらいにすべきですか？
ブログには共通の容量上限はありませんが、見た目を保てる範囲で圧縮します。
画像が重いとページの読み込みに影響するため、必要以上に大きなピクセル数や高品質設定で書き出さないようにしてください。
YouTubeの容量上限は、パソコンからのアップロードが50MB、モバイルからのアップロードが2MBです。
ブログにアイキャッチは設定しなくてもいいですか？
設定しなくても記事の公開や検索エンジンへの登録は可能ですが、基本的には設定することをおすすめします。
アイキャッチ画像がないと、記事一覧や関連記事で画像が表示されなかったり、テーマのデフォルト画像へ置き換わったりします。また、SNSではアイキャッチ画像がリンクカードとして使われます。
アイキャッチ画像そのものが検索順位を直接上げるわけではありませんが、画像検索で表示されやすくなったり、記事内容を視覚的に伝えやすくなり、記事一覧やSNSで見つけてもらうきっかけになります。
コメント