Twitterヘッダー画像サイズ｜最適な画像サイズと検証

Twitterのヘッダー画像がいい感じに決まらないと困っている方は多いのではないでしょうか？

画像のサイズによって部分的にトリミングされてしまうため、事前に最適なサイズを把握した上で画像を用意することが大切です。

ここでは、Twitterの最適なヘッダー画像サイズと検証結果についてご紹介します。

1.ヘッダーの最適なサイズ

ヘッダー画像は利用するTwitterや端末によって表示サイズが異なるため、すべてのTwitter・端末から完璧に見えるサイズはなく、最適な妥協点を探す必要があります。

検証の結果、ヘッダー画像として用意すべき最適なサイズ及び留意すべき点は次のとおりです。

比率	横:縦=3:1
サイズ	横:1,500px　縦:500px
余白	上下50px（合計100px）程度
容量	10MBまで

なお、各々のスマホやPCの画面サイズの影響を受けるので絶対的な数値ではなく、あくまでも目安としてご参考にしてみてください。

上記の画像サイズが最適だと考える理由は次のとおりです。

1）表示サイズの影響

前述したとおり、Twitterのヘッダー画像と言っても各Twitterや利用者の端末によって表示サイズが異なります。そこで、次の点からスマホから見たヘッダー画像表示を優先した横:1500px 縦:500px（比率3：1）の画像の使用をおすすめします。

現状、スマホからの利用者が圧倒的に多いという点を考えると、PC表示を優先するメリットはあまりありません。また、後述の検証結果もご確認ください。

なお、スマホ表示を優先した場合、PCから見たときのヘッダー画像は元画像の上下それぞれ約50px（合計100px）がカットされてしまいますので、事前に余白を用意しておくといいでしょう。

2）画質の影響

ヘッダー画像は、設定する元画像のサイズが小さい場合、引き伸ばして画面いっぱいに表示されます。その結果、引き伸ばしている分だけ画質が悪化します。

したがって、はじめからサイズの大きい画像を用意しておくことで引き伸ばしによる画質の悪化を防止することができます。

PC版Twitterから見た場合、設定した元画像の大きさによる画質の劣化例は次のとおりです。

（左：1,500px × 500pxの画像　右：300px × 100pxの画像）

3）容量の影響

引き伸ばしによる画質の低下を避けるため、設定する元画像サイズを大きくしたいところですが、10MBまでの画像しか受け入れられず、10MB超の画像はヘッダー画像に設定することができません。

10MB超の画像を設定しようとすると次のようにエラー表示が出現します。

2.ヘッダーのサイズ検証

ヘッダー画像に設定する元画像のサイズを次のように変えて、各Twitterからどのように見えるか検証してみました。

なお、私が使用しているスマホ及びPCでの結果であるという点、ご理解の上参考にして頂けたらと思います。

1）横:1500px 縦:500px（比率3：1）

ここでは次の画像を各Twitterに設定してみました。

赤枠:1500×500、緑枠:1450×450、青枠:1400×400、黄枠:1350×350

a）スマホから見たヘッダー画像の様子

スマホの場合、上下左右ともに赤枠までしっかり綺麗に表示されていることが確認できます。

よって、スマホから見た場合の最適な画像サイズは「1500×500（比率3:1）」となります。

b）PCから見たヘッダー画像の様子

PCの場合、左右は赤枠まで表示されていますが、上下は青枠までしか表示されていません。

よって、PCから見た場合の最適な画像サイズは「1500×400（比率3.75:1）」となります。

2）横:1500px 縦:400px（比率3.75：1）

ここでは次の画像を各Twitterに設定してみました。

赤枠:1500×400、緑枠:1450×387、青枠:1400×374、黄枠:1300×347、黄緑枠:1200×320、水色枠:1100×293

a）スマホから見たヘッダー画像の様子

スマホの場合、上下は良さそうですが、左右は黄緑枠までしか表示されていません。

よって、スマホから見た場合の最適な画像サイズは「1200×400（比率3:1）」となります。

b）PCから見たヘッダー画像の様子

PCの場合、上下左右ともに黄緑枠までしか表示されていません。

よって、PCから見た場合の最適な画像サイズは「1200×320（比率3.75:1）」となります。

3）結論

上記の検証から次のような結果が得られました。

比率をPC優先にした場合、表示されるサイズが小さくなる上、スマホから見ても画像全体が表示されないようです。
したがって、PC優先にした画像を用意するメリットはあまりなさそうです。

3.まとめ

以上、Twitterヘッダー画像サイズ｜最適な画像サイズと検証についてでした。

アイコンだけでなく、ヘッダー画像も目につきやすいポイントですよね！
個性的な画像を設定しておくことで相手に与える印象もきっと違うはずです。

ぜひおもしろい個性あふれた画像を設定して楽しんでみてください！