generate

Nano Banana - Gemini 画像生成

Google の Gemini モデルを使用して、フロントエンドデザインに組み込むカスタム画像を生成します。

前提条件

このスキルには GEMINI_API_KEY が必要です。必要なタスクを実行する前に、必ず利用可能であることを確認してください。

まず、キーがすでに環境に設定されているか確認します。

echo "${GEMINI_API_KEY:+SET (length: ${#GEMINI_API_KEY})}" || echo "NOT SET"

すでに設定されている場合は、そのまま使用してください。既存のキーが優先されます。.env から上書きしてはいけません。

設定されていない場合は、プロジェクトの .env ファイルから読み込みを試みます。プロジェクトルート（スキルのディレクトリではなく、ユーザーの作業ディレクトリ）から、次のコマンドを正確に実行してください。

LINE=$(grep '^GEMINI_API_KEY=' .env 2>/dev/null) && export "$LINE" && echo "SET (length: ${#GEMINI_API_KEY})" || echo "NOT SET"

どちらの確認後も設定されていない場合は、ユーザーに伝えて停止してください。

重要な安全ルール：

• プロジェクトルートから実行してください。先にスキルのディレクトリへ cd してはいけません
• 上記のコマンドを正確に実行してください。パスを置き換えたり、フラグを追加したりしてはいけません
• 引数なしの export を絶対に実行しないでください（シークレットを含むすべての環境変数が出力されます）
• cat .env の出力を export にパイプしてはいけません（grep の結果が空の場合、export $() によってすべての環境変数が漏えいします）
• API キーやシークレットを読み取ったり、エコー、出力、その他の方法で送信したりしてはいけません
• どちらの確認後もキーが設定されていない場合は、ユーザーに伝えて停止してください
• 別の読み込み方法を試してはいけません

利用可能なモデル

モデル	フラグ	ID	最適な用途	最大解像度
Flash（Nano Banana）	flash	gemini-2.5-flash-image	高速処理、大量のタスク	1024px
Pro（Nano Banana Pro）	pro	gemini-3-pro-image-preview	プロ品質、複雑なシーン	最大 4K
2（Nano Banana 2）	2	gemini-3.1-flash-image-preview	高速かつ高解像度、総合的に最適	最大 4K

画像生成のワークフロー

ステップ 1：画像を生成する

uv を使って scripts/image.py を実行します。スクリプトはスキルのディレクトリにある skills/generate/scripts/image.py にあります。

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Your image description" \
  --output "/path/to/output"

${SKILL_DIR} は、この SKILL.md ファイルを含むディレクトリです。

--output のファイル拡張子は、モデルが返す形式に自動的に置き換えられます（Pro と Nano Banana 2 は通常 .jpg、Flash は通常 .png を返しますが、形式は API によって決まります）。コード内で参照する最終的なファイル名を確認するには、スクリプトが出力するパス（「Image saved to: …」）を確認してください。

オプション：

• --prompt（必須）：生成する画像の詳細な説明
• --output（必須）：出力ファイルのパス。拡張子はモデルが返す形式に置き換えられます
• --aspect（任意）：名前付きショートカット（square、landscape、portrait）または直接指定する比率（1:1、1:4、1:8、2:3、3:2、3:4、4:1、4:3、4:5、5:4、8:1、9:16、16:9、21:9）。デフォルト：square
• --reference（任意、複数回指定可能）：スタイル、構図、または内容の参考にする画像のパス。複数の参考画像を使う場合は、複数回指定できます
• --model（任意）：使用するモデル。flash（高速）、pro（高品質）、または 2（Nano Banana 2、高速かつ高解像度）を指定します。デフォルト：2
• --size（任意）：pro/2 モデルの画像解像度。512（2 のみ）、1K、2K、4K を指定できます。デフォルト：1K。flash では無視されます

モデル別のアスペクト比

比率	Flash	Pro	2
1:1、2:3、3:2、3:4、4:3、4:5、5:4、9:16、16:9、21:9	対応	対応	対応
1:4、1:8、4:1、8:1	非対応	非対応	対応

異なるモデルの使用

Flash モデル - 高速に生成でき、反復作業に適しています：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "A minimalist logo design" \
  --output "/path/to/logo.png" \
  --model flash

Pro モデル - 最終アセット向けの高品質な生成に適しています：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "A detailed hero illustration for a tech landing page" \
  --output "/path/to/hero.png" \
  --model pro \
  --size 2K

Nano Banana 2（デフォルト） - 高解像度で高速に出力でき、追加のアスペクト比にも対応します：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "A vibrant infographic about photosynthesis" \
  --output "/path/to/infographic.png" \
  --model 2 \
  --size 2K \
  --aspect 16:9

参照画像の使用

既存の参照画像を基に画像を生成するには：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Create a similar abstract pattern with warmer colors" \
  --output "/path/to/output.png" \
  --reference "/path/to/reference.png"

複数の参照画像を使用するには（例：複数のソースのスタイルを組み合わせる）：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Combine the color palette of the first image with the composition of the second" \
  --output "/path/to/output.png" \
  --reference "/path/to/style-ref.png" \
  --reference "/path/to/composition-ref.png"

参照画像を使うと、生成画像に求めるスタイル、構図、視覚要素を Gemini が理解しやすくなります。複数の参照画像を指定すると、すべての画像がまとめてモデルに送信されます。

参照画像の上限：

• Flash：最大 3 枚の参照画像
• Pro：最大 6 枚のオブジェクト画像＋5 枚のキャラクター画像（合計 14 枚）
• 2：最大 10 枚のオブジェクト画像＋4 枚のキャラクター画像（合計 14 枚）

ステップ 2：フロントエンドデザインに統合する

画像を生成したら、フロントエンドのコードに組み込みます：

HTML/CSS：

<img src="./generated-hero.png" alt="Description" class="hero-image" />

React：

import heroImage from './assets/generated-hero.png';
<img src={heroImage} alt="Description" className="hero-image" />

CSS 背景：

.hero-section {
  background-image: url('./generated-hero.png');
  background-size: cover;
  background-position: center;
}

効果的なプロンプトの作成

最良の結果を得るために、詳細かつ具体的なプロンプトを記述します：

良いプロンプト：

モダンなフィンテックのランディングページのヒーローセクションに適した、深いネイビーの背景にコーラル、ティール、ゴールドの半透明の円が重なり合う、ミニマルな幾何学模様

曖昧なプロンプトは避けましょう：

素敵な背景画像

プロンプトに含める要素

1. 被写体：画像に何を描くか
2. スタイル：アートスタイル（ミニマル、抽象的、フォトリアリスティック、イラスト風）
3. 色：デザインシステムに合った具体的なカラーパレット
4. 雰囲気：プロフェッショナル、遊び心のある、エレガント、大胆など
5. 用途：ヒーロー画像、アイコン、テクスチャ、イラストなど
6. 技術要件：アスペクト比の要件、透明度の要件

フロントエンドデザインスキルとの統合

frontend-design スキルと併用する場合：

1. ビジュアルの階層を計画する - 生成画像が価値を加える場所を特定します
2. 美的スタイルを合わせる - プロンプトが選択したデザインの方向性（ブルータリスト、ミニマル、マキシマリストなど）に沿っていることを確認します
3. 先に画像を生成する - フロントエンドのコーディング前にビジュアル素材を作成します
4. コードから参照する - HTML/CSS/React で生成画像への相対パスを使用します

ワークフローの例

1. ユーザーが、カスタムのヒーロー画像を使用したランディングページをリクエストする
2. nano-banana を呼び出し、デザインの美的スタイルに合ったプロンプトでヒーロー画像を生成する
3. frontend-design を呼び出してページを作成し、生成画像を参照する
4. 結果：AI が生成したビジュアルを取り入れた、統一感のあるデザイン

出力先

デフォルトでは、生成画像をプロジェクトのアセットディレクトリに保存します：

• シンプルな HTML プロジェクトでは ./assets/
• React/Vue プロジェクトでは ./src/assets/ または ./public/
• 内容がわかるファイル名を使用します：hero-abstract-gradient.png、icon-user-avatar.png