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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AMP推奨サイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TwitterのOGP表示設定の選び方

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

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

Summary Cardは正方形

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

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

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

Summary with Large Image

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

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

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

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

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

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

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

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

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

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

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

YouTubeのサムネイル設定方法

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

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

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

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

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

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

アイキャッチの重要性

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

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

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

あわせて読みたい

ブログのアイキャッチ画像は必要？作成方法やSEO効果を解説結論から言いますとブログにアイキャッチは必ずしも必須ではありません。しかしアイキャッチを利用することで大幅にアクセスが向上しますので、間接的なSEO効果が期待で...

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

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

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

あわせて読みたい

【簡単】おしゃれなアイキャッチ画像を作成する7つのコツブログやYouTubeに使うアイキャッチのデザインがうまくできないという初心者向けに簡単におしゃれに見える方法をご紹介。私がアイキャッチ画像の作成に使用しているのは...