アイコンシステム量産と命名

コース構成

このコースで学ぶこと

1. 01

   名前がブレる → 全部ブレる

   アイコン名は『アクション / オブジェクト / バリエーション』の 3 層が揃っていないと、実装で衝突する。Claude にルール化を委ねるのが効く。

   • “user”“person”“profile” が混在
   • サイズ違いがファイル名で表現されている
   • 状態（hover, disabled）の命名がバラバラ
   命名規約を docs/icon-naming.md に
2. 02

   命名規約を docs/icon-naming.md に

   ルールを 1 枚にまとめ、Claude が毎回参照できるようにする。新規アイコン追加時の議論コストがゼロに近づく。

   markdown

   ## Icon Naming
   - 形式: <object>-<action>-<variant>?
   - object: user / cart / chat / file / lock ...
   - action: add / remove / edit / open / close ...
   - variant: filled / outline / 16 / 24 ...
   - 例: user-add-outline / cart-remove-filled

   名前がブレる → 全部ブレる100 個の候補リスト生成
3. 03

   100 個の候補リスト生成

   プロダクトの画面を渡し、必要そうなアイコン候補を 100 個出させる。重複・命名違反は Claude 自身に削除させる。

   text

   @docs/icon-naming.md を基準に、当プロダクトに必要なアイコン候補を 100 個。
   出力は表（名前 / 意味 / 既存有無 / 命名規約適合）。重複・命名違反は事前に除外。

   出力イメージClaude の返答（アイコン候補表・要約）

   命名規約に沿ったアイコン候補を 100 個リストアップしました。
   
   | 名前 | 意味 | 既存 | 規約適合 |
   |---|---|---|---|
   | user-add-outline | ユーザー追加 | なし | OK |
   | cart-remove-filled | カートから削除 | あり | OK |
   | file-edit-outline | ファイル編集 | なし | OK |
   
   …（以下 97 行 / 重複 6 件・命名違反 3 件は除外済み）

   命名規約を docs/icon-naming.md にSVG → React コンポーネントの一括生成
4. 04

   SVG → React コンポーネントの一括生成

   SVG の素材ができたら、Claude に React コンポーネント（or Vue / Svelte）化までやらせる。size/color の prop を必ず付与。

   tsx

   export const UserAddOutline = ({ size = 24, color = "currentColor" }: IconProps) => (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}>...</svg>
   );

   手を動かす

   0 / 3

   • props 型は IconProps で共通化
   • viewBox は 0 0 24 24 に統一
   • 塗りは fill=none + stroke=currentColor が無難
   100 個の候補リスト生成Skill 化と運用
5. 05

   Skill 化と運用

   “新規アイコン 1 個追加”の手順を Skill に。命名チェック → SVG 配置 → コンポーネント生成 → Storybook 更新までを通しでやる。

   手を動かす

   0 / 3

   • Skill 名: icon-add / 説明: “アイコン 1 個を追加するとき”
   • 命名違反は提案前に弾く
   • Storybook のサンプルも同時更新

   Lv.4 — Skill / Plugin

   理解度チェック

   1. Q1.アイコンシステムを破綻させない命名の本質は？

      Aデザイナーの自由な命名Bobject-action-variant の 3 層構造を docs/icon-naming.md に固定し、Skill が違反を提案前に弾くC全て番号で命名するD毎回マネージャーに確認

   2. Q2.AI が生成した新規アイコンを採用する前にデザインリードが確認すべきは？

      AAI のレスポンス速度B既存アイコンとの形状・線幅・余白の整合性、命名規則違反、視認性CClaude のバージョンDStorybook のロゴ

   3. Q3.アイコン追加 Skill の入力として最も自然な組合せはどれか？

      A新規アイコンの SVG / 用途説明、CLAUDE.md にある命名規則、既存アイコン一覧BPOS の売上 CSVC顧客名簿D経費精算 PDF
   SVG → React コンポーネントの一括生成