Claude Code で Nano Banana｜Skill で画像生成する設定手順

Nano Banana を Claude Code の Skill にするとは

「Nano Banana」は Google が提供する画像生成モデルの通称で、正式には Gemini の画像生成系モデル(gemini-2.5-flash-image ほか)を指します。これを Claude Code の Skill として組み込むと、エディタやターミナルを離れずに「ブログのヘッダー画像を作って」と日本語で頼むだけで画像が生成されます。

Skill とは、Claude Code が特定のタスクに遭遇したときだけ自動で読み込む手順書(SKILL.md)の仕組みです。画像生成という文脈を Claude Code が検知すると Nano Banana の Skill が起動し、Gemini API を呼んで画像ファイルを返します。プロンプトを毎回コピペする運用と違い、必要なときだけ手順が展開されるためコンテキストを圧迫しません。

代表的な実装に GitHub の kkoppenhaver/cc-nano-banana があり、テキストから画像、画像編集、アイコン生成などをひとつの Skill にまとめています(出典: https://github.com/kkoppenhaver/cc-nano-banana )。

事前準備:Gemini API キーを取得する

Nano Banana は Google AI Studio 経由の Gemini API を使います。まず以下を準備してください。

1. Google AI Studio(https://aistudio.google.com/ )にアクセスし、API キーを発行する
2. 発行したキーを控えておく(後で環境変数に設定します)
3. 課金が発生するモデルのため、無料枠と従量課金の範囲を確認しておく

gemini-2.5-flash-image は 1 枚あたりおよそ $0.04 が目安で、より高品質な gemini-3-pro-image-preview を選ぶこともできます(出典: https://github.com/kkoppenhaver/cc-nano-banana )。最初は標準モデルで試し、品質が必要な用途だけ上位モデルに切り替えると無駄がありません。

Skill 方式の導入手順

最もシンプルなのは Skill 単体で導入する方式です。次の順で進めます。

Step 1: Gemini CLI を入れる

npm install -g @google/gemini-cli

Step 2: API キーを環境変数に設定する

export NANOBANANA_GEMINI_API_KEY="your-api-key"

.bashrc や .zshrc に書いておくと、ターミナルを開くたびに有効になります。

Step 3: SKILL.md を配置する

リポジトリをクローンするか、SKILL.md を ~/.claude/skills/nano-banana/ にコピーします。

git clone https://github.com/kkoppenhaver/cc-nano-banana ~/.claude/skills/nano-banana

これで Claude Code を起動すると、Skill が自動的に認識されます。生成された画像は作業ディレクトリの ./nanobanana-output/ に保存されます(出典: https://github.com/kkoppenhaver/cc-nano-banana )。

呼び出し方とコマンド一覧

導入後は、Claude Code が画像生成の依頼を検知して自動で Skill を起動します。明示的にコマンドを指定することも可能です。

• /generate:テキストから画像を生成する
• /edit:既存画像を自然文で編集する
• /restore:古い写真などを修復する
• /icon:アプリアイコンを生成する
• /diagram:フローチャートや図解を生成する

たとえば「機械学習に関する記事のヘッダー画像を作って」と頼むと、Claude Code が文脈を読み取って詳細な英語プロンプトに変換し、Nano Banana に渡します。日本語のまま依頼しても、Skill 側がプロンプトを英語化してくれるのが利点です。

MCP サーバーと組み合わせる2層構成

より柔軟に制御したい場合は、MCP サーバーと Skill を組み合わせた2層構成が向いています。MCP サーバー層が Gemini API の薄いラッパーとして generate_image と edit_image の2ツールを提供し、Skill 層が日本語プロンプトの英語変換やパラメータの自動選択を担当する形です(出典: https://masa373.work/blog/claude-code-nano-banana-mcp )。

MCP サーバーは .mcp.json に登録します。

{
  "mcpServers": {
    "nanobanana": {
      "command": "uv",
      "args": ["run", "--directory", "/path/to/nanobanana", "python", "server.py"]
    }
  }
}

この構成では、サードパーティの MCP サーバーに依存せず自前で実装するため、モデル選択や保存先を完全にコントロールできます。gemini-3.1-flash-image-preview のような 4K 対応モデルへ差し替えるのも容易です。

どちらの方式を選ぶべきか

シンプルに画像生成を始めたいなら Skill 単体方式で十分です。SKILL.md をコピーして API キーを通すだけで、数分で使い始められます。

一方、複数のプロジェクトで画像生成ロジックを共通化したい、生成パラメータや保存先を厳密に管理したい、という場合は MCP + Skill の2層構成が適します。MCP サーバーが API ラッパーとして独立しているため、Skill を差し替えても画像生成の中核は壊れません。

note や Zenn でも、記事のアイキャッチを「サムネ作って」の一言で生成する事例が共有されており(出典: https://note.com/naoki_35/n/nfd7fea56b151 、https://zenn.dev/long910/articles/2026-02-28-claude-gemini-nano-banana )、コーディングと画像制作を一つのワークフローに統合する動きが広がっています。

注意点とコスト管理

導入時に押さえておきたいポイントは次のとおりです。

1. API キーは環境変数で管理し、リポジトリにコミットしない
2. 画像生成は従量課金のため、生成枚数とモデルの単価を把握しておく
3. 標準モデルで試作し、品質が必要な箇所だけ上位モデルへ切り替える
4. 生成画像の保存先(./nanobanana-output/ など)を .gitignore に入れるか運用を決める

特にコスト面では、/generate の variation 数を増やすと枚数分だけ課金される点に注意してください。テスト段階では variation を 1 に絞り、本番用途で増やすのが安全です。

Nano Banana を Skill 化すれば、Claude Code 内で「コードを書く」「画像を作る」という2つの作業を行き来せず完結できます。まずは Skill 単体方式で導入し、運用が固まったら MCP 構成へ発展させるのが現実的な進め方です。