アイコンについて

アイコンはスペースを節約する。アイコンはくっきり見える。アイコンは難しい問いにすばやく答えてくれる。どうすればもっと気持ちよくできる？ どうやってブランド化する？ どうすればもっと楽しくなる？ 私たちは ♥ アイコンが大好きです。私たちの頭をかき乱し始めるまでは。

アイコンか、アイコンなし

アイコンには 666 通りの味があります。製品のアイコン、建築のアイコン、コンピューターのアイコン、リストのアイコン、ボタンのアイコン、Web やアプリのためのアイコン、iOS と Android のためのアイコン。ツールバー上の、ラベル付きのものもラベルなしのものも、装飾されたものも標準化されたものも、カラーのものもモノクロのものも、フォントの中のものも、PNG のものも、SVG のものも……。

無料と有料のアイコン集は山ほどあり、ベクターもピクセルも、2D も 3D もあります。これらすべてへの対処ルールを書こうとしたら、分厚いアイコン料理本が必要になるでしょう。アイコンはあまりにたくさんあるので、悪魔が「世界中のデザイン問題はこれで全部解ける」とだましてくるかもしれません。

ただし注意してください。デザイン上のあらゆる問いに「アイコン！」と答え続けていると、ある日 Don Norman があなたの家のドアをノックし、開けた瞬間、目をじっと見つめてこう言うかもしれません。

判読不能なアイコンが端末の表面を埋め尽くしているのに、研究者たちは、人が記憶できるアイコンの意味はごく少数にすぎないことをずっと前に示している。[…] どのアイコンが何を意味するのか、誰が覚えていられるだろうか？ 私には無理だ。¹

ここで Don Norman は、かつての雇い主である Apple に説教しています。Apple の iconitis のすぐれた例は、iTunes、Mail、iOS のダッシュボードに見つかります。

Twitter では iTunes のアイコンが Icon Bogeyman としてスター扱いになりました。Apple Mail のカスタマイズ画面もまた良い見本です。ラベルなしで、OS X 用 Apple Mail のこの選択肢のうち、いくつ認識できますか？

ここから何がわかるでしょう？ アイコンはスペースを節約し、優れたアイコンは新鮮に見える、ということくらいです。ですが、自分でデザインして割り当てたのでない限り、その明快さには疑いが残ります。アイコンは千もの単語を表せます。それこそが問題です。千通りの意味を持ちうるものには、曖昧さをなくすために大量の文脈が必要です。ラベル付きで同じ選択肢を見るとこうなります。

ラベルはアイコンを説明します。ラベルを足せば使いやすさは向上します。だからこそ、冷酷な人たちは「ラベルこそ最良のアイコンだ」と言います。理屈の上では、正しいラベルを使えば混乱はありません。なら、アイコンなんて全部やめてラベルだけにすればいいのでは？

機能面では、「ラベルだけ」のデザインは、情報アーキテクトが仕事をきちんと果たしていれば、まさに明快そのものです。ですが、グラフィカルユーザーインターフェースからグラフィックを全部取り払うと、何か不穏なことが起こります。温度が 0 ケルビンまで下がるのです。くっきりも楽しくも見えません。デザイン楽観主義者は、くっきりや楽しさを気にしないかもしれません。でも、ほかの人間はみんな気にします。私たちは iA Writer でこの前提を検証しました。アイコンをすべて消した時期に得られたフィードバックは、力強く「やめて！」でした。

私たちが問うべきなのは、「アイコンかアイコンなし」でも「ラベルかラベルなし」でもないのかもしれません。では、アイコンだけをいつ使うのか、ラベルだけをいつ使うのか。アイコン＋ラベルをいつ使い、いつ使うべきでないのか。見ていきましょう。

アイコンだけ

アイコンは絵です。絵は静的な物体をかなりうまく表せます。はっきりした概念を表す、明確に識別できる対象なら、pars pro toto としてラベルなしで使えます。空港に飛行機、トイレのサインに人型、捨てる文書を入れる場所にゴミ箱、という具合です。

アイコンは具体的な物体をかなりうまく描けますが、行為や抽象概念を描こうとすると、多くのデザイナーが頭を抱えることになります。しかも人間とコンピューターの interaction では、ほとんどのアイコンが結局、行為か抽象概念です。²

行為を絵で表すことは 可能 です。アニメーション化することもできますが、それは気が散ります。より良い方法は、行為をメタファーで表すことです。コンピューターデスクトップの文脈では、プリンターのアイコンは「印刷」、ゴミ箱のアイコンは「削除」、はさみのアイコンは「切り取り」を表します。プリンター、ゴミ箱、はさみは視覚的特徴がはっきりしており、しかもそれぞれ用途が 1 つに定まっているので、意図された行為が明確になります。

より複雑な行為や抽象的な機能では、絵による表現には限界があります。そして、それがすぐ変わる見込みもあまりありません。人間と機械の対話が 40 年続いても、保存、コピー、貼り付けのような基本機能に使える普遍的な記号はまだ見つかっていません。

どんな図像システムにもひとつの問題がある。それは、宇宙の中で画像として個別に表現できるものの数にしか限界がないことだ。³

機能 UI 要素に裸のアイコンを置くと、使いやすさの問題が生じます。⁴ 機能を伝える最良の方法は絵ではなく、正確な言葉、もっと言えば動詞です。

ある人の頭の中にある考えを別の人へ伝えることは、いつだって不完全だが、その中で私たち人間が使える最良の手段は言語であり、書き言葉はその手段に長寿と精密さを与える（私たちは話したことを滅多に修正しないが、この書かれた文は何度も書き直した）。 ⁵

視覚的には、単一の図形記号のほうが、言葉がたくさん並ぶより単純で魅力的に見えます。けれど近づけば近づくほど、歌声は怪物に変わります。それらを読んで理解しようとすると、やがて知らない言語の奇妙な記号のようになり、インタラクションをつかんで頭から食いちぎってしまいます。裸のアイコンは、論理を散らかす代わりに UI の見た目だけを片づけます。暗号の層で機能を覆い隠してしまうのです。

アイコンとは、どの人間の言語でも同じように理解不能な記号だ。どんな言語を知っていようと、アイコンの意味はあらためて学ばなければならない。人類が、わずかな記号を組み合わせるだけでどんな語でも作れる音声言語を発明したのには理由がある。私は、インターフェースにはアイコンを使うべきだと考えているデザイナーに何人も会ってきた。そこで私はこう聞く。「それは本当に設計しうる最良のインターフェースなのか、それとも習慣と慣習から生まれたものなのか？」 ほとんどのデザイナーは、足元で進む劣化を無視したまま、いまのパラダイムをただよろよろ進んでいる。⁶

アイコンは流行っぽく見え、空間の問題を表面的には解決します。もちろん、裸のアイコンを使いすぎる罪は Apple だけではありません。Google の Material Design も独自記号だらけです。比較として Gmail を見てみましょう。

何が見えるでしょう？ Gmail のアイコンは単純そうに見えますが、理解するには二度考えさせられます。もし 読める なら、ですが。少し集中すれば、何を意味しているのか推測できるかもしれません。空間記憶は時間とともに助けになりますが、それでもアイコンは短期記憶にも長期記憶にも残りにくいのです。メールアプリでは、注意を向けるべきなのはインターフェースを解読することではなく、テキストを理解し、書くことです。

でも、ちょっと待ってください！ Google は何でも測っているんでしょう？ 彼らはきっと何をしているかわかっているはずだ。Google は科学的だ！ Google はアイコンだけのアプローチをとっているし、Google が間違うことなんてない。だからアイコンは正しいに違いない！ そうかもしれません。けれど、Google や Facebook にとって正しいことが、私たちにとって正しいとは限りません。あとで見るように、Google がラベルよりアイコンを標準にするのには、自然科学以外の理由があるのかもしれません。⁷ とはいえ、Gmail には裸のラベルもあります。

ラベルだけ

画像はさまざまに解釈できます。文脈しだいで、どこにでもある虫眼鏡でさえ「検索」にも「拡大」にも読めます。単語の意味は文脈に依存しますが、綴りは 1 通りしかありません。では、アイコンをすべてラベルに置き換えたらどうなるのでしょう？ 論理的には、ラベルだけのほうがアイコンだけよりうまくいくはずです。Gmail の設定では、アイコンだけのバーをテキストだけの表示に切り替えられます。

見た目は賢くて上品で、機能的にも明快です。もちろん、よく考え抜かれたラベルを使えば、という条件つきですが。問題は、ラベルだけのアプローチにすると、言葉の使い方とレイアウトが面倒になることです。

ラベルは、何をするかを正確に伝えてくれます。機能を正確に、文脈に応じて、ラベルははっきりとわかりやすくします。ラベルは合理的です。合理的に整理された機能とラベルは、人間と機械の対話の核心です。

アイコンだけは感情的な選択です。よくできたアイコンは、ポジティブな感情的効果を持ちます。感情的なデザインの質は測定できませんが、だからといって実在しないわけではありません。

機能し、理解でき、使える製品を作るだけでは足りない。人々の生活に喜びや高揚、楽しさ、そして美しさをもたらす製品を作らなければならない。—Don Norman, The Design of Everyday Things

人間は合理的であると同時に感情的な存在です。「脳は情報を処理したり、知識を取り出したり、記憶を保存したりしない。要するに、脳はコンピューターではない。」⁸ アイコンの使いやすさについて繰り返し証明されてきたことがあるとすれば、それは「アイコン＋ラベルは、アイコン単独やラベル単独よりうまく機能する」ということです。

アイコン＋ラベル

アイコン＋ラベルは、アイコンの感情的な利点とラベルの合理的な利点を両方持ちます。ラベル付きのアイコンは常に機能します。アイコンが失敗しても、ラベルが説明してくれます。では、なぜいつも勝ち組の組み合わせを選ばないのでしょう？

問題は、アイコン＋ラベルが妥協案だということです。アイコンの感情的な利点も、ラベルの合理的な単純さも削いでしまいます。スペースも節約できず、見た目をより穏やかにするわけでもありません。縦方向のスペースは増えるし、アイコン単独かラベル単独よりもノイズは増えます。

感情的には、私たちはアイコンのほうを好みます。合理的には、すべてをラベルに置き換えたい。理論上は、アイコン＋ラベルは安全です。実践では、デザインに銀の弾丸はありません。

安全なデザインはありませんが、より良い妥協と悪い妥協はあります。私たちは人間のためにデザインします。人間は感じ、考えます。とはいえ、あまり相対主義に寄りすぎないようにしましょう。

理論と実践

どんな技術でもそうですが、合理的で機能的な構造の上にユーザーインターフェースを作るのは助けになります。デザインは自然科学ではありません。科学や計測の恩恵を受ける実践ですが、デザインの総合的な品質を理論だけで客観的に評価することはできません。ユーザーテストや分析はデザイナーの代わりにはならず、その仮定を検証するものです。製品にはデザイナーが前もって考えられる以上のものがあり、デザインには私たちが計測できる以上のものがあります。この「それ以上」は、それを使う人間と話してはじめて届くものです。

人間と機械の相互作用は、合理的な構造の上に築かれるべきです。そして製品が進化するにつれて、人間はあらかじめ計算できない存在でありながら、いつでも話しかけられる存在でもあることを考慮しなければなりません。アイコン、色、リズム、余白、タイポグラフィ、そしてデザインを楽しいものにするあらゆる美しい要素が、人間と機械の相互作用をよくするのはこのためです。それらは、より非合理的に、より人間的にしてくれます。

経験則

デザインが空っぽで冷たく感じるから、あるいは思ったほど機能しないからといって、アイコンを使う理由を探してはいけません。アイコンは構造的に壊れたデザインを直しません。アイコンはデザインプロセスの最後の最後に加えてください。ワイヤーフレームを作っている途中でアイコンをいじってはいけません。絵は 1000 の単語を表せますが、強い情報アーキテクチャは、正しい概念を見つけて、正しい文脈に置きます。感情に訴える前に、まず理屈を固めなさい。

アイコンはセクションや機能を表し、ラベルが簡潔で明快な言葉で伝えるべき内容を示します。それがどれだけ明確に伝わるかは、文脈の中のテキスト としてどれだけ簡潔かにかかっています。アイコンが表す概念は、使われる文脈の中で明快かつ簡潔でなければなりません。いくら完璧なアイコンでも、表している概念が曖昧だったり、文脈がぼやけていたりすれば、役には立ちません。だから、正しいアイコンや、その前に正しい視覚言語を論じる前に、自問してください。そのアイコンは何を表しているのか？ その概念は正しいのか？ 明快か？ 文脈の中で機能しているか？ アイコンは意味を装います。摩擦なくさまざまな概念を載せられるからです。文脈の中の言葉のほうが、ずっと変えにくい。言葉の使い方は、ピクトグラムよりも規制されています。

構造がしっかりしていて、アイコンや delight & Co. が出番を迎えたら、この単純なルールに従ってください。必要なだけ少なく、でもそれより少なくはない数のアイコンを使うこと。

使うアイコンは最大限の注意を払って扱う必要があります。アイコンを正しくするために、いくら時間をかけても足りません。アイコンはそれ自体で認識できなければならず、表している概念を明確に示し、さらにほかのすべてのアイコンや概念と文脈の中でうまく連携しなければなりません。

その意味では、アイコンは普通の文章における形容詞や副詞に少し似ています。全部削除しても、文章が自動的に文学的傑作になるわけではありません。余計なものを消し、必要なものを見つけ、曖昧で装飾的なものを正確なものに置き換える必要があります。

では、アイコンを殺す勘を鍛える準備はできましたか？ この 6 か月、この文章に取り組みながら、私たちはあなたが鍛錬できるようアイコンシューティングゲームを作ることにしました。アプリのための記事を書く人もいれば、記事のためのアプリを書く人もいるのです。

初めてのゲーム作りには、語るべきことがたくさんあります。私たちは たくさん学びました。もしこれで私たちの狂気のすべてだと思っているなら、最近作った 2000 個のアイコン入りフォントはまだ見ていません。それは アイコンで書く ことを可能にします。この話はまた今度。とりあえずゲームを見てください。無料です。