駆け出し向け！実務デザインの考え方【Twitterヘッダー編1】

こんにちは！おのだK（@halushiroi）です。

デザイン学習を一通り完走後、ありがたいことにいくつか案件をいただいております。
ご依頼をいただく皆様から「とても気に入った」というように評価され、非常にありがたく思っております。

ご依頼していただく方々からは
「これを見せて相手に良く思われたい！」「少しでも覚えてもらって今後に繋げたい！」
という、強い集客への思いがあります。

ヘッダーやアイキャッチは適当に背景や字を組み合わせただけでは使ってもらえません。
自分を一目で表現するインパクトがなければ、印象に残らないので意味がありません。

どうすれば依頼主から良いと思ってもらえる、そのターゲット層が惹きつけられる実務デザインを考えられるか？
今回はTwitterヘッダーを例にお話しします。こちらの作品です。
（ひろきさん@hirokichi315）

※ちなみに、Twitterヘッダーは左下の横350px*縦250pxくらいの所にアイコン画像が来ます。
第1案はそもそも空けているので問題なし。
第2案は画像のヘルメットが隠れるくらいで、こちらも大丈夫です。

ヒアリングして情報を聞き出す

まず第一に「依頼主がどんな情報を誰に見せたいか？」という情報を聞きます。
ここで言う「聞く」とは、単に相手から話を聞くだけではなく、相手のデータベースから自分で探していくことも含みます。

今はSNSやブログなど、色々なところでご自身を紹介されている方が多い世の中です。
なので、そういったところからも自発的に情報を拾って行きます。
特に今回はTwitterヘッダーなので、Twitterのプロフィール文も使えますね。
※この記事を書いている時と当時でプロフィール文は変わっています。

キーワードの書き出しとラフデザインの作成

まず、ざっくりどんなレイアウトにするかと、盛り込むワードを決めます。
直接のヒアリング＆ブログやTwitterのプロフィールから拾った内容がコチラです。
（手書きラフなのでちょっと見辛いと思います。すみません）

デザイン初期稿の作成

こうやって色々書き出してから、まずはデザイン第1案を作成します。
最初に載せたデザイン決定稿とは違っていますので、なぜ変わったのか？も合わせてお伝えします。

見比べると、円の図形が追加されてたり、白い長方形の透過率が変わってたり、「HTML/CSS/WordPress」が別のワードに変わってたりしてます。

キーワードの設定方法

今回最終的に設定したキーワードはこれらです。

ラフデザインや初期稿から削った内容はコチラ

これらのキーワード、あとはフォントと背景を設定した理由もお話しします。
ちなみに使ったフォントはコチラ。カッチリ系ですね。

全体的なワードチョイス

まずは第一にご本人からのご要望から。
「Twitterのプロフィール文に沿って考えて欲しい」とのことだったので、以前のTwitterヘッダー画像＆プロフィールから拾ってきています。

背景の設定

背景は製造業の現場作業員から、ITビジネスへ転身したということがわかるようにしたかったので、2案とも写真ACから素材を引っ張ってきました。
検索ワードは「ビジネス」「スーツ」「作業員」あたりです。

どうしてデザインが第１案の形になったか？

Twitterのプロフィールを見て目に留まったのはコチラのワードです。

引っ張った理由としては

主に転職を考えている、勉強始めてしばらく経ったけど未来が見えない、本当に自分でもWeb制作者になれるのか？と言うような層をターゲットにしていると思い、彼らを引き付けるワードにしています。

フォントは変化できた力強さと、ITらしくカッチリしすぎてないけどカッコいいを重視。
背景は製造業の現場作業員からITビジネスにチェンジするように半々でカット。
こういった意図でデザイン第1案を作成しました。

一度送ってチェックバック

デザイン第1案の初期稿ができたので、この時点で一度送り、修正点や追加点などがあるかどうか確認してもらいます。送ったのはコチラです。

初期稿のままだと、左右に空間が空いてしまって寂しいと思ったので「繋がり」を表すように8色の輪っかを入れました。
「人との繋がりを大切に」と言う部分を一番推そうと思ったので、フォントサイズと文字色を変えてリズムを持たせ、ドロップシャドウをつけてクッキリさせてます。

修正としては下記事項をいただきました。

決定稿は最初にも載せましたが、コチラですね。

私は基本的に、依頼主のご意見はそのまま反映させます。
「こうすればもっと良くなる！」と、思うことがあればその修正案にプラスして1〜2個別デザインを用意します。

言われたことをただやるだけでなく、どうしたら依頼主と、その先のターゲットが喜ぶかどうか。
それを常に考えながら制作しています。
今回はデザイン第2案まで作る形で実践しました。

デザイン第2案の作成意図

2案目も改めて見てましょう。
ちなみにひろきさんの現在のヘッダーはこの第2案の方になっています。

第2案の考えとしては

こう行った感じにして「人との繋がり」を抑えめにして「キャリアチェンジ」と言うことをメインに据えました。
背景画像も明るくすることにより、転職した人物像をクッキリ見せると同時に、まっさらな状態から見る人にも希望を持たせるイメージをより強く。

ただ、完全に白だと寂しいので、第1案でも入れた繋がりの輪っかを真ん中に配置。
グラデーションの矢印は変化の過程と言ったところです。

メインタイトルはドロップシャドウをつけることでメリハリをつけ
サブとなるワードは黒帯を下に敷くことで差別化しました。

最後に

今回は実際のデザインを見ながら「どうやってデザインを起こして形にするか？」を、お話ししました。

まとめるとこう言ったことになります。

デザインは自分だけで作るものでなく、依頼主と一緒に
「どうしたら見た人の悩みが解決できるか？」
「どうしたら見た人に商品やサービスを届けられるか？」
を、考えて制作していくものです。

そこを押さえておけば、お互いに満足のできるデザインが作り上げられます。

結果として、第2案の方がひろきさんのターゲット層に刺さるデザインとなりました。
※この記事を書いているときは、第2案がTwitterヘッダーに設定されています。