アイコンとインターフェース

普段アプリやWebサイトなどで当たり前のように目にしているアイコン。そのアイコンについての面白い記事をデザイナーSébastien Desbenoitが“Icons And Interfaces”というタイトルでMediumに書いていました。そもそもアイコンとは何なのか、そのメリットとデメリット、そしてアイコンの標準化の必要性などが語られていたので、今回MEMOPATCHで翻訳してご紹介します！

（以下、”Icons And Interfaces”の翻訳）

私たちはなんとなしにインターフェースをアイコンで埋め尽くしてしまいます。けれども適切なアイコンを選んだり、デザインしたりすることは実は簡単なことではないのです。

アイコンとピクトグラム

そもそもアイコンとは何なのでしょうか？アイコンはあるコンテクストの中で使われる、ある種のスタイルを持ったピクトグラムのことです。

ピクトグラム

ピクトグラムとは、コンセプトをビジュアル化したもので、それはシェイプの組み合わせで成り立つ、意味を持ったサインです。例えば「光」をビジュアルで表現するとします。線、丸、四角で出来た「電球」と、より認識しやすくすために光の線を付け足してみると、まさにピクトグラムになりませんか？

完璧なピクトグラムは、普遍的で、明確に理解されうるものです。しかし、文化や教育、仕事の習慣、知識などが私たちの標識の理解の仕方に影響を与えており、誰にでも理解出来るようなピクトグラムは存在しないでしょう。

スタイル

アイコンはピクトグラムをスタイリングしたものです。ポイントとなるのは、概念的なミニマリズムの純粋さと、そのスタイルです。アイコンはその周りのビジュアルに適応するように作られるべきで、持続可能な開発について語っているWebサイトで使うなら、白熱電球よりも低エネルギーの電球の方が合っているかもしれません。何か情報を加えるために形を変更した場合には、そのスタイリングがコンセプトを曖昧にしていないのかよく注意する必要があるでしょう。　

コンテクスト

アイコンには他にも必要なものがあります。それはコンテクストです。ピクトグラムが完璧であったとしても、多様性には影響されます。それは悪いことではなく、ピクトグラムが複数のコンセプトを持ち得るということなのです。

例えば、電球は人口の光を意味することもできますが、他にも「あ、良いアイディアを思い付いた！」といった意味にもなり得ます。ユーザーにわかってもらえるようなコンセプトを見つけるためには、コンテクストに合わせてアイコンを調整する必要があるでしょう。スイッチだったら、それは「このライトのスイッチを入れてください」という意味になるはずだし、雲形の吹き出しの中だったらそれは「アイディアを思い付いた」という意味になるはずです。

アイコンをどうやって作るかについて知ることは素晴らしいと思います。しかしなぜ私は、またはクライアントは、こういったビジュアル要素を使いたがるのでしょうか？答えはとても簡単です。それはただアイコンが素晴らしいからです。

アイコンは素晴らしい

アイコンは理解を早める

あらゆる局面において、イメージは文字よりも早く理解することができます。私のサイトにおけるシンプルで効果的な“ホーム”アイコンは、ただ“ホーム”という言葉で示すよりも早く判断することが出来るでしょう。脳は文字を1文字ずつ読んでいるのではなく、また全体の形から判断しているわけでもないのです。言葉を判断するプロセスは複雑で、神経学者は今でもどうやって脳が文字を読んでいるか研究している最中なのです。

アイコンについて言えば、認識はピクトグラムへの理解によります。もしコンセプトと形がすでに関連付けられていたら、アイコンはラベルよりも早く理解することができるでしょう。この連想は絵とアイディア（物理表現という言葉の方がより合ってるかもしれません）との強い繋がりが必要ですが、一度ピクトグラムとアイコンの繋がりが作られると、それ以降は直感的に理解することが出来るようになります。ISO(国際標準化機構）は、グラフィックシンボル委員会（ISO/TC 145）によって定められた、ISO 7001として知られるピクトグラムのカタログを提供しています。こういった連想の中には、なぜ理解できない人がいるのかわからないくらい明らかなものもあります。「この女性のシルエットはどっからどう見たってトイレのドアだろう！」

もしこの繋がりが出来ていなかったら、脳はコンセプトとピクトグラム、アイコンのコンテクストを再構築する必要があります。そして言うまでもなく、それは文字を読む速度より遅くなるでしょう。

もし私がアイコンを理解してもらいたければ、ピクトグラムの「コンセプト」を見つける必要があります。これらの情報は全てピクトグラムに対する正しいコンテクストを確実にするのを助けてくれます。 ISOのピクトグラムは、ISOが定めた基準を満たした場合のみ標準として取り入れられます。世界中からユーザーテストの結果が集められ、67%の人々がほとんど疑うことなく理解しなければなりません。反対の意味に取った人の割合は10%以下で設定されています。このテストを通過したピクトグラムのみが標準リストに追加されるのです。もっと小さなターゲットに対して、USのオフィスでは85%の理解率と反対の意味での理解を10%以下で設定しています。理解率は明らかにターゲットに寄るものであり、世界でのインターフェースの理解率というものは存在していません。ユニバーサルなピクトグラムを作るには数年掛かるでしょう。

記憶のアンカー

コンセプトとその表現の繋がりを何度も何度も繰り返し作ることは、ユーザーに理解させ、アイコンを“学ぶ”ことに繋がります。こういったプロセスを、１度だけ訪れることを想定しているサイトで、ユーザーにさせることは現実的ではないでしょう。けれど毎日使うようなインターフェース、例えばプロフェッショナルなダッシュボードなどではとても役立つと思います。新しいリンクを作ることは新しい言葉を学ぶようなものです。時間も掛かるし、説明や繰り返しも必要ですが、一度覚えてしまえば、アイコンは記憶を呼び覚ますアンカーとなり、ユーザーが記憶の読み込みに掛かる時間を減らすことができます。そしてこれらの要素はユーザーにアプリケーションを直感的に使ってもらうための手助けとなるでしょう。

インターフェースに一貫性を与える

アイコンが素晴らしいと言うもう一つの理由は、スタイリングの部分です。ピクトグラムは何のスタイルの情報も持ちませんが、アイコンはユーザーインターフェースに一貫性を与えなければなりません。ロゴやブランドアイデンティティ、アートディレクションからインスピレーションを得てアイコンをスタイリング出来るでしょう。こうすることでブランドとWebサイトの一貫性をより強めることができます。

これらの理由から私はアイコンが優れていると思います。けれどアイコンがインターフェースを台無しにすることだってあるのではないでしょうか？

アイコンには弊害もある

アイコンには悪い面もあるため、一切アイコンを使わないブログやコーポレートサイトもあります。これらのサイトはアイコンなしでも素晴らしく、むしろアイコンを余分なものとまで感じさせてしまうのです。良い例としてはInfomation AcrcitectsのWebサイトでしょうか。

アイコンはイラストではなく、シグナルである

技術的な観点から言えば、アイコンは画像です。画像として、アイコンはイラストです。そして例えばThe Noun Projectのホームページには、ヘッダーを飾るものとして電車のアイコンがあります。でもこれはまだアイコンなのでしょうか？

僕はこの場合、この電車はアイコンとしての地位を失っていると思います。これはイラストとして使われているただのサインです。ドライブするときに、交通標識は進むべき方向を見つけるのを助けてくれます。アイコンはユーザーを簡単にナビゲート出来るように、インターフェースにおいてシグナルとして使われるべきなのです。

意味：それはトラップ

私は表現とコンセプトの繋がりがユニークで共通のものであるかどうかは確かではありません。例えば、Nokiaはコンパスのピクトグラムを地図のアプリケーションにぴったりだと考えました。実際、Nokiaの地図はユーザーが正しい道筋を見つけるのを助け、「道を見つける」というコンセプトを示すにはコンパスは良いやり方だと思います。あぁでも悲しいことに、GoogleとAppleはコンパスのアプリを持っているのです。そう、本当に北と南という方角を教えてくれるという本物コンパスのアプリです。ユーザーがアンドロイドからWindowsのOSがインストールされているNokiaに移行したとき、その人がピクトグラムを見て地図アプリだと推測できるでしょうか？

さらにそれはAppleとiOSにとっても厄介です。なぜなら同じピクトグラムを同じメタファーとして、Safariとコンパスという2つの異なったアプリに使用しているからです。機能の情報はこれらのアイコンのスタイルに頼るしかないのです。

アイコンを使うべき？

私は昔、インターフェースにぴったりで、見た目の良いものになるようアイコンのスタイルにだけ集中していました。でも私は間違っていたのです。アイコンを使用することは、いつも下記のようなリスクを伴います。

• それは理解されるのか？
• それは正しく理解されるのか？
• それは本当にインターフェースのユーザーエクスペリエンスを向上させるのか？
• それは使うだけの価値があるのか？

現在、プロセスは長くなってきています。多くの場合、私はアイコンを全く使いません。ただし目的、ターゲット、デザインに掛けられる時間とその他全ての要因によって、Webサイトごとに異なる正解があるはずです。

最後に

ピクトグラムを選ぶとなると、深く考えることなしにたくさんのアイコンに使えるサインを見つけることができます。しかし私が標準的だと思う全てのピクトグラムを含めたとしても、Webのピクトグラムは本当に標準化されていないと感じています。例えば、位置情報のピクトグラムはiOS、Nokia、Googleなど地図アプリによって異なります。

同じように、「ナビコン」も頻繁に議論されています。このピクトグラムの使用はあらゆるアプリケーション、Webサイトに及んでおり、最近ではYoutubeやGoogle +、そしてGoogle Chromeもこのアイコンを採用しました。この３つの線はメニューアイコンとして使われますが、テキストやリスト、そしてハンバーガー（！）としてだって使われることだってあるのです。

このアイコンはこういったインターフェースを頻繁に使うユーザーには完璧に理解されていると思いますが、誰もが絶対に理解できるとは言いがたいでしょう。トイレのピクトグラムのように、私たちは説明した後に理解できるようなスタンダードを生み出しているのでしょうか？私はこれに対する答えを持っていないし、例えばISOスタンダードのようなテストをWeb向けに最適化して、慎重に検証される必要があるでしょう。

私たちにはインターフェースに対する一貫した辞書が必要だと思っています。つまり、Webにおけるピクトグラムの標準化を始めるということです。これはユーザーにすでに理解されているピクトグラムのリストで、ナビゲーションとデザインの決定を簡単にしてくれるでしょう。優秀なグラフィックデザイナーはこういったピクトグラムをどうやってスタイリングしたら美しくなるかを知っているはずです。世界のWebにおけるユーザーエクスペリエンスを高めるために、この標準化を始めてみてはいかがでしょう？

（翻訳ここまで）

いかがでしたでしょうか？何気なく使われがちなアイコンですが、こうして見てみるとメリットだけではないことや、使う前に一度よく考えてみる大切さがわかりますね。これからも面白い記事があればMEMOPATCHで翻訳していきますので、何かいい記事がありましたらぜひ教えてください！