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

こんにちは。ぴっぴです！@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

ちゃんとみんなぴっぴちゃん（@janjanstudy）のヘッダーテンプレ使ってユーザーを一人も取りこぼさないように努力しようねえ🤗🤗🤗
（なんで俺がUX向上に努めなきゃいけねんだよこの糞UIが！ｗｗｗ）

※「Canva記事まだぁ？」は受け付けておりません。 https://t.co/2WzKLcVyIq pic.twitter.com/0QYM62wf2T

— とろろ🐘フルリモートワーカー×ぱおん (@tororo2_0) May 19, 2020

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

▼元画像

▼ PCブラウザでの表示

▼ iPhone10、11アプリでの表示

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

▼ iPadアプリでの表示

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

特にiPhoneのインカメラがある中央の出っ張りは厄介！
ですがスマートフォンのうち、iPhoneのシェアは約57％もあるんです。
中央の出っ張りがあるのは10と11だけですが、無視できる割合ではなさそうですよね。

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

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

※androidは機種による差が大きく種類も多いため、全てを網羅できていないことをご了承ください。
※このテンプレートはiPhone7、11、SE2、Google Pixel 3XL、iPad をもとに制作しています。
※テンプレートデータは個人・商用とも自由にご使用いただいて構いませんが、テンプレートデータ自体の販売や再配布は禁止です。

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

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

ぴっぴ（Twitter：@pippi-labo）