【2020年】ブログのアイキャッチ画像のサイズ・比率・容量のおすすめ

ブログ アイキャッチ画像 サイズ
  • 「SWELL」にテーマを乗り換えたけれどアイキャッチ画像ってどれくらいのサイズなんだろう?
くろすけ

アイキャッチ画像ってどの比率で、どれくらいの大きさを選べば、しっくりくるのか悩みますよね。

この記事を読むとわかること!

  1. 画像の横と縦の比率(アスペクト比)を何対何にするか
  2. 画像の横と縦の長さ(ピクセル)を何ピクセルにするか
  3. 画像はどれくらいの容量(ファイルサイズ)が適切か

アイキャッチ画像は、ブログの「顔」となる重要な要素。設置することで、さまざまなメリットがあるのでしっかりと作成しましょう。

  • 記事の内容がイメージしやすい
  • サイト内の回遊率がアップする
  • SNSでシェアされたときに目立つ
目次

アイキャッチ画像は「1.91:1」「1200px」「400KB以下」がおすすめ

くろすけ

2020年のアイキャッチ画像サイズのスタンダードを発表します!

アイキャッチ画像のおすすめサイズ
  1. 画像の横と縦の比率(アスペクト比)は1.91:1
  2. 画像の横と縦の長さ(ピクセル)は1200 × 630px
  3. 画像の容量(ファイルサイズ)は400KB以下
ブログ アイキャッチ画像 サイズ

これはTwitterやFacebookなどのSNSでのシェアやGoogle Discovery(Google Chromeのおすすめ記事)に掲載されることを意識したアイキャッチ画像のサイズです。

GoogleやYahoo、BIngといった検索エンジンからのアクセスだけではなく、SNSで積極的にシェアされる記事が

スマホから見ると、かなり横長に感じますよね。トップページの記事一覧、サイドバーの人気記事でアイキャッチ画像が並ぶと画像とタイトルのバランスが良く、スッキリとした印象になり見やすいかなと思います。

では、次の章ではアイキャッチ画像を「1.91:1」の比率で作成するときのポイントを紹介します。

伝えたいことはアイキャッチ画像の中心に配置する

SNSでシェアされたときに表示される画像はサービスによって違うため人物や風景などの被写体、タイトルやキャッチコピーといった文字はできるだけアイキャッチ画像の中心に配置するようにしましょう♪

サービス画像の横と縦の比率
Facebook19.1:1
Twitter2:1または1:1
はてなブックマーク1.428:1
LINE1:1
検索エンジンの検索結果1:1

下記の正方形のなかに伝えたいことを配置すれば、

Twitterでシェアされたときに表示されるTwitterカードには「Summary Card(小さい画像)」「Summary Card with Large Image(大きな画像)」の2種類があります。

「Summary Card with Large Image」のほうがタイムラインで表示されたときに目立つのでおすすめ!

テーマ「SWELL 」で推奨されているプラグイン「SEO SIMPLE PACK 」で、どちらの設定にするか選択することができます。

Googleが推奨する画像サイズは「横幅1200px以上」のもの

アイキャッチ画像を作成するときに「いったいどれくらいの大きさで作ればいいのかな」と悩みませんか?

僕は、これまでアイキャッチ画像の横幅を640pxや720pxで作成していましたが今は1200pxに固定するようにしています。

くろすけ

掲載されるかどうかは別としてGoogle Discover(グーグルディスカバー)を意識しての画像サイズです(笑)

検索履歴や位置情報などのデータをもとに、ユーザーの興味に合わせたコンテンツを自動的に表示する機能です。

Google Discoverに掲載される条件は明らかになっていませんが、ただひとつだけ画像のサイズについては条件が指定されています。

魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅が 1,200 ピクセル以上で、max-image-preview:large の設定、または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。

Google Search Console「Google Discover とウェブサイト」より

画像のサイズを横幅1200px以上にしたからといってGoogle Discoverに必ず掲載されるわけではないんですけどね。Googleが推奨しているってことには意味がある。そう信じてアイキャッチ画像は横幅1200pxがおすすめです。

WordPressテーマ別のアイキャッチ推奨サイズ

Google Discoverを意識してアイキャッチ画像を作成するなら「横幅1200px以上」と言いましたが、人によってはそこまで高画質の画像は必要ないってケースがあるじゃないですか!?

そんなときは使用しているワードプレステーマのコンテンツ幅に合わせて画像を作成するといいですよ♪

有名・人気ワードプレステーマごとに推奨されている画像サイズをまとめてみました。

テーマコンテンツ幅
SWELL800px
SANGO680px
JIN760px
AFFINGER5800px
STORK19730px
Cocoon800px
Simplicity680px
Lightning800px

アイキャッチ画像のファイルサイズは「400KB以下」に圧縮する

アイキャッチ画像の横と縦の比率(アスペクト比)、画像の長さ(ピクセル数)については多くの記事で解説されていますが画像のファイルサイズについてはあまり解説されていないので、あえて解説したいと思います。

くろすけ

ページの表示速度こそ正義。どれだけ良いコンテンツを作成しても表示される前にサイトを離脱されたら意味がない。

僕はこのように思っているので、なるべくページ全体のデータ容量を増やしたくありません。

アイキャッチ画像は高画質になればなるほど(画素数が増えるほど)データ容量が大きくなるので、当然ページ全体のデータ容量も増えてしまいます。

画像のデータサイズを圧縮して小さくすることでページの表示速度が速くなって読書のストレスも軽減します。

Googleはページの表示速度もSEOの指標のひとつとしているのでページの表示速度の改善がSEO対策になります。

アイキャッチ画像を圧縮するときのポイントはファイルサイズと納得できる画質のバランスを見つけることです。

どれだけファイルサイズを小さくしたところで画像がボヤけてしまうような画質ではアイキャッチ画像として残念です。

アイキャッチ画像の理想のファイルサイズ

  • 写真を使ったものなら200キロバイト以下
  • イラストを使ったものなら100キロバイト以下

ファイルサイズを小さくするには画像圧縮ツールを使う

ワードプレスには画像をアップロードするだけで自動的に画像を圧縮してくれるプラグインがありますが、

  1. 無駄なプラグインを追加してワードプレスの動作を重くしたくない
  2. 画像によっては圧縮率を変えてファイルサイズを小さくしたい
  3. アップロードする前に圧縮した画像の画質をチェックしたい
くろすけ

このような理由があって僕はブラウザで操作できる画像圧縮ツールを使っています!

PNG画像を圧縮するならパンダでおなじみ「TinyPNG」がおすすめ!

JPEG画像を画質を比較しながら圧縮できるツールは「Squoosh」がおすすめ!

テーマ「SWELL」なら高画質のアイキャッチ画像もサクサク表示できる

ツールで画像を圧縮したけれど、思うようなファイルサイズまで圧縮できなかった。

くろすけ

画質を取るか、ファイルサイズを取るかの選択を迫られる。

でも、テーマ「SWELL」なら高画質のアイキャッチ画像でもサクサク表示できちゃうんです。

テーマ「SWELL」ではTransients API というキャッシュ機能を使ってページの高速表示を可能にしています。

だから、高画質のアイキャッチ画像を掲載していてもページの表示速度を限りなく保つことができます。

まとめ

ブログのテーマや表示したい画像によって理想のアイキャッチ画像のサイズは異なると思います。

迷ったときは、この記事で紹介したアイキャッチ画像のおすすめサイズを参考にしてみてくださいね。

アイキャッチ画像のおすすめサイズ
  1. 画像の横と縦の比率(アスペクト比)は1.91:1
  2. 画像の横と縦の長さ(ピクセル)は1200 × 630px
  3. 画像の容量(ファイルサイズ)は400KB以下

アイキャッチ画像は、その名前のとおり読者の目(アイ)を引きつける(キャッチ)ための画像です。

記事にピッタリ合うアイキャッチ画像を作成して、たくさんの読者の目にとまるような工夫をすれば、あなたのサイトのファンは自然と増えていきますよ。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
よかったらシェアしてね!

コメント

コメントする

目次
閉じる