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

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

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

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

@PC版とスマホ版で表示範囲が違う。

Aアイコンがヘッダー画像に被さって表示される。しかも、PC版とスマホ版でアイコン表示位置が違う。

B工夫をしないと画質が悪くなってしまう。

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

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


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


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

20180216-Twitter-Waku.png

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

20180216-Twitter-Waku.png

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

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

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


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

【PC版】

20180216-Twitter-PC.png


【スマホ版】

20180216-Twitter-S.png

【元画像】

20180216-Twitter-Original.png


PC版では上下73pxほどは表示されないため、そこには文字を入れないでおきます。
そうすると、上下がカットされないスマホ版の方は間延びしてしまう恐れがありますが、ある程度は仕方がないと思います^^;

左下にはアイコンが来るので空けておきましょう!


無劣化でアップするには「透過PNG(32bit)」形式!


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

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

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

※クリックで原寸大

20180216-Twitter-Hikaku.png


こちらのサイトを使うと、自動的に「画像の左上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でしか用意できませんでした。

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

※クリックで原寸大

20180216-Twitter-Icon.png

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

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

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

※クリックで原寸大

20180216-Twitter-Icon2.png

透過PNG化処理も自動でやってくれて楽なので、皆様も今お使いのアイコンをササっと差し替えてみてはいかがでしょうか!
スポンサーリンク
【配布あり】Twitterのヘッダーの「切れる部分」「アイコンで隠れる部分」が一目で分かる枠を作りました! ヘッダーとアイコンを無劣化でUPする方法もご紹介!
先月の人気記事 TOP5