ブログやYouTubeの最適なアイキャッチ画像サイズ比率はこれ!

アイキャッチ画像の最適なサイズや比率について

タイトル文字を入れたアイキャッチ画像があるとTwitterでシェアしてもらった際も見栄えがいいですよね。

ただ文字が切れちゃったりしている人も多く見かけます。

今回は文字が切れない最適なアイキャッチ画像サイズ・比率について解説します。

WordPressブログに最適なアイキャッチサイズ比率

ブログに最適なアイキャッチサイズ

ブログに最適なアイキャッチサイズは下記の2つです。

  • 1200×630px(1.91:1)
  • 1200×675px(16:9)

これはWordPressブログに限った話ではなくあらゆるブログにも当てはまります。

Google検索の結果上位の推奨サイズはすべて1200×630pxが最も適した画像としておすすめされています。

実際に私がブログで使用しているのも1200×630pxです。

SNSで途切れず表示されるのは1200×630px

  • Googleの推奨幅が1200px
  • Twitterの表示サイズが2:1
  • Facebookの表示サイズが1.91:1

これらの条件を満たすSNSで途切れないサイズを選ぶと1200×630pxになります。

Twitterに投稿した際には1200×600pxになるので上下15pxが切れますが端っこなのでそこまで気になりません。

途切れる位置を考慮できるなら1200×675px

多くのWebデザインで使用されている16:9という比率でアイキャッチ画像を作りたい人も多いですよね。

ブログのアイキャッチもそうですが16:9という比率は多くの場所で利用されているため汎用性が高いので使いやすいんですよ。

そういう場合はトリミング範囲にさえ注意すれば問題なく利用可能です。

16:9を利用する場合のトリミングを想定したアイキャッチデザインについては後述します。

AMP推奨サイズ

1200×675pxはAMP推奨サイズでもあります。

  • 画像の幅:1,200px以上
  • 画像形式:JPG/PNG/GIF
  • 解像度:800,000 ピクセル以上
  • アスペクト比:16×9/4×3/1×1

これらの条件を満たすアイキャッチサイズは1200×675pxです。

AMPを利用していてトリミング範囲を想定したアイキャッチが作成できる場合はこのサイズもおすすめ。

トリミングを想定したアイキャッチデザイン

トリミングを想定したアイキャッチ

基本的には1200×630pxで作っておけばSNSで切れること無く綺麗に表示されるんですが、下記の場合には左右がカットされてしまいます。

  • 検索結果にアイキャッチが表示された時
  • Google砲(Discover)に被弾した時

他にもメディアで表示されたりする際はアイキャッチが正方形にカットされて表示されることが多々あります。

その際にきれいに表示されるようなアイキャッチのデザイン方法をご紹介します。

中心正方形部に文字を入れればOK

ブログのアイキャッチ画像のサイズ

1200×630pxで作成しているなら中心の600×600pxに文字が入るようにすれば完璧。

Left Caption

2:1と1:1だけ意識しておけば簡単に作れますね

このようにTwitterでもGoogleでもバッチリ表示されますよ!

アイキャッチ画像のトリミング範囲

16:9の場合はトリミング範囲に注意

一方、1200×675pxを利用している場合はトリミング範囲に注意しなければいけません。

上下左右のトリミングに注意しながら作成しましょう。

文字や切れたら困る情報は下記を除いた中心部に入れるようにしましょう。

  • 縦方向は上下 37.5px
  • 横方向は左右 262.5px

赤と黄色の重なったエリアに文字などの重要な情報が入るように作成しましょう!

アイキャッチ画像の最適範囲

Twitterで表示されるアイキャッチ画像について

twitterアイキャッチ画像の最適化

OGP(Open Graph Protocol)を指定することで、TwitterやFacebookでシェアされた際に下記の情報を表示させることが可能になります。

  • URL
  • タイプ
  • サイト名
  • タイトル
  • ページ概要
  • アイキャッチ

これはSNSが重要になっている今、絶対にしておかなければいけない設定です。

Twitterのアイキャッチ設定方法

設定はテーマの設定画面から簡単に設定できます。

アイキャッチ設定機能がないのは稀ですが、無い場合や自分でコードを書いている場合はhtmlのhead内に記述を行います。

【公式】Twitterカードの利用方法をご覧ください。

OGP設定にはオプションがついているものがあります。

  • type:article/website/blog
  • twittercard:summary_large_image/summary

typeはブログだからblogっていうわけではなく、上層下層で分けるのが一般的です。

トップページはwebsiteかblogにして記事ページはarticleにする感じで使い分ければOK

TwitterのOGP表示設定の選び方

Twitterのogp設定の違い

Twitterでは表示させるブログのアイキャッチを下記の2種類から選べます。

  • Summary Card
  • Summary with Large Image

結論から言うとTwitterのOGP設定はどちらを選んでもOKです。

Summary Cardは正方形

Summary

Summaryを選ぶとアイキャッチが正方形にトリミングされるのでアイキャッチの中心部以外はカットされてしまいますので注意しましょう。

しかしアイキャッチの品質が悪い場合はSummary Cardを選んだほうがクリック率が上がる場合もあります。

とはいえSummaryは視認性が落ちるため高確率でクリック率が下がります。

Summary with Large Image

Summary with Large Image

私のおすすめはSummary with Large Imageです。

Twitterで多くのブロガーが使っているのがこっちのタイプですね。

アイキャッチが大きく表示されるのでアイキャッチを作成している場合はこちらを選んだほうが良いと思います。

Twitterアイキャッチが更新されない場合

アイキャッチ画像はブログで更新しただけではTwitter上には更新が反映されません。

更新したあとはCard Validatorを使いましょう。

Twitterのアイキャッチ画像はキャッシュされているため自分のブログを更新しても変わらないため、アイキャッチを変更したら忘れずに上記のCard Validatorで更新しておきましょうね。

Card Validatorでアイキャッチ更新

YouTubeで利用する最適なアイキャッチ画像サイズ

 YouTubeのサムネイルは1280x720pxが最適

比率に関して厳密に決まりはありませんが、特にこだわりがなければ多くのプレイヤーで利用されている16:9で作成しましょう。

YouTube公式が推奨している1280x720pxで作成しておけば問題ありません。

YouTubeのサムネイル設定方法

youtubeサムネイル設定方法

  1. 動画の詳細画面を開く
  2. 【サムネイル】のアップロード
  3. アイキャッチ画像をアップロード
  4. 変更を保存

※サムネイルのアップロードには本人確認(電話番号登録)が必要です。

YouTubeのサムネイルに利用できるファイル形式はJPG、GIF、GMP、PNGです。

画像のサイズは2MB以下にしておきましょう。

アイキャッチのサイズまとめ

最後にアイキャッチサイズについて解説したものをまとめます。

  • OGP設定は必ず行う
  • 2:1と1:1のトリミングに注意する
  • 画像の幅を1200pxを基準として作成する

この3点だけ意識しておけばOKです。

アイキャッチの重要性

アイキャッチによってアクセス上昇効果が見込めます。

アイキャッチが途切れること無く最適なサイズを利用していきたいですね!

アイキャッチ画像の重要性や作成方法については下記の記事に詳しくまとめてあります。

アイキャッチのデザインをするなら

クリック率の高いアイキャッチを作りたいなら下記の記事を参考にしてみてください。

ちょっとした7つのコツで簡単に視認性の高いアイキャッチが作成できますよ