Webサイトにおけるアイコンの役割と使いドコロ

春はあけぼの。こんにちは藤原です。
ユーフーが終わりルーハーのツーキセが到来しましたね。 札幌はまだ寒いです。今回はアイコンについて、吟じます。

「物事を簡単な絵柄で記号化して表現するもの」
https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3

最近のWebサイトではアイコンフォントの台頭で、アイコン自体を製作する手間も少なく楽になってきました。
ですが受託でのWebサイト製作では、独自のデザインでアイコンを作成する場合もしばしばあります。アイコンフォントでカバーできないアイコンやサイトのデザインテイストに合わせたアイコンを作成したりなど。 アイコンの使いドコロや本来の役割、アイコン化する目的を間違うと、正しく情報を伝えることができなくなります。そんなアイコンの話。

アイコンは、テキスト（ラベル）の補完です。
先にも書いたとおり「物事を簡単な絵柄で記号化して表現するもの」です。 アイコンを採用するにあたっては必ずアイコンのもとになるテキスト（ラベル）があり、あくまでそのテキストの補完としての使用します。 すべてがそうではありませんが、Webサイトにおけるアイコンは、アイコンがメインではありません。 テキスト（ラベル）があってはじめて情報として成立します。 それでは具体的に。テキスト（ラベル）がない場合、どうでしょう。

ヤフーのWebサイトのメニューのテキストを隠しました。 なんのメニューだかわかりませんね。

googleさんも独自のアイコンで何がなんのサービスかわかりません。

App Storeのフッタアイコンも同じくテキストを隠すと、うむ、わからん。 （Webサイトじゃないけど・・・）

正しく情報を伝えるための理想のアイコンは、アイコンだけでその意味がわかるようなデザインです。
「国籍・言語問わず、理解できる」で
誰が見てもだいたい想像がつく、連想できるようなアイコンです。

アイコンと似たもので、ピクトグラムというものもあります。
空港の施設案内版や掲示板に使われたりするピクトグラムなんかは、「国籍・言語問わず、だいたいの意味が理解できるもの」で、わかりやすいなと思います。

出発口が飛行機が飛び立つピクトで表現されていてひと目でわかりやすいです。

とはいえ、ピクトだけで完全に理解できる、というのはむずかしく、必ずテキストとセットでないと情報を正確に伝えるには不十分といえます。

道路標識もピクトグラムといえますが、下記の標識の意味、わかりますか？

正解は歩行者優先です。
このピクトだけだと変質者が子供を連れ去る絵にも見えますよね。

アイコンは視認性とデザイン性のアップに大きく貢献します。
アイコンをつけることによって目につきやすくなり、ビジュアルで記憶しやすくなるため視認性が高くなるメリットがあります。 またアイコンが加わると印象がガラリと変わり、装飾・にぎやかしにもなります。 適切な箇所でアイコンを使用することによって情報の閲覧性が上がる効果が期待できます。 ※デザインをにぎやかしたいためだけに、安易にアイコン化することは意味のないデザインになってしまうので要注意です。

情報・ビジュアルの整理に使用するのがベネ（良し）です。

アイコン化がむずかしいものもあります。無理にアイコン化してしまうと
ビジュアルで想像させるのにノイズになってしまい誤解を与える可能性もあります。 テキストから連想できないようななアイコンデザインはNGです。 アイコンの本来の「物事を簡単な絵柄で記号化して表現する」という意味から外れてしまい、本末転倒です。 何がなんでもアイコンにしたい、という依頼・要望をいただくこともありますがアイコン化が難しく、情報を正確に伝えられないのであればアイコン化しないという判断も必要です。

マップなんかがそうですが、デザイン上マップにはテキスト（ラベル）でこまごま書かれると視認性がわるくなるので、アイコンだけ置いてあったりします。ですが、そのアイコンが何かわかるように、必ず凡例があります。
凡例があることによってマップの視認性を落とさずに情報を伝える、ということが成立しています。

アイコンのデザインでWebサイトの印象が大きく変わります。
サイトのデザインにあわないアイコンにすると、ちぐはく感がでてしまいます。 また、人は色で物事を連想することがありますので、アイコンの色も重要になってきます。 色使いによって意味がかわるアイコンも中にはあります。 トイレの男女のアイコンがあったとして赤と青、青と赤、入れ替わるとどちらが男女かわかりにくいですよね。 正しく情報を伝えるためにも、配慮が必要です。

・アイコンは、あくまで情報をわかりやすく伝えるための補完。
・言語とわず意味が伝わるアイコンが理想。

・装飾のためだけにアイコン化しないこと。

・アイコン化がむずかしい場合は、アイコンにしない判断も。

・情報・ビジュアルの整理に使用する。適切な箇所で使用する。

ワナビィィィ!