アイコンは装飾ではなく語彙である

インターフェースのアイコンは言語のように振る舞います——そして、その習熟度のデータは謙虚にさせられるものです。ラベルなしでユーザーが確実に認識できる語彙は、およそ十数個の記号にすぎません。虫眼鏡、歯車、ゴミ箱、プラス、X、家、戻る矢印。その十数個を超えたものは、よくて地域方言、悪ければ私的な発明です。制作上の原則はそこから直接導かれます。原則としてアイコンにはラベルを添える、アイコンのみで使う予算は真の普遍記号に投じる、すべてのグリフを1つのファミリー・1つのグリッドから描く、1つのメタファーを1つの動作に製品全体で結びつける——そして、その概念に認知された記号が存在しないなら、言葉を使う。ラベルはデザインの敗北ではありません。謎かけを出荷することが敗北なのです。 {.answer-block}

TL;DR

普遍的なアイコンの語彙はおよそ十数個です。 検索、設定、削除、追加、閉じる、ホーム、戻る、再生——これらは単独で意味を運びます。それ以外のほぼすべてはテキストを必要とします。ユーザーの推測がばらつくか、そもそも成立しないからです。
アイコン+ラベルが既定であり、アイコンのみは勝ち取るものです。 ラベルのないアイコンを正当化するのは、真の普遍性か、限られた領域での高頻度の反復（ユーザーが毎日操作するツールバー）であって、モックアップ上での見た目の端正さではありません。
1つのファミリー、1つのグリッド、1つの線幅。 混成したアイコンセットは、ユーザーが理由を言語化する前に「壊れている」と読み取られます。3種類の書体が混ざった段落と同じです。
1つの動作に1つのメタファー、1つのメタファーに1つの動作。 ある画面で鉛筆が編集を意味するなら、鉛筆はどこでも編集を意味します。鉛筆が編集するなら、他のどれも編集しません。
記号が存在しないなら、言葉を使いましょう。 「同期状態」「ワークスペース」「インサイト」といった抽象的な概念には、ユーザーが認識できるアイコンは存在しません。それを発明する行為は、ラベルなら何のコストもかからなかったところに謎かけを製造することです。

ユーザーは実際にいくつのアイコンを認識できるのか

アイコノグラフィーの出発点にある過大評価は、絵は万国共通の言語だという思い込みです。1世紀にわたるピクトグラムの実践は、そうではないと語っています。記号が普遍になるのは緩やかで、膨大な反復接触を通じてであり、インターフェースにおいてその閾値を越えた集合は小さいのです。虫眼鏡は検索を意味します。歯車は設定を意味します。ゴミ箱は削除し、プラスは追加し、Xは閉じ、家はホームへ戻り、三角は再生します。もう少しだけ——鉛筆、南京錠、ベル、ダウンロードを表すトレイに入る矢印——がそのすぐ下に位置し、文脈の中でなら多くの人に認識されます。

そしてその先は崖です。共有の記号は1つではありません。Appleは上向き矢印の付いた箱を描き、Androidは3つの点をつないだ形を描きます。どちらも、もう一方のプラットフォームで暮らすユーザーには確実には読み取れません。ハート、星、ブックマークはいずれも「これを保存する、たぶん」を意味しますが、その定義は製品ごとに異なり——お気に入り、いいね、あとで読む——記号だけでは、自分がどの契約に入ろうとしているのかをユーザーに伝えられません。ハンバーガーメニューは長年の遍在によって認識されるようになりましたが、示すのではなく隠すという性質ゆえに、いまなお確実にエンゲージメントを抑制し続けています。そして、こうした係争中の事例の先には外洋が広がります。「ダッシュボード」「インテグレーション」「ワークスペース」、あるいは自社の製品が前四半期に発明した概念に、ユーザーに認識される記号は存在しないのです。

どのアイコンについても、正直な設計上の問いは「この絵はこの概念を表現できているか」ではありません——描いた本人にとっては、どの絵も表現できています。問うべきは「初めて見るユーザーのうち何割が、ラベルなしでこれが何を意味するかを言えて、しかも全員が同じことを言うか」です。そしてこの問いは半日で検証できます。文脈を剥ぎ取ったグリフ単体を5秒ほど見せ、「これは何をすると思いますか」と尋ね、収束した回答だけを認識として数えるのです。公共記号における古典的な理解度の基準はおよそ3分の2の一致であり、発明されたインターフェースアイコンの多くは、ばらばらの推測となって返ってきます——それは、言葉を使えというテストからの答えです。十数個の記号については認識率は高く出ます——もっとも、最も厳しい認識テストは、十数個ですら甘いと論じています。それ以外のすべてについては、認識率は低いものと想定して設計してください。実際に低いのですから。

ラベルの原則

既定の構成は、アイコンと可視のテキストラベルの組み合わせです。アイコンは素早い認識と走査性を買い、ラベルは実際の意味を運びます。両者が揃って初めて、慣れた常連ユーザーと初めての人の双方に応えられます。ラベルのないナビゲーションには名前が付いています——ミステリーミート——そしてそれはUIを記憶力テストに変え、推測を外すたびにナビゲーションの往復というコストが発生します。

アイコンのみは意図して使うべき予算であり、正当な購入先は2つあります。慣例的な位置にある真の普遍記号：ヘッダーの虫眼鏡、閉じられるパネルのX——慣例そのものがラベルとして働きます。限られた領域にある高頻度のツール：ユーザーが1日に何十回も操作する書式ツールバーのように、ラベルが作業領域を圧迫し、反復が1セッションのうちにセットを教えてくれる場所です——ただし、アクセシブルな名前は常に付け、ポインタが存在する場所には必ずツールチップを添えます。タッチにはホバーがないため、初回のフォールバックはラベルか長押しでの開示になります。「反復で学べる」が語っているのは10回目の使用であって、1回目ではないからです。

アイコンのみを決して正当化しないもの、それは美しさです。ラベルのないグリフの列は、ポートフォリオの一枚絵では確かに端正に見えます。ポートフォリオを眺める人は、何かを成し遂げようとしていないからです。ユーザーは違います。これは本シリーズ全体で検討してきたのと同じ取引です——ユーザーではなくデモに奉仕するモーション、尋ねるのが簡単だという理由で存在するフォーム項目——観る者のための磨き込みを、参加する者の摩擦で購入しているのです。

1つのファミリー、1つのグリッド

アイコンセットは絵のためのタイポグラフィであり、同じ規律に従います。製品内のすべてのグリフは1つのファミリーから描かれます。1つのグリッド（一般には24px）、1つの線幅、1つの角の処理、1つの塗りか輪郭かの方針です。ユーザーはアイコンの不統一を言語化できませんが、瞬時に感知します——太い塗りのゴミ箱の隣に極細の輪郭の歯車があれば、「この製品はどこかおかしい」と読み取られる。誤字の視覚版です。

規律は3つあります。グリッドで描き、ターゲットで置く：グリフは24pxのグリッドの上に生き、その周囲のタッチターゲットはプラットフォームの下限（iOSは44pt、Materialは48dp）を保ちます。ちょうどボタンとフィールドがターゲットの最小値に従うのと同じです——小さなグリフは問題ありませんが、グリフと同じ大きさのタッチターゲットは問題です。幾何ではなく視覚で揃える：バウンディングボックスで中央に置いた再生の三角は、視覚的な重心が左に寄るため、目に見えて中心を外れます。右へ少しずらすのが正しく、それは視覚的なスペーシングの調整が正しいのと同じ意味においてです——目は定規に優先します。意味はスタイルではなく状態で表す：塗りと輪郭の対比は、選択中と非選択中を符号化できます（タブバーでは正当な慣例です）。ただしその場合、符号化するのはそれだけです——別の場所で装飾上の選択を兼ねさせれば、信号は壊れます。

私自身のiOSアプリでは、ファミリーは単一ウェイトのSF Symbolsで、デザインキットの層で強制されています——グリフはテキストと同じタイプロールでサイズが決まるため、迷い込んだインポートはシステムと目に見えて衝突せずには出荷できません。これがこの原則の一般形です。ライブラリを1つ選び、それだけを使い、必要なグリフが欠けているときは、そのファミリーのグリッドの上に、そのファミリーの線幅で描く——検索1回の距離にあったからという理由で、2つ目のセットから拾ってくることは決してしない。

1つの動作に1つのメタファー

語彙が機能するには一貫性が要ります。プロフィール画面で鉛筆が編集を意味するなら、鉛筆はどこでも編集を意味します——ある隅では「作成」、別の隅では「名前の変更」ではありません。しかもこの対応は全単射です。鉛筆が編集するなら、他のどの記号も編集しません。「設定を編集」を開く歯車と「詳細を編集」を開く鉛筆が並べば、ユーザーは1つの動詞に2つの項目を抱えることになります。

同じ一貫性がプラットフォームの方言も律します。iOSでは共有は箱と矢印、Androidでは3つの点をつないだグリフ。ウェブ製品は対象読者に応じて慣例を選び、それを守り通します。戻る矢印は左から右へ読む言語圏では左を向き、右から左へ読む言語圏では反転します——一方、メディア再生のコントロールは反転しません。再生の三角は読む方向ではなく、テープ走行についての慣例だからです。これらは雑学ではありません。ユーザーの方言を話すか、ユーザーに自分の方言を学ばせるかの違いです。

対応を維持するには帳簿が要ります。デザインシステムの中のアイコン用語集——この記号、この意味、他では使わない——を、スペーシングトークンやタイプロールと同じ強さで運用するのです。用語集がなければ、新機能のたびに独自のメタファーが交渉され、3四半期後には、それぞれ別の意味を持つ4種類の矢印を抱えた製品ができあがります。

言葉が勝つとき

アイコノグラフィーにおける最強の一手は、フォームデザインにおける最強の一手と同じく、しばしば削除です。設定ページには、行ごとに専用のグリフは要りません。行にはすでにラベルがあり、アイコンは彩りを添える一方で、実際に働いている数少ない記号の信号を薄めます。ダッシュボードの「インサイト」セクションには記号がありません——電球でしょうか、グラフでしょうか、きらめきでしょうか——この概念には絵による慣例が存在せず、どの候補もコイン投げで、ユーザーごとに違う答えに落ち着くからです。

このテストはラベルの原則と対称です。アイコンが場所を勝ち取るのは、認識が読解に勝つときです——記号が言葉より速く解決されるとき、つまり普遍的な十数個と、学習された高頻度のツールについてまさに成り立つ条件です。それ以外のあらゆる場所で、言葉はフォールバックではありません。それがデザインなのです。

よくある質問

インターフェースのアイコンには常にラベルを付けるべきですか

原則としては、はい。ラベルなしのアイコンが許されるのは2つの場合です。慣例的な位置にある真に普遍的な記号（検索ヘッダーの虫眼鏡、閉じられるパネルのX）と、反復がすぐに意味を教えてくれる高頻度のツールです——いずれもアクセシブルな名前を常に備え、ポインタを使うユーザーにはツールチップを添えることが条件になります。それ以外の場所では、アイコンとラベルの組み合わせが、新規のユーザーにも再訪のユーザーにも役立ちます。

ユーザーがラベルなしで認識できるアイコンはいくつありますか

確実なのはおよそ十数個です。検索、設定、削除、追加、閉じる、ホーム、戻る、再生、そして鉛筆や南京錠のような準普遍的な記号がいくつか。その集合を超えると認識率は急激に下がり、プラットフォームによってばらつきます——共有ひとつ取ってもAppleとAndroidに互換性のない慣例があります——ですから、中核の集合の外にあるアイコンは、テキストを必要とするものとして扱ってください。

インターフェースで異なるアイコンライブラリのアイコンを混ぜてもよいですか

いいえ。製品のアイコンセットは、1つのグリッド、1つの線幅、1つの角の処理を持つ単一のファミリーから来るべきです。ファミリーの混在は視覚的な不統一として読み取られ、ユーザーは名指しできなくても即座に感じ取ります。必要なグリフが欠けているときは、2つ目のライブラリから取り込むのではなく、ファミリーの仕様に合わせて描いてください。

アイコンではなくテキストラベルを使うべきなのはどんなときですか

広く認識された記号がその概念に存在しないときは、いつでもです——ワークスペース、インテグレーション、インサイトのような抽象的な製品概念のほとんどが、これに当てはまります。アイコンが場所を勝ち取るのは認識が読解に勝つときであり、ユーザーが記号を学習したり推測したりしなければならないなら、言葉のほうが速く、明快で、しかもデザインの敗北ではありません。