見出し画像

Twitter「ヘッダー画像添削企画」で見えてきた5つのNGポイント

かどま@「伝わる」をデザインする人

※ この noteは有料記事となっていますが、ご購入いただかなくてもノウハウ部分は全て無料で読むことができます。

複業デザイナーのかどまです。

まず、このnoteは次のような方に向けて書いています。

・Twitterをビジネスに活用したい
・Twitterでセルフブランディングしたい
・たくさんの人にフォローしてもらいたい
・今のヘッダー画像のままでいいのか不安だ

アカウントが与える印象を大きく左右するTwitterのヘッダー画像ですが、あなたはちゃんと意識できていますか？

あなたがTwitterでセルフブランディングするための武器は ツイート、名前 / 肩書き、プロフィール文、アイコン画像、そしてヘッダー画像です。

そしてそれらがバラバラではなく、伝えたいメッセージに合わせて統一性を持たせることではじめて、あなたのブランディングの手助をしてくれます。

しかしツイート、名前 / 肩書き、プロフィール文 といった「文字」の部分はとても意識が高いのに、アイコン画像やヘッダー画像、いわゆる「ビジュアル」の部分が苦手な方が多いようです。

そこで先日、Twitterでフォロワー3,000名感謝企画として「ヘッダー画像添削企画」なるものをやらせていただきました。

短期の企画であったにも関わらず、ありがたいことに 22名の方に参加していただくことができました。

期限を区切りはしましたが、実は締め切り後もたくさんの添削希望DMをいただき、こっそりと添削を継続してたわけですが（※ 現在は丁重にお断りしています）アドバイスさせていただく内容はいくつかのパターンに分類されることがわかってきたので、今回この noteにまとめて公開することにいたしました。

まず先日の企画の参加者さんからいただいた感想の一部を紹介させていただきますね。

それでは今回添削してわかったことを、5つのパターンに分けてそれぞれ解説していきます。

1.プロフィール内容との統一感がない

断然多かったのがこのパターンです。

Twitterのアカウントを大きく育て、セルフブランディングしていくためには、あなたが何者でどんな情報を発信している人なのかを明確にしなければなりません。

そのためにはプロフィールの内容とヘッダー画像のイメージには統一感があることが必要です。

中でも多かったのが風景写真。

どんなに素敵な写真でもプロフィール内容や伝えたいメッセージと関係なければ、それは「いい写真」ではあっても「いいヘッダー画像」とは言えません。

たとえば同じ風景写真が、カメラマンさんにとってはいいヘッダー画像でも、webデザイナーさんにとってはよくわからないただの写真になってしまうということです。

2.表示領域を意識していない

現在の Twitterでは、ヘッダー画像にアイコンがかかってしまう仕様になっています。

具体的に言うと、ヘッダー画像の左下の一部分にアイコン画像がかかってしまい、表示されない領域があるということです。

しかも悩ましいことに、パソコンのブラウザで見るときと、スマホのアプリで見るときとでは、隠れてしまう領域の広さが違うんです。

アイコンが大きく表示されるパソコンのほうが、隠れる領域は広くなってしまいます。

ただしスマホアプリの表示では、アイコン以外にも最上部に電波のアイコン、時計表示、電池残量のアイコン、そして戻るボタンとメニューボタンがあるので、思った以上に表示領域の制約は大きいと言えます。

表示領域

※ 赤で囲ったところがスマホ表示で隠れてしまう部分、青で囲ったところがパソコン表示でかくれてしまう部分です。

スマホ表示、パソコン表示どちらのことも考えたデザインを心がけるようにしてください。

とくにヘッダー画像にのせる文字、メッセージは隠れてしまう部分に絶対かからないようにしましょう。

3.とにかく情報を詰め込みすぎ

ヘッダー画像のスペースには限りがあります。その上アイコンなどで隠れてしまう領域が思いのほか大きいので、有効に使える範囲はけっして広いとは言えません。

そこにたくさんの画像や文字を詰め込んでしまったら、ごちゃごちゃした印象になってしまうのは当然です。

特に文字。
たくさんのメッセージを伝えたいという気持ちはよくわかりますが、多くの文字を記載しようとすれば当然文字サイズは小さくなります。

小さくなれば当然読みにくくなる。
読まれないメッセージは存在していないのと同じことです。

一番伝えたいことがちゃんと伝わるように、画像や文字の量には注意しましょう。

4.文字をもっと大切に

デザイナーではない方にあまり多くのことを求めてしまうのも酷かもしれませんが、デザインでこだわってほしいのは実は画像よりも文字なんです。

「Webデザインの95%はタイポグラフィである」

つまり文字です。

まずは使うフォント。
フォントの種類って何種類くらいあるが知っていますか？

実は日本語のフォントだけでも数千種類もあるんです。
英文フォントも合わせたら・・・もう想像すらつきません。

ボクのパソコンの中にも日本語だけで200種類以上のフォントがインストールされています。

この中から最適なものを一つだけ選ぶなんてことは、とても容易なことではありません

細かく話し出すとこの noteが5倍くらいの量になってしまうので、まずは日本語フォントは大きく分けて以下の3種類だと思ってください。

・明朝体
・ゴシック体
・ポップ体

もちろんこれ意外にも毛筆体のような手書きフォントがあったり、ゴシック体の中に丸ゴシック体があったりしますが、今回はあくまでもざっくりと。

・見せる（魅せる）文字はゴシック体、読ませる文字は明朝体
・力強さならゴシック体、優しさなら明朝体

こんなふうにイメージすれば、上手に使い分けられると思います。

ここで悩ましいのがポップ体です。

ちょっと極端なアドバイスになりますが、明確な意図やポップ体でなければダメな理由がないのなら、ポップ体は使わないことをおすすめします。

とくに Windowsに標準装備されてる HG創英角ポップ体には注意です。

女の子の事務員さんが会社の掲示物を作っている場合、この HG創英角ポップ体が乱用されてるのを見かけることがありますが・・・

幼稚園のバザーのポスターか、スーパーの安売りのチラシにしか見えません。

フォント選びに次いで大事なのが、文字の色です。

「文字は黒いもの」というイメージが強いかもしれませんが、実際のWebデザインでは真っ黒(#000000)な文字が使われていることはまずありません。

特に真っ白な背景に真っ黒な文字では、コントラストが強すぎて目がチカチカするし、なにより素人っぽくなってしまうんです。

なので黒文字を使いたい場合は、真っ黒ではなく濃いグレーを使うようにしましょう。

ちなみにnoteの文字色にも濃いグレー(#222222)が使われています。

画像2

次に注意したいのが文字の装飾です。

メッセージを目立たせたいと思うあまり、文字に装飾をかけすぎてしまうことってありませんか？

これ、かなりの確率で素人っぽくなるし、すべてを目立たせようとして、結果的にどれも目立たないといった逆効果にもなりかねません。

文字にグラデーションをかけて、何重もの縁取りをし、おおげさなドロップシャドウをかける・・・

意外とやってしまいがちなミスなので注意してください。

装飾はできるだけ控えめに、グラデーションもドロップシャドウもかかってるかかかってないかわからないくらいがオシャレでカッコいいですよ。

5.素材のクオリティに気をつけて

一番気をつけてほしいのが写真の解像度です。

どんなに素敵な写真でも、解像度の低い（サイスが小さい）写真は使わないようにしましょう。

小さなサイズでヘッダー画像を作ると、Twitterでは引き伸ばされて表示されてしまいます。

当然画質は悪くなり、とても見栄えが悪いヘッダーになってしまいます。

Twitterのヘッダー画像の推奨サイズは横長で「1500（横）× 500（縦）px（ピクセル）」です。

また、たまに縦横比を無視して引き伸ばされた写真を見かけることがありますが、これは解像度が低い以上に見苦しいので絶対に避けてください。

次に写真の切り抜きのクオリティです。

オリジナリティを出すためにご自身の写真を切り抜いて、素材としてヘッダー画像に使うのはとても効果的だと思います。

ただし切り抜き、特に髪の毛の切り抜きが雑だと、たとえどんなにあなたが美人でも、作品としてのクオリティはかなり低くなってしまいます。

ちょっと前までは Photoshopなど専門のデザインソフトがなければできなかったような画像の切り抜き作業が、簡単にできるスマホアプリもたくさんあるようです。

ぜひご自分が使いやすいアプリを見つけて、写真の切り抜きにもチャレンジしてみてください。

かなり優秀なWebツールがあるのでここで紹介しておきます。

スクリーンショット 2020-05-09 6.27.22

この remove.bg は人間だけでなく、動物や植物や物体などの画像を背景を1クリックで切り抜くことができる神ツールなので、ぜひ一度お試しを。

まとめ

企画内で添削させていただいた方が22名、その中でボクのアドバイスを参考にすぐヘッダー画像の修正をしてくれた方がちょうど半分の11名！

有料の教材を買ったりコンサルを受けたりしても、実際には行動しない人が多い中、無料でしかもたった140文字の添削で実践率50%ってすごいことだと思うんです。

これってアドバイスが的確だったからということじゃなく、ボクのフォロワーさんたちの行動力が素晴らしいってこと。

みんな大好き(*´ω｀*)

冒頭にもお話しましたが、Twitterでセルフブランディングを行う上でヘッダー画像はとても重要な存在です。

ぜひこのnoteを参考にしていただき、今一度しっかりとあなたのヘッダー画像を見直してみてください。

きっとたくさんの修正すべき点が見つかると思いますよ。

noteの購入と、購入特典について

今回、ノウハウ部分はすべて無料で公開していますが「ためになった！ありがとう！」「応援してるよ！がんばって！」という心優しいお方はぜひこのnoteをご購入ください。

かどまが泣いて喜びます。

そして・・・

添削企画が終了して1ヶ月が立ちますが、冒頭にお話しした通り、いまだに添削希望の DMをいただくというありがたい状況でございます。

しかし、せっかく企画期間中に参加してくれたフォロワーさんに申し訳ないということもあり、最近では DMでお問い合わせいただいてもすべてお断りしていました。

ですができるだけ多くの方のお力になりたいという気持ちを抑えきれず、この noteを購入してくださった方に 、購入者特典として、Twitterのヘッダー画像の添削をプレゼントさせていただくことにしました。

先日の企画ではリプでの添削だったため、140文字という制約の中でのアドバイスとなってしまいましたが、今回の購入者特典企画では DMでやり取りをさせていただきます。

つまり文字数無制限です。

本音を言えば「もっとこうしたほうがいい」「ここはああしたほうがいい」ということがたくさんあるにも関わらず、140文字ではどうしても伝えきることができずに、ボク自身ももやもやしている部分もありました。

なので今回はガッツリと添削&アドバイスさせていただけると思います。

特典申請に関する注意点

※ 今回ご提供するの特典はデザインの制作ではありません。あくまでも添削とアドバイスのみとなりますのでご注意ください。

・記事をご購入いただくと表示される有料エリアに記載されているメールアドレス宛に指定の書式でご連絡ください。

・Twitterのヘッダー画像添削なので、当然ですが Twitterのアカウントが必要です。

・アドバイスにしたがって修正していただいたデザインに対しては基本的に何度でもご質問は受け付けます。

・ご提供する添削、アドバイスに関する質問以外にはお答えできない場合がありますのでご了承ください。

この続きをみるには

この続き: 761文字

記事を購入

1,000円

購入済みの方はログイン
この記事が気に入ったら、サポートをしてみませんか？
気軽にクリエイターの支援と、記事のオススメができます！