keyword
  1. 書籍
  2. 副業

Twitterヘッダーデザイン実践録【図解師★ウルフさん】

今回、Twitterヘッダーを作成したのは図解師★ウルフさん(@Diagram_Wolf、以下ウルフさん)

ウルフさんは「世界の全ては図解化できる」というコンセプトのもと、書籍などのコンテンツの図解化をされている。

今後はアウトプット作業として図解化を継続的に実施されることや、コンテンツ図解の販売を計画されている。

「3分でわかる図解ブログ」という触れ込みの図解師★ウルフの『図解の世界!』というブログも運営されているので、興味がある方はぜひチェックしてほしい。

1.ヒアリング実施

今回はTwitterのDMでヒアリングを実施した。

ヒアリングで確認した内容は下記の通り。

  1. ご希望のイメージ、雰囲気はどのようなものですか?
    ※ご希望に近い画像などがあればご提供ください。
  2. テーマカラーやお好きな色はありますか?
  3. 使いたい画像や写真はありますか?
  4. 使いたいキャッチコピーや文章はありますか?
  5. その他、ご希望があればお聞かせください。

これらの質問に対してDMで回答を頂き、次のステップへと進んだ。

2.コンセプトシート作成

ヒアリングで確認した内容に対する回答を、コンセプトシートという1枚のシートにまとめた。

今回、ウルフさんから頂いた要望は以下の通り。

  1. 爽やかでスタイリッシュな雰囲気
  2. ブルー系
  3. ブログの図解を使用してもよい
  4. 世界の全ては図解化できる
  5. かきえもんらしさのあるヘッダー

ヘッダー全体の雰囲気

ヒアリングの際にウルフさんが希望される雰囲気のヘッダー画像をいくつか見せてもらった。その画像から私が読み取ったイメージが「爽やかでスタイリッシュな雰囲気」であった。

まず「爽やかさ」を表現するため、ウルフさんの希望でもあるブルー系の背景を全面に敷く。

つぎに「スタイリッシュさ」を表現するために、ヘッダー全体を幾何学模様で分割し、その中に要素を配置していくことを考えた。

幾何学模様と言っても、あまりに複雑な図形では背景として目立ちすぎる。関西弁で言う「シュッとした感じ」を表現するためには直線で構成した方が良さそうなので、六角形を敷き詰めたハニカム構造をベースとすることにした。

この六角形の中にはメインコピーとなる「図解師」という漢字3文字および図解らしさを感じさせるイラストを配置し、「図解師」というあまり聞きなれない肩書きの持ち主が、どのような活動をしているかイメージできるようなヘッダーを目指した。

メインコピー

メインコピーとして、ウルフさんの肩書きでもある「図解師」を中央に配置する。

コピーそのものはゴシック体をベースとした漢字3文字を図解っぽくアレンジすることにして、矢印とフロー図で漢字を構成している。これらの漢字を、背景の六角形が並んでいる形状に沿って上下にずらして配置した。

個人的には「解」の「牛」の部分と、「師」の「帀」の部分に注力している。

前者はお肉屋さんでよく見かける「肉の部位の説明図(=図解)」を使用し、「図解とはどのようなものか?」がわかりやすくなるよう工夫した。

後者はウルフさんの既存のTwitterアイコンが非常にクオリティが高く印象的なため、このアイコンの要素をヘッダーにも使用したいと考え、「師」の片の部分(㠯)はウルフさんのネクタイをイメージしたイラスト、つくりの部分(帀)はウルフさん自身のイラストを図解っぽくアレンジして構成した。

ラフ案の作成

これらのアイデアをまとめたラフ案は以下のものである。

このラフ画像はiPad ProとProcreateで作成した。

ウルフさんTwitterヘッダーラフ

ウルフさんにラフ画像を確認してもらい、了承が得られたら本制作に着手する。

3.本制作着手

本制作では、Illustratorを用いてヘッダーを作成した。

ウルフさんTwitterヘッダー

ラフ案では図解っぽい要素のイラストとしてグラフなどを配置していたが、ウルフさんから図解イラストを提供して頂いたため、フリー素材のピクトグラムアイコンとともに使用した。

なお、これらの図解やアイコンは青色に着色したうえで不透明度を下げ、背景色になじませた。

背景の六角形の線はIllustratorの「ぼかし」で発光の効果をもたせ、さらに大きさ・ぼかし具合・不透明度の異なる青色の六角形を複数配置した。これにより、背景に遠近感が出るとともに近未来的な雰囲気が表現できている。

キャッチコピーの「世界の全ては図解化できる」と、お名前の「ウルフ」は右上に移動し、ヘッダーが表示された際に見切れないようにした

見切れ具合を確認すると以下の画像のようになる。

ウルフさんTwitterヘッダー見切れ確認

ちなみに、ここで使用している見切れ具合確認用のテンプレートは、いちげ♨温泉メンバーでもあるANさん(@AN_______)じぇーさん(@jfromhkd)が無料で公開されているものを使用している。

ANさんのテンプレートダウンロードサイト
↓↓↓

じぇーさんのテンプレートダウンロードサイト
↓↓↓

4.納品

完成したヘッダー画像をウルフさんに納品し、下記2点の了承を得た。

  1. ウルフさんのヘッダーを制作実績として紹介すること
  2. ヘッダー制作過程をブログ記事にして公開すること

おまけ.依頼主の反応

納品したヘッダーはさっそく使って頂けて、下記のようなツイートもしてもらった。

今回作成したヘッダーは比較的構成要素が多く、なんといってもメインコピーの「図解師」という漢字を図解っぽくアレンジするところに、相当時間を掛けた。

その甲斐あってオリジナリティの高いデザインを実現できたと感じるし、なんといっても依頼主のウルフさんにも喜んで頂けたので、かなり感慨深い仕事になった。

今後も、一人でも多くの人に喜んでもらえて、依頼主を応援できるデザイナーを目指して精進し続けたい。


かきえもんへのデザインのご依頼・ご相談はTwitterのDM(@KAKIOLOG)またはお問い合わせページよりお気軽にどうぞ。

製作実績、料金、ご依頼から取引完了までの流れは、下記ポートフォリオページにてご確認ください。

かきえもんのポートフォリオ

アイキャッチ画像_ウルフさん
Twitterでも複業・育児・家事に関する情報を投稿しています。