icon-generation

アイコン生成スキル

AI（Google Gemini）を使って、背景が透明なプロフェッショナルなアプリアイコンを生成します。

出力： 背景が透明な正方形の PNG。アプリストア、ファビコン、UIですぐに使用できます。

簡単な例

ユーザーの依頼	実行内容
「音楽アプリのアイコンを作成して」	背景が透明な正方形の PNG を生成します
「フラットスタイルの設定用歯車アイコンを作って」	すっきりした線のフラットデザインアイコンを生成します
「3D のショッピングカートアイコンを生成して」	奥行きと影のある 3D スタイルのアイコンを生成します
「ブログ用のファビコンが必要です」	Web 用に最適化された小さなアイコンを生成します
「ホーム、検索、プロフィールのアイコンセットを作成して」	複数のアイコンをまとめて生成します
「このスタイルに合わせたアイコンを作って」＋画像	参照画像を使ってスタイルを合わせます
「これに似たアイコンをもっと生成して」	参照画像をもとに統一感のあるアイコンセットを作成します

前提条件

• GOOGLE_API_KEY - Google Gemini による画像生成に必要です
  • キーの取得先：https://aistudio.google.com/apikey

アイコンのスタイル

スタイル	説明	最適な用途
flat	モダンなフラットデザイン、単色、影は最小限	iOS、Material Design、Web
3d	奥行き、グラデーション、リアルな影	macOS、プレミアムアプリ
line	細い線のみのアウトライン	ミニマルな UI、ツールバー
glyph	単色で塗りつぶした形状	システムアイコン、タブバー
gradient	なめらかな色の変化	モダンなアプリアイコン
minimal	必要最小限の形状のみを使った極めてシンプルなデザイン	プロフェッショナルですっきりした UI

ワークフロー

ステップ 1：要件の確認（必須）

質問ごとに AskUserQuestion ツールを使用します。一度に質問するのは 1 つだけです。

Q1：アイコンのコンセプト

「このアイコンは何を表しますか？

例：設定用歯車、ショッピングカート、ユーザープロフィール、ホーム、音符、カメラ」

回答を待ちます。

Q2：スタイル

「どのスタイルにしますか？

• フラット（モダン、単色）
• 3D（奥行き、影）
• ライン（アウトラインのみ）
• グリフ（塗りつぶした形状）
• グラデーション（色の変化）
• ミニマル（極めてシンプル）」

回答を待ちます。

Q3：サイズ

「どのサイズにしますか？（複数生成できます）

• 1024px（App Store、高解像度）
• 512px（Android、Web）
• 256px（デスクトップアプリ）
• 128px（ファビコン、小さな UI）
• 一般的なサイズをすべて」

回答を待ちます。

Q4：参照画像（任意ですが、アイコンセットでは重要です）

「スタイルを合わせるための参照画像はありますか？

• はい、スタイルを合わせたい既存のアイコンがあります
• いいえ、新しいスタイルで生成します」

ある場合は、画像のパスを尋ねます。回答を待ちます。

Q5：色（任意）

「色の希望はありますか？

• コンセプトに合わせて AI に選ばせる
• 色を指定する（例：青と白）
• モノクロ（単色＋透明）
• ブランドカラーに合わせる」

回答を待ちます。

Q6：出力形式

「どのファイル形式にしますか？

• PNG（透明度に対応、おすすめ）
• JPEG（ファイルサイズが小さい、透明度には非対応）
• WebP（最新の形式、圧縮率が高い）」

回答を待ちます。

Q7：背景の削除方法（PNG/WebP の場合）

「背景はどのように削除しますか？

• 組み込み（高速ですが、小さなアーティファクトが残る場合があります）
• Rembg（AI ベース、高品質、ローカルで実行）
• なし（生成時の白い背景を残す）」

回答を待ちます。

ステップ 2：プロンプトの作成

ユーザーの依頼をアイコンに特化したプロンプトに変換します。

テンプレート：

A [STYLE] style icon of [CONCEPT] on a transparent background.
Square format, centered, clean edges, suitable for app icon.
[COLOR PREFERENCES]. Simple, recognizable, professional.

変換例：

• ユーザー：「音楽アプリのアイコン」

• 改良版：「透明な背景に音符を描いたフラットスタイルのアイコン。正方形、中央配置、輪郭がすっきりしており、アプリアイコンに適しています。鮮やかな紫とピンクのグラデーション。モダンな雰囲気の、シンプルで認識しやすいプロフェッショナルなデザイン。」

• ユーザー：「ミニマルな設定用歯車」

• 改良版：「透明な背景に設定用歯車を描いたミニマルスタイルのアイコン。正方形、中央配置、輪郭がすっきりしています。モノクロのグレー。必要最小限の形状だけを使った極めてシンプルなデザインで、余計なディテールはありません。」

ステップ 3：アイコンを生成する

スクリプトを実行します：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 \
  --output "/path/to/icon.png"

複数のサイズを指定する場合：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 512 256 128 \
  --output "/path/to/icon"

次のファイルが生成されます：icon_1024.png、icon_512.png、icon_256.png、icon_128.png

一括生成（複数のアイコン）：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --batch '["home", "search", "profile", "settings"]' \
  --style "flat" \
  --size 512 \
  --output "/path/to/icons"

次のファイルが生成されます：home_512.png、search_512.png、profile_512.png、settings_512.png

ステップ 4：結果を渡す

1. 生成したアイコンをユーザーに表示します
2. 使用したプロンプトを提示します
3. 次の操作を提案します：
   • 別のサイズを生成する
   • 別のスタイルを試す
   • バリエーションを作成する
   • ICO（ファビコン形式）として生成する

スクリプトのパラメーター

パラメーター	短縮形	説明	デフォルト
--prompt	-p	アイコンの説明	必須
--style	-s	アイコンのスタイルプリセット	flat
--size	-z	サイズ（ピクセル単位）	512（または参照画像から自動設定）
--format	-f	出力形式（png、jpeg、webp）	png
--bg-removal	--bg	背景の削除方法（builtin、rembg、none）	builtin
--output	-o	出力先パス	自動生成
--batch	-b	コンセプトの JSON 配列	None
--colors	-c	色の指定	AI による選択
--reference	-r	スタイル合わせ用の参照画像	None

背景の削除方法

このスキルは、透明な背景を生成するために background-remove スキルを使用します。

方法	説明	最適な用途
builtin	白色をすばやく透明に変換	素早い反復作業、ほとんどのアイコン
rembg	U2-Net モデルを使用した AI による削除	高品質な結果、複雑な背景
none	白い背景をそのまま保持	JPEG 出力、手動での後処理

必要条件

インストール手順については、background-remove スキルを参照してください。

# Install rembg for AI-based background removal
pip install rembg

# Or with GPU acceleration (requires CUDA)
pip install rembg[gpu]

スタイル別のプロンプト修飾子

スクリプトは、スタイルに応じて次のプロンプト修飾子を自動的に追加します：

スタイル	追加される修飾子
flat	"フラットデザイン、単色、グラデーションなし、影は最小限、すっきりしたベクタースタイル"
3d	"3D スタイル、奥行き、柔らかな影、控えめなグラデーション、プロフェッショナルなレンダリング"
line	"線画、輪郭のみ、細く均一な線、塗りつぶしなし、ミニマリスト"
glyph	"塗りつぶした形、単色、大胆なシルエット、高いコントラスト"
gradient	"滑らかなグラデーションカラー、モダンで鮮やかな色の移り変わり、光沢のある仕上がり"
minimal	"超ミニマル、本質的な形のみ、最大限のシンプルさ、幾何学的"

一般的なアイコンサイズ

サイズ	用途
1024px	iOS App Store、高解像度ディスプレイ
512px	Android Play Store、macOS アプリ
256px	Windows アプリ、デスクトップショートカット
192px	Android ランチャーアイコン
180px	iOS ホーム画面
128px	ファビコン（高解像度）、小さな UI
64px	ツールバーアイコン
32px	標準的なファビコン
16px	最小サイズのファビコン

エラー処理

API キーがない場合：

Error: GOOGLE_API_KEY not set. Get your key at https://aistudio.google.com/apikey

生成に失敗した場合：

• より簡潔なプロンプトで再試行します
• コンセプトが明確で、認識しやすいか確認します
• コンセプトに適したスタイルか確認します

背景が透明にならない場合：

• スクリプトは透明な背景を明示的に要求します
• それでも透明にならない場合は、プロンプトに「透明な背景に単独で配置」を追加してみてください
• 複雑なコンセプトでは、結果にばらつきが生じる場合があります

参照画像のサポート

一貫性のあるアイコンセットを作成するには、参照画像を使用します。参照画像を指定すると、AI は次の要素を合わせます：

• ビジュアルスタイルとデザイン言語
• 線の太さとストロークの幅
• カラーパレットと陰影
• 詳細さと複雑さの度合い
• 全体のプロポーションと間隔

参照画像を使うタイミング

シナリオ	参照画像を使用しますか？
同じアプリ用に複数のアイコンを作成する	はい — 一貫性を保てます
既存のブランドアイコンに合わせる	はい — ブランドのアイデンティティを維持できます
既存のアイコンセットに追加する	はい — 自然に調和します
単独のアイコンを作成する	任意 — 新しいスタイルでも問題ありません
さまざまなスタイルを試す	いいえ — AI に自由に作成させます

参照画像の例

既存のスタイルに合わせた単一のアイコン：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "settings gear" \
  -r /path/to/existing_icon.png \
  -z 512

一貫したスタイルのアイコンセット：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "profile", "settings", "notifications"]' \
  -r /path/to/brand_icon.png \
  -z 512 \
  -o "app_icons"

複数の参照画像（最大14枚）：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "calendar" \
  -r /path/to/icon1.png \
  -r /path/to/icon2.png \
  -z 512

最良の結果を得るためのヒント

1. コンセプトを具体的にする：「ショッピングカート」は「Eコマース」より適しています
2. プラットフォームに合わせたスタイルにする：iOS／Androidにはフラット、macOSには3Dが適しています
3. シンプルにする：アイコンは小さいサイズでも認識できる必要があります
4. 小さいサイズでテストする：読みやすさを確認するため、32pxで生成します
5. スタイルを統一する：アイコンセットでは、すべてのアイコンに同じスタイルを使用します
6. 参照画像を使用する：アイコンセットでは、一貫性を保つため、必ず参照画像を使用します

例

アプリアイコン

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "camera with colorful lens" \
  -s gradient \
  -z 1024 512 256 \
  -o "camera_icon"

ファビコン

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "letter B for blog" \
  -s minimal \
  -z 128 32 16 \
  -o "favicon"

アイコンセット

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "notifications", "profile", "settings"]' \
  -s flat \
  -z 512 \
  -o "app_icons"

高品質な背景の削除（Rembg）

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "detailed gear with shadows" \
  -s 3d \
  -z 512 \
  --bg rembg \
  -o "gear_icon"

背景削除機能を内蔵したWebP形式

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "lightning bolt" \
  -s gradient \
  -z 512 \
  -f webp \
  -o "bolt_icon"