banner-creator

バナー作成スキル

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 バナー
   • Web サイトのヒーロー画像
   • YouTube チャンネルアート

2. 目標とする比率／サイズ - references/formats.md を参照：

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

3. スタイルの希望：

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

4. コンテンツ要素：

   • ブランド名／プロジェクト名はありますか？
   • タグライン／スローガンはありますか？
   • 含めるロゴキャラクターはありますか？

5. 色の希望：

   • 既存のブランドカラーはありますか？
   • AI に任せますか？

先に進む前に、ユーザーの確認を待ってください！

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

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

# Generate single banner
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

# Batch generate 20 banners
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
• Web サイトのヒーロー画像：--ratio 16:9 --width 1920 → 1920x1080

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

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

## Final Banner Assets

| File | Description | Size |
|------|-------------|------|
| banner-03.png | Original (21:9) | 2016x864 |
| banner-03-cropped.png | GitHub README (2:1) | 1280x640 |

All files saved to: `.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/`
Copy final banner to user's desired location.

クイックリファレンス

よく使われるプロンプトのパターン

テキストあり：

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 - 会話の完全な例