ux-iconography

アイコノグラフィスキル

このスキルの動作（最初にお読みください）

これは生成型の基盤スキルです。アイコンは、AI アシスタントが曖昧さを生み出す領域です。Claude はラベルのないアイコンのみのボタンを追加し、ユーザーがすでに知っているメタファーではなく新奇または装飾的なグリフに手を伸ばし、スタイルを混在させ（一部はアウトライン、一部は塗りつぶし、異なる線幅）、画面全体で同じアクションに異なるアイコンを使用します。ユーザーを立ち止まらせて解読させるアイコンは失敗しています。その役割は、より素早い認識だけだからです。

そのため、このスキルは次のことをゲートします：

1. コンテキストを確立する — プラットフォーム／ライブラリ、ここでアイコンがその場所を得る価値があるかどうか、デザインシステムの成熟度（これらがスタイル、ラベルポリシー、ソースを設定します）。
2. 常に真であるコアを適用する — 普遍的なメタファー、一貫した 1 つのスタイル、意味が明白でない場合のラベル、サイズにおける可読性、アクセシブルなラベル。
3. コンテキスト依存の決定を浮き彫りにする（アイコンスタイル、システムライブラリかカスタムか、ラベル、状態バリアント、レンダリングモード、コンテナ）をトレードオフとともに提示し、ユーザーに選択させます。

その後、ux-accessibility-audit（ラベル、コントラスト、タッチターゲット）、ux-aesthetics-audit（スタイルの一貫性、過剰デザイン）、ux-microcopy-audit（アイコンラベル自体）に引き継ぎ、タッチターゲットが重要な場合は ux-mobile-responsiveness-audit にも引き継ぎます。

スコープと構成（docs/orchestration-policy.md §9 に準拠）：このスキルはアイコンの選択、スタイル、使用方法を所有します。サブパートを所有するピア（委譲 — 到達した場合はそれぞれがサブパートを処理します）： ux-buttons はボタンラベルの文言とボタンの構造を所有します。デザインシステムの下で継承する（ゼロから作る場合のみ）： ux-typography はタイプスケールを所有し、ux-layout-spacing-grids はアイコンが乗るスペーシング／グリッドを所有します — システムが存在する場合は、両方をシステムのトークンから取得してください。完全な評価レビューは上記の監査に委ねられます。

---

ステップ 0 — アイコンを選択する前にコンテキストを確立する

不明な場合は尋ねてください。回答なしで進める場合は前提を明示してください：

• プラットフォームとライブラリ — iOS/macOS は SF Symbols に傾き、Android は Material シンボルに傾き、Web はオープンセットまたはカスタムライブラリを使用する場合があります。プラットフォームがデフォルトのメタファー、レンダリング、ウェイトを設定します。
• ここでアイコンはその場所を得る価値がありますか？ アイコンは頻繁またはクイックアクセスのアクションやスキャンに役立ちます。アイコンがジャーニーを簡素化しない場合は省略してください — 雑然さは重要なアイコンを薄めます。1 つのアイコン、1 つのアクション。
• デザインシステムの成熟度 — 単発の画面には適切なグリフとラベルが必要であり、システムにはセットが一貫して見つけやすく保たれるための命名、タグ付け、コンポーネント構造、トークンが必要です。

---

常に適用されるコア（ほぼすべてのアイコンに当てはまる）

理解されるようにする

• 普遍的で認識されたメタファーを使用する — 新規性よりも明快さを優先する。 検索には虫眼鏡、ナビゲーションには矢印、設定には歯車。巧妙な代用（検索に双眼鏡）は、ユーザーを立ち止まらせて考えさせるだけです。
  • ❌ 「検索」のための特注グリフ。✅ 誰もがすでに検索として読む虫眼鏡。
• 意味が明白でない場合はラベルを付ける。 独特な／曖昧なアイコンには短いテキストラベル（1〜3 語、「検索」「共有」などのアクション語）が必要です。普遍的なアイコンは時々単独で成立します — しかし、アイコン + ラベルの組み合わせは、密集したコンテキストや初回使用のコンテキストでは安全なデフォルトです。
• アイコンのみのコントロールには常にアクセシブルなラベルを提供する。 表示テキストがない場合、コントロールにはアクセシブルな名前が必要であり、スクリーンリーダーがその目的をアナウンスできるようにします。（表示ラベルが存在する場合、それがアクセシブルなテキストとして機能します — 二重にしないでください。）
• 1 つのアクション、1 つのアイコン — そして衝突させない。 同じアクションにはどこでも同じアイコンを使用し、1 つの概念に 2 つのアイコンを使わないでください。メタファーは製品間で異なる意味を持つことに注意し（ハート対スター対サムズアップ、ハート = 「いいね」対「ラブ」対「保存」）、使用法を曖昧でないものに保ってください。

読みやすく一貫性を持たせる

• アイコンはシンプルに保つ。 本質的な形まで削ぎ落とします。細かいディテールは小さいサイズではぼやけたり消えたりします。ディテールを追加するのは、表示サイズが本当にそれを支えられる場合だけにしましょう。
• セット全体で一貫したスタイルにする。 線の太さ、角の丸み、ジオメトリ、色の扱いを揃えます。アウトラインと塗りつぶし（あるいはシャープとラウンド）をランダムに混在させると、視覚言語が崩れます。主要なスタイルを1つ選びましょう。
• 数学的にではなく、光学的にバランスを取る。 フレームサイズが同じ ≠ 視覚的な重さが同じ。同じ寸法でも、密なグリフは疎なグリフより重く見えます。フレーム内で調整し（一貫したコンテナ／パディングを使い）、アイコンが同じに見えるようにしましょう。
• サイズごとに設計する。機械的に拡大縮小しない。 線の太さはフレームに合わせてスケールします（例：16px→約1px、24px→約1.5px）。小さいサイズにはよりシンプルなジオメトリが必要です。さまざまな密度でもアイコンがくっきりするよう、SVGを使いましょう。

使いやすくする

• 十分なタッチターゲット。 タップ可能な領域はグリフより大きくします — 少なくとも44×44pt（iOS）／48×48dp（Android） — さらにパディングを設けて、隣接するアイコンを誤タップしないようにしましょう。
• 一貫した、目的のある色。 限定されたパレット：アクティブ／重要なアイコンには目立つ色を1つ、それ以外には控えめな／ニュートラルな色を使います。意味を持つ場合はセマンティックカラーを使いましょう（赤＝破壊的、など）。色付きのアイコンがコンテンツの邪魔をしないようにしましょう。

---

文脈に依存する判断（表面化させ、自動適用しない）

それぞれをトレードオフと Step 0 に紐づいた推奨とともに提示し、ユーザーに選ばせましょう。スタイルを混在させること、あるいは反射的にすべてに／何にもラベルを付けないことが、失敗のパターンです。

判断	適用するのは	避ける／適応させるのは	デフォルトの推奨
アイコンのスタイル	すっきりとしたテキストの多いUIにはアウトライン、コンパクトな空間でより強いコントラストが必要なら塗りつぶし、遊び心のあるブランドにはカラー／デュオトーン	スタイルを自由に混在させること。注意をそらしたり、小さい／アクセシビリティのサイズで失敗する色付きアイコン	主要なスタイル（アウトラインまたは塗りつぶし）を1つ選び、セット全体に適用する
システムライブラリ vs カスタム	プラットフォームネイティブな一貫性、自動のウェイト／スケール／配置には SF Symbols／Material、独自の概念にのみカスタム	普遍的なグリフを再発明すること。システムの線の太さ／グリッドに合わないカスタムアイコン	まずプラットフォームライブラリを使い、その特性に合ったカスタムアイコンを追加する
ラベルかアイコンのみか	独自の／曖昧なアイコンや初回利用の文脈にはラベルを付ける。真に普遍的なグリフでアクセシブルな名前がある場合はアイコンのみでも可	独自のアクションにアイコンのみ（ユーザーが推測する）。狭い空間で普遍的なツールバーアイコンにラベルを付けすぎること	迷ったらアイコン＋ラベルを組み合わせる。常にアクセシブルな名前を保つ
状態に対する塗りつぶし vs アウトライン	状態を示すためにバリアントを使う — アウトライン＝デフォルト、塗りつぶし＝選択／アクティブ（お気に入り、ブックマーク、表示）	意味ではなく装飾のためにバリアントを切り替えること	塗りつぶし／アウトラインの切り替えは状態のために取っておく。バリアント間で構造は同一に保つ
レンダリングモード（Apple）	柔軟性にはモノクロ、奥行きには階層、セマンティックな意味にはパレット／マルチカラー	インターフェースのコントロールを濁らせるマルチカラー	インターフェース要素にはモノクロ、より豊かなモードはセマンティック／機能的なアイコンにのみ
コンテナとグリッド	セット全体で均一な配置、タッチターゲットのサイズ、光学的バランスのためのコンテナ／キーライン	すべてのアイコンをフレームの端から端まで埋めさせること（不均一な重さ）	一貫したフレーム＋トリム／パディングを使う。アイコングリッドに揃える
ライブラリ構造（システム）	命名（category/object/modifier）、タグ、フラット化された単一レイヤーのコンポーネント、カラートークン	場当たり的な名前と一貫性のないレイヤー構造（差し替え／オーバーライドを壊し、重複を生む）	目的ごとにグループ化し、一貫して命名＋タグ付けし、同一のコンポーネント構造を保つ

---

結果を検証する（オーケストレーション）

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。

アイコンを選択または設計した後は、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補のレンズです。姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングしてください。ここでは、**microcopy は Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness は Tier B（提案）**です。既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞られます。mobile-responsiveness はモバイルでのみ適用されます。ユーザーが特定の目的でこのスキルを呼び出した場合は、そのスコープを尊重してください。

• ux-accessibility-audit (Tier B — 提案。デザインシステムがある場合は絞る) — アイコンのみのコントロールにアクセシブルな名前があるか、アイコンは背景に対してコントラストを満たしているか、タッチターゲットは十分な大きさか、意味が色やアイコンだけで伝えられていないか？
• ux-aesthetics-audit (Tier B — 提案。デザインシステムがある場合は抑制) — セット全体が一貫したスタイル（ストローク、ジオメトリ、色）でまとまっているか、視覚的にバランスが取れているか、装飾過多になっていないか？
• ux-microcopy-audit (Tier A) — アイコンのラベルは短く、明確で、アクション指向で、プロダクトのトーンと一貫しているか？
• ux-mobile-responsiveness-audit (Tier B — 提案。モバイルでのみ適用)（タッチを対象とする場合） — タッチターゲットとスペーシングは小さな画面でも維持されるか？

このスキルは、ボタンラベルのコピーとボタンの構造を ux-buttons に、アイコンが配置されるスペーシング／グリッドを ux-layout-spacing-grids に委ねます。監査で競合が表面化した場合は、目的に沿って解決してください。アイコンはアクションをより速く認識できるようにするために存在します。曖昧、一貫性がない、または判読できない場合は、ラベルを追加するか、スタイルを統一するか、削除してください。

---

よくある do/don't パターン

❌ しない	✅ する
明白でないアクションにアイコンのみのボタンを提供する	ラベルと組み合わせる。常にアクセシブルな名前を付ける
巧妙／斬新なメタファーを考案する	ユーザーがすでに知っている普遍的なグリフを使う
アウトライン＋塗り＋異なるストローク幅を混在させる	セット全体で一貫したスタイルにする
同じアクションに異なるアイコンを使う	1 つのアクション、1 つのアイコンをどこでも
細かいディテールを詰め込む	小さなサイズでも読めるようにシンプルに保つ
同じフレームサイズなら同じ視覚的重みだと信じる	コンテナ／パディングで視覚的にバランスを取る
1 つのアイコンをすべてのサイズに機械的に拡大縮小する	サイズごとに設計する。ストロークを調整する。SVG を使う
タップ領域をグリフまで縮める	パディングを含めて ≥44pt／48dp のタッチターゲット
装飾のために塗り／アウトラインを切り替える	状態（デフォルト vs アクティブ）を示すためにバリアントを使う
プラットフォーム標準のアイコンを作り直す	SF Symbols／Material から始める。カスタムはそれらに合わせる
アイコンを未確認のまま提供する	アクセシビリティ＋美学＋マイクロコピー（＋モバイル）に引き渡す

---

出典レッスン（Uxcel）

• How to Use Icons in UI Design
• Icons & Symbols Guidelines
• Iconography in Design Systems
• Icon Terminology