LINEスタンプを作るなら使いたいクリスタの機能５選
かぴ
かぴらいふ
アイキャッチ画像のサイズを調査【拡張機能で適正サイズがわかる？】
かぴ
今回はアイキャッチ画像の最適なサイズについて拡張機能を使って検証したことをご紹介します。
この記事を読めば、あなたのブログにピッタリなアイキャッチ画像のサイズがわかりますよ。
ぴんきー
実は・・・どのくらいのサイズがいいかわからないから大きめの画像にしてるんだよね・・・
なんていう人はいませんか？
れみー
でも、別に大きさなんて入れば何でもよくない？
と思っているかもしれませんね。
ですが、本当にそうでしょうか？
それを解明すべく、Page Ruler ReduxというGoogle Chromeの拡張機能で調査をしました。その使い方も記事で紹介していきますね。
↓今日の目次はこちら↓
アイキャッチ画像のサイズを調査した結果
Page Ruler Reduxを利用すると、PCの画面に表示されている画像のサイズが簡単にわかるので、複数人のブログサイトで調査しました。
結果から言いますと、使用しているブログのテーマによって適切なアイキャッチ画像のサイズは異なります。
また、それだけではなく同じテーマを利用していてもレイアウト次第では適切なアイキャッチ画像の大きさは変わります。
レイアウトでアイキャッチ画像のサイズは決まる
ここでは主流のレイアウトでどうやってアイキャッチ画像のサイズが決まるのか説明します。
アイキャッチ画像は、基本的に表示される有効範囲いっぱいの大きさにするのが一般的です。
その中でも合わせる基準は2種類あります。
- 文字幅に合わせる・・・本文の幅と同じ幅にする
- 記事幅に合わせる・・・本文より外にある外枠に合わせる
文字だけで説明してもわかりにくいかと思いますので、図で表してみます。
ブログの本文を書くと周りに余白が少しありますよね。
背景を白以外の色にしている方にはわかりやすいかもしれません。
その余白を残すか、余白も潰していっぱいいっぱいで使うかの違いです。
アイキャッチ文字幅合わせ型
アイキャッチ記事幅合わせ型
この2種類についてはお好みで使い分けてみてください。
横にサイドバーがなくても、この考え方は共通ですね。
60個のサイトでアイキャッチ画像のサイズを調べた結果
twitterにブログを載せている60名の方から、アイキャッチ画像のサイズを調べてみました。
結論から言いますと、
平均のアイキャッチ画像のサイズは、横幅696px
でした。
結果をグラフにするとこんな感じです。
これはちょうど私のサイト(JIN)のアイキャッチサイズと同じくらいですね。
中には横幅をフルに使わず、縦長の画像をアイキャッチに利用していたり、小さめの画像を設定する人もいましたが、基本的には横幅をフルに使えているもののほうが見栄えは良いです。
ぴんきー
平均はわかったけど、これが本当に自分のサイトにピッタリかどうかはわからないよね？
では、アイキャッチ画像はいったいどれくらいの大きさにしたらちょうどよいのでしょうか？
推奨のアイキャッチ画像のサイズはどれくらい？
テーマ毎でアイキャッチ画像のサイズは異なる事がわかりましたが、実際にどのくらいが最適なのでしょうか？
答えは、自分のブログ記事の横幅より大きなサイズならOKです。
れみー
例えば幅が700pxならそれ以上にすれば良いということだね。
比率は最近主流の１６：９にすると良いでしょう。
もちろん、サイトの読み込み速度を気にしているなら大きくしすぎず、横幅ぴったりのサイズで用意するのがオススメです。
代表的なテーマのアイキャッチ推奨サイズ
よく使用されてる代表的なテーマのアイキャッチサイズを調査した結果について説明していきます。
縦軸は、アイキャッチ画像のサイズ(横幅)、横軸は調査した人数です。
平均的に見ると、下の表のようになります。
| テーマ名 | アイキャッチ画像大きさ(横幅) |
| Cocoon | 800 px 程度 |
| AFFINGER | 740 px 程度 |
| JIN | 700 px 程度 |
| その他 | 650 px 以下 or 840 px 以上 |
使っているテーマがあれば参考にしてみてくださいね！
上記サイズより少しだけ大きめに作ることで、自動でサイズを調整して表示してくれるので安心です。
自分で最適サイズを測ることができる！？
代表的なテーマの例はご紹介しましたが、せっかくなので自分のブログにあったぴったりのサイズにしたいですよね。
そのためには、自分のブログが表示される領域の大きさを測ってみましょう！
それが一番確実ですよね。
そのためにはズバリ、Google Chromeの拡張機能を利用してみましょう。
拡張機能”Page Ruler Redux”を入れよう
Google Chromeの拡張機能の中に、”Page Ruler Redux”という定規みたいな機能があります。
これを利用すれば、表示されているページの画像や枠の大きさをpx単位で測定することができるようになります。
例えば、私のサイト（かぴLIFE）を測定してみるとテーマJINにおける代表的なサイズがわかります。
記事の幅領域：759px , アイキャッチ領域（文字幅領域）：699px
Page Ruler Reduxの使い方
使い方は至って簡単です。
①拡張機能を入れたら、Chromeの画面右上に定規のアイコンが出てきます。
②カーソルがでてくるので、測定したい場所（今回はアイキャッチ画像）を囲みます。
すると、画面上部に囲っているエリアのサイズがピクセル単位で表示されます。
もちろん、この測り方でも簡単に大きさがわかりますがもっと簡単な方法もあります。
それは、画面上部に表示されるバーの一番左にある“<>”アイコンをタッチするだけです。
クリックするとカーソルを合わせるだけでその領域のサイズが上のバーに表示されるようになります。
この機能を使う際は表示しているブラウザを全画面表示にしておきましょう
全画面表示にしていない場合は、画像や表示されている枠が画面の大きさに合わせて変わるので注意が必要です。
全画面表示で一番大きい表示サイズになるので、全画面表示のサイズをメモして自分のアイキャッチ画像の大きさに反映すればOKです。
まとめ
いかがでしたでしょうか？
本日は拡張機能を利用して自分のブログにピッタリのアイキャッチ画像のサイズを見極める方法をご紹介しました。
ぜひあなたも、Page Ruler Reduxを利用してピッタリのアイキャッチ画像を作ってみてくださいね。
スポンサーリンク
ABOUT ME
管理人のかぴです。
パソコンを毎日利用する社会人になり、どうにかして効率化できないかともやもやすることも。
少しでも同じような人が減っていくようサイトを立ち上げました。
参考になれば幸いです。
