かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

twitterヘッダー画像の制作のコツ


2015年5月におくればせながら「twitterのヘッダー画像の設定をしよう」を書いたところ、Hotentryに次ぐアクセス数があります。そういえば、ヘッダー画像の作成サイズを書いたブログ記事は多くあれど、作成のコツを書いている記事はあまりありませんね。わたしも手作業で、確認をしていったものです。ぜひ素敵なヘッダー画像を作っていただきたく、第二弾として今回のエントリーです。


今回は具体的に隠れないようにするポイントを掘り下げる続編のようなものなので、ぜひ冒頭で紹介したエントリーから見ていただきたいと思います。前回書いた通り、このような安全マージンを設けるとよろしいかと思います。


例えば、クサガメと公園にお散歩に行って、イガ栗に突進する姿が可愛かったので(読み飛ばしてください笑)、これでヘッダー画像を作ろうと思いました。サイズは1500px*500pxで作ります。せっかく自作するなら文字も入れてみましょう!


赤い透過が1670px~、青い透過が1100px~のときに、ヘッダー画像を隠す要素です。前回のエントリーではなぜ隠れるのかというところで、twitterのz-indexになっているこちらの構造を取り上げました。

例で作った上の画像では、文字やクサガメの半分、イガ栗のほとんどが隠れてしまうわけです。残念ですね!


いいヘッダー画像を作るにはその要素を避ければいいのです。気をつけるのはレスポンシブなので7か所のブレイクポイントでプロフィール画像ががたがたと動くことです。そのまわりには隠れて欲しくない画像を置かないのが一番。ということで、もっとも安全に作った画像例がこちらです。重要な画像は右側2/3に集中させる。左側1/3の下半分はがたがた隠れるので、基本的には上に文字を置くのがスマート。


上記で使用した安全マージンを1670pxを赤で、1100pxを青で示した透過PNGはこちらからダウンロードしてください→twitterヘッダーテンプレート ※開くソフトによっては透過情報が破棄されます。

twitterヘッダー画像シミュレーターというものを作ってみました。次のUIに変わるまで公開しておきますので、ぜひご活用ください。実際にtwitterにアップロードする前に、各ブレイクポイントでの見映えを確認できたらいいなぁと思ったので作ってみましたが、シンプルに作ったのでIEだと2pxほどchromeに比べて再現に差が出るブレイクポイントがあります…IE(;´Д`)

1.作ったヘッダー画像を選択すると、表示されます。

2.レスポンシブのブレイクポイント7つのうち、家庭用で普及している6つのみですがクリックすると確認できます。

【追記】2017/02/01 スマートフォン(SP)の見栄えも確認できるようにしました。