keyword
  1. 書籍
  2. 副業

Twitterヘッダーデザイン実践録【すのらびさん】

今回、Twitterヘッダーを作成したのはすのらびさん(@snow_rabbit_8)

すのらびさんは「お役立ち情報で豊かな生活」をコンセプトに、幅広い分野でwebライター×編集者をされている。

ブログも準備中とのことで、今回作成したTwitterヘッダーはそのブログ名を中心に据えたデザインとなっている。

1.ヒアリング実施

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

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

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

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

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

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

今回、すのらびさんからの要望は以下の通り

  1. 「カフェ×パソコン」というイメージ
  2. テーマカラーは、青・緑(落ち着いた色が好き)
  3. 特になし
  4. ブログタイトル「すのらびの知恵袋」を入れたい
  5. 特になし

これらの情報を元に、以下のような具体的なアイデアを考案した。

ヘッダー全体の雰囲気

「カフェ×パソコン」の雰囲気を実現するため、背景にはカフェの店内をイメージしたイラスト(棚、黒板、照明)を配置する。配色は全体的に温かみの感じられるナチュラル系(主に茶色)とする。

店内には植物を複数配置することで、緑が多くてくつろげそうな雰囲気にする。具体的にはヘッダー画像の四隅の角に植木鉢や天井からぶら下がった植物を配置する。

メインコピー

ブログタイトルである「すのらびの知恵袋」を中央に配置する。

色はすのらびさんの希望されている青系とする。背景は落ち着いた茶色系でまとめているため、浮きすぎないが目立つような明度・彩度に調整する。

フォントは全体の雰囲気と調和するように手書きっぽいフォントを採用する。

登場するキャラクター

すのらびさんのTwitterアイコンは、眼鏡をかけたウサギのイラストである。

したがって、ウサギがカフェの店内でPCを操作しているイラストを作成する。

強調したいのはメインコピー(ブログ名)なので、ウサギのイラストはシルエットで配置することで背景にある程度とけ込むようにする。

キャラクターの特色

メインコピーの中にある「すのらび」という名前の付近に、肩書(webライター、編集者)を吹き出しとともに描き、Twitterプロフィールを見た人が「このアカウントの中の人がどのような仕事をしているか」がわかるようにする。

さらに、すのらびさんのTwitterプロフィールで確認したライティングの受注分野(ライフスタイル、金融、投資、育児)をカフェ店内の黒板にメニューとして記載する。

カフェっぽい印象を強調するため、メニューの内容は手書き感のあるフォントで記載し、コーヒーカップのイラストとともに白色のチョークで描いた感じにする。

ラフ案の作成

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

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

すのらびさんTwitterヘッダーラフ

ここまでできたら、すのらびさんにラフ画像を確認してもらい、了承が得られたら本制作に着手する。


ここで作成している「コンセプトシート」の考え方は、北海道在住のデザイナーであり、いちげ♨温泉メンバーでもある「じぇーさん(@jfromhkd)」のブログ記事を参考にして採用させてもらった。

デザインの依頼主からヒアリングした情報を1枚のシートにまとめたもの(=コンセプトシート)を作成することにより、ラフ案を作る段階でデザイナーと依頼主のアウトプットイメージのすり合わせを行うことができる。

これにより、手戻りの発生を最小限にすることができ、さらに案件に関する情報を1カ所にまとめておくことができるため、デザインの生産性を高められる。

私の場合は、コンセプトシートをGoogleスプレッドシートで作成し、PDF化して依頼主に送付している。

なお、コンセプトシートに記載する内容は、単にヒアリング時点での依頼主の回答だけではない。依頼主のTwitterアカウント、ブログ、noteなどを積極的に確認し、そこから得られた情報も記載している。

これは、依頼された制作物(今回はTwitterヘッダー)の「役割」を自分なりに咀嚼し、デザイナーの目線から依頼主の目的達成に貢献するためである。

さらに、コンセプトシートにはヘッダーを作る上で必要になりそうな素材の画像や、依頼主が雰囲気を視覚的に把握できるような画像も張り付けている。

これらの案から作成した現時点でのラフ案を添付し、このままの方向性で進めていいかを確認するのだ。

すのらびさんのコンセプトシートのサンプル

3.本制作着手

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

すのらびさんTwitterヘッダー

カフェの店内の構成要素の存在感を強調したため、ラフ画像と比較して全体的に色が濃い印象となっているが、カフェっぽい賑やかな雰囲気が伝わっていると思う。

店内の壁には植物の柄のテクスチャを壁紙として配置し、画像全体の雰囲気に温かみをプラスしている。

メインコピーは少し小さく感じられるが、これはTwitterのヘッダーを実際に設置した場合に、画像の上下が見切れてしまうことを考慮したためである。

見切れ具合を確認すると以下の画像のようになる。
※水色の部分は新しいTwitterでのアイコン表示範囲を示したもの。

すのらびさんTwitterヘッダー見切れ確認

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

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

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

4.納品

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

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

おまけ.依頼主の反応

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

オンライン上だけのつながりとは言え、このように自分のやったことで感謝してもらえるのは幸せなことだ。

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



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

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

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

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