ツイッターアカウントを新設したので、ツイッターのカバーサイズを確認したところ2015年版ツイッターカバーサイズと大きな変更がありましたので、このエントリーでまとめておきたいと思います。
Twitterカバー画像 サイズと仕様の概要
Twitterのカバー画像仕様が変更になって久しいですが、なかなかカバー画像を変更することもなく、実際に私のツイッターアカウントのカバー画像はシンプルなものにしているので、デザイン用PSDファイルが古いままだったことをお詫びします。
そこで、今回のTwitterカバー画像サイズと作成用の新しいPSDファイルを作成しましたので、エントリー下部よりダウンロードください。
Twitterカバー画像 サイズと仕様の概要
今回作成したTwitter画像テンプレートは、PC版、iPhoneアプリ版、iPadアプリ版（iPad miniを横向きで使用）の３仕様でスクリーンショットを撮り、写真の位置関係などを合わせながら作成しました。
Twitterカバー画像可視エリア
【パソコン版Twitterカバー画像サイズ】
- パソコン版Twitterカバー画像サイズ：幅1920px、高さ500px
- アイコンが重なるエリア：左から375pxから210pxの範囲で、下から123px
【iPad mini app版Twitterカバー画像サイズ】
- iPad miniアプリのTwitterカバー画像サイズ：幅1920px、高さ640px
- アイコンが重なるエリア：左から267pxから454pxの範囲で、下から75px
【iPhone app版Twitterカバー画像サイズ】
- iPhone版Twitterカバー画像サイズ：幅1920px、高さ640px
- アイコンが重なるエリア：左から38pxのスペースがあり、そこから391pxの範囲で、下から217px
【iPad app版Twitterカバー画像サイズ】
iPad版アプリは、実機がないので、iPad miniを横に向けキャプチャを撮り実測しました。
- メイン画像のサイズ：幅1920px、高さ480px
- アイコンが画像と重なる領域：左から438pxの可視領域があり、そこから578px（140px）の範囲で、下から56px
2017年版、Twitterカバー画像サイズの変更点
最新版のTwitterカバー画像サイズになって久しいですが、今回の仕様変更によって前回問題となっていた、両端の切れなどがなくなりました。
これによって、パソコン版Twitterとモバイルアプリ版Twitterカバー画像での可視領域の違いもほとんどなくなりました。
プロフィールアイコンが中央に配置されていた以前の仕様では、それに合わせデザイナーさんがこまめな調整を行うなど凝った仕様のカバー画像を作成することができましたが、現在のアプリでは、そのような仕様になっていないため、苦労することなくTwitterカバー画像のデザインを行うことができます。
デザイナーさんにとっては、ちょっと物足りないかもです。
最新版のカバー画像とプロフィールアイコンの関係は、左側の余白やカバー画像と重なる高さなども異なりますので、プロフィールアイコンとコラボしたカバーデザインは難しそうです。
2017最新版Twitterカバー画像作成手順
画像からも見て分かる通り、各端末別のTwitterカバー画像の幅を1920pxに合わせて、重ねるとスマートフォンアプリ（iPhone仕様）でのカバー画像の可視領域が一番広いことになります。
Twitterカバー画像の作成手順を下記にまとめておきます。
- 幅1920px、高さ640pxのキャンパスを作成します。
- 幅1920xp、高さ480pxの絶対可視領域キャンパスを（１）の前面に作成しセンタリングします。
- 各端末のプロフィールアイコンによって、メイン画像を覆い隠す領域にあたる「幅588px、高さ195px」の目隠しを最前面に作成します。
- （３）の「目隠し」を左下寄せで配置します。
- （２）の領域の中で（４）に重ならないスペースに文字などを配置し完成です。
- （４）の「幅588px、高さ195px」は「幅600px、高さ200px」で作成しても構いません。
- iPhoneアプリのプロフィール画面上だけで、表示される箇所にデザインを施す際は、「上端80px、下端80px」の範囲内でデザイン可能です。
ads by Google
