mcpField
N
nano-banana-imagegen

nano-banana-imagegen

github.com/the-focus-aiクリエイティブ・メディア2099 回インストール16 週間前に更新
リポジトリ

nano-banana-imagegen について

nano-banana-imagegenは、`nano-banana`コマンドラインからGoogleのGemini画像モデルを使って画像を生成・編集するスキルです。テキストプロンプトによる生成、既存画像の編集、モデル選択、出力先の指定に対応します。

主な機能

  1. 01テキストプロンプトから画像を生成
  2. 02`--file`で入力画像を編集
  3. 03Geminiモデルの選択
  4. 04出力先の指定
  5. 05ファイルからプロンプトを読み込み
  6. 06利用可能なモデルを一覧表示

活用シーン

  1. 01ブログのヘッダー画像を作成
  2. 02既存写真に狙った変更を加える
  3. 03商品画像やイラストを生成
  4. 04アイコンやロゴの案を作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/the-focus-ai/nano-banana-cli --skill nano-banana-imagegen

インストール後、Claude Code で/nano-banana-imagegenを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

prompting-guide.md
examples/
headers-and-heroes.md
icons-and-logos.md
illustrations.md
photography-and-editing.md

詳細

Nano Banana 画像生成

nano-banana CLI を使って、Google の Gemini 画像モデルで画像を生成・編集します。

前提条件

  • GEMINI_API_KEY 環境変数が設定されていること
  • npx @the-focus-ai/nano-banana で CLI がインストールされていること

クイックリファレンス

# Generate a new image
npx @the-focus-ai/nano-banana "a serene mountain landscape at sunset"

# Edit an existing image
npx @the-focus-ai/nano-banana "add a hot air balloon to the sky" --file photo.jpg

# Specify output path
npx @the-focus-ai/nano-banana "a minimalist logo" --output logo.png

# Use a specific model
npx @the-focus-ai/nano-banana "detailed illustration" --model gemini-2.5-flash-image

ワークフロー

ステップ 1:リクエストを把握する

生成する前に、次の点を明確にします。

  • 被写体:画像に何を描くか
  • スタイル:写実的、イラスト、漫画、抽象的など
  • 雰囲気:明るい、暗い、落ち着いた、陽気など
  • 構図:クローズアップ、ワイドショット、特定のアスペクト比など
  • 用途:ヒーロー画像、アイコン、ソーシャルメディア、印刷物など
ステップ 2:効果的なプロンプトを作成する

詳しい説明については、prompting-guide.md を参照してください。

重要な原則:

  1. 具体的かつ詳細に記述する
  2. スタイルの参考情報を含める
  3. 望まない要素を指定する
  4. 構図とフレーミングを説明する

例 - 不十分なプロンプト:

"a cat"

例 - 効果的なプロンプト:

"A fluffy orange tabby cat curled up on a velvet armchair, soft afternoon sunlight streaming through a window, warm cozy interior, photorealistic style, shallow depth of field"
ステップ 3:画像を生成する
npx @the-focus-ai/nano-banana "your detailed prompt here"

デフォルトの出力先:output/generated-<timestamp>.png

ステップ 4:調整する

結果が期待どおりでない場合:

  1. プロンプトを調整する - 詳細や制約を追加します
  2. 画像を編集する - --file を使って生成した画像を編集します
  3. 別のモデルを試す - モデルによって得意なスタイルが異なります

コマンド

テキストから画像を生成
npx @the-focus-ai/nano-banana "<prompt>"
画像編集
npx @the-focus-ai/nano-banana "<edit instruction>" --file <input-image>

編集の指示では、変更内容を説明します。

  • 「背景を削除して、グラデーションに置き換える」
  • 「人物にサングラスを追加する」
  • 「空を夕焼け色に変える」
  • 「水彩画のように見せる」
オプション
オプション説明
--file <image>編集する画像の入力
--output <path>出力先のカスタムパス
--model <name>使用する Gemini モデル
--flashgemini-2.5-flash-image を使用します(高速で、シンプルな画像に適しています)
--prompt-file <path>ファイルからプロンプトを読み込みます
--list-models利用可能なモデルを表示します

ベストプラクティス

より良い結果を得るには
  1. 構図から始める:まずレイアウトを説明し、次に細部を説明します
  2. 芸術作品を参考にする:「スタジオジブリ風に」、「National Geographic の写真のように」
  3. 照明を指定する:「ゴールデンアワーの照明」、「ドラマチックな明暗法」、「柔らかな拡散光」
  4. 避ける要素を含める:プロンプト内で避ける要素を説明します
  5. アスペクト比を考慮する:モデルはデフォルトで正方形の画像を生成します。必要に応じて横長や縦長と説明してください
編集するには
  1. 変更内容を具体的にする:「左上隅に青い蝶を追加する」
  2. うまくいっている部分を保つ:「背景は変更せず、前景だけを編集する」
  3. 段階的に調整する:細かく制御するため、一度に 1 つずつ変更します
一貫性を保つには

関連する画像を複数作成する場合:

  1. プロンプトにスタイルガイドを作成します
  2. 各プロンプトで同じスタイル表現を使います
  3. 後続の画像を編集する際は、最初の画像を参考にします

プロンプトの例

プロンプトの詳しい例については、examples/ ディレクトリを参照してください。

ヘッダー/ヒーロー画像
"Wide 16:9 header image for a technology blog. Clean minimalist design with
abstract geometric shapes in teal and orange. Bright white background,
editorial magazine aesthetic. No text, no dark colors, no gradients."
商品写真風
"Professional product photo of a ceramic coffee mug on a marble surface.
Soft natural lighting from the left, subtle shadow, clean white background.
Commercial photography style, 4K quality, sharp focus on the product."
イラスト
"Whimsical children's book illustration of a fox reading a book under a
large oak tree. Soft watercolor style, warm autumn colors, gentle and
inviting mood. Simple composition with the fox as the focal point."
アイコンとロゴ
"Minimalist app icon for a meditation app. Simple lotus flower symbol in
a soft purple gradient. Clean geometric design, works at small sizes,
modern and calming aesthetic."

トラブルシューティング

「応答に画像がありません」
  • プロンプトが安全フィルターに抵触した可能性があります
  • 曖昧さの少ない表現に言い換えてみてください
  • モデルが画像生成に対応しているか確認してください
画質が低い
  • スタイルの指示をより具体的に追加してください
  • より高性能なモデル(gemini-2.5-flash-image)を使用してください
  • 希望する内容をより明確に伝えてください
画像が説明と一致しない
  • 構図をより明確に指定してください
  • 否定的な制約(「X なし、Y なし」)を追加してください
  • 複雑なプロンプトを、より簡単な部分に分けてみてください

環境設定

GEMINI_API_KEY が設定されていることを確認してください。

export GEMINI_API_KEY="your-api-key-here"

または、プロジェクトに .env ファイルを作成します。

GEMINI_API_KEY=your-api-key-here

コメント