Twitterヘッダー画像のテンプレートを配布します

※2024年10月8日更新
こんにちは。ぴっぴです！@pippi-labo

Twitterのヘッダー画像用のテンプレを作りましたのでシェアします！

■最初に（このnoteはこんな人にオススメ）

・Twitterを伸ばしたい人
・自分でTwitterヘッダーを作りたい人
・Twitterヘッダーを制作販売してる人

知ってました？
Twitterのヘッダーって

PCと、
iPhoneと、
androidと、
タブレットで

表示される範囲が違うんです！

これを知らずに作って、大事なキャッチコピーやイラストの顔が隠れている人の多いこと。
どれだけかっこいいデザインを作っても、見えずに伝わらなければフォロワーさんを取りこぼしてしまうかも。

Twitterのヘッダー画像を作成する際の注意！

iPhoneのノッチとか閲覧環境によって文字やイラストが思いっきり隠れちゃうんで配置に気をつけてー

どこが隠れちゃうかは @pippi_labo さんのテンプレ当てはめて確認すればOK😉 pic.twitter.com/C7ew2yBUkz

— 321 (@321weblog) July 1, 2020

下の画像に、実際端末で見たときに画像を隠してしまうボタンやアイコンの枠を置いてみます。

▼元画像

▼ PCブラウザでの表示

▼ iPhone10、11アプリでの表示

▼ android ( Google Pixel 3XL )アプリでの表示

▼ iPadアプリでの表示

アイコンの位置や大きさ、ボタンのあるなし、端末自体の形でこんなにも違って見えるんです。

特にiPhoneのインカメラがある中央のベゼルは厄介！
ですがスマートフォンのうち、iPhoneのシェアは約57％もあるんです。

Twitterヘッダーのテンプレートは「Photoshop用」と、隠れる場所を合成した「PNG画像」を用意しました。
公式の推奨サイズ1500×500pxで保存してあります。

PNG画像 → PNGをダウンロード
PSDデータ → PSDをダウンロード

※このテンプレートはiPhone 15、16pro、16ProMax、11、iPad をもとに制作しています。
※テンプレートデータは個人・商用とも自由にご使用いただいて構いませんが、テンプレートデータ自体の販売や再配布は禁止です。

自分の持っている端末だけでの確認は難しいので、是非テンプレートをご活用ください。

気に入ったらスキ♡やTwitterでシェアをしていただけると嬉しいです！

ぴっぴ（Twitter：@pippi-labo）