Twitterカバー画像サイズ

364
Twitterプロフィール カバー画像サイズ
Twitterプロフィール カバー画像サイズ

Twitterのカバー画像サイズ、検索すると「1500 x 500px」という記事を目にするのですが、どうしても見切れてしまうという方は、きっと私だけじゃなかったと思います。

Twitterのプロフィール画面に表示されるカバー画像は「デスクトップタイプ」「iPhone・iPad系」「Galaxy系」の3タイプに分かれているようです。(後の調査で「PC」「スマホブラウザ」「アプリ」の3系統のようです。画像と無料ダウンロード可能なPSDファイルには「iPad系」「Galaxy系」と書かれていますが、それぞれ、アプリとブラウザと解釈頂いて差し支えないようです。バージョン等によるの誤差はご了承ください。

デスクトップブラウザの「開発環境」でチェックする場合と実機でチェックする場合に違いが出る場合がありますが、iPhoneは「5、5s、6plus」iPadminiにて実機テストを行ない、Galaxy系に関しては開発環境にてチェックを行ないました。

【最新版のTwitterカバー画像を作成しました】

  最新版Twitterカバー画像サイズ(テンプレートPSDファイルも無料ダウンロードできます)





Twitterカバー画像サイズのキャンバスは幅1500pxだが

土台となるTwitterカバー画像のキャンバスサイズは幅1500pxになります。

しかし、プロフィールページに表示される場合、上下54pxずつが、見切れてしまいますので注意が必要です。

また、iPhoneやiPad、GalaxyやNexus系などのスマートフォンでは、両端235pxが見切れます。(アプリ、ブラウザ共通事項)

PCブラウザの開発環境でチェックした場合は、GalaxyやNexus系などスマートフォン・ブラウザで表示されるカバー画像の下辺110px〜72pxが見切れる場合があるようですので、ちょっと面倒なようです。

アプリで確認する限りでは、iPad miniでの下辺の見切れはなく、左右のみが見切れます。iPhoneでは、デスクトップ版のタイムラインに表示される画像が、そのままプロフィールページのカバー画像として表示されます。

Twitterタイムラインプロフィール画像
Twitterタイムラインプロフィール画像

この画面は、通常「自分のみ」閲覧可能なレイアウトになりますね。

下記のキャプチャは、PC版のプロフィール画面です。

Twitter プロフィール カバー画像 PC
Twitter プロフィール カバー画像 PC
Twitterプロフィールカバー画像(iPadmini・アプリ)
(iPadmini・アプリ)
Twitterプロフィールカバー画像(iPhone5・アプリ)
(iPhone5・アプリ)

上記2つは、実機にてアプリで開いた場合ですが、スマホブラウザで開くと前述の通り、スマホの大きさによって下辺が110px〜72pxの範囲で見切れてしまいます。

今回調査したTwitterプロフィールカバー画像、端末ごとの可視領域は以下の通りです。

Twitter プロフィールカバー画像サイズ
クリックで拡大。右クリックで画像を保存

私の作成したTwitterカバー画像はこちら

ツイッター カバー画像

プロフィールの詳細文章は記号や句読点、アルファベットの使用などで改行位置が変わる場合もありますが、私の場合は110文字で3行。中央寄せで表示されますが、ほぼほぼ収まりよく表示されました。

今回の作成に辺り、PSD(フォトショップ・ファイル)を作成しておりますので、下記のボタンからご自由にダウンロードください。(無料で上記JPG画像とともにご利用頂いて構いませんが、著作権は放棄致しておりません。再配布等の二次利用は法に触れる場合がありますので、ご注意ください。あなたがカバー画像を作成するためにご利用頂く限りでは問題はございません。




最新版はこちら

Twitterプロフィールカバー画像サイズ【まとめ】

Twitterカバー画像の作成手順としては、まずは、1500 x 500pxのキャンパスを準備します。

次に上下54pxずつを差し引いたPC用プロフィール画面で表示されるカバー画像の可視領域を意識した1500 x 392pxのメイン領域を設定して、中央寄せを行ないます。

更にスマホアプリ用の不可視領域にあたる左右両端253pxを覆い隠します。

スマホブラウザでのツイッタ利用者まで意識をするのなら、上端54px、下端110pxを隠し、残った領域に好きなデザインが表示されるように設定します。

PCと最新のios版アプリ(のみ実機確認済み)のみ表示される左右両端253px内に、それぞれデザインを施せば、端末によって表示されるデザインの違うカバー画像を楽しめるかと思います。

まぁ、そこまでやるのは、私のような物好きだけかもしれませんが(汗)

それでは、ステキなTwitterカバー画像を作成してみてください。

下記の私のアカウントに色んな端末でアクセスして、その違いを楽しんでみてください。アカウントをフォロー頂けると嬉しいです。

@MS_Takumi