...

【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ

Cocoonにおけるアイキャッチ画像の最適なサイズについて

どうもおはようポテトです。

アイキャッチ画像のサイズってどのぐらいがいいの…?

ということで今回は

  • アイキャッチ画像作ったはいいものの、サイズが合わなくて見切れる
  • Cocoonの場合だとアイキャッチはどのくらいのサイズにすればいいの?

という方に向けて「Cocoonにおけるアイキャッチ画像(サムネイル)の最適なサイズ」について簡潔にまとめました。

Cocoonをお使いの方、ぜひ参考にしていただければ幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

Cocoonのアイキャッチ画像に最適なサイズ

いきなり結論から。

最適サイズ

1200×630px

Cocoonにおける最適なアイキャッチ画像のサイズは1200×630pxになります。

このサイズにするメリットは以下の3点です。

  • SNSで共有した際に見切れない
  • 綺麗に写る
  • 速度に関わるほど重すぎず、画質が荒くなるほど軽すぎない
分かったような分からないような…

くるみ

そう、これだけだといまいちピンとこないと思うので、どういうことか具体的例と共に見ていきましょう。

SNSで共有した際(OGP画像)のサイズ

TwitterとFacebookで記事を共有した際に表示されるOGP画像ですが、そのどちらにおいても1200×630のサイズだと見切れず綺麗に表示されます。

Twitterの場合

TwitterのOGP画像は二種類あるのですが、今回はメジャーなSummary Card with Large Imageの場合で考えていきます。

上のツイートみたいにドンッと大きいやつのことだね

くるみ

このカードの画像は、アスペクト比が2:1で、最小サイズが300×157または最大サイズが4096×4096ピクセルです。
(引用:image-twitterより)

その場合、2:1の比率が公式より推奨されており、それとほぼ同じ比率の1200×630で問題ありません。

Facebookの場合

1.91:1の画像比(600 x 314ピクセルなど)を使用してください。

(引用:ベストプラクティス-Facebookより)

Facebookは1.91:1の比率を推奨しています。

昔は「1200×630がよい」と推奨する記述があったようですが今は無くなっています。

しかし1.91:1ということで1200×630とほぼ変わらず、こちらも問題ありません。

ブログ主

SNSでのOGP画像では1200×630がマストなのか

サイズが大きい方が綺麗に写る

ブログ主が運営している別のサイトでもでは最初320×180にして途中から変更したのですが、上のを見ても分かるようにやはり1200×630の方が綺麗ですよね。(当たり前ですが)

ブログ主

サイズが大きければ大きいほど画像も綺麗に写るからね
アイキャッチというのはファーストビューでほとんどの人が目にするものなので見栄えは大事ですね⸝⸝- ̫ -⸝⸝

アイキャッチ画像が見切れてしまう場合の解決法

「アイキャッチ画像のサイズを1200×630にしたらなんか見切れるようになっちゃった…」という方は以下の方法を試してみてください。

インデックスのアイキャッチの場合

Cocoon設定から「Retinaディスプレイ」の設定を変える

「Cocoon設定」→「全体画像設定」にいき、「Retinaディスプレイ」のON・OFFをいじってあげてください。

具体的には「ONにしてアイキャッチ画像を設定(アップロード)してOFFにする」、これで解決しない場合はその逆「OFFにして…」を試してみてください。

その他の箇所のアイキャッチの場合

add_image_size('w120_thumb', 140, 73, true);
add_filter('get_post_navi_thumbnail_size', 'w120_thumb_set');//前後の記事
add_filter('get_new_entries_thumbnail_size', 'w120_thumb_set');//新着記事
add_filter('get_popular_entries_thumbnail_size', 'w120_thumb_set');//人気記事
add_filter('get_related_entries_thumbnail_size', 'w120_thumb_set');//関連記事
add_filter('get_carousel_entry_card_thumbnail_size', 'w120_thumb_set');//カルーセル
function w120_thumb_set(){
  return 'w120_thumb';
}

カルーセルや新着記事といった、ヴィジェットで配置した箇所などのアイキャッチが見切れた場合は、上のコードをfunction.phpに記述することで解消されます。

あ、ファイルをいじる場合はバックアップしておくことをオススメします。

参考 Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集Cocoon

結論:サイズは1200×630にしておこう

以上、Cocoonにおけるアイキャッチ画像(サムネイル)の最適なサイズについてでした。

サイトの第一印象…とまではいきませんがアイキャッチ画像はほとんどの訪問者が目にするものなので気を配っておきたいですね。

ウチのサイトで行った、いい感じのCocoonカスタマイズもまとめているのでそちらも是非。
Cocoonカスタマイズ総まとめ【初心者でも簡単】Cocoonのおしゃれなカスタマイズ総まとめ

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

CAPTCHA