アイコンセットジェネレーター

特定のプロジェクト向けにカスタマイズされた、視覚的に統一されたSVGアイコンセットを生成します。各セットは共有スタイル仕様から構築されるため、すべてのアイコンが統一感を持ちます — ストロークの太さ、コーナーの処理、視覚的な密度がすべて同じです。

なぜこれが重要か

一般的なアイコンライブラリ(Lucide、Heroicons)は優れていますが、それらを使用するすべてのサイトが似たような見た目になります。カスタムアイコンセットはプロジェクトに独自の視覚的アイデンティティを与えます。難しい部分は統一性です — 20個以上のアイコンを個別に描くとスタイルがズレます。このスキルはスタイルルールを一度定義してすべてのアイコンに適用することで解決します。

ワークフロー

ステップ1: プロジェクトを理解する

プロジェクトについて質問します。アイコンを提案し、スタイルを選ぶのに十分な情報が必要です：

• プロジェクトのビジネス内容は？(業界、名前、雰囲気)
• ブランドガイドラインやカラーパレットはあるか？(SVGはcurrentColorを使用しますが、スタイル選択に参考になります)
• どのような雰囲気か？(モダン、フレンドリー、企業的、ミニマル、ボールド)
• 大体何個のアイコンが必要か？(一般的な小規模サイト：15～25個)

「Newcastle のプランバー、モダンな雰囲気」程度の簡単な説明で十分です。過度に質問する必要はありません。

ステップ2: アイコンを提案する

references/industry-icons.md を読んで業界固有のアイコン提案を確認します。グループに整理します：

• ナビゲーション — メニュー、閉じる、矢印、検索
• コミュニケーション — 電話、メール、位置情報、時計
• 信頼 — 星、盾、賞、ユーザー
• アクション — ダウンロード、シェア、カレンダー、フォーム
• 業界固有 — このビジネスタイプ独特のアイコン

リストを提示します。生成する前にユーザーがアイコンを追加、削除、または名前変更するのを待ちます。

ステップ3: スタイル仕様を定義する

references/style-presets.md を読んで詳細なプリセット定義を確認します。出発点として1つを選びます：

プリセット	最適な用途	ストローク	キャップ/ジョイン	コーナー
Clean	ほとんどのビジネスサイト	1.5px	round/round	2px
Sharp	企業向け/技術系	1.5px	square/miter	0px
Soft	フレンドリー/親しみやすい	2px	round/round	4px
Minimal	エレガント/エディトリアル	1px	round/round	0px
Bold	高インパクト/アクセシビリティ	2.5px	round/round	2px

推奨するプリセットとその理由をユーザーに伝えて、確認を取ります。

ステップ4: アイコンを生成する

以下のSVG ルールに従ってすべてのアイコンを生成します。プロジェクトルート(またはユーザーが指定する場所)の icons/ ディレクトリに出力します。

生成する前に references/svg-examples.md を読んでください — 適切な複雑さのレベルと一般的なアイコン形状の処理方法を示す参考実装が含まれています。

約5個ずつバッチで生成します。各バッチの後、続行する前に視覚的に統一性をレビューします。すべてのアイコンが完成したら、プレビューページとstyle-spec.jsonを作成します。

ステップ5: デリバリー

出力構造：

icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...

preview.html を最初に提示してユーザーが完全なセットを視覚的に確認できるようにします。

---

SVG ルール

セット内のすべてのアイコンはこれらのルールに従う必要があります。わずかな矛盾でも — ストロークの幅がわずかに異なったり、他がシャープなのに一つのコーナーだけ丸かったり — セットが素人っぽく見えます。

SVG テンプレート

すべてのアイコンはこの正確な外部構造を使用します：

<svg xmlns="http://www.w3.org/2000/svg"
  width="{grid}" height="{grid}"
  viewBox="0 0 {grid} {grid}"
  fill="none"
  stroke="currentColor"
  stroke-width="{strokeWidth}"
  stroke-linecap="{strokeLinecap}"
  stroke-linejoin="{strokeLinejoin}">
  <!-- icon paths here -->
</svg>

厳格なルール

1. currentColor のみ — 色をハードコードしないでください。SVGはCSSから色を継承します。fill="#000" や stroke="blue" は使用しないでください。図形にfillが必要な場合は、fill="currentColor" を使用します。

2. 同一の viewBox — すべてのアイコンは同じ viewBox を使用します。例外はありません。

3. 同一のルートストローク属性 — stroke-width、stroke-linecap、stroke-linejoin は <svg> 要素で全アイコンを通じて一致する必要があります。本当に必要な場合のみ個別要素でオーバーライドしてください。

4. ルートに変形なし — translate、rotate、scale を使用しないでください。座標にポジショニングを含めてください。

5. IDやクラスなし — SVGを外部スタイリング用に綺麗に保ちます。

6. 座標の精度 — 小数点以下最大2桁。半ピクセルグリッドにスナップします(例：12、12.5、12.333 ではなく)。

7. 一貫性のあるパディング — 設定されたパディングを viewBox エッジから維持します。24px グリッドで 2px パディングの場合、2～22座標範囲内に描画します。

8. 最小限の要素 — 実用的な範囲で最小数の <path>、<circle>、<rect>、<line> 要素。シンプル = より小さくより高速なレンダリング。

9. 視覚的な中央配置 — 数学的に中央ではなく、視覚的に中央に配置します。左向きの矢印は若干右にシフトします。煙突のある家は非対称性のために調整します。

光学的補正

プロフェッショナルな結果のために細かいながら本質的です：

• 曲線ストローク補正: 曲線は同じストローク幅の直線より薄く見えます。主に曲線のアイコン(電話、地球)の場合、ストロークの幅を変更するのではなく、パスを若干大きくしてください。
• 尖った形状のオーバーシュート: 矢印、シェブロン、三角形は正方形が止まる場所から約0.5px 先に延びて、同じサイズに見えるようにします。
• 視覚的な重みのバランス: シンプルなアイコン(単一シェブロン)は複雑なもの(ギア)より軽く見えます。シンプルなアイコンをグリッド内でわずかに大きくするか、パスをわずかに実質的にしてください。アイコンのいずれかが他より目立って軽いまたは重く見えてはいけません。

---

style-spec.json

{
  "name": "project-name-icons",
  "preset": "clean",
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2,
  "opticalBalance": true,
  "iconCount": 20,
  "icons": ["home", "phone", "email"],
  "generated": "2026-02-15"
}

---

プレビューページ

すべてのアイコンを視覚的にレビューするために表示する、自己完結したHTMLファイルを生成します。references/preview-template.md でテンプレートを読んでください。要件：

• ネイティブサイズ(24px)のすべてのアイコンをグリッド表示、ラベル付き
• 詳細検査用に同じグリッドを2倍(48px)で表示
• コントラスト確認用に暗い背景セクション(暗い背景に白)
• スタイル仕様の概要を上部に表示
• インラインCSS、依存関係なし — ブラウザで開くだけで使用可
• すべてのSVGをHTMLに直接インライン(外部ファイルを参照しない)

---

品質チェックリスト

デリバリーの前にすべての項目を検証してください：

• すべてのSVGが同一の viewBox、stroke-width、stroke-linecap、stroke-linejoin を持つ
• すべてのSVGが currentColor のみを使用
• 視覚的な重みがセット全体でバランスしている
• パディングが一貫している(viewBox エッジに接しない)
• すべてのアイコンが視覚的に中央配置されている
• ファイル名は小文字ケバブケース(arrow-right.svg)
• プレビューHTMLがすべてのアイコンを正しくレンダリング
• style-spec.jsonが正確ですべてのアイコンを列挙している

---

参照ファイル

生成する前にこれらを読んでください：

• references/style-presets.md — 詳細なプリセット定義と選択ガイダンス
• references/industry-icons.md — 業界固有のアイコン提案
• references/preview-template.md — プレビューページ用HTMLテンプレート
• references/svg-examples.md — 様々な複雑度レベルで適切な構築を示す例SVG