自分の能力を高める
PR

ブログにぴったりなアイキャッチ画像のサイズについて解説します

アイキャッチ画像のおすすめサイズは?
かぴ
記事内に商品プロモーションを含む場合があります

今回はアイキャッチ画像の最適なサイズについて、シェアされた時も含めた対応について解説していきますね。

この記事で解決できる悩み
  • 自分のブログにピッタリなアイキャッチ画像のサイズがわからない
  • SNSでシェアされたときにアイキャッチ画像がきれいに表示されない
  • 手軽にパワポでアイキャッチを作ってみたい
ぴんきー
ぴんきー

実は・・・どのくらいのサイズがいいかわからないから適当に16:9の画像にしてるんだよね・・・

なんていう人はいませんか?

れみー
れみー

でも、別に大きさなんて入れば何でもよくない?

と思っているかもしれませんね。

実は、サイズで損をしているかもしれないので、ぜひこの記事の内容を読んで自分のアイキャッチ画像のサイズを改善してみてくださいね。

↓今日の目次はこちら↓

ブログにおすすめなアイキャッチサイズは2つ

おすすめなアイキャッチサイズ2つ

ブログのアイキャッチ画像は、一般的には動画やプレゼンなどでよく使用される16:9の画像比率が推奨されています。

例えばYoutubeなどもサムネイルが16:9と標準な比率になっています。

しかし、最近はSNSで自分のブログがシェアされた時は、意図せず画像がリサイズされてしまうこともあります。

リサイズを踏まえたアイキャッチ画像のデザインにするのがおすすめです。 個人的なおすすめサイズは2つあります。

1つ目は16:9の1200px×675px

1つ目のおすすめサイズは16:9の1200×675px

こちらのサイズはブログやメディアで一般的によく使われる16:9の比率にした場合のおすすめサイズです。

パワポでスライドを作るときなどにも16:9がよく使用されますよね。

他のメディアや資料などで紹介される場合は、こちらのサイズが良いでしょう。

れみー
れみー

このブログのアイキャッチもこのサイズだよね

このブログのテーマJIN:Rでは勝手に16:9の比率にリサイズされ、自動的に表示される大きさに調整されます。

同じPCのフル画面表示でも、使用しているWordpressのテーマによってこのサイズは異なります。
しかし、高解像度に対応した幅1200pxにすればどのテーマでも包含できます。

※参考までに以前調べたテーマのアイキャッチ横幅は550~850pxほどにリサイズされるものが多いようです。

60個のサイトでアイキャッチ画像のサイズを調べた結果

幅の1200pxは最近googleで推奨されているサイズで、タブレットやスマホ、もちろんPCでも十分きれいに表示されます。

2つ目は1.91:1の1200px×630px

2つ目のおすすめサイズは1.91:1の1200×630px

2つ目のおすすめサイズは1:91:1の比率です。
こちらの比率はFacebookなどで採用されています。

先ほどの16:9より少し横長になっていますが、最近のSNSではよく見かけますね。

基本的には設定したアイキャッチ画像が共有先に対応して自動でリサイズされるので、16:9の画像を使用していたとしても、勝手に1.91:1にリサイズされて表示されます。

どちらも兼ねるなら見切れる部分の考慮で16:9がベスト

上下の22.5px見切れるのを考慮するのがベスト

よくばりなあなたなら、

ぴんきー
ぴんきー

どっちでもきれいに表示されるようにしたほうがいいんじゃない?


と思いませんか?

どんなところにシェアされても、興味を持ってもらいたいですよね。

そんな時は、汎用的な16:9サイズでアイキャッチを作成しましょう。

見切れてしまう部分を考慮することで、文字などの重要な部分が切れないようにデザインを作成するのがおすすめです。

具体的には、上下22.5pxに重要な内容が入らないようにすればOKです。

SNS等の他のメディアにシェアされるときの注意点

上記で代表的なサイズを紹介しましたが、Google DiscoverやSNSのスペースを省略した表示方法では、1:1の正方形で表示されることもあります。

また、勝手にリサイズされるため、画質が劣化しないファイル形式にしたほうがベターです。

詳しく紹介していきますね。

正方形にカットされることを考慮するなら要の文字を中心に

正方形にトリミングされても良いように、要の文字は中心に

長方形のアイキャッチでは、できるだけすべての領域を使ってデザインをしたくなりますよね。

ですが、1:1の正方形(長方形のアイキャッチの場合は中心部分)が切り取られてシェアされることがあります。

その場合は、画像の中心に一番伝えたい内容を配置するようにしましょう。

そうすることで、左右が見切れてしまっても、見た人に伝わるアイキャッチ画像になります。

私も以前はこの事実を知らなかったので、デザインを中央揃えに改善したところ、1:1の正方形に切り取られても、大事なところが伝わるようになりました。

アイキャッチの改善例

圧縮を考慮してファイルの形式はPNGにしよう

ファイルの形式は圧縮されても画質◎なPNG一択

今まで説明してきたように、アイキャッチ画像は様々な場所で活用され、勝手にサイズを変更されて使用されてしまいます。

そんな時は、PNG形式をお勧めします。

その理由は、画質を保ったまま編集やサイズ変更が可能だからです。

れみー
れみー

画像を作る際の形式はいくつか代表的なものがあるけど、大体JPEGかPNGを使うよね。

JPEG

  • 圧縮や拡大に弱く、リサイズすると画質が悪くなってしまう(非可逆圧縮)
  • 写真のような色数の多い描写が得意、比較的容量は軽い 背景を透過することはできない

PNG

  • 圧縮や拡大に強く、リサイズしても画質は変わらない(可逆圧縮)
  • イラストのようなはっきりした描写が得意で、色数が多くなると容量が増える
  • 背景を透過することができる

この2つのうち、いろんなメディアに表示される際にリサイズされることを考慮すると、PNGがよいという結果になります。

ただし、色数が多いと容量が増えてしまうため、色数の少ないイラストの方が良いでしょう。

また、きちんと圧縮対策などもしておくとベターですね!

シェア時の見え方はOGP画像シミュレーターで確認できる

シェア時の見え方はOGPシミュレータで確認

おススメのサイズについては解説しましたが、毎回確認するのは面倒ですよね。

そんな時は、シェアされた時の見え方がわかるOGP画像シミュレーターを使ってみましょう。

私のおすすめはラッコツールズのOGP画像シミュレーターです。

こちらを使用すれば、主要なSNSでの表示がシミュレーションできて便利です。

例えば、このサイトのアイキャッチ画像をシミュレーションすると、

このように表示されます。

ラッコツールズで実際にシェア時の画像をシミュレーションした結果

アイキャッチの変更はすぐに反映されない

アイキャッチの変更はすぐに反映されない

せっかくアイキャッチ画像を変更したのに、SNSで投稿したら前の画像が表示された!ということはありませんか?

そんなときは、前の画像がキャッシュに残っている可能性があります。

キャッシュを消去できる場合もありますが、基本的には待てば更新されます。

Twitterの場合は最大7日間のキャッシュ更新となっているので、気長に待ちましょう。

パワポでアイキャッチ画像を作るときのサイズ設定

パワポでアイキャッチ画像を作りたい!という人への設定方法を教えます。

れみー
れみー

ぼくも、パワポでアイキャッチを作っているよ

実際の作り方と、私が作成したテンプレートについて紹介していきますね。

解像度の設定を96ppiにする

まずは既定の解像度の設定を確認しましょう。
画像として保存したりする際にこの設定された解像度が使用されます。

この設定によって、保存されるサイズが決まるので、必ず確認しましょう。

タブを選択

まず左上のタブの【ファイル】を選択します。

ファイルタブを選択
オプションを選択

左から表示されてくるメニューの一番下にある、オプションを選択します。

オプションを選択
既定解像度を96ppiに設定

左の項目から【詳細設定】を選び、下にスクロールすると、【イメージのサイズと画質】という項目があるので、既定解像度を確認しましょう。

詳細設定から既定の解像度を96ppiに設定

私は、96ppiにしていますが、対応するサイズが計算できるのであれば、いくつにしてもかまいません。
自分で計算したい人はシケメンプリントを利用しましょう。

ココからのサイズ設定は96ppiを前提として説明していきます。

スライドのサイズを設定

スライドのサイズを設定しよう

解像度を96ppiに設定できたら、次はパワポのスライドのサイズをアイキャッチと同じサイズに設定します。

そうすることで、そのままスライドを指定サイズで画像としてエクスポート(保存)できるようになります。

スライドマスターを開く

【表示】タブから【スライドマスター】を選択します。

これでスライド自体のサイズ設定が可能です。

スライドマスターの表示
ユーザー設定のスライドサイズを選ぶ

【スライドのサイズ】というところをクリックすると、いくつか選べるので、【ユーザー設定のスライドのサイズ】を選択しましょう。

ユーザー設定のスライドのサイズ
スライドサイズをcmで入力
スライドのサイズをcmで入力
  • 1200×675pxにしたい場合は、幅:31.75cm/高さ:17.859cm
  • 1200×630pxにしたい場合は、幅:31.75cm/高さ:16.669cm
  • 両方兼ねたい場合は、1200×675pxにして、ガイドを利用するのも良いでしょう。

自分で設定が難しいという場合は、私が作ったスライドマスターを使ってみてください。

パワポのオリジナルテンプレートあります

サンプル5個付きで100円です。

お得な5つのサンプルつき!

一番おすすめのサイズ(1200×675px)の16:9で作成してあります。

パワポテンプレートのサンプル5つ

シェアされた時に1.91:1や正方形になった場合にも対応できるよう、ガイドを設置していますので、目安としてご利用ください。

テンプレート内に表示されるガイド
ガイドが表示されていない場合

パワポの設定で、ガイドに✅が入っているか確認しましょう。

プリセットで入っている色や文字を編集したい場合は、スライドマスターで変更可能です。

レイアウトもご自由に編集してお使いくださいね!

また、実際にアイキャッチを作る際は、【ホーム】タブの【新しいスライド】から、テンプレート内のレイアウトを選択できます。

もっとこういう実例もほしいなど要望ありましたらTwitter(@poweredbykapi)までお気軽にどうぞ。

もし役に立った場合はこの記事をシェアしていただけると、喜びます。

まとめ

いかがでしたでしょうか?

本日はブログにぴったりなアイキャッチ画像のサイズをご紹介しました。

テンプレートもご用意しているので、ぜひパワポでも作ってみてくださいね!

100円

すでに購入済みの方はこちら

Twitterからの読者コメントをお待ちしています。
ブログ更新の励みになります!
スポンサーリンク
Microsoft Public Affiliate Program (JP)(マイクロソフトアフィリエイトプログラム)
ABOUT ME
かぴ
かぴ
パワポ×イラスト
管理人のかぴです。 パソコンを毎日利用する社会人になり、どうにかして効率化できないかともやもやすることも。 少しでも同じような人が減っていくようサイトを立ち上げました。 参考になれば幸いです。
スポンサーリンク

購読には会員登録が必要です

「半角英数字」と「大文字1個以上」を含む、8文字以上

会員登録には 利用規約/特定商取引法に基づく表記 への同意が必要です。

すでに会員の方はこちら

ログインして記事を読む

メールアドレス
パスワード
パスワードを忘れた方
新規会員登録はこちら

パスワード再設定

パスワードを再設定します。入力したメールアドレスに再設定用のURLをお送りしますので、パスワードの再設定を行なってください。
キャンセル
記事URLをコピーしました