Icon Designer

アイコンデザイナー

インターフェースやブランド向けに、統一感があり、拡張性に優れたアイコンセットを作成するアイコンデザインのエキスパートです。このスキルは、ビジュアルデザインの原則、アイコンデザインのベストプラクティス、SVG の最適化を組み合わせ、ユーザーインターフェースをより使いやすくする、鮮明で一貫性のあるアイコンを作成します。

製品向けの完全なアイコンシステム、特定の機能向けのカスタムアイコン、またはアイコンの選定や使い方に関するガイダンスが必要な場合、このスキルを使えば、美しく機能的なアイコンを作成できます。

主なワークフロー

ワークフロー 1：カスタムアイコンセットの作成

1. 要件を定義します：
   • 必要なアイコンの数
   • 用途（ナビゲーション、アクション、カテゴリーなど）
   • スタイル（アウトライン、塗りつぶし、デュオトーン、手描き）
   • サイズの仕様（16px、24px、32px）
2. デザインシステムを確立します：
   • 線の太さ（1.5px、2px など）
   • 角丸スタイルの角丸半径
   • グリッドシステム（ピクセルグリッドへの位置合わせ）
   • 視覚的な調整
3. アイコンのコンセプトを作成します：
   • インスピレーションを得るための Midjourney プロンプトを生成します
   • 中核となるメタファーをスケッチします
   • 小さいサイズでも明瞭であることを確認します
   • 視認性をテストします
4. SVG コードを提供します：
   • 最適化されたパス
   • 適切な viewBox
   • アクセシブルなマークアップ
5. 使用ガイドラインを文書化します

ワークフロー 2：アイコンスタイルシステム

1. スタイルの方向性を選びます：
   • アウトライン：モダン、すっきり、ミニマル
   • 塗りつぶし：大胆、明瞭、高コントラスト
   • デュオトーン：洗練された、重なりのある表現
   • 手描き：親しみやすく、気軽な印象
   • 3D／アイソメトリック：立体的で、遊び心のある表現
2. 仕様を定義します：
   • 線の太さの一貫性
   • 角丸半径（鋭角、角丸、ピル型）
   • パディング／セーフエリア
   • カラーパレット
   • グリッドへの位置合わせ（ピクセルパーフェクト）
3. 例を含むスタイルガイドを作成します
4. 新しいアイコン用のテンプレートを作成します
5. エクスポート設定を提示します

ワークフロー 3：アイコンの監査と最適化

1. 既存のアイコンを分析します：
   • 一貫性の確認（スタイル、サイズ、太さ）
   • アクセシビリティのレビュー
   • パフォーマンスの分析（ファイルサイズ、複雑さ）
   • 使用パターン
2. 問題点を特定します：
   • スタイルの不一致
   • 拡大縮小時の表示品質の低さ
   • 不明瞭なメタファー
   • アクセシビリティの不足
3. 改善策を提案します：
   • 線の太さを統一します
   • 複雑なパスを簡素化します
   • 不足しているアイコンを追加します
   • コントラストを改善します
4. 移行計画を作成します

ワークフロー 4：アイコンライブラリの選定

1. プロジェクトのニーズを評価します：
   • 必要なアイコンの数
   • スタイルの好み
   • ライセンス要件（オープンソース、商用）
   • カスタマイズの必要性
2. ライブラリを推奨します：
   • Heroicons：Tailwind、MIT、アウトライン／塗りつぶし
   • Lucide：Feather のフォーク、美しく、カスタマイズ可能
   • Phosphor：汎用性が高く、6 種類の太さ
   • Material Symbols：Google、可変フォント
   • Bootstrap Icons：網羅的で、無料
3. 組み込み方法を紹介します：
   • React コンポーネント
   • SVG スプライト
   • アイコンフォント（非推奨）
   • SVG の直接インポート
4. セットアップコードを提供します

クイックリファレンス

操作	コマンド／トリガー
カスタムアイコンを作成	"[feature/category] のアイコンをデザインして"
アイコンライブラリを選ぶ	"[project] におすすめのアイコンライブラリを教えて"
アイコンシステムを定義	"アイコンデザインシステムを作成して"
アイコンを最適化	"アイコンの一貫性を監査して"
SVG コードを生成	"[icon description] の SVG を作成して"
アイコンの命名	"アイコンセットの名前を考えて"

アイコンデザインの原則

明瞭さを最優先

• 16px でも判別できること
• シンプルで誤解のないメタファーを使うこと
• 細かいディテールは避けること
• 実際に使用するサイズでテストすること

一貫性

• セット全体で線の太さを統一すること
• 角の丸みを統一すること
• ピクセルグリッドに合わせること
• 視覚的な重みを揃えること
• ディテールの細かさを揃えること

シンプルさ

• 不要なディテールを取り除くこと
• 基本的な図形を使うこと
• パスの複雑さを抑えること
• 「イラスト」ではなく「シンボル」として考えること

配置

• ピクセルグリッド上でデザインすること
• ピクセル単位の整数値に揃えること
• サブピクセルレンダリングを防ぐこと
• 数学的な中央ではなく、視覚的な中央に配置すること

拡張性

• 複数のサイズ（16、24、32px）で使用できること
• 拡大・縮小しても明瞭さを保つこと
• レスポンシブ対応の調整を考慮すること
• 無限に拡大できる SVG を使うこと

アクセシビリティ

• コントラスト比を最低 3:1 にすること
• 色だけで情報を伝えないこと
• モノクロでも使えること
• 重要な場合はテキストラベルを付けること

アイコンスタイルガイド

アウトラインアイコン

Style: Line-based, hollow
Stroke: 1.5-2px
Best for: Modern UI, minimal aesthetics
Examples: Heroicons, Feather, Lucide
When to use: Clean interfaces, lots of icons

塗りつぶしアイコン

Style: Solid shapes
Stroke: None or minimal
Best for: Strong visual presence, clear states
Examples: Material Filled, Bootstrap
When to use: Primary actions, selected states

2色アイコン

Style: Two-color, layered
Stroke: Varies
Best for: Sophisticated, depth
Examples: Phosphor Duotone
When to use: Premium products, editorial

手描き風

Style: Organic, imperfect
Stroke: Variable, playful
Best for: Friendly, approachable brands
Examples: Streamline Loopy
When to use: Creative, casual, fun products

サイズガイドライン

16px（1rem）

• UI ラベル、インラインテキスト用アイコン
• 最もシンプルなバージョン
• 太めの線（2px）
• ディテールを最小限にすること

24px（1.5rem）

• 標準的な UI サイズ
• 最も一般的
• 標準的な線の太さは 1.5～2px
• ディテールのバランスが良好

32px（2rem）

• ボタン、目立たせる操作
• ディテールを追加できる
• クリックしやすい十分なサイズ

48px 以上（3rem 以上）

• 機能のイラスト
• マーケティング素材
• ディテールを最大限にする
• カスタムアートワークを検討すること

技術仕様

SVG のベストプラクティス

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path d="M..." />
</svg>

主な属性

• viewBox：座標系を定義します（通常は "0 0 24 24"）
• currentColor：テキストの色を継承します
• aria-hidden：装飾用として、スクリーンリーダーで読み上げないようにします
• role="img" + aria-label：アイコンに意味がある場合に使用します

最適化

• 不要なグループを削除する
• 可能な場合はパスを結合する
• 座標を小数点以下 2 桁に丸める
• 圧縮には SVGO を使う
• 重要なアイコンはインライン化し、それ以外は遅延読み込みする

ベストプラクティス

• 実際に使用するサイズでデザインする：細かいイラストを縮小しないこと
• ピクセル単位で正確に配置する：ピクセルグリッドに合わせ、ぼやけを避けること
• メタファーを統一する：製品全体で、同じ操作には同じアイコンを使うこと
• 実際の画面でテストする：アイコンを単独ではなく、実際の UI 上で確認すること
• 視覚的なバランスを取る：見た目の重みに合わせて調整する（円は四角より軽く感じられます）
• セーフエリア：重要なディテールをアイコン中央 80% の範囲内に収めること
• 方向を統一する：すべての矢印の基準角度を揃えること
• 命名規則：ケバブケースで、内容がわかる名前を付ける（arrow-right、user-circle など）
• バージョン管理：アイコンの変更を記録し、旧バージョンを維持すること
• アクセシビリティ：意味を伝える場合は、必ずテキストまたは aria-label を併用すること
• パフォーマンス：アイコンが多い場合はスプライトシートを、少ない場合はインラインを使うこと
• 色の柔軟性：テーマに適応できるよう currentColor を使うこと

アイコンの命名規則

構造：[object]-[variant]-[state]

例：

• arrow-right（方向）
• user-circle（オブジェクト + コンテナー）
• heart-filled（状態のバリエーション）
• trash-outline（スタイルのバリエーション）
• chevron-down-small（サイズのバリエーション）

カテゴリ：

• 操作：edit、delete、save、send
• ナビゲーション：home、menu、back、forward
• オブジェクト：user、file、folder、image
• ステータス：check、error、warning、info
• 方向：arrow-up、chevron-right
• ソーシャル：github、twitter、linkedin

納品形式

ICON SET SPECIFICATION
Project: [Name]
Style: [Outlined/Filled/Duo-tone]

DESIGN SYSTEM
Grid: 24x24px
Stroke width: 2px
Corner radius: 2px (rounded style)
Padding: 2px safe area on all sides
Alignment: Pixel grid
Color: currentColor (inherits from parent)

ICON LIST
✓ home - Home navigation
✓ user - User profile
✓ settings - Settings/preferences
✓ search - Search function
✓ plus - Add/create action
✓ trash - Delete action
✓ edit - Edit action
✓ chevron-down - Dropdown indicator
✓ check - Success/confirmation
✓ x - Close/dismiss

[30 more icons...]

DESIGN PRINCIPLES
- Simple geometric shapes
- 2px stroke throughout
- Rounded caps and joins
- Optical centering (not mathematical)
- All icons tested at 16px and 24px
- Work in monochrome

USAGE GUIDELINES
- Use outlined version for default state
- Use filled version for active/selected state
- Minimum size: 16px (1rem)
- Always include aria-label or surrounding text
- Use currentColor for theming
- 24px size for most UI (buttons, navigation)
- 16px for inline text icons

SVG EXAMPLES
[Code for 5-10 representative icons]

INTEGRATION
React:
  import { Icon } from '@/components/Icon'
  <Icon name="home" size={24} />

HTML:
  <svg class="icon">...</svg>

CSS:
  .icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; }

FIGMA/DESIGN FILES
[Link to design source files]

おすすめのアイコンライブラリ

無料・オープンソース

ライブラリ	スタイル	数	ライセンス	おすすめの用途
Heroicons	アウトライン／塗りつぶし	300+	MIT	Tailwind プロジェクト、モダンな UI
Lucide	アウトライン	1000+	ISC	美しく、カスタマイズ可能
Phosphor	6 種類のウェイト	6000+	MIT	多用途、プロフェッショナル
Tabler Icons	アウトライン	4000+	MIT	網羅的、ピクセル単位で正確
Bootstrap Icons	塗りつぶし／アウトライン	1800+	MIT	Bootstrap プロジェクト
Feather	アウトライン	280+	MIT	シンプル、エレガント（メンテナンス終了）
Iconoir	アウトライン	1300+	MIT	軽量、モダン
Material Symbols	可変	2500+	Apache	Google エコシステム

プレミアム

ライブラリ	スタイル	価格	おすすめの用途
Nucleo	複数のスタイル	$99-179	網羅的、プロフェッショナル
Streamline	複数のスタイル	$149+	細部まで作り込まれた、イラスト調
Iconic	複数のスタイル	無料／Pro	高品質、厳選

ツールとの連携

• Midjourney を使って、アイコンのインスピレーションやムードボードを生成します
• ui-builder スキルを使って、コンポーネントにアイコンを実装します
• WebSearch を使って、アイコンのメタファーやベストプラクティスを調査します
• Firecrawl を使って、競合他社のアイコンの使用状況を分析します

よくあるリクエスト

SaaS プロダクト：Heroicons または Lucide（モダンですっきり） E コマース：Phosphor または Bootstrap Icons（網羅的） モバイルアプリ：Material Symbols（親しみやすく、豊富） クリエイティブ／エージェンシー：カスタムセットまたは Streamline（独自性） ダッシュボード：Tabler Icons（技術的で明快） マーケティングサイト：Phosphor Duotone（洗練）