ロゴクリエイタースキル

AI画像生成を通じて、反復的なデザインプロセスで専門的なロゴを作成します。

前提条件

必須 API キー（環境変数で設定）:

• GEMINI_API_KEY - Google AI Studio から取得
• REMOVE_BG_API_KEY - remove.bg から取得
• RECRAFT_API_KEY - recraft.ai から取得

必須スキル:

• nanobanana - AI画像生成（Gemini 3 Pro Image）

ファイル出力場所

生成されたすべてのファイルは .skill-archive ディレクトリに保存してください：

.skill-archive/logo-creator/<yyyy-mm-dd-summaryname>/

例:

.skill-archive/logo-creator/2026-01-18-opc-logo/
  logo-01.png
  logo-02.png
  ...
  logo-09-cropped.png
  logo-09-nobg.png
  logo-09.svg
  preview.html

ガイドライン:

• 日付は yyyy-mm-dd 形式を使用
• 短いサマリー名を追加（プロジェクト/ブランド名、ケバブケース）
• 最初のロゴ生成前にディレクトリを作成
• すべてのバリエーションと反復を同じフォルダに保持
• 最終承認されたロゴはユーザーの希望する場所にコピー

ワークフロー

ステップ 1: 発見と要件定義

生成する前に、ユーザーから要件を収集します：

質問事項:

1. プロジェクト/ブランド名 - ロゴは何のためですか？

2. スタイルの好み - references/styles.md のオプションを参照：

   • ピクセルアート / 8ビット レトロ
   • ミニマリスト / フラットデザイン
   • 3D / アイソメトリック
   • 手描き / スケッチ
   • マスコット / キャラクター
   • モノグラム / レターマーク
   • アブストラクト / ジオメトリック

3. アスペクト比 - デフォルトは 1:1（正方形）、オプション：

   • 1:1 - 正方形（ファビコン、アプリアイコン）
   • 16:9 - ワイド（ヘッダー、バナー）
   • 4:3 - スタンダード
   • 2:3 - ポートレート

4. 色の好み:

   • モノクロ（黒と白）
   • 特定のブランドカラー
   • AIに決定させる

5. 参照画像 - 参考にできる既存ロゴやスタイルはありますか？

ユーザーの確認を待ってから進めてください！

ステップ 2: ロゴバリエーションの生成

nanobanana スキルを使用して 20 個のロゴバリエーション（デフォルト）を生成します：

# 単一ロゴを生成
python3 <nanobanana_skill_dir>/scripts/generate.py "{style} logo for {brand}, {description}, {colors}" \
  --ratio 1:1 -o .skill-archive/logo-creator/<date-name>/logo-01.png

# 20 個のロゴをバッチ生成
python3 <nanobanana_skill_dir>/scripts/batch_generate.py "{style} logo for {brand}, {description}, {colors}" \
  -n 20 --ratio 1:1 -d .skill-archive/logo-creator/<date-name> -p logo

ガイドライン:

• 複数バリエーション用に batch_generate.py を使用（自動遅延を含む）
• .skill-archive/logo-creator/<yyyy-mm-dd-summaryname>/ ディレクトリに保存
• 連続した命名を使用: logo-01.png, logo-02.png, など

プロンプトのコツ:

• スタイルキーワードを含める: "pixel art", "minimalist", "8-bit", "flat design"
• 色を指定: "black on white", "monochrome", "blue gradient"
• コンテキストを追加: "tech startup", "food brand", "gaming company"
• フォーマットをリクエスト: "icon", "emblem", "mascot", "lettermark"

ステップ 3: HTML プレビューの作成

プレビューテンプレートをコピーしてブラウザで開きます：

cp <skill_dir>/templates/preview.html .skill-archive/logo-creator/<yyyy-mm-dd-summaryname>/preview.html

デフォルトブラウザで開きます：

open .skill-archive/logo-creator/<yyyy-mm-dd-summaryname>/preview.html

重要: 生成したロゴの正確な数を反映するよう HTML を更新してください。

ステップ 4: ユーザーとの反復

ユーザーにどのロゴが好みかを質問します：

• 「どのロゴが気に入りましたか？（例：#5, #12, #18）」
• 「これらの何が気に入りましたか？」
• 「変更したい部分はありますか？」

フィードバックに基づいて：

1. お気に入りのスタイルで 10～20 個の追加バリエーションを生成
2. 命名を使用: logo-{original}-v{n}.png（例：logo-05-v1.png）
3. HTML プレビューを更新
4. ユーザーが最終ロゴを選択するまで繰り返し

ステップ 5: ロゴの最終化

ユーザーがロゴを承認したら、処理します：

5a. 余白をトリミング（マージンなしの 1:1 にする）:

python3 <skill_dir>/scripts/crop_logo.py {input.png} {output-cropped.png}

5b. 背景を削除:

python3 <skill_dir>/scripts/remove_bg.py {input.png} {output-nobg.png}

5c. SVG に変換:

python3 <skill_dir>/scripts/vectorize.py {input.png} {output.svg}

ステップ 6: 最終アセットの配信

最終成果物を提示します：

## 最終ロゴアセット

| ファイル | 説明 | サイズ |
|------|-------------|------|
| logo.png | オリジナル | 1024x1024 |
| logo-cropped.png | マージンなし、1:1 | ~800x800 |
| logo-nobg.png | 透明背景 | ~800x800 |
| logo.svg | ベクター（スケーラブル） | ~20KB |

すべてのファイルは以下に保存されています: `.skill-archive/logo-creator/<yyyy-mm-dd-summaryname>/`
最終ロゴをユーザーの希望する場所にコピーしてください。

クイックリファレンス

一般的なプロンプトパターン

ピクセルアート:

Pixel art {subject} logo, 8-bit retro style, black pixels on white background, {size}x{size} grid, minimalist icon

ミニマリスト:

Minimalist {subject} logo, flat design, clean lines, {color} on white, simple geometric shapes

マスコット:

Cute {animal/character} mascot logo, friendly expression, {style} style, {colors}, suitable for brand icon

レターマーク:

Letter "{letter}" logo, modern typography, {style} design, {colors}, clean professional look

サポートされているアスペクト比

• 1:1 - 正方形（ロゴのデフォルト）
• 2:3, 3:2 - ポートレート/ランドスケープ
• 3:4, 4:3 - スタンダード
• 4:5, 5:4 - フォト
• 9:16, 16:9 - ワイド
• 21:9 - ウルトラワイド

参考資料

• references/styles.md - プロンプト例を含むロゴスタイルガイド
• examples/opc-logo-creation.md - 完全な実例会話