はじめまして、Fablic の UIデザイナー わりえもん (@wariemon) です。この記事を読んでくださりありがとうございます！
今回は、もはや今のアプリ・Webデザインにおいてて欠かせない存在となった「アイコン（ピクトグラム）」についてお話ししようと思います。
“ただの飾り” になっていないか
近年のデザインの流れとして、ビジュアルがシンプルな アイコン（ピクトグラム）が、多用されるようになってきています。
そこで一歩足をとめて、今一度、それが ただの飾り になっていないかを考えることも必要です。
ことUIにおいては、ひとつひとつの存在が、「ユーザーを正しく導くこと」につながっている必要があり、アイコンもその大きな部分を占めています。
今回は3つの点で、ただの飾り にならないアイコン作り・使いをするためのお話しができればと思います。
1. それは伝わるか -モチーフについて-
2. それは適切か -文脈の理解-
3. 慣れを意識しているか -練度の考慮-
1. それは伝わるか -モチーフについて-
アイコン は モチーフを簡略化 していくことで作られていくことが多いものです。
例えば「検索 = 虫眼鏡」「撮影 = カメラ」など、現実世界でその行動を想像できるものを簡略化することでできています。
モチーフへの 類似度 が高いほど具体的なイメージを想像しやすく、 抽象度 が高いほどシンプルな見た目になる反面、理解できるものにする技術が必要です。
現実に即したモチーフからつくるアイコンは、基本的に、類似度と抽象度の度合い と モチーフ選びの適切さ が重要になってきます。
最近だと ハンバーガーメニュー や、 三点リーダ のような現実世界に即しない 表現も生まれてきていますが、これらを使うときに気をつけないといけないのが、 そのアイコンが何の行動を表すのか想像できないことにあります。
これらのアイコンは内容を想像できないため、体験を通して覚えるしかないのです。
なので、モチーフベースのアイコンよりも、理解へのハードルが高いという難点があります。
例として VSCOcam という写真加工アプリのUIを見てみましょう。
シンプルな図形で構成された画面自体は非常に美しく見えますが、各々が何を引き起こすのか想像できないのではないでしょうか。
例えば、右下の丸アイコンは、撮影画面を引き起こすアイコンです。ただ、丸アイコンから撮影を想像する人はいないため、やはり適切ではないように感じます。
たとえば iOS の TabBar のように、アイコンと一緒にテキストを加えたりすることで解決もできるかもしれません。
ですが、アイコン自身が意味をなさないため、それはただの飾りでしかなくなってしまいます。テキストとともに添える場合にも、アイコンは単体でも意味をなしている必要があります。
2. それは適切か -文脈の理解-
場合によっては、同じ記号でも受け取り側によって 違う意味が生じるもの があります。
例えば、もう見慣れたものですが Facebook の「いいね！」。
親指を立てたこのアイコンはもはや世界共通のアイコンとなりましたが、タイを始めとする数カ国では、非難の意味を表すようです。
これは、文化の違いが生み出す解釈の違い です。
また、もしかすると、ヒッチハイク専用アプリなんてものがあった場合、「ヒッチハイク」を表すアイコンになりえたかもしれません。
これは、環境が生み出す解釈の違い です。
それは、以下のような要因によって引き起こされることがあります。
- 環境
- 知識量の違い
- 文化の違い
- 社会的状況
- 共に使われているアイコン
対象ユーザーが絞り込める場合には、できる限りその文脈の上で共通の認識とて解釈できるものを使うと、より伝わりやすくなります。
3. 慣れを意識しているか -練度の考慮-
以前書いた記事「つかえるUI の つくり方 -ユーザーの練度編-」でも少し触れたのですが、
自分たちが作っているサービスの 競合や、ユーザーが共に使う関連サービスのアイコン なども、重要なポイントです。
例えばフリマアプリを参考にすると、「出品 = 撮影 = カメラ」という連想からか、カメラのアイコンが多く見受けられます。
ユーザーが他のアプリも使っている可能性が高いのであれば、この「慣れ」を利用することで、簡単にユーザーに意味を伝えるモチーフを選択することができます。
モチーフとして何を選択するかは自由ですが、ユーザーを絞り込むことができれば、どういうモチーフ選びが正しいかの糸口が見えてきます。
伝わっているかを考えよう
以上の三点に気をつけてみることで、ユーザーにより伝わりやすいデザインに近づけると思います。
シンプルなビジュアルのアイコン、これからも多用されていくと思うのですが、そこにちゃんと意味を込める、伝わるものにする意識が必要です。
ちゃんと伝わる下地がしっかりできれば、みなさんのアイデアとデザインでより面白い表現ができるはず。
この記事が、その下地作りの参考になれば幸いです。
この記事は Fablic Developer’s Blog “inFablic” からの転載記事となります。元となる記事は2016年1月に公開されました。inFablic は、2018年7月1日の Fablic の楽天への吸収合併をもってクローズしました。この記事は、会社からの了承を得て転載しております。
当時の記事への反応などは以下からご覧いただけます。多くの方にお読みいただき、反応もいただき、感謝のかぎりです。
http://b.hatena.ne.jp/entry/in.fablic.co.jp/entry/about_icon
