アイコン（icon）とは、物事や操作を、小さな絵で表したものである。画面の中で、ボタンや、メニューの目印として使う。
たとえば、虫眼鏡の絵は、検索を表す。家の絵は、ホームを表す。多くの人が、説明なしで分かる。ただし、そうした絵は、ごく一部である。
よいところ
ニールセン・ノーマン・グループ（NN/g）の2014年の記事は、アイコンのよいところを、次のように挙げている。
- 押しやすい。ほどよい大きさがあるので、指でも、マウスでも、狙いやすい。
- 場所をとらない。たくさん並べられる。
- よく知られたものなら、ひと目で分かる。
- 言葉を翻訳しなくてよい。ただし、文化による違いに注意する。たとえば、ポストの形は国によって違うが、封筒の形は、どの国でも同じである。メールの絵に封筒を使うと、国をまたいで伝わりやすい。
- 見た目をよくできる。同じ絵柄でそろえれば、サービスの統一感も出る。
みんなが分かるアイコンは、少ない
この記事が書かれた当時、ほぼ誰もが分かるのは、ホーム、印刷、検索の虫眼鏡くらいだった。ほかの多くは、サイトごとに意味が違った。
- ハンバーガーのアイコン（線が3本）は、当時すでに、メインのメニューを表すことが多かった。ただ、リストの表示に使うアプリもあった。
- ハートと星は、お気に入り、ブックマーク、評価など、サイトによって意味が違う。同じ絵でも、保存できるかどうかが違うことがある。
- ある調査で、閲覧の履歴を、時計の絵で表したサイトがあった。絵は時計と分かったが、意味が伝わらず、参加者の誰も押さなかった。
意味が分からないアイコンは、せっかくの機能を、使われないままにしてしまう。
ラベルを付ける
アイコンには、文字のラベルを付ける。NN/g も、そう勧めている。
- ラベルは、いつも見えるようにする。マウスを重ねたときだけ出す作りは、手間が増える。タッチ画面では、そもそも、うまく働かない。
- よく知られたアイコンでも、ラベルを付けたほうが、安全である。
- ナビゲーションのアイコンには、特に必要である。
マウスを重ねたときに出る説明は、ツールチップである。
画面の大きさでも、変わる
スマートフォンでは、画面が小さく、アイコンが目立つ。ヘッダーでは、ハンバーガーのアイコンが、横幅の20〜25%ほどを占める。同じ大きさのままデスクトップへ移すと、あるサイトでは、横幅の3.5%ほどになった。ほかの内容に紛れて、見つかりにくい。画面に余裕があるなら、メニューを、隠さずに見せる。
つくるときの目安
- 先に調べる。競合のサービスや、対象の機器で、よく使われているアイコンを確かめる。
- 絵は、単純にする。細かい部分は、小さいと見分けにくい。
- 5秒ルール。5秒考えても、ふさわしい絵が思いつかないなら、アイコンでは伝わりにくい。
- 分かるかを、試す。何を表すと思うかを、聞く。
- 覚えられるかも、試す。先に意味を教えておき、数週間後に、同じ人に、意味を覚えているか聞く。
