フレームワーク活用ガイド
押さえておきたい用語
- グリフアイコン: 線や塗りで構成されたシンプルなシンボル。テキストを補完し操作を案内する
- キーライン: アイコンのサイズ・余白・ストロークを統一するための基準線
- オプティカルサイズ: 幾何学的に同サイズでも視覚的に不均等に見える問題を調整するサイズ補正
- タッチターゲット: モバイルでアイコンをタップする際に必要な最小領域（44×44px推奨）
1
メタファー選定
アイコンが表す概念に最も適したメタファーを決定 → キーライン設計
こんな悩みに効く#
- 「アイコンの意味がユーザーに伝わらずテキストラベルを増やすことになる」
- 「画面ごとにアイコンのスタイルがバラバラで統一感がない」
- 「アイコンを小さくすると何のアイコンか識別できなくなる」
使い方#
メタファーを選ぶ
アイコンが表す機能に対して、ユーザーが「見た瞬間に意味が分かる」メタファーを選ぶ。歯車＝設定、虫眼鏡＝検索、ゴミ箱＝削除など確立されたメタファーを優先する。独自のメタファーが必要な場合は必ずテキストラベルと併用する。
キーラインを設定する
アイコンセット全体で統一するルールを決める。グリッドサイズ（24×24px等）、ストローク幅（1.5px等）、角丸半径（2px等）、余白（2px等）。これらをFigmaのコンポーネントとして定義しておく。
最小サイズで検証する
アイコンは16px程度まで縮小して使われることがある。この最小サイズでも形状が識別できるか確認する。識別できない場合は細部を削ぎ落とし、アイコンのシルエット（外形）で意味が伝わるよう調整する。
アクセシビリティを確保する
モバイルのタッチターゲットは44×44px以上を確保する。アイコンだけでなくaria-label（スクリーンリーダー用）を必ず付与する。色だけで状態（アクティブ/非アクティブ）を示さず、形状変化やラベルを併用する。
具体例#
モバイルアプリ — ボトムナビゲーションのアイコン改善
状況: 5つのタブアイコンのうち2つ（「発見」と「アクティビティ」）が独自メタファーで、新規ユーザーの42%がどのタブか分からず誤タップしていた。
適用プロセス:
- 5タブのアイコンを競合アプリ8個と比較し、「発見」はコンパス（業界標準）、「アクティビティ」はベル（通知系の標準）に変更
- キーラインを24×24pxグリッド、ストローク1.5px、角丸2pxに統一
- 各アイコンにテキストラベルを常時表示し、アクティブ状態は塗りつぶし+色変化の2重表現に
成果: 誤タップ率が42%→8%に低下。特に40代以上のユーザーセグメントで「操作が分かりやすくなった」との声が増加した。
デザインシステム — アイコンセットの統一
状況: 3年間で20名のデザイナーがそれぞれアイコンを作成した結果、線幅が0.5px〜3px、スタイルが線画と塗りの混在で統一感がなかった。
適用プロセス:
- 全420アイコンを棚卸しし、重複・類似を除いて必要なアイコンを280個に絞る
- キーライン規定を策定：24×24pxグリッド、ストローク1.5px、角丸2px、余白2px
- 280個すべてを新規定に沿って再制作し、Figmaコンポーネントライブラリとして管理
成果: デザイナーのアイコン選択時間が平均8分→1分に短縮。UIの統一感スコア（社内基準）が48%→93%に改善し、ブランドの信頼感向上にも寄与した。
業務システム — 操作ミス削減のためのアイコン改善
状況: 受発注システムで「編集」と「削除」のアイコンが似ており（鉛筆とペン）、月平均15件の誤削除が発生。データ復旧に毎回30分かかっていた。
適用プロセス:
- 問題のアイコンを分析：16pxで表示すると鉛筆（編集）とペン（削除）のシルエットがほぼ同じ
- 削除をゴミ箱アイコンに変更し、色も赤系に変更。編集は鉛筆のまま青系に
- 削除アイコンにはホバー時のツールチップ「削除する」と確認ダイアログを追加
成果: 誤削除が月15件→0件に激減。操作確信度のアンケートも5段階中2.8→4.5に向上した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| テキストラベルなしのアイコンだけ | ユーザーがアイコンの意味を推測できない | 重要な操作には常にラベルを併用する |
| 細かすぎるデザイン | 小サイズで潰れて識別不能 | 16pxでシルエットが判別できるか確認する |
| スタイル混在 | 線画と塗り、角丸と角ばりが混在し統一感がない | キーラインルールでセット全体を統一する |
| 色だけで状態表現 | 色覚特性ユーザーが状態を判別できない | 形状変化やラベルを必ず併用する |
まとめ#
アイコンデザインの4原則（認識性・一貫性・簡潔さ・アクセシビリティ）は、UIの「分かりやすさ」に直結する。独自のメタファーよりも確立されたメタファーを優先し、16pxでも識別可能な簡潔さを保ち、セット全体でスタイルを統一することで、ユーザーは操作に迷わなくなる。アイコンは「装飾」ではなく「情報伝達の手段」であるという前提に立つことが設計の出発点だ。