Twitterヘッダーのサイズや画質について(サンプルあり)

Twitterヘッダーのサイズや画質について(サンプルあり)

先日、Twitterアイコンについての記事を書きましたが、今度はヘッダー画像について解説していきたいと思います。

自身のプロフィールに設定するヘッダー画像についても、Twitter社から「推奨サイズ」が提示されております。

そして、ヘッダーも推奨サイズに従って画像を設定すると、
画質劣化の少ない「高画質な画像」を設定する事ができますので見てきましょう。

分かること!
  • 「Twitterヘッダーのサイズや、ファイル形式について
  • 「超高画質なヘッダー画像の保存方法について
  • 「ヘッダー画像を設定する際の死角(隠れてしまう部分)について」
みづきちゃん

最近、デザインに目覚めてきたので是非参考にしたーい!

編集ちゃん

よくヘッダー作成企画をしている人でも、これから紹介するツイッターの仕様を理解せずに、UPしている人が殆どなので、この裏技を身に付けてライバルと差をつけちゃおう!

Twitterのヘッダー画像とは?

Twitterヘッダー画像について

アイコンとヘッダーの説明
<プロフィール画面での表示>

ヘッダー画像とは、Twitterプロフィール内の「背景のようなエリアの画像」で、こちらには、ご自信の好きな画像を設定することができます!

アイコンや名前、プロフィールでは表現しきれなかった事や、アピールしたい事など、視覚的に紹介するためのもので、 Twitter運用において重要なアイテムとなります。

Twitterヘッダーのサイズや画質について

Twitterヘッダーの推奨サイズについて

まずは、Twitter社が推奨している「ヘッダー画像」のサイズについて、ご紹介します。

  • 推奨サイズ:1500 × 500 ピクセル
  • ファイルサイズ:最大2MB
  • ファイル形式:JPEG、GIF、PNG(写真はJPEG、イラストはPNGがオススメ)

こちら「推奨サイズ」であって「必須サイズ」ではありません。
推奨サイズよりも大きい画像や、小さい画像であったとしても、設定時にTwitter側の機能で拡大縮小を行うことができます。

もちろんそれでも良いのですが、推奨サイズ以外でファイル設定をすると、画質の劣化が発生します…(めっちゃパン屋さん調べ)

私は、色々なタイプのヘッダー画像を作成し検証を行いました。その結果、下記の様に画像を設定すると画像の劣化が抑えられますので、ご自信の可能な範囲で実践してみましょう!

できるだけ画像劣化が少ない設定方法

大きすぎる写真や画像をUPすると、システム的に劣化されてしまったり、PNG形式でUPしたものが、JPGに変換されてしまう場合もあります。

JPGに変換されてしまうと画像によっては画質が劣化してしまうので、下記の点に注意してUPするようにしましょう!

PNG形式のままでUPする方法
  1. 推奨サイズであること(1500 × 500ピクセル)
  2. ファイルサイズが2MB以下であること
  3. 画像形式がPNG8であること(重要
  4. PNG8で無い場合、長辺が900px以下であること
  5. 長辺が900px以上の場合、JPG変換後サイズより小さいこと

上記、③が重要で「PNG8」形式でファイルを保存できるのであれば、④と⑤は不要になります。

Photoshopをお使いであれば、ファイルを保存する際「ファイル」▶「WEB用に保存」を行うと、「PNG8」or「PNG24」での保存を選択できるので、そのままPNG8で保存します。

ご自信の使われているエディターにPNG8の保存形式がない場合は、下記のWEBサービスを使って圧縮しましょう!

TinyPNG

こちらのサイトに、作成したヘッダーファイルをUPしてください。

こちらのサービスは、画像に保存されている不要な情報を全て削除し、もともとの画像の画質を落とさずに画像をイイ感じに圧縮してくれる有能サービスです。

ここでUPしたものをTwitterに設定する事でうまくいくでしょう!

ヘッダー画像を設定する際の死角(隠れてしまう部分)について

作ったヘッダー画像を設定し、実際に確認してみると、各媒体により、それぞれ異なる死角(ボタンやアイコン等で隠れてしまう部分)が発生してしまいます。

せっかくアピールしたい「言葉」や「イラスト」を設定したのにも関わらず、隠れてしまい見てもらえないのであれば、何の意味もありませんよね?

「その隠れてしまう部分はどこなのか?」
「何を注意してヘッダーを作れば良いのか?」

サンプルと一緒にご紹介します!

画像の死角を把握し効率のよいアピールをしよう!

パソコンで閲覧した時、Android端末で閲覧した時、iPhone端末で閲覧した時、それぞれ死角(隠れてしまう部分)は異なります。

今回、Twitterフォロワーさんにご協力いただきまして、ヘッダーが画像の死角について調査を行いました。

もちろん全ての端末に対応したわけではないので、完全ではないですが…
何度も繰り返し調整を行った結果、下記の画像が完成しました。

死角について、おおよその目安になりますので、ぜひとも参考画像としてお使いください!

<Twitterヘッダーの死角サンプル>
ヘッダー作成時の注意点
  • 左下の「アイコン部分」は大幅に隠れてしまう為、重要な要素をいれない事
  • iPhoneユーザーが多いため、上部のノッチエリアには、重要な要素をいれない事
  • 上下のグレー部分は横向き時に、表示されないだけなので、あまり気にしなくて良い
  • 黄「戻るボタン」や、緑「メニュー表示ボタン」の部分はあまり気にしなくて良い

これらを気にして作成した、めっちゃパン屋さんのヘッダー画像は下記のとおりです。
是非、参考にしてみてください。

<死角を意識して作成したヘッダー>
<死角画像を透過して正しく表示できるかチェック>

プレビュー

それでは実際にTwitterに設定してみましょう。

左下の部分が、ちょっとアイコンで文字が隠れてしまっていますが、パソコン閲覧者よりもiPhone閲覧者の方が多いと考え…(あえて損切りしました)グフッ…

でもまぁ、ちゃんとアピールもデキてるし、可愛くてイイ感じじゃないでしょうか?

<パソコンで閲覧した場合>
<iPhoneで閲覧した場合>
※ノッチ部分はスクショじゃ見えない…

ヘッダーも美しくいこう

いかがだったでしょうか?

アイコンも大切ですが、ヘッダー画像もTwitter運用ではかなり重要な画像だと思いますので、めっちゃ拘って作成してみてください!

もし、自分じゃ作れない!という方がいましたら、(お金くれたら)パン屋が作るよ(テヘペロ

みづきちゃん

私はいつでも無料でお作りしますよ!
ぜひツイッター内で連絡くださいね!

編集ちゃん

きゃー!さすが「めっちゃサロン1期生!

Twitterアイコンのサイズや画質について

Twitterアイコンのサイズや画質について(サンプルあり)