\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

はてなブログからTwitterシェアしても見切れないアイキャッチ画像サイズはこれだ!

はてなブログ見切れないアイキャッチ画像サイズ 画像の作り方
はてなブログ見切れないアイキャッチ画像サイズ
この記事は約6分で読めます。

この記事では、Twitterシェアしても見切れない、はてなブログのアイキャッチ画像サイズについてご紹介いたします。

はてなブログユーザさんなら一度は経験したことがあるであろう、アイキャッチ画像の真ん中がドーン!と映ってしまうアレ。

私はあの現象に終止符を打つため、最適なアイキャッチ画像サイズを検証した結果、驚愕の事実が発覚しました。

その驚愕の事実とともに、最適な画像サイズを場合分けして、みなさんにお話しします。

スポンサーリンク

はてなブログからTwitterシェアするときのアイキャッチ画像サイズ

今回幾度もの検証を重ねた結果、はてなブログのアイキャッチ画像サイズには最適なサイズが無いという事実が発覚!というのも、はてなブログは、

  • PCから見た時、スマホから見た時のサイズが異なる
  • TwitterカードのサイズとPC、スマホのサイズも異なる

といった風に、上記3つが固有のサイズを持っているので、すべてを両立させれるようなサイズは無いのです。

じゃあ!100点じゃなくて良いので大体うまくいくやつを教えてよ!


スマホ、PC、Twitterシェアのすべてが80点くらいのサイズなら見つけたよ!


はてなブログでスマホ、PC、Twitterシェアしても最適なサイズはこれ!

はてなブログアイキャッチ画像サイズ300×300
はてなブログアイキャッチ画像サイズ300×300
はてなブログアイキャッチ画像サイズ350×350
はてなブログアイキャッチ画像サイズ350×350
はてなブログアイキャッチ画像サイズ400×400
はてなブログアイキャッチ画像サイズ400×400

300×300 px ~ 400×400 px くらいまでがオススメです。

というのも、はてなブログってアイキャッチ画像を入れるとき、一旦記事内に挿入しませんか?さらに、記事の中でその画像を使いまわしたりしますよね?

  • 記事内で使いまわして広告と見比べても違和感ないサイズ
  • PCから見ても少々見切れるがある程度見えるサイズ
  • Twitterシェアしてもある程度見えるサイズ
  • スマホから見ても見えるサイズ

上記をすべて考慮すると 300×300 px ~ 400×400 px がおすすめ、という結果になりました。私のはてなブログにデモを置いているので試しに見ていただくとわかりやすいと思います。

はてなブログのスマホ表示、PC表示、Twitterカードの正式なアイキャッチ画像サイズは?

300×300 px ~ 400×400px とはいっても、運営しているブログの方向性によって画像サイズを選んだ方が良いと思います。

たとえば、PCユーザが多いブログだとPCから見て適したサイズにした方が良いし、スマホユーザが多いブログならスマホから見やすいことや、広告サイズとの兼ね合いを考慮して画像サイズを検討したいなどあると思います。そこで以下に、

  • スマホ表示に最適な画像サイズ
  • PC表示に最適な画像サイズ
  • Twitterカードの正式なサイズ

を載せておきます。

はてなブログ:スマホ表示に最適なアイキャッチ画像サイズ

はてなブログでは、スマホから見た時のアイキャッチ画像サイズは1:1であればどんなサイズでもOKです。記事内に画像を挿入して使いまわすことを考慮して、350×350 px 以下 をおすすめします。

私のはてなブログを見ていただければわかる通り、スマホから見ると1000×1000 px ~ 350×350 pxまでは縮小されて同じサイズとして表示されます。

広告サイズ( 300×250 px )とほぼ同じにしたいのであれば300×300 px をおすすめします。

はてなブログ:PC表示に最適なアイキャッチ画像サイズ

PCから見た時に最適なアイキャッチ画像サイズは16:9の画像の中に1050×700の画像を入れて下さい。

はてなブログアイキャッチ画像サイズPCに最適
はてなブログアイキャッチ画像サイズPCに最適

どういうことかといいますと、↑の画像のように1920×1080 px ( 16:9 )の画像を用意して、その中に1050×700 px の枠を作ってください。この枠の中に画像を入れて、アイキャッチ画像にすればぴったりはまる最適なアイキャッチ画像が出来上がります。

試しに画像を作ってみましょう。まずは16:9の19020×1080 pxの画像を用意します↓

はてなブログアイキャッチ画像サイズPC最適化前
はてなブログアイキャッチ画像サイズPC最適化前

この画像はいま、1920×1080 pxに合っているので、ここに1050×700 pxの枠を作って、それぞれのパーツを縮小します。(ちなみに↑の記事はこちら

はてなブログアイキャッチ画像サイズPC最適化
はてなブログアイキャッチ画像サイズPC最適化


1920×1080 pxの中に1050×700 pxの画像を作るとは↑こういうことです。あとは枠を外して、はてなブログのアイキャッチ画像に設定していただければOKです。

はてなブログアイキャッチ画像サイズPC最適後
はてなブログアイキャッチ画像サイズPC最適後


出来上がった画像をアイキャッチ画像に設定すると…

はてなブログアイキャッチ画像サイズPC最適化例
はてなブログアイキャッチ画像サイズPC最適化例


↑のようなな感じになるので、アイキャッチ画像としては最適になりましたね!

記事内では元の 1920×1080 px の画像を使って、アイキャッチ画像と使い分けることと、Twitterでシェアする際は大きなサマリーカード(次の項で述べます)で表示する方が良いと思います。

Twitterカードの正式な画像サイズ

Twitterカードには大きく分けて2種類あります。

  • サマリーカード(1:1)
  • 大きな画像付きのサマリーカード(1.91:1)

なので、スマホ向けの記事を書くはてなブログユーザだと、サマリーカードの方を使う方が確実にきれいに見えます。(サマリーカードは144×144 pxがミニマムサイズです。)

また大きなサマリーカードは16:9の画像サイズがきれいに見えるので、PCユーザ向けにブログを書いている方にはおすすめです。

Twitterカードの詳しい情報に関してはサルワカさんが紹介されています。

【2019年版】Twitterカードとは?使い方と設定方法まとめ
「Twitterカードとは何か」から「メリット」「使い方」「表示されない時の対処法」まで徹底解説します。設置方法はブログサービス別にまとめました。


まとめ:はてなブログのスマホ、PC、Twitterシェアに最適なアイキャッチ画像サイズ

最後に、オールマイティな画像サイズ、スマホ向け画像サイズ、PC向け画像サイズをまとめておきます。

オールマイティな画像サイズ

PC、スマホ、Twitterすべてでだいたいイケる、記事内に使用しても問題ない画像サイズ。

  • 300×300 px ~ 400×400 px
  • Twitterカードは大きなサマリーカードを使うと見切れる


スマホに最適な画像サイズ

スマホユーザが大半なブログ向け

  • 350×350 px 以下
  • 広告を意識するなら300×300 px
  • Twitterにシェアする際はサマリーカード(小さいほう)にすると良い


PCに最適な画像サイズ

PCユーザが大半なブログ向け

  • 1920×1080 px の中に1050×700 px の画像を作る
  • アイキャッチ画像と記事内画像は使い分ける
  • Twitterカードは大きなサマリーカードを使うと良い
タイトルとURLをコピーしました