icon-set-generator

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

特定のプロジェクトに合わせて、視覚的に一貫性のあるカスタム SVG アイコンセットを生成します。各セットは共通のスタイル仕様に基づいて作成されるため、すべてのアイコンに同じ線幅、同じ角の処理、同じ視覚的な密度が適用され、統一感が生まれます。

重要な理由

Lucide や Heroicons などの汎用アイコンライブラリは便利ですが、それらを使うサイトはどれも似た見た目になりがちです。カスタムアイコンセットを使えば、プロジェクト独自のビジュアルアイデンティティを確立できます。難しいのは一貫性を保つことです。20 個以上のアイコンを個別に描くと、スタイルにばらつきが生じます。このスキルでは、スタイルルールを一度定義し、すべてのアイコンに適用することで、この問題を解決します。

ワークフロー

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

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

• どのようなビジネスやプロジェクトですか？（業界、名前、雰囲気）
• ブランドガイドラインやカラーパレットはありますか？（SVG では currentColor を使いますが、スタイルの選択に役立ちます）
• どのような印象にしたいですか？（モダン、親しみやすい、企業的、ミニマル、大胆）
• アイコンはおよそ何個必要ですか？（小規模なサイトでは通常 15～25 個）

「ニューカッスルの配管業者、モダンな雰囲気」のような簡単な説明があれば、作業を進められます。質問しすぎないようにします。

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

references/industry-icons.md を読み、業界に特化した候補を確認します。次のグループに整理します。

• ナビゲーション — メニュー、閉じる、矢印、検索
• コミュニケーション — 電話、メール、所在地、時計
• 信頼 — 星、盾、賞、ユーザー
• アクション — ダウンロード、共有、カレンダー、フォーム
• 業界固有 — この業種ならではのアイコン

リストを提示します。生成を始める前に、ユーザーが追加、削除、名前の変更をできるようにします。

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

references/style-presets.md を読み、プリセットの定義をすべて確認します。出発点として次のいずれかを選びます。

プリセット	最適な用途	線幅	端点／接合部	角
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}">
  
</svg>

厳守ルール

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

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

3. ルートのストローク属性はすべて同一 — <svg> 要素の stroke-width、stroke-linecap、stroke-linejoin は、すべてのアイコンで一致させてください。個別の要素での上書きは、本当に必要な場合に限ってください。

4. ルートに transform を適用しない — 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 — さまざまな複雑さのアイコンを適切に作成する例