【配布あり】Twitterのヘッダーの「切れる部分」「アイコンで隠れる部分」が一目で分かる枠を作りました！　ヘッダーとアイコンを無劣化でUPする方法もご紹介！

最終更新：2019年1月15日

関連記事：【ヘッダー画像メイキング】画像素材を加工して、いい感じのヘッダーを作ろう！（Twitter、YouTube、HP等）


Twitterのヘッダーを作ろうとすると、少し厄介な問題があります。


でも、この記事を読んでいただければすべて解決しますので、Twitterのヘッダーを作られている方は是非このまま下にスクロールしてください！
アイコンについても言及しています！

※情報は2018年2月16日現在のものです。今後仕様変更があっても、記事の更新を行う保証はございませんので、あらかじめご了承ください。

※と言いつつ、2019年1月15日に記事を更新しました。今後も更新を行うという保証はございませんが、少なくとも現時点では最新の仕様に合わせています。

�@と�Aの対策として、非表示部分が一目で分かる枠を作りました！

以前配布したこの切り抜き枠（1500×500のTwitter推奨サイズ）に……


今回作ったこの枠を重ねれば……


PC版でもスマホ版でも確実に表示される部分が浮き彫りになるという寸法です！

（※追記：上記の枠は2019年1月15日に新バージョンに差し替えました。2018年2月16日時点の旧バージョンも、念のためこちらに残しています）


タイトル文字やロゴ、その他見せたい部分は、この枠の中に収まるようにデザインしましょう！
編集が完了したら２枚目の枠を外し、１枚目の枠の範囲で切り抜けばOKです！
（切り抜き方法はソフトによって違うので、お手数ですが各自でお調べください）

モニターによって色が違って見えることがあるので、出来れば複数のモニターで色合いを確認することをおすすめします。
→パソコンでは灰色、スマホでは黄色に見える！？　モニターごとに発色が違う問題


そうして実際に作ったヘッダーがこちらです！（クリックで原寸大）



PC版では上下73pxほどは表示されない（※2019.01.15追記：現在は上下43pxほどになっています）ため、そこには文字を入れないでおきます。

左下にはアイコンが来るので空けておきましょう！
可能であれば、スマホ版のみに表示される「戻るアイコン（矢印）」や「メニューアイコン（三点マーク）」の部分も空けておけると良いですね！

無劣化でアップするには「透過PNG（32bit）」形式！

これは有名だと思いますが、ヘッダーと、ツイートにつける画像については、透過PNG（32bit）の形式にすればTwitter側で再変換されないので、劣化せずに済むのです。

参考ページ：2016年版　Twitterに高画質な画像をアップする方法【透過PNG】

Twitter側で再変換されてしまうと、画像によっては大分劣化してしまいます。
下の画像を見ていただくと、赤系統の色がくすみ、文字の白縁部分が明らかに汚くなっていることが分かるかと思います。



こちらのサイトを使うと、自動的に「画像の左上1pxを不透明度99%にしてPNG32(透過あり)の状態にする」という処理をしてくれます。詳しくはサイトの説明をご覧ください。

→TwI PNG Twitter用PNG変換ツール(ver.1.4.1)

もちろんご自分の画像編集ソフトでやっても構いません。
左上が重要なデザインだったら、他のところを手動で透過PNGにした方が気分がいいですものね。例え不透明度99%で、ほぼ見た目に違いはないとは言っても、気分的な問題で。
（左上はPC版では切れてしまうので、そもそもそんなデザインはやめた方がいいとも考えられますが）

しかし、アイコンについては、それだけじゃ駄目なのです……。

アイコンを無劣化でUPしたければ、このサイトを経由してUPしよう！

何故か、アイコンについては透過PNGでも容赦なく再変換され、汚いJPEGにされてしまいます。
それを回避するには、こちらのサイトを使いましょう！

→TwitterのアイコンをAPI経由でアップロードするツール

オプションで「強制的にPNGでアップロードする」にチェックを入れておけば、同時に透過PNG化もやってくれます。ありがたいですね！
詳しくはサイトの説明をご覧ください。

※このツールでは、ヘッダーは投稿できません。


Twitterアイコンの推奨サイズは400×400ですが、今回用意したつくよみちゃんの絵は小さすぎて、200×200でしか用意できませんでした。

ですので、ぼやけるのも仕方がないと諦めていたのですが、このツールを使ったらこんなに綺麗になりました！（タイムラインではなく、プロフィール画面左上の大アイコンで比較）


PC版アイコンがやたらはっきりしているのは、PC版のプロフィール画面左上のアイコン枠が、ちょうど200×200、つまり用意した画像と等倍だからだと思われます。ヘッダーの方は少し縮小表示されるので、こんなにぱりっとはしません。

ちなみに、PC版のタイムライン上では48×48の正方形に縮小され、且つ円形にくり抜かれます。
アイコン画像は、そんな風に小さくなっても大丈夫なデザインにしたいですね！

夢前黎の本アカウントのアイコンも、ツールを使って差し替えてみました。
タイムライン上の画像の方も、モアレが減って、左上のRe:Iという文字が鮮やかになりました！（画面の角度や明るさによっては分かりにくいかも知れませんが、目を近づけて下の方から見ると分かりやすいです）


透過PNG化処理も自動でやってくれて楽なので、皆様も今お使いのアイコンをササっと差し替えてみてはいかがでしょうか！