わかりやすいアイコンとは

こんにちは。
フェノメナエンターテインメント デザインチームのニキです。

 今回はアイコンについてお話します。
パソコンやスマートフォンを使っていると、大小様々なアイコンを見ると思います。
そのアイコンを作る際に私は悩まされています。
アイコンは、どのような機能が使えるのかを表しているので、アプリなどを使っていて「このアイコンはどのような機能を表しているのだろうか?」となっては、困るのです。
私がアイコンを作る際に、このデザインでどのような機能が使えるのかを本当に分かりやすく表せているだろうか…と悩むのもそのような理由があるからです。
なので、アイコンをデザインする側がどのような機能なのかをしっかりと理解してモチーフを検討することが大切なのです。
悩むべきポイントは色々ありますが今回はモチーフをメインにお話ししていきます。

 

下の画像はWindowsで使われているアイコンを小さいサイズから大きいサイズまで並べたものですが、このアイコンは何かわかりますか?

名称未設定 1

答えは、Windowsのドキュメントのアイコンです。フォルダと文書をモチーフにして機能を表しているわけですね。

実は上の画像の1番小さいアイコンを拡大すると…

 

 

ドキュメント 拡大

 

 

知っている方もいると思いますが、上の画像のようにドットになっているのです。拡大する前とはだいぶ印象が違うと思います。

このアイコンは16×16(px)で描かれています。色は1pxにつき1色しか入りませんので表現するのに限界があります。
ここでモチーフの検討が重要になってくるのです。大きいサイズのアイコンならモチーフを表現するために描き込みができますが、小さいサイズのアイコンで描きこむと実際のサイズで見たときにアイコンがつぶれて見えてしまいますし、逆にモチーフを表現するための要素が少ないとわかりにくくなってしまいます。
なので、モチーフのどこの要素を残せばそれらしく見えるかを考えて描かなければなりません。

以上をまとめると、

・デザインするアイコンがどのような機能を使えるものなのかを理解し、その機能を適切に表現できるモチーフであること
・アイコンのサイズが大きい小さい関係なく、モチーフとしたものにみえるか

を意識していくことで、より分かりやすいアイコンに近づけると考えています。
これからも私は分かりやすいアイコンをデザインするために、悩み続けていこうと思います。

 

 

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社