Twitterのヘッダーを制作した話。

Twitterヘッダーの制約

Twitterのヘッダーの横幅は1500pxが推奨されているのだけど縦幅に関しては1500*500と1500*421を勧めるものがそれぞれ存在していた。今回は検索した範囲で推奨している記事が多く見つかった1500*500で作成したものの、いざ始めてみて課題となるのはレスポンシブ表示により場合によって隠れる部分の多さである。

この画像のとおり、ヘッダーの周囲は隠れる可能性がある上にブラウザ幅の狭いPCでは左下のプロフィール画像が大幅にヘッダーに重なってしまうのだ。ブラウザ幅狭くして見ている人は無視して重なる部分にも画像を入れてよかったかなと今では思っているが、これに対応する場合、ヘッダーで必ず見せたい部分は上半分に寄せなければならないことになる。

それよりも問題なのは、今時のPCはディスプレイの横幅が1920pxあることもざらで、1500pxを超える横幅で見ることを考えるとどうやってもピクセル割れが発生することだ。昨今のPC、スマホの液晶高解像度化を考えるとこの点はなるべく早くアップデートして高解像度を踏まえた仕様にしてほしい。

ここまでTwitterの仕様に関して前置きが長くなった。何にせよ、今回の制作にあたってはこうしたヘッダーを作る際の制約があったため、何でもやりたい放題という状態でなかった点が初心者の私にはよかった。いきなりやりたい放題だと考えることが多すぎて難しい。

先方の意見を聞くことの大切さ

今回、相手があるものを作る上で大事なのは相手の方向性や考えをきちんと拾うことだと分かった。相手自身が言語化できていない点や考えていなかった点を救い上げるときになるべく多くのパターンを示して意見をもらうというのは効果があったと感じている。実際に話しながらやるのがベストだとは思うけど、先方がとても丁寧に意見を言ってくれたおかげでTwitterのDMベースでもなんとかなったのは非常に幸運であり感謝しかない。

その中で写真は切らずにそのまま入れたい、フォロワーを増やすために名前も覚えてもらいたいという希望があった。アスペクト比が3:2の写真を3:1のヘッダーにすべて収めることにした時点で、ヘッダーの半分をどうにかしなければならないので名前を入れるという条件があったのにも助かった。

さて、ここまでに相手から聞いた意見や考えを踏まえて既に提示したサンプルから考えていくと、配色の調整や細かいバランスなどの余地はあるが、方向性はほぼ決め打ちであることに気がつく。フォトグラファーの方の作品でもある写真は色味も含めて手を加えないつもりだったので、余計にやることがない。

意味を(いくらか)込める

とは言いつつも、名前を入れることが決定したのはいいが、いざ入れてみると文字だけだとシンプルすぎる嫌いがあった。何か入れるにしてもあくまでもメインは相手の写真なのでそれを邪魔しない、脇役でなければならないので少し案を練った。相手とのやり取りから相手が和装に思い入れがあることは分かっていたので、ここで着物の刺繍、家紋を入れることにした。

刺繍の画像を作成するにあたってはたまたま着物の写真の持ち合わせがあったので少し編集するだけでよかったのと、家紋についてはWikipediaにパブリックドメインのものがあったのは幸運だった。大幅に時間短縮となった上に楽ちんだった。ちなみに、Wikipediaの家紋の項目の中にはCC3.0継承なども混ざっているので使いたいと思っている人は要注意。

また刺繍、家紋についてはそれらが持つ意味についても考えて選定した。相手が言葉や意味合いを大切にする人だというのが伝わってきたのでデザインをするにしてもそうしたナラティブをきちんと考える必要があると思った次第である。これはこうしたデザインに限らず、他の仕事でも一番丁寧にやっていかなければならない点なんだろうなあと思っている。

実は自分自身が一番気に入ったデザインは採用されなかった。しかしながら相手が納得する形で納品することができたのでよかった。

学びのある制作であった

反省点は細かいものを挙げればキリがないのだけど、相手とのコミュニケーションで一点。

今回、実は最終提案時に採用されないだろうなと分かってて出したものもあった。今となっては相手の判断に時間をかけないためにも自分自身でボツにするべきだった。比較のために複数出すこともあり得るのだけど、今回はただ何となく出してしまったので反省している。

相手がある制作について、相手とのコミュニケーションを大事にすること、よほど無茶じゃない限り相手方の要望を第一に考えることが大切なんだと感じ、学んだ。今後に活かしていきたい所存である。

ということで、今回納品したTwitterヘッダーは以下のもの。

結城さんはTwitterで活動されているので、このヘッダーを見て気になった方は是非フォローを!@shihoyuki1012

私のTwitterはGIF画像上げてるだけなので物好きな人はどうぞ。@muga_over

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

24時間365日、皆様のサポートをお待ちしております。

Thank you as always!

MUGA

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。