バナークリエイタースキル

AI画像生成による反復的なデザインプロセスで、プロフェッショナルなバナーを作成します。

前提条件

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

• GEMINI_API_KEY - Google AI Studio から取得

必須スキル:

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

ファイル出力先

生成されたファイルはすべて .skill-archive ディレクトリに保存します:

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

例:

.skill-archive/banner-creator/2026-01-19-opc-banner/
  banner-01.png
  banner-02.png
  ...
  banner-03-cropped.png
  preview.html

ワークフロー

ステップ 1: 発見と要件確認

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

確認する事項:

1. 目的 - バナーはどこで使用されますか？

   • GitHub README
   • Twitter/X ヘッダー
   • LinkedIn バナー
   • ウェブサイトヒーロー画像
   • YouTube チャンネルアート

2. ターゲットサイズ/アスペクト比 - references/formats.md を参照:

   • 2:1 (1280x640) - GitHub README
   • 3:1 (1500x500) - Twitter ヘッダー
   • 16:9 (1920x1080) - ウェブサイトヒーロー

3. スタイル好好:

   • 既存のロゴ/ブランドに合わせたい？
   • ピクセルアート / 8ビットレトロ
   • ミニマリスト / フラットデザイン
   • グラデーション / モダン
   • イラスト / アーティスティック

4. コンテンツ要素:

   • ブランド名 / プロジェクト名？
   • タグライン / スローガン？
   • ロゴキャラクターを含める？

5. 色の好み:

   • 既存のブランドカラー？
   • AI に任せる？

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

ステップ 2: バナーバリエーションを生成

nanobanana スキルを使用して、20個のバナーバリエーションを生成します:

# 単一バナーを生成
python3 <nanobanana_skill_dir>/scripts/generate.py "{style} banner for {brand}, {description}, {text elements}" \
  --ratio 21:9 -o .skill-archive/banner-creator/<date-name>/banner-01.png

# 20個のバナーをバッチ生成
python3 <nanobanana_skill_dir>/scripts/batch_generate.py "{style} banner for {brand}, {description}, {text elements}" \
  -n 20 --ratio 21:9 -d .skill-archive/banner-creator/<date-name> -p banner

ガイドライン:

• 21:9 の比率で生成（利用可能な最も広い比率）、後でターゲット比率にトリミング
• 複数のバリエーションには batch_generate.py を使用（自動遅延を含む）
• 順序付きネーミングを使用: banner-01.png, banner-02.png など

画像編集（既存ロゴの組み込み）:

python3 <nanobanana_skill_dir>/scripts/generate.py "add {logo character} to the left side of the banner" \
  -i /path/to/existing-logo.png --ratio 21:9 -o banner-with-logo.png

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

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

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

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

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

重要: HTML を更新して、生成されたバナーの正確な数を含めてください。

ステップ 4: ユーザーとイテレーション

ユーザーに好みのバナーを尋ねます:

• 「どのバナーが好きですか？（例：#3, #7, #15）」
• 「何が気に入りましたか？」
• 「変更したい点はありますか？」

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

1. お気に入りのスタイルの 10～20 個の新しいバリエーションを生成
2. ネーミングを使用: banner-{original}-v{n}.png (例：banner-03-v1.png)
3. HTML プレビューを更新
4. ユーザーが最終バナーを選択するまで繰り返す

ステップ 5: ターゲット比率にトリミング

ユーザーが承認したバナーをターゲットサイズにトリミングします:

python3 <skill_dir>/scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280

一般的なターゲット:

• GitHub README: --ratio 2:1 --width 1280 → 1280x640
• Twitter ヘッダー: --ratio 3:1 --width 1500 → 1500x500
• ウェブサイトヒーロー: --ratio 16:9 --width 1920 → 1920x1080

ステップ 6: 最終アセットを納品

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

## 最終バナーアセット

| ファイル | 説明 | サイズ |
|---------|------|--------|
| banner-03.png | オリジナル (21:9) | 2016x864 |
| banner-03-cropped.png | GitHub README (2:1) | 1280x640 |

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

クイックリファレンス

よく使用されるプロンプトパターン

テキスト付き:

Wide banner for {brand}, {style} style, featuring "{text}" prominently displayed, {colors}, {scene/elements}

キャラクター付き:

Wide banner featuring {character description}, {style} style, {scene}, text "{brand name}" on {position}, {colors}

抽象/グラデーション:

Abstract {style} banner, {colors} gradient, geometric patterns, modern tech feel, text "{brand}" centered

シーンベース:

{Style} illustration banner, {scene description}, {character} in {action}, "{brand}" text overlay, {colors}

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

最も広い比率で生成してからトリミング:

• 21:9 - ウルトラワイド（生成に推奨）
• 16:9 - ワイド
• 3:2 - 標準ワイド

参考資料

• references/formats.md - プラットフォーム別の一般的なバナーサイズ
• examples/opc-banner-creation.md - 完全な会話例