UIデザインにおけるアイコンの重要性

UIデザインにおける「アイコン」は、アクションやコンテンツを直感的かつ素早くユーザーに伝えるための記号や絵柄であり、デザインにおいて大切な要素の一つです。また、ユーザーに意味を正確に伝える必要があるからこそ、機能やアクションをどのようにアイコンで表現すればいいか、サービスの世界観に合っているか、などと悩むデザイナーも多いと思います。

今回はウェブサイトのUXを高めるアイコンのデザインについて、少し掘り下げていきたいと思います。

1. ピクトグラムとの違い

まずはじめに、アイコンとよく似たものとして「ピクトグラム」が挙げられます。ピクトグラムは、言葉で説明をしなくても情報が伝わるよう絵で表現したものです。年齢、障害、人種、宗教、環境などに左右されず万人が共通で理解できる情報提供手法として、日本を含め世界中の公共交通機関、観光施設等で広く掲示されています。つまり、ピクトグラムは「世界共通の言語」なのです。

一方、アイコンの立ち位置は「記号」です。物事や対象の形を、簡略化し記号として表現するものを、アイコンと呼びます。また、初心者がコンピュータインターフェースを操作するのを容易にするために、機能やアクションを連想させる形を表した図形でもあります。つまり、表現したい対象の、見た目もしくは性質の概念を記号化したものをアイコンと呼ぶようですね。

2. UIにおけるアイコンの重要性

Excelの画面より

例えば、皆さんはこの左上にあるフロッピーを模したアイコンが何を意味しているか、分かりますか？
これは、フロッピーにデータを書き出して「保存する」という性質を記号化したものです。

ですが、現在フロッピーにデータを保存をすることは滅多にありません。それに伴い、保存機能を表すためにフロッピーのアイコンを使うサービスもあまり見かけなくなりました。フロッピー＝データを保存するものという情報を知っているユーザーが減り、直感的に意味が伝わりにくくなってきたからでしょう。

Excelの画面より

上記の例を見てわかるように、アイコンはあくまで「記号」なのです。だからこそアイコンにはフロッピーのように事前知識が必要なものもあり、またそれを知らないユーザーには言葉で補足する必要が出てくる場合もあるのです。

時代背景や知識に左右されるのであればアイコンなどいらないのでは？とも考えてしまいますが、視覚から入る情報はユーザーにとって意味を認識しやすく、効果的に使えば直感的で理解しやすいデザインへとつながる場合が多いのです。

また、アイコンは文字に比べスペースを要さず、デザインの幅を広げてくれます。身近にある物をメタファーとして使用することで親しみやすさをもたせることができるため、ユーザーにとってもデザイナーにとっても、アイコンは重要な要素なのです。

3. UIにおけるアイコンの役割

UIにおけるアイコンには大きく分けて2つの役割があります。ユーザーに素早く情報を認知させる役割と、サービスの魅力を醸成する役割です。

ユーザーに素早く情報を認知させる

ユーザーに素早く情報を認知させる役割の例として、iPhoneの電話アプリを思い浮かべてみましょう。

電話アプリでは、電話をかけるアクションを受話器のアイコンで表しています。フロッピーが保存という性質を記号化したものであったのに対し、受話器は固定電話の見た目を記号化しています。面白いことに、固定電話の受話器を見たことがない世代も、受話器が電話であることは理解できます。私たちはいつの間にか、こうした概念を学習しているのです。

サービス自体の魅力を醸成する

では、先ほどの例がより早く認知させる例であれば、サービスの魅力を醸成する役割をもつアイコンとはどういうものなのでしょうか。

例えば、アプリにおけるホームアイコンの例をいくつか見てみましょう。

左からInstagram、Twitter、マクドナルドのアプリ

Instagramは基本的な家のアイコンとそう代わりなく、とてもシンプルです。アプリ自体がコンテンツを優先しているため、写真などを阻害しないように極力ミニマムに記号化したのだと思われます。

Twitterは一見基本的な家の形をしているように見えますが、これはおそらくTwitterのロゴに使われている鳥の家を表現しています。ホーム＝戻るところという概念と、鳥の家をうまく組み合わせたユニークなアイコンですね。

マクドナルドは、店舗と特徴的な看板を表現したものをホームアイコンにしています。文字での補足がなければ、ユーザーはこれがホームアイコンだと気づかない可能性もあります。しかし、これはブランドイメージに合わせて最適な表現を行っているため、ユーザーの心を掴みやすいのではないでしょうか。

つまり、ブランドのトンマナとの一致、あるいはアイデンティティを組み合わせたアイコンは、サービスの世界観を強くするのです。

では、結局UIにおけるアイコンの役割とは、何なのか。

ユーザーに表現したい対象の概念を直感的に理解させる記号であると同時に、サービスやコンテンツ独自のコンテキストを付け加えたものなのではないかと、私は思います。

4. アイコン制作で気をつけること

アイコンは直感的に分からないことを避ければ、大体の場合は伝わります。

例えば、検索なら「虫眼鏡」を、メールを表現したいのであれば「封筒」をアイコンに選べば、多くのユーザーにとって直感的に理解しやすいものになります。これは、アプリやサービス、日常の中で、ユーザーがアイコンに触れて、機能を理解し、使っているからです。

だからこそ、アイコンを作成する際は、サービスの想定しているユーザーがよく使うアプリや、物を元に考えてみると良いでしょう。それでもアイデアや該当するメタファーが出てこない場合は、当てはまりそうな物をかたっぱしから連想してみると意外とヒントは転がっています。

素早く認知させたいのであれば、サイズを小さくしても分かるよう意識しましょう。余分な要素を削ぎ落としていくことで、視認性や明瞭性を担保できるだけでなく、余白が生まれ美しいシルエットを作ることもできるでしょう。

また、ウェブサイトの魅力を引き出すには、サービスのブランドやトンマナとの統一感も大切です。ウェブサイトの印象をかっこよくしたいのか、可愛くしたいのか。それらを軸に、角はスタイリッシュにするのか、まるみを帯びるのか、線は太くするのか、細くするのかなど、アイコンのディティールを調整しましょう。角々しいとシャープな印象になり、まるみを帯びれば柔らかい印象になります。線だけで構成するのか、ベタ塗りのアイコンにするのか、その差でも印象は左右されます。

最終的なディティールの調整については、サイト全体のタイポグラフィやデザインとも大きく関わってくるため、全体を俯瞰しながら作り込むと良いでしょう。

https://material.io/tools/icons/

例えばGoogleのアイコンは、それだけを見ても魅力的ですよね。このように、UIのアイコンも最終的にブランディングに繋がっていると理想的かもしれません。

5. さいごに

アイコン制作におけるコツはたくさんありますが、良いものを作るにはブランドやサービスをどうしたら魅力的に見せられるか、どうしたらユーザーが直感的に理解できるかなど、使う人の気持ちにも寄り添ってみるのが一番の近道ではないかと思います。

次回は、ブランドやサービスをどのように魅力的にデザインするかを踏まえたサービスサイトのリニューアル話を書きたいと思います。お楽しみに！