UIデザインに欠かせないアイコンの選び方

多くのサイトやシステムで使われているアイコン。アイコンには視覚的に機能や情報を伝える役割があり、デザイン面から見ても文章で書くよりも見栄えがすっきりとシンプルになる効果があります。しかし、アイコンを用いれば必ず分かりやすいデザインになるとも限りません。かえってわかりにくいデザインを避けるためにも、アイコンの使いどころやアイコンが適切かについて十分に吟味する必要があります。今回はアイコンの役割とアイコンの適切な選び方についてお伝えします。

アイコンが持つ役割

スマートフォンで何かを検索したい場合、無意識のうちに虫眼鏡のアイコンをタップしているのではないでしょうか?それは日常生活の中で多くのアイコンに触れ、そのアイコンをタップしたときに何が起こるかを知らずのうちに学習しているからです。これこそがアイコンのメリットといえます。

アイコンの主な役割としては
・直感的に機能や情報を伝え操作をしやすくする
・言葉の壁をなくす
・画面がすっきりする

文字を読んでから実行に移すのと、アイコンを見てから行動に移すのではやはりアイコンの方が直感的に理解できるので早いといえます。とはいっても一般的に知られていない言葉やマニアックな事象を表したいときに、アイコンのみを用いるとかえってユーザーの混乱を招きかねません。直感的に理解ができるか十分に検討しましょう。

またアイコンを用いることで見た目の印象も変わります。すっきりと見えることで今風なデザインを取り入れることができ、さらに情報を最小限に抑えることで操作への迷いをなくすことができます。

どのようなアイコンを採用すべきか

アイコンを選ぶ際にどのような点に着目するべきか、以下の3点をポイントとして挙げてみました。

わかりやすさ

アイコンを用いるそもそもの目的は「文字だと分かりにくいものを視覚的に表現する」ためです。まずはアイコンによってユーザーがいかに瞬間的に情報を理解できるか、に着目する必要があります。文字の代わりに使用するということは、文字と同等もしくはそれ以上の情報をユーザーに伝えられなくてはアイコンを使用する意味がありません。それゆえ、誰もが簡単に理解できるかが重要となります。そのためには、マニアックな解釈は避け、一般的に伝わるかどうかを念頭に置きましょう。

一貫性

アイコン同士、またコンテンツ全体との一貫性を保つことが大切です。具体的には、配色パターン、線幅、サイズ、角の形などが挙げられると思います。デザインが統一されていればUI全体にも統一感が出るでしょう。選ぶ際には色々なサイトからアイコンを持ってくるのではなく、アイコンパックのような同じデザインが適用されているものを使用することで一貫性が得られます。

個性

アイコンはサービスやブランドを印象付ける重要な役割も果たします。例えばモノクロでシックなアイコンを作れば子供よりも大人をターゲットとしたものかつ、男性向けであることが想像されます。また、角丸を取り入れた暖色のアイコンであれば、やわらかい雰囲気になり、子どもや女性向けのサービスであるということは想像に難くないでしょう。

アイコンを有効に活用しよう

アイコンを正しく使用することでアイコンのメリットを最大限生かすことができるでしょう。アイコンはデザイン性を向上させるだけではなくUIの向上やブランディングに大きくかかわります。特にUIへの配慮は大切です。これを機にご利用のWebサイトやシステムのデザインについて一度見直してみてはいかがでしょうか?

エイエヌエスではUIUXの観点から人間中心設計にてわかりやすく操作性の良い業務システムの構築を行っています。まずはお気軽にご相談ください。

☆YouTubeはじめました☆
基幹システムをはじめとするIT関連情報を発信するチャンネルです。
チャンネル登録はこちらから⇓
https://www.youtube.com/channel/UC41Fu8lCawwGuNDXWy3PhSQ?sub_confirmation=1

・あわせて読みたい
業務システムに欠かせない!アイコンの効果とは?
使いやすさにフォーカスしたマイクロインタラクションとは?

・IT-Trustコラム(オーダーメイドのシステム導入で企業のDX推進を支援)
https://www.ans-net.co.jp/column/

・勤怠trustコラム(カスタマイズ可能な勤怠管理システムを構築)
https://www.kintai-trust.com/column/

マンガでわかる!イノベーションデザインラボ

contact us

ご相談・お問い合わせはこちら ご相談・お問い合わせはこちら