Claude Code に Nano Banana MCP|画像生成の接続設定と使い方

Conclusion

Claude Code に Nano Banana の MCP サーバーを接続するには、Gemini API キーを用意し .mcp.jsonnpx nano-banana-mcp を登録するだけでよい。導入後は「画像を作って」と頼むだけで generate_image など4つのツールが起動し、コードを書きながら画像の生成・編集をその場で完結できるとわかる。

Contents (8)

Nano Banana MCP とは何か

「Nano Banana」は Google が提供する画像生成モデルの通称で、正式には Gemini の画像生成系モデル(gemini-2.5-flash-image ほか)を指します。この画像生成機能を Model Context Protocol(MCP)サーバーとしてラップしたものが「Nano Banana MCP」です。

MCP は、Claude Code のような開発ツールに外部サービスをツールとして接続するための共通規格です。Nano Banana を MCP サーバー化して登録すると、Claude Code が画像生成・編集を「呼び出せるツール」として認識し、ターミナルやエディタを離れずに「記事のヘッダー画像を作って」と頼むだけで画像が返ってきます。

代表的な実装が GitHub の ConechoAI/Nano-Banana-MCP です。Google Gemini 2.5 Flash Image API を薄くラップし、Claude Code・Cursor などの MCP クライアントから利用できます(出典: https://github.com/ConechoAI/Nano-Banana-MCP )。npm にも @ycse/nanobanana-mcp などの実装が公開されており、いずれも npx 一発で起動できる手軽さが特徴です(出典: https://www.npmjs.com/package/@ycse/nanobanana-mcp )。

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

Nano Banana MCP は Google AI Studio 経由の Gemini API を使います。接続前に次を準備してください。

  1. Google AI Studio(https://aistudio.google.com/ )にアクセスし、API キーを発行する
  2. 発行したキー(GEMINI_API_KEY)を控えておく
  3. 画像生成は従量課金のため、無料枠と単価の範囲を確認しておく

gemini-2.5-flash-image は 1 枚あたりおよそ $0.04 が目安です。まず標準モデルで試し、高品質が必要な用途だけ上位モデルに切り替えると無駄がありません。

.mcp.json に MCP サーバーを登録する

最も基本的な方法は、プロジェクト直下の .mcp.json(または ~/.claude.json)にサーバー定義を書く方式です。次のように記述します。

{
  "mcpServers": {
    "nano-banana": {
      "command": "npx",
      "args": ["nano-banana-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-gemini-api-key-here"
      }
    }
  }
}

commandnpxargsnano-banana-mcp を指定すると、Claude Code 起動時にサーバーが自動でダウンロード・起動されます。API キーは env ブロックに渡すのが安全で、設定の優先順位は「MCP 設定の環境変数 > システム環境変数 > ローカル設定ファイル」の順です(出典: https://github.com/ConechoAI/Nano-Banana-MCP )。

claude mcp add コマンドで登録する

JSON を手で書かずに、CLI からワンコマンドで登録することもできます。ターミナルで次を実行します。

claude mcp add nano-banana \
  --env GEMINI_API_KEY=your-gemini-api-key-here \
  -- npx nano-banana-mcp

登録後は claude mcp list で接続状態を確認できます。✓ Connected と表示されれば成功です。プロジェクト単位で使い分けたい場合は --scope project、全プロジェクトで共有したい場合は --scope user を付けて登録先を切り替えます。チームで共有するなら .mcp.json をリポジトリにコミットする方式、自分専用なら CLI 登録が手軽です。

提供される4つのツール

Nano Banana MCP を接続すると、Claude Code から次のツールが使えるようになります(出典: https://github.com/ConechoAI/Nano-Banana-MCP )。

  1. generate_image:テキストプロンプトから新規画像を生成する
  2. edit_image:既存画像を自然文で編集する。参照画像も渡せる
  3. continue_editing:直前に生成・編集した画像をそのまま続けて編集する
  4. get_last_image_info:最後に扱った画像のパスやメタ情報を取得する

このほか、API キーを後から設定する configure_gemini_token、接続状態を確認する get_configuration_status といった管理ツールも備えています。複数の参照画像を渡してスタイルを転送したり、生成→微修正→再修正の反復ワークフローを回したりできるのが MCP 方式の強みです。

実際の使い方

接続後は、Claude Code が画像生成の依頼を検知して自動でツールを呼び出します。明示的にツール名を指定する必要はありません。

たとえば「ブログ記事のアイキャッチを横長で作って」と日本語で頼むと、Claude Code が文脈を読み取って英語の詳細プロンプトに変換し、generate_image を実行します。生成された画像は自動命名され、作業ディレクトリ配下に保存されます。

続けて「もう少し青を強くして」と頼めば continue_editing が直前の画像を引き継いで再生成します。手元のロゴやスクリーンショットを参照画像として渡し、「このトーンに合わせて」と指示すれば edit_image がスタイルを揃えてくれます。コードを書く流れを止めずに、画像の試作と修正を同じ会話の中で完結できる点が最大のメリットです。

Skill 方式との違いと使い分け

Nano Banana を Claude Code から使う方法には、MCP 方式のほかに Skill 方式もあります。Skill は SKILL.md という手順書を ~/.claude/skills/ に置き、画像生成という文脈を検知したときだけ自動で読み込ませる仕組みです(詳細は Claude Code で Nano Banana を Skill 化する手順 を参照)。

両者の違いは次のとおりです。

  1. MCP 方式:画像生成を「ツール」として登録する。npx で起動でき、generate_image など構造化されたツール群を直接呼べる。モデルや保存先を厳密に管理したい、複数プロジェクトで中核を共通化したい用途に向く
  2. Skill 方式:画像生成の「手順書」を読み込ませる。日本語プロンプトの英語変換やパラメータ選択を手順側で柔軟に書ける。最小構成ですぐ試したい用途に向く

実務では、API ラッパーとして安定して使いたい部分は MCP サーバーに任せ、プロンプト整形などの細かな振る舞いは Skill に書く2層構成も有効です。まずは MCP 単体で接続し、運用が固まったら Skill を足していくのが現実的です。

注意点とコスト管理

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

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

特にコスト面では、1 回の依頼で複数バリエーションを生成すると枚数分だけ課金されます。試作段階では枚数を 1 に絞り、本番用途で増やすのが安全です。

Nano Banana MCP を接続すれば、Claude Code 内で「コードを書く」「画像を作る」という2つの作業を行き来せずに完結できます。.mcp.json への数行の登録、または claude mcp add のワンコマンドで始められるので、まずは標準モデルで試し、ワークフローに合わせて構成を広げていくのがおすすめです。

Helpful? ♡
Clauder Navi Editorial Team
@clauder_navi

Delivering the latest Claude / Claude Code news and practical insights daily. Learn more about us at About this site.