アイコン設計 (Iconography)

「このフロッピーディスクのマーク、何？」「星マークとハートマーク、どっちがお気に入り？」 作り手にとって自明なアイコンでも、ユーザーにとっては「謎の象形文字」になっていることが多々あります。意味の分からないアイコンが並んだ画面は、操作するたびに推測と記憶を強いられ、ユーザーを疲弊させます。 さらに、同じ画面内で「線の太さが違う」「角の丸みが違う」「塗りつぶしと線画が混在している」といった不揃いなアイコンは、システムの品質に対する信頼を無意識のうちに低下させます。

1. 原則の定義

アイコンは「装飾」ではなく「機能の視覚的な要約」であり、普遍的な認知（誰が見ても同じ意味に取れること）と、視覚的な一貫性（スタイルが揃っていること）を両立させるルール。

本質は「ユーザーの認知負荷を下げること」です。アイコンの存在意義は、テキストを読むよりも早く機能を直感させることにあります。もしその推測に1秒以上かかるなら、そのアイコンは失敗しており、テキストラベルを併記するか、テキストのみにする方が優れています。

2. いつ使うか（適用場面）

特に重要になるケース

• グローバル向けプロダクト: 言語の壁を超えて（多言語対応のコストを下げて）直感的な操作を提供したい時。
• モバイルアプリやツールバー: 画面領域が限られており、長いテキストボタンを配置できない時。
• スキャナビリティの向上: 設定画面などで、テキストの横に見出しとしてアイコンを添え、視覚的な検索速度を上げたい時。

トレードオフが起きる場面

• 美しさ vs 伝わりやすさ: ブランドの個性を出した「ユニークで美しいアイコン」を作ろうとすると、その分「普遍的で誰もが知っている形」から離れ、意味が伝わりにくくなります。UIアイコンにおいて最優先すべきは、個性の表現ではなく「即座に意味が伝わること」です。

3. なぜ重要か（設計判断の核）

アイコンは「推測させる」ものではなく、「確信させる」ものでなければならない。

設計判断の基準

• 「このアイコンの意味を、ユーザーは過去の経験から確実に知っているか？」→ 知らない可能性があるなら、テキストラベルを必ず添える。
• 「これらのアイコンは同じファミリー（セット）に見えるか？」→ 線の太さ（ストローク）、サイズ、角の処理（丸か直角か）が完全に統一されているか。

優先順位の考え方

• 1. 普遍性（認識しやすさ）: 虫眼鏡＝検索、家＝ホームなど、既に社会で確立された意味・形状から逸脱しない。
• 2. ラベルの併記: 例外を除き、テキストラベルを併記することで「謎解き」をなくす。
• 3. 視覚的一貫性: UI全体のトーン＆マナーに合わせた太さや塗りつぶしのルールを適用する。

例外条件

• 「ハンバーガーメニュー」や「閉じる（×）」など、テキストがなくても100%のユーザーが理解できる極めて普遍的なアイコン。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

ここをクリアしていないと、ユーザーが機能を見つけられず、迷子になるレベルです。

普遍的なメタファー: 一般的に認知されていない独自のアイコン（例：「鳥」のアイコンで「メッセージ送信」を表すなど）を使っていないか？
ラベルの併記の検討: 「普遍的とは言い切れないアイコン」のみでボタンを構成せず、テキストラベル（例：アイコンの横や下にテキスト、または最低でもツールチップ）を添えているか？
アクティブ領域（タッチターゲット）: アイコン自体のサイズ（例：16px）に関わらず、クリック・タップできる領域は十分に確保されているか（最低44x44px等）？

理想ライン（Better - できると強い/プロの品質）

UIの洗練度を劇的に上げ、「プロの仕事」を感じさせるための基準です。

視覚的重みの統一: 異なる形のアイコン（細長いペンのアイコンと、四角いカレンダーのアイコン）が並んだ時、面積（視覚的な重さ）が同じに見えるよう、光学的な調整（Optical Sizing）が行われているか？
ストロークと角の統一: 全てのアイコンで、線の太さ（例：2px）と、角の処理（丸みを持たせるか、シャープにするか）が厳密に統一されているか？
状態の表現（選択中）: ナビゲーションなどで、選択されている状態（Active）と非選択状態（Inactive）が、アイコンの「塗りつぶし（Solid）」と「線画（Outline）」などで明確に区別されているか？

5. UI例

ラベルがなくスタイルが不揃いで迷う画面と、ラベルがありスタイルが統一され確信を持って操作できる画面の違いです。

改善プロセス

1. アイコンセットの決定: Phosphor Icons, Heroicons, Material Iconsなど、システム全体で1つの「高品質なアイコンファミリー」に統一し、自作と混ぜたり、異なるセットを混在させたりしない。
2. 確信の付与（ラベリング）: ユーザー全員が意味を知っていると確信できないアイコンには、必ず下に極小でも良いのでテキストラベルを置くか、Tooltipを設定する。
3. 状態表現の組み込み: ナビゲーションの「アクティブ状態」を表現するために、Outline（非選択）とSolid（選択中）の使い分けルールをエンジニアと共有する。

6. 関連リンク

• 関連リファレンス（理論）: 認知負荷
• 用語集（定義）: アフォーダンス, 再認と再生 (Recognition over Recall)
• 関連するUI原則（横）: 視覚的一貫性 (Consistency), タイポグラフィ設計 (Typography)

7. まとめ

今日から直せる一手 実装されている画面に「テキストラベルのないアイコンだけのボタン」があれば、近くの人（開発者以外の人）に「これ、何を押すボタンに見える？」と聞いてみてください。一瞬（1秒以内）で正解が返ってこなければ、今すぐテキストラベルを追加しましょう。

チームに共有するなら一言 「アイコンはユーザーに『謎解き』をさせる場所ではない。美しいアイコンより、確実なラベルを。」