chouchou

未経験からWEBデザイナーを目指すfuyu_naのブログ

【Twitter】ヘッダー画像の推奨サイズと切れる範囲についてまとめてみた。

f:id:ne-ochi:20181117181355p:plain

今朝からもくもくと自分のTwitter用ヘッダー画像を作ってました。
今回制作したヘッダーが以下の画像です。(結果的にはボツデザインでした)
それにしてもアイキャッチとヘッダーのコントラストがすごい…!
 

完全に自分の好みでやりたいことを詰め込んだだけの画像で、実際に使用することにはなりませんでしたが、制作過程で学べることがたくさんあって勉強になりました。
以下、Twitter画像を制作するときのコツをまとめてみました。
 

ポイント

  • Twitterのヘッダー推奨サイズはW1500×H500px
  • 上下の空間とアイコン部分は見えなくなるので要注意
 ここを押さえておけば「え?顔が切れてる!」なんてことにならないので便利です。

Twitterヘッダーの推奨サイズ

Twitterのヘッダー画像の推奨サイズは、W1500×H500px です。
サンプル画像も同じサイズで作ってます。一応ブラウザ上でも調節できますが、制作する際にはこのサイズが目安です。
 

上下の空間とアイコンの部分は見えなくなるので要注意

推奨サイズはW1500×H500pxですが、実際に設定してみると最大で以下のように画像が切れてしまいます。PCとスマホでは切れる部分が異なり、レスポンシブ対応しているのでアイコンで隠れる部分は変動します。このぐらい予定しておかないと「大事な文字が切れてしまった」ということになりかねないので要注意です!
 

 なかなか広い範囲が切れてしまうので、大事な要素は348px以内に納めるのが良さそう。文字を配置する場合はレイアウトをしっかり考えないといけませんね。
 

最後に

今回はTwitterのヘッダー画像のサイズについてまとめました。
自分用のヘッダーを作ったものの、結果的にボツになってしまいましたがとてもいい勉強になりました。特に「画像の切れる部分」をテンプレート化することで次回からの作業効率が向上しそうなので、ご依頼があればどんどん制作していきたいと思います。
 
ちなみに、現在のヘッダーはモネの「ジヴェルニーの庭」を連想するお花の画像を発見したので、モネ好きとしてそちらを使用することにしました!