ブログのアイキャッチの最適サイズは?〜1200×630がおすすめな理由〜

ブロガーの皆さんこんにちは。駆け出しのアカネです。

アイキャッチ画像はどのように準備していますか?
フリー画像を拾ってきたり、イラストレーターさんに発注する方法があるかと思いますが、当ブログでは(今のところ)地道に自作しています。
いざ描こうと思った時、困ったのはサイズでした。

当記事では、

どのくらいの大きさにすればいいの?

から、

よし、1200×630で描くぞ!

と決めるまでに調べたことをまとめました。

スポンサーリンク

そもそもアイキャッチの役割とは

アイキャッチってなんのためにあるんでしょう。
やっぱり、記事の見栄えをよくするため。あとは、各種SNSにシェアされた際の見栄えをよくするためでしょうか(OGPなど設定している場合)
とにかく見栄えのためにあると! たぶん。

つまり最適なアイキャッチのサイズを調べるには、ブログのレイアウトの確認と、SNSの仕様の確認が必要になるわけです。

SNSでの表示のされ方を調べよう

Facebook(OGP)の推奨サイズは1200×630

はい、これでもう結論が出たようなものなんですけど…
OGP(ざっくりいうと、Facebookにシェアする際に表示してもらうものの設定です)に指定する画像のサイズは 1200×630 が推奨されているのです。
これはFacebookの開発者向けのページに書かれています。

ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

推奨されているサイズがあるならそれに従わない理由は今のところないですよね。

これより下の項目は、1200×630を基準にして考えてます。

Twitterカードは2種類ある

TwitterでブログのURLをシェアした際に表示されるTwitterカードには、「Summary Card(小さい画像)」と「Summary Card with Large Image(大きな画像)」があります。
どちらに設定されているかはご自身のブログをご確認ください。

Summary Card

小さい正方形で表示されます。
画像が長方形の場合は長い方の両端が見切れて表示されません。

しかしブログのアイキャッチを正方形にするというのは…あまり見栄えがよくなさそうなのでできれば避けたいところです。

Summary card

Summary Card with Large Image

横:縦 の比率が 2:1 で表示されます。
指定した画像の比率が異なる場合はおさまらない部分が見切れて表示されません。
正方形よりはマシですね。

横幅を1200にした場合、縦は600なので、1200×630の画像を指定すると上下が15pxずつ見切れる計算ですね。まあこのくらいなら誤差かと思います。

Summary with large image

その他のSNSは?

ぶっちゃけ、FacebookとTwitter以外でブログをシェアするイメージがあんまりなくて…しっかり調べていないです。

Google+については「縦幅は最低でも120にしておけよ」って記述があるのですが、そんなに小さい画像はそもそも使わない…ですよね?

Snippet  |  Google+ Platform for Web  |  Google Developers
スポンサーリンク

ブログに合ったサイズを調べよう

自分のブログのアイキャッチ表示部分の横幅はいくつなのか、わかりますか?
SNSに適したサイズはFacebook合わせの1200×630だとわかりましたが、それがブログに表示できないのでは本末転倒です。

とはいえ大抵は横幅が基準より大きいものはおさまるように調整し、比率を保って縮小表示してくれる作りになっていますから、どんなサイズでも全く表示できないなんてことは稀かと思います。
強いていえば、基準より小さい場合はオリジナルサイズで表示されることになるので、隙間を作りたくないのであれば基準より大きい画像を用意すればいいことになります。

ブログをやっている人はだいたいWordPressなのかなと思ったので、WordPressテーマの有名どころを対象に調査してみました。

デモサイトを対象に調査しています。同じテーマでもメインカラム幅をカスタマイズしている場合は調査結果と異なる場合があります。

無料テーマ

Cocoonの場合

PCの大画面で閲覧する際は 800px になります。これが基準ですね。
ただし画面が1030px以下になると1カラム表示になるので、その際は950pxまで大きくなります。

さらに特殊なケースがあって、Cocoonってサイドバーに何も設定されていないととても大きな1カラムになるのですよ。この場合は最大で1176pxになるようです。

Simplicityの場合

後継のCocoonが発表されたので今からこのテーマを選ぶ人はいないかもしれませんが、現役の人がいるかもしれないので念のため。

基準は 680px です。
1カラム時は700pxまで大きくなるようです。

STINGERの場合

基準は 640px です。
1カラム時は808pxまで大きくなるようです。

有料テーマ

WING(AFFINGER5)の場合

デモのスタイルによってサイズが大きく異なりました。
2カラムの場合の基準は 740〜880px でした。

JINの場合

JINはスタイルによってサイズが微妙に異なりました。
こちらも煩雑になるので個別には触れませんが、基準はおよそ※ 700〜750px でした。

SANGOの場合

基準はおよそ※ 700px です。
1カラム時は767pxまで大きくなるようです。

STORKの場合

基準は 728px です。
1カラム時は767pxまで大きくなるようです。

どうして「およそ」なのかと言いますと…
調査時に小数点以下の数値が出た箇所は繰り上げて表記しています。
(整数値じゃないと画像作れないしね!)

自分のブログの最適サイズの調べ方

他のテーマを使用している方やそもそもWordPressではない方で、自分のブログの表示サイズが気になってきたら次の方法で調べてみてくださいな。

Chromeのデベロッパーツールを使う

Chrome上でサイズを調べたいブログの記事を開いたら、デベロッパーツールを使いましょう。
ここをクリックします
矢印みたいなマークをポチッと押してから、アイキャッチ画像をクリックします。
ここをクリックします
すると、下の図のように『現在表示されているサイズ』が表示されます。
これが横幅です
アイキャッチ画像が小さい場合は、画像そのものじゃなくて表示領域を選択するように気をつけてみてください。

そんなわけで、1200×630がおすすめです

  • Facebookの推奨サイズである
  • TwitterカードはSummary Card with Large Imageならほとんど気にならない
  • メインカラムの横幅が1200pxより大きいブログは(調べた限りでは)ない
  • 引き延ばされると荒れるから画像は小さいより大きい方がいい

以上の理由で、私がアイキャッチを作るときは1200×630で作っています!

例外:noteでも使うなら1280×670にしよう

使うのがブログだけなら1200×630でOKなのですが、もしあなたがnoteを利用していて、見出し画像とブログのアイキャッチを使いまわそうと思っている場合はちょっと踏みとどまってください。

noteの見出し画像は 1280×530 で表示される仕様でしたが、2018年6月14日 の午前11時以降に公開した記事から 1280×670 に変更されました。
Facebookで推奨されている 1200×630 の比率 1.91:1 に合わせた調整とのことです。

見出し画像の比率を変更いたしました|note公式|note
いつもnoteをご利用いただき、ありがとうございます。 2018年6月14日 より、記事を作成する際に設定する見出し画像の表示比率を変更し、TwitterやFacebookでシェアした際に表示されるカードの画像サイズと互換性がある比率となりました。 変更前までに投稿された記事の見出し画像の比率はかわりません。20...

1200×630サイズの画像を設定した場合、比率は同じなので端が見切れる心配はありませんが、若干小さいので引き延ばされてしまうかも…。
上にも書きましたが画像は小さいより大きい方がいいです!

ブログとnoteに同じ画像を使う予定がある場合は、1280×670で作成しましょう。

おまけ:アイキャッチ画像のテンプレート

1200×630サイズのアイキャッチはTwitterでシェアすると一部が見切れてしまうので、大事なものはなるべく中心部に描いた方が良いでしょう。

見切れる部分を色分けした画像を置いておきますので、もしお役に立てそうでしたら下絵の際などご自由にご利用ください。

Summary Card用

Summary Card用

Summary Card with Large Image用

Summary Card with Large Image用

コメント

スポンサーリンク