IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。

やってみて学んだ、アイコンのデザインで大切なこと

f:id:tosssaurus:20180520234819p:plain

2週間ほど前、Twitterのアイコンを変更しました。
自作することで企画から制作までを経験できたので、デザインが完成するまでの試行錯誤と、そこから得た学びをまとめます。

 

特に、

  • 個人SNSのアイコンを検討してる方
  • ビジュアルデザインを勉強しはじめの方

に参考になるかもしれません。

 

  

ビフォー・アフター

以前まで、当ブログであるIT系女子ログのシンボルマークをそのまま使っていましたが、自分の顔のイラストに変更しました。

変更前、変更後のアイコンの比較。変更後のアイコンは似顔絵イラストに。

左が変更前、右が変更後。

 

変更前のシンボルマーク、良し悪しはあれど「IT系女子ログの中の人だ」と一目でわかっていただけたので、しっかり機能していたとは思っています。

ちなみにリニューアルの背景やデザイン意図、フォント選びのことを話した当時の記事もあります。 

この赤いモンスターも私に似ていて、気に入っています。
ブログのリニューアルをした時に生まれたので、1年のおつきあいになります。

 

なぜ変更したの?

これまではブログの延長だったり、Web記事のブックマークだったり、Twitterはなんとなく使っていた状態。運用するっていう意識もなく、気の向くまま楽しんでいました。

数年経ち、たくさんの方と繋がりができてくると、皆さんの活躍されている姿を垣間見ることでとっても刺激を受けるようになります。
そうすると自分でも、「おもしろそうなことを試していきたい!」「IT系女子ログに限らずいろいろやりたい!」と考えるようになったんです。

 

活動の窓口になったり、PRのためのメディアになったり、活動そのものになったりしているのを間近で見てきました。私にもそんな可能性があると思わせてくれるTwitter。 

そんなTwitterの中でも、初見でアカウントの印象を左右するインパクトがある、と普段から感じていたアイコンを見直すことにしました。

 

アイコンの目的を見直す

アイコンの機能を見直してみて、大きく3つの目的を言葉にすることができました。

  1. 私が、IT系女子ログのこと以外も発信しやすい
  2. ツイートを見た方が、気軽に声をかけやすい
  3. プロフィールを見たときに、フォローしておこうという行動をとりやすい

 

できることを広げたり、掘り下げたりしたい。Webサイトやサービスを作るのもいいし、レポートや書籍もいつか書きたい。

自分1人だけじゃなく、いろんな方と一緒にやるのも楽しそうです。

自分のアイデアや技術だけでは考えもしなかったことをより良く実現できれば、それこそ最高におもしろいことだと思います。

 

話しかけてもらいやすい、フォローしてもらいやすいアイコンになれば、それだけ情報にも触れられる。そうなれば、おもしろいことに関われるチャンスが増えるのでは、と考えました。

3つの目的をを達成するためには、どういうビジュアルだったらいいのか?どんな方法があるか?を検討してみました。

 

ブログのシンボルマークは使わない

ブログのシンボルマークを外すことで、“ブログの中の人”感を弱めようと考えました。

ブログのシンボルマークでなくなることで、ツイートを見かける方は、いちデザイナーとしてのつぶやきに見えるようになるだろうし、つぶやく私も話題の幅を広げやすくなる。
関われることの幅が広がって、おもしろそうなことができればいいなぁという期待を込めて、シンボルマークは使わないことにしました。

 

顔だとわかるようにする

気軽に声をかけやすいと感じるアイコンは、最低限のマナーは守ってくれそうな信頼感と、話しかけてもいいかもと思える親近感が伝わるアイコンだと考えました。 
そんな信頼感、親近感を伝えるには、本人の顔だとわかるビジュアルが適していると思います。

有名企業のロゴやシンボルマークだと信頼感がありますが、私が練習もかねてつくったシンボルマークではそうもいきませんよね。

Twitterアカウントをたくさん見てみたところ、個人アカウントで「信頼できそうだなぁ」と感じたアイコンは、やはりポートレート写真が圧倒的でした。

また、「気軽に話しかけやすそう」だと感じたのは、写真、イラストに限らず

笑顔だ(真顔でない)と判別できるアイコンでした。

 

イラストにする

自分の顔を使うのはすぐ決まったのですが、迷ったのは写真にするか、イラストにするかです。

ポートレート写真の方は信頼感は十二分にあるのですが、そのオフィシャルな雰囲気と親近感とのバランスが難しいな、と思いました。 
信頼感の出る一方、気軽に話しかけづらくはなるかもしれません。

 

自撮りっぽい写真や友達に撮ってもらったような写真は親近感が出ますが、どことなくFacebookやLINEっぽさを感じました。
デザインされているアイコンだと、デザイナーならではの信頼感と親近感が出ているように感じます

f:id:tosssaurus:20180520220037j:plain

イラストは、写真より抽象的で匿名も多いTwitterっぽさを感じました。見かけたイラストのアイコンの中では、シンプルな線のものが目立っていてわかりやすい。

あまりにラフな線だと素人っぽさにもつながり、ビジネスの場面での信頼感が薄れてしまいそう。シンプルで性別がわからないくらいものは匿名感がかなり増します。

 

…いろいろ検討した結果、表情や性別がわかるくらいのイラストだと、私の考えるちょうどよいバランスで作れそう!

ということで、今回作るアイコンにはイラストを採用することにしました。

 

よし、作ろう!

方向性をしぼれてきたので、いざ手を動かしていきました!

案出し

まずはとにかく案出ししてみました。ラフを書きながらも考えていきます。

f:id:tosssaurus:20180519090852j:image

デフォルメのバランスを探っていきました

案出し前の段階でメインカラーは赤にすること、女性の笑顔だとわかるくらいの抽象度にするのは決まっていました。

赤は私が大好きな色です。イラストの抽象度のバランスは、小さいサイズでも判別できるよう意識しました。

 

方向性を模索

さらに、ラフを描いていく中での気づきがありました。

  • 手描きのようなラフな線はイラストレーター感が出て、デザイナー感を出すのが難しいそう
  • ラフな線は信頼感も出しづらそう
  • パスで整えるのが良さそう
  • ポーズをとったりせず、正面を向いてる方が私らしい
  • 思ったよりもシンプルにした方が分かりやすそう
  • 鼻なし、歯は見せない、まゆげ検討、首あり、の抽象度がちょうど良さそう

 

イメージができてきたので、一度パスで起こしてみることにしました。
久しぶりに使うIllustratorで四苦八苦しつつ、

f:id:tosssaurus:20180520212339j:plain

パスいい感じかも。パスでいこう。

 

ラフを元にかたちを作っていく

均等の取れた感じを出したいと思っていたので、グリッドを活用してブラッシュアップしていくことに。
元の絵を図形ツールのみで型取り、なるべくキリのいい数値で配置していきました。

f:id:tosssaurus:20180520213253p:plain

(恥ずかしながら、グリッドを活用するにも環境設定が必要なことを初めて知りました。)

 

制約がある分どんどん配置していけるので、たくさんパターン違いを作りました。

何案かできたら、その中から1つ2つだけに絞りこみ、絞り込んだものをさらに展開、何案か展開できたらまた1つ2つだけに絞り込み…を繰り返しつつ、調整できてきました。

私の顔、みけんが狭いんだよなぁとか、おでこ広いけど頭薄めなんだよなぁとか、自画像を描いてる気持ちでした…。

配色も検討していき、かたちが作れてきました。

f:id:tosssaurus:20180520213647j:plain

 

実機で検証する

かたちが作れてきたので、実際のプロフィール画面にあててみることに。

f:id:tosssaurus:20180520214338j:plain

 

1pxの線だとアイコンにした時に潰れてしまうことが判明。
せっかくシンプルにしたのに表情が見えない…。
目玉とシャツのボタンとが同じくらい強い印象だから、ボタンの印象はもっと弱めよう。

実際の環境にあててわかったことを元に、ブラッシュアップしていきます

もう少し視認性を良くしたいと思い、

  • 色は赤1色にしてみる
  • トリミングを顔に寄った位置にする
  • 線をもっと太くする

あたりを調整することに。

さらに、曲線と直線の切り替わり部分がなめらかになるよう手を加えていきます。

  

仕上げて完成!

試行錯誤して、反映したのがこちらの最終版。

f:id:tosssaurus:20180520214600j:plain

 

f:id:tosssaurus:20180520214630j:plain

情報がまとまってスッキリ!しましたよね?
いい感じ!

笑顔なのもわかるし、整ってる感じも見えるかな。話しかけやすくなってるのか???
……似てるなぁ。

 

アイコン変更した結果

変更してからまだ2週間過ぎたばかりですが、果たして目的達成に向かっているのか?を一度振り返ってみました。

目的は大きく3つでした。

  1. 私が、IT系女子ログのこと以外も発信しやすい
  2. ツイートを見た方が、気軽に声をかけやすい
  3. プロフィールを見たときに、フォローしておこうという行動をとりやすい

 

1は達成!
意識が働いているおかげなのもありますが、気軽に発信できています。

 

2は、変更前を知る以前からのフォロワーさんに向けて、簡単な質問をしてみました。

f:id:tosssaurus:20180525124139j:image

話しかけやすくなった/話しかけづらくなった/気がつかなかった/その他 の4つの選択肢を設定したところ、回答者の30%以上の方が話しかけやすくなったを選択してくださいました。
ご意見もいただけて、いろんな視点に気づくことができて嬉しいです。

ご回答ありがとうございました!

 

3は、主観ですがフォローしていただける頻度が多くなったように感じます。
主観ですし、まだ2週間ですし、条件も複雑でしょうからあまりあてにならないですが…。

どうやって計測するのがいいんでしょう?考えてみます。

 

まとめ

アイコンを作ってみてわかったコツ。

  • たくさん調査して、しっかり考える
  • 実機で確認する
  • 小さいサイズのデザインは細かい線はほとんどわからない

 

たくさん調査して、しっかり考えておくと立ち返りやすくブレづらいので制作しやすかったです。

言葉にしてしまうと簡単ですが、制作しているその場はたくさん悩んだり、手を動かしたりと本当にハードです。

ここぞという時に集中して制作するためにも、あらかじめ考えを持っておくのは大切だと実感しました。

 

反対に、作ってみて実際にデザインが掲載される場所にあてて見ないと判断できないこともあります。

よく言われることですが、チラシデザインは実際にどのように配布されるのか、とかWebサイトならどのように遷移してきて、どんな場面で閲覧されるものなのかって、デザインする上で大きく影響してきます。

制作前に考えることも大切だし、制作途中にラフやプロトタイプなどで検証する機会を設けるのも、本当に大切だと思いました。

 

「こうしたほうがもっと良くなるよ」とか、「こういうこと知っておいたほうがいいよ」とかご意見がありましたらぜひ教えてください。 

ブログのコメントでも、Twitterでも、マシュマロからでもお気軽に!

https://marshmallow-qa.com/tosssaurus?utm_medium=url_text&utm_source=promotion

 

余談

Illustratorはベクターファイルを開いたりするくらいでしか使わなかったのですが、アイコンやロゴなど、パスで制作するデザインはやっぱりIllustrator!!特にCCはほんとに使いやすい!ビックリしました。