UIでのアイコン制作で、心に留めておきたい2つのこと

前回アイコン制作に役立つおすすめサイトをご紹介しましたが、今回は、実際の制作を通して感じた「UIでのアイコン制作で、心に留めておきたいこと」をご紹介したいと思います。

①アイコンは、ピクトグラム+コンテクストでできている

みなさんは「アイコン」と「ピクトグラム」に違いがあると思いますか?

わたし自身、今まであまり違いはないと思っていたのですが、改めて「アイコンとは何なのか」を考えなおしたとき、実は違いがあるのかもしれないと考えるようになりました。

ピクトグラムとアイコンの違い

まず、ピクトグラムとは、万人が共通で認識できるものであり、人種や宗教など、人の持つ環境に左右されない普遍性がある絵文字のことを指します。

一方アイコンは、ピクトグラムにサービスやコンテンツ独自の「コンテクスト」を付け加えたものなのではないかと思います。

例えば、次のような事例をご覧ください。

(左)iQON(右)Houzz

「タグ」のピクトグラムは、弊社のファッションサービス「iQON」では、「ブランドをさがす」というメニューアイコンで使われています。他にもお店のピクトグラムやアルファベットのみでの表現を検討しましたが、他のメニューとの差別化が難しかったり直感性に欠けるため、現在の「タグ」を採用しています。

一方で、家づくりに関する情報や専門家に相談できるサービス「Houzz」では、「タグ」は「商品」のメニューアイコンとして使われています。おそらく、家具やインテリア雑貨などたくさんの商品を扱っているため、どの商品に当てはめても違和感のない「タグ」が採用されたのではないかと思います。

(左)Pinterest(右)MANT

「吹き出し」のピクトグラムは、Pinterestでは「お知らせ」のメニューアイコンとして使われています。更新情報だけでなく、フォロワーとメッセージのやりとりができる機能もこのメニューから行うことができるので、「お知らせ」でも「メッセージ交換」でも意味的に違和感のない「吹き出し」が採用されているのではないかと思います。

一方、ファッションコーディネートサービス「MANT」では、「Q&A」機能で吹き出しが使われています。おそらく、ユーザー同士がチャット形式で相談し合うことができるため、このかたちのアイコンにしているのでしょう。

UIにおけるアイコン制作は、このピクトグラムを最適に選ぶことが重要であり、サービス内の他の機能と誤解されてしまわないか、直感的に分かりやすいか、という点に注意することが大切です。

また、新しい機能のためのメニューアイコンであれば、同じユーザー層の他のサービスを参考にしてみる方法もあると思います。ユーザーは、「その機能はこのピクトグラムを指す」と既に学習している可能性があるからです。

②アイコンは、世界観を左右する

例えば、同じ「ホーム」のアイコンであったとしても、サービスごとに細かな特徴があることが分かります。

(左)Instagram/(中央)We Heart It/(右)Twitter

Instagramはかなりシンプルなかたちをしており、「家」と認識できる最低限の要素で構成されています。メインコンテンツの写真にフォーカスさせるため、アイコンは極限までシンプルにしているのではないかと思います。

女性向け画像シェアサービス「We Heart It」では、サービスのシンボルマークである「ハート」を、うまく「家」の中に組み込んで可愛らしいアイコンにしています。

またTwitterでは、同じくシンボルマークとホームアイコンをうまく融合させており、「家=鳥小屋」に見えるようなデザイン的工夫がなされています。

シンプルにしようと思えばとことんシンプルにできてしまうアイコンですが、サービスのシンボルマークを組み合わせたりすることで、独自の世界観をつくることができます。

そのさじ加減をどのようにするかが、デザイナーの腕の見せどころなのではないかと思います。


以上、「UIでのアイコン制作で、心に留めておきたい2つのこと」をご紹介しました。

VASILYでは引き続き、アイコン制作にもこだわりたいUIデザイナー・学生インターンを募集中です。ご応募お待ちしております!

http://bit.ly/1TNRGPd

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.