ブログに戻る
BananaBanana Teamtutorialmcpclaude

Claude Codeで画像生成:2分で完了するMCP設定方法

リモートMCPサーバーを1つ導入するだけで、Claude CodeやClaude Desktopで画像生成が可能になります。ローカルインストールやGoogle APIキーは不要。画像は$0.03から生成できます。実際のセットアップ手順から、生成にかかるリアルなコストまで詳しく解説します。

Claude Codeで画像生成:2分で完了するMCP設定方法

画像生成用のMCPサーバーは、Claudeに画像を作らせるための「最後のピース」です。Claudeがプロンプトを作成してgenerate_imageツールを呼び出すと、サーバー側が実際のモデル(今回の場合はGoogleのNano Bananaファミリー)で画像を生成し、そのURLを返します。Claude単体では絵を描くことができません。Anthropicはこれまで画像生成モデルを提供したことがないため、Claude CodeやClaude Desktopは画像の読み込み(認識)は非常に得意ですが、自ら画像を生成することはできません。

手っ取り早く結論を知りたい方は、BananaBananaのプロフィールでAPIキーを作成し、ターミナルで以下のコマンドを1つ実行するだけです。

claude mcp add --transport http bananabanana https://bananabanana.pro/api/mcp \
  --header "Authorization: Bearer bb_live_YOUR_KEY"

インストール手順はこれだけです。ローカルサーバーの起動も、Google Cloudアカウントも、サブスクリプションの契約も必要ありません。料金はプリペイド残高から引かれ、画像は1枚$0.03から、動画は1本$0.10から生成できます。そして、この記事の信頼性を担保するために、あらかじめお伝えしておきます。本記事に掲載しているすべてのイラストは、Claude Codeがこの記事のテキストを執筆している最中に、まさにこのサーバーを経由して生成したものです。かかったメディア費用の総額は、1回のリテイク(再生成)を含めてわずか$1.29でした。領収書の詳細は記事の最後で公開しています。

Claudeはなぜ単体で画像を生成できないのか?

Anthropicはテキストと推論モデルの開発に特化しています。ビジョン機能は一方向のみです。Claudeはスクリーンショットや写真を読み取って理解することはできますが、そのモデルファミリーに画像生成器は含まれておらず、リリースの予定も発表されていません。ChatGPTには画像生成モデルが標準で組み込まれていますが、Claudeにはそれがありません。

これに対するコミュニティの解決策がローカルMCPサーバーでした。GitHubには多くのサーバーが公開されており、実際に動作します。しかし、ここで言う「インストール」とは、ローカルで独自のプロセスを実行し、Node.jsやPythonの環境を維持し、使用するすべてのマシンで設定ファイルにサーバーを連携させることを意味します。そして最も厄介なのは、自分自身のGoogle APIキーを用意しなければならない点です。料金の請求は自身のGoogleアカウントに紐づき、独自のクォータ(利用制限)やダッシュボードでの管理が必要になります。個人のノートPCで少し試すだけのデベロッパーならこれでも問題ありませんが、それ以外の人にとっては、ちょっとしたインフラ構築プロジェクトになってしまいます。

リモートMCPサーバーはこの常識を覆します。サーバーはすでに私たちの側で稼働しており、その背後にあるパイプラインはBananaBananaジェネレーターを提供しているものと全く同じです。ユーザーは1つのキーで認証し、プリペイド残高から生成ごとに支払うだけで済みます。セットアップ手順は、手元のノートPCのClaude Codeでも、同僚のマシンのClaude Desktopでも、ブラウザ上のclaude.aiでも完全に共通です。ユーザー側で管理・保守する必要は一切ありません。

執筆を行うロボットがイーゼルの前にいる画家のロボットにメモを渡している様子を描いたエディトリアルイラスト(ClaudeがMCPサーバーに画像生成を委託している様子のメタファー)

Claude Codeを画像生成MCPサーバーに接続する方法

作業はわずか2分、3つのステップで完了します。まず、登録を行い、「Profile」→「MCP API Keys」を開きます。キーを新規作成します。このキーは一度しか表示されず、私たちの側ではハッシュ化して保存されるため、すぐにコピーしてください。新規アカウントには最初から$0.20の残高が付与されているため、残高を追加するかどうかを決める前に、最も安価なモデルで6枚のテスト画像を試すことができます。

Claude Code

上述の通り、以下のコマンドを1回実行するだけです。

claude mcp add --transport http bananabanana https://bananabanana.pro/api/mcp \
  --header "Authorization: Bearer bb_live_YOUR_KEY"

各フラグの詳細はClaude Code MCP docsにドキュメント化されています。リモートサーバーにはHTTPトランスポートの使用が推奨されています。セッション内で/mcpを実行して接続が有効であることを確認してください。list_modelsからget_resultまで、7つのツールが表示されるはずです。これ以降、「この投稿用に16:9のヒーロー画像を生成して」という指示を、Claude Codeが実際に実行できるようになります。

Claude Desktopとclaude.ai

Claude Desktopおよびclaude.aiでは、「Settings」(設定)→「Connectors」(コネクタ)→「Add custom connector」(カスタムコネクタの追加)の順に進み、サーバーURLとしてhttps://bananabanana.pro/api/mcpを貼り付けます。キーを設定するには、「Request headers」セクションを開き、キー名にAuthorization、値にBearer bb_live_YOUR_KEYを指定したヘッダーを追加します。Bearerという単語とスペースを含む完全な値を入力してください。Anthropic's connector docsによると、Claudeは入力されたヘッダーをそのまま送信し、独自のプレフィックスなどは付与しません。

1つ正直な注意点として、コネクタにおけるリクエストヘッダー認証はベータ版であり、Anthropicは段階的にロールアウトしているため、お使いのアカウントにはまだこのセクションが表示されていない可能性があります。その場合でも、Claude Desktopが動作するすべての環境で機能する代替手段があります。Node.jsがインストールされている必要がありますが、claude_desktop_config.json(「Settings」→「Developer」→「Edit Config」)でmcp-remoteブリッジを介してサーバーを追加する方法です。

{
  "mcpServers": {
    "bananabanana": {
      "command": "npx",
      "args": [
        "-y", "mcp-remote", "https://bananabanana.pro/api/mcp",
        "--header", "Authorization: Bearer bb_live_YOUR_KEY"
      ]
    }
  }
}

これら両方のバリエーションと、その他の環境向けに生のJSON-RPCの例がMCPサーバーページに掲載されています。

Claude CodeとClaude Desktopのセットアップスニペットを表示しているBananaBanana MCPドキュメントページのクイックスタートセクション

Claude以外でも動作しますか?

はい、動作します。MCP(Model Context Protocol)はオープンプロトコルであるため、Streamable HTTPに対応し、Authorizationヘッダーを付与できるクライアントであれば、すべて同じエンドポイントに接続できます。Gemini CLI、Z.aiのZCode、各種エディタエージェントなどがこれに該当します。また、CodexがリモートMCPのサポートを開始したため、ChatGPTデスクトップアプリ、Codex CLI、およびIDE拡張機能でも、urlbearer_token_env_varを含む1つの共通config.tomlエントリを介して接続できます。xAI APIは、server_urlを使用してリクエストごとにMCPサーバーを割り当てます。対応が遅れているのは、貼り付けられたキーではなくOAuthを中心に構築されたウェブダイアログ(ChatGPTのウェブコネクタや、おそらくgrok.comのURLベースのカスタムコネクタなど)です。クライアントごとの最新のセットアップスニペットをまとめた比較表は、MCPサーバーページで管理・更新しています。この記事では引き続きClaudeに焦点を当てます。

ユースケース1:執筆中の記事のヒーロー画像

最も日常的なケースです。Claude Codeでブログ記事を執筆していて、ヘッダー画像が必要になったとします。そこで「database caching(データベースキャッシュ)に関する16:9のエディトリアルヒーロー画像を生成して。図書館のメタファーを使って」と指示します。すると、Claudeはプロンプトを構築してツールを呼び出します。

→ generate_image {"prompt": "Editorial illustration for a developer blog post
   about database caching: a small librarian robot placing three glowing books
   onto a tiny fast bookshelf in the foreground, a huge dim archive hall
   stretching far behind it, soft pastel background, dark ink details, accents
   of violet and warm amber, clean minimal composition, generous negative
   space, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmxq…", "status": "processing", "cost_charged_usd": 0.11,
   "balance_remaining_usd": 4.89}
→ get_result {"job_id": "cmxq…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

以下が、そのプロンプトからリテイクなしの一発で出力された画像です。

Claude CodeからMCP経由で生成された、広大な書庫の前で小さな棚に光る本を置く図書係ロボットのAI生成ヒーロー画像

コスト:Nano Banana Pro(解像度1K)で$0.11。エージェントが署名付きURLからファイルをダウンロードし、リポジトリに配置して、altテキスト(代替テキスト)を書き込みます。リンクの有効期限は24時間です。期限が切れた後は、get_resultを再度呼び出すことで新しいリンクが発行されます。

ユースケース2:フォトグラファーなしでの商品写真撮影

マーケティング用のモックアップは、写真スタイルのプロンプトが最も威力を発揮する分野です。プロのフォトグラファーが指示書を作成するように、被写体、配置する面、光源、レンズなどを詳細に描写します。

→ generate_image {"prompt": "A photorealistic product photo of a matte
   sage-green ceramic pour-over coffee set on a pale linen tablecloth, soft
   diffused daylight from a window on the left, gentle shadows, shallow depth
   of field, eye-level shot with a 50mm lens, minimal warm styling, no text",
   "model": "nano-banana-pro", "aspect_ratio": "1:1"}

MCPサーバーを通じて生成された、柔らかい窓の光を浴びるリネン布の上のセージグリーン陶器製プアオーバーコーヒーセットのリアルなAI商品写真

正直に言うと、この写真は2回目で成功しました。最初の生成結果は一見すると問題なさそうに見えましたが、よく見るとカップとソーサーが合体して、まるでフタのような1つの物体になってしまっていました。物体の正確な形状(幾何学的な整合性)は、実写系モデルが依然として苦手とする部分であり、商品画像を作成する際には公開前に必ず細部を拡大して確認する必要があります。同じプロンプトでもう一度生成(リテイク)したところ解決しました。コストは$0.11ではなく、2回分で合計$0.22になりました。私が最も気に入っているのは、写真そのものではなく、その後のステップです。edit_imageツールを使用すれば、作成完了した画像のjob_idと「背景を純白にして、柔らかい影を追加して」といった指示を与えるだけで編集できます。シーン全体を再定義することなく、何度も対話的にクオリティを高めていくことができ、各編集パスは通常の画像1枚分として課金されます。カタログ制作において、このループ機能があるかないかは、「仕事で使える実用的なツール」か「ただのオモチャ」かの分かれ目になります。

ユースケース3:複数の画像で同一のキャラクターを登場させる

ブランドのマスコット、コマ割り漫画、絵コンテなどでは、同じキャラクターが異なる画像に連続して登場する必要があります。MCP経由でこれを行う実用的なアプローチは、「キャラクターシート」を用意することです。これは、エージェントがすべてのプロンプトに貼り付ける固定のキャラクター説明テキストのことです。今回は、「丸いマットなティール色の頭、親しみやすい大きな琥珀色の目が1つ、真鍮のネジが露出した箱型のクリームホワイトのボディ、真鍮のバックルが付いたキャンバス生地のメッセンジャーバッグを身に付けた小さな配達ロボット」という説明を使用しました。2つのシーンを計2回呼び出し、それぞれ$0.11かかりました。

日差しが差し込む配送所で小包を仕分けする、ティール色の頭とキャンバス地のメッセンジャーバッグを持ったAI生成の配達ロボット(キャラクターの一貫性を保ったシリーズの1枚目)

夕暮れ時の雨の通りをカーゴバイク(貨物自転車)に乗って走る、同じAI配達ロボットのキャラクター(シリーズの2枚目)

結果について率直に申し上げます。かなり良い出来ですが、完璧ではありません。バッグ、琥珀色の目、真鍮のネジが付いたクリーム色のボディはすべて再現されました。しかし、頭部の形状が球体からヘルメットのような形にズレてしまい、夕暮れのシーンはよりグラフィックな(イラスト調の)線画スタイルで出力されてしまいました。これが、テキストのみでキャラクター設定を固定する手法の限界(天井)として知られているものです。この問題は、参照用の画像を使用することで綺麗に解決できます。web generatorでは、Nano Banana Proモデルで最大5つのキャラクター参照画像を設定できます。しかし、MCPのgenerate_imageツールは現時点では画像の入力をサポートしていません。両方の手法と、どの特徴が最初に崩れやすいかについては、character consistency field guide(キャラクター一貫性ガイド)で詳しく解説しています。

ユースケース4:同じチャット内での動画クリップ生成

動画の生成も同じサーバーを介して実行されますが、追加の安全策が施されています。動画クリップは画像よりもコストが高くなるため(最高品質のVeo 3.1によるレンダリングでは最大$4.40)、generate_videoツールは最初の呼び出しで課金を行うことはありません。まず見積もり金額を返し、エージェントがその正確な金額を承諾した上でもう一度呼び出しを繰り返す必要があります。

→ generate_video {"prompt": "Aerial drone shot rising slowly over terraced tea
   fields at sunrise, thin mist drifting in the valleys, golden light catching
   the ridges, smooth cinematic camera motion, wide shot",
   "model": "veo-3.1-fast", "duration": 6, "resolution": "720p"}
← {"status": "confirmation_required", "quoted_cost_usd": 0.52, …}
→ generate_video {…same arguments…, "confirm_cost": 0.52}
← {"job_id": "cmxr…", "status": "processing", "cost_charged_usd": 0.52}

以下が、Veo 3.1 Fastを使用し、一発で生成された音声なしの720p・6秒間の動画です。

動画生成には1分〜10分程度かかるため、エージェントは他の作業を並行して進めながら、バックグラウンドでget_resultをポーリング(定期確認)します。もし音声を付けたい場合は、同じツールでOmni Flashを使用すると、常にオーディオがオンの状態で、$0.10/秒で動画を生成できます。長さは3秒から10秒の間で設定可能です。画像を入力として受け取ることもできます。すでに生成した画像のjob_id(または公開リンク)を最初のフレームとして渡し、キャラクターの一貫性を保つために最大10枚の参照画像を追加すると、エージェントがそれらをアニメーション化します。最終フレームとループについては、引き続きウェブジェネレーターを使用する必要があります。

この記事のすべての画像は、このワークフローから生まれました

もし私が読者の立場なら、本当にそうなのか証拠が欲しくなるところでしょう。そこで、具体的な作業ループを明かします。Claude Codeがこの記事のセクションを執筆し、当社のハウススタイル(デザイン基準)に合わせたイラスト用のプロンプトを作成。生成ツールを呼び出し、20数秒待機し、返ってきた画像を確認した上で、altテキスト(代替テキスト)付きのMarkdownコードを挿入して、次の執筆へと進みました。本記事に掲載されているメディアのために、合計8回の生成が実行されました。6枚の画像と1本の動画は最初の試行で意図通りの仕上がりになり、コーヒーセットだけは、細部を確認してカップとソーサーの合体に気づいたため、1回リテイクを行いました。8回呼び出してリテイクがわずか1回という結果は、私の予想を遥かに超えて素晴らしいものでした。唯一、生成画像ではないアセットは、ブラウザツールで撮影したドキュメントページのスクリーンショットのみです。

画像の仕上がりは完璧とは言えません(配達ロボットの頭部などは、独自の癖が出てしまっています)。重要なのは、「イラストの用意」が執筆とは別の独立した制作工程ではなくなった点です。テキストを執筆している同じセッション内でビジュアルも同時に完成し、それらにかかった総コストはバスの乗車券1枚分とほぼ同じでした。

この記事のメディア制作にかかった実際の費用は?

以下に示す料金はすべて、弊社の料金ページに掲載されている標準的な生成ごとの価格に準拠しており、list_modelsツールがエージェントに返す数値と全く同じです。スタッフ割引などは一切適用されていません。

アセットモデル料金
カバー画像Nano Banana Pro, 1K$0.11
ライターと画家のイラストNano Banana Pro, 1K$0.11
キャッシュガイドのヒーロー画像(ユースケース1)Nano Banana Pro, 1K$0.11
コーヒーセットのモックアップ、2回試行・リテイク1回含む(ユースケース2)Nano Banana Pro, 1K$0.22
配達ロボットシリーズ、画像2枚(ユースケース3)Nano Banana Pro, 1K$0.22
茶畑の動画クリップ、6秒・音声なし・720p(ユースケース4)Veo 3.1 Fast$0.52
ドキュメントのスクリーンショットブラウザ撮影、生成画像ではありません$0.00
合計$1.29

公開ページに掲載する画像であるため、今回はすべて最上位の画像モデルを使用しました。もし$0.03のNano Banana 2 Liteを使用して下書きをしていれば、画像部分にかかる料金は$0.77から$0.21へと削減できていたはずです。どのような場合にこの安価なモデルで十分対応できるかについては、Lite guide(Liteモデルガイド)で詳しく解説しています。

試してみる準備はできましたか?BananaBanana MCPサーバーに接続して、Claudeに最初の画像をリクエストしてみましょう。

よくある質問(FAQ)

BananaBanana MCPサーバーはClaude以外のクライアントでも動作しますか?

はい。Streamable HTTPに対応し、Authorizationヘッダーを付与できるMCPクライアントであれば何でも動作します。これには、Claude Code、Claude Desktop、Gemini CLI、GLM-5.2用のZ.aiのZCode、CursorやVS Codeなどのエディタエージェントが含まれます。また、CodexのリモートMCPサポートを通じて、ChatGPTデスクトップアプリ、Codex CLI、およびIDE拡張機能でも、urlbearer_token_env_varを含む1つの共通config.tomlエントリを介して接続できます。xAI APIは、server_urlを介してリクエストごとにMCPサーバーを割り当てます。まだ不確実な点として、ChatGPTのウェブコネクタは貼り付けたキーではなくOAuthを介して認証を行い、grok.comのカスタムコネクタ用ダイアログはドキュメントに記載されたキー入力欄がなくURLのみを受け取るため、これらは両方とも、私たちの側で計画されているOAuth 2.1のサポートが必要になる可能性があります。クライアントごとのセットアップスニペットをまとめた最新の比較表は、MCPサーバーページに掲載されています。また、ご自身で開発されるシステムであれば、JSON-RPCを介して直接接続することがすでに可能です。

Google APIキーやGoogle Cloudアカウントは必要ですか?

いいえ、必要ありません。それこそが、このサーバーが存在する最大の理由です。GitHubで公開されているローカル用の画像生成MCPサーバーはGemini APIを直接呼び出すため、ご自身のGoogle AI Studioキーが必要となり、そのクォータや請求を自分で管理しなければなりません。一方で、当社のサービスでは、BananaBananaが管理するVertex AIキーのプール上で生成処理が実行されるため、必要な認証情報はプロフィールから取得するbb_live_キーのみです。Googleの管理コンソールを触る必要も、Googleから直接請求が発生することもありません。トレードオフは明確です。Googleの生のAPI価格やパラメータへの直接アクセスはできなくなりますが、最低利用料金のない生成ごとのシンプルな価格設定、キーの自動ローテーション、そしてMCPサーバー・Webジェネレーター・Telegramアプリの間で共有できる一元化された残高が手に入ります。万が一キーが流出した場合でも、1クリックで無効化でき、他の環境に影響を与えることはありません。

MCPサーバーの課金システムはどのようになっていますか?

サブスクリプション契約はなく、プリペイド残高から生成ごとに支払うシステムです。アカウントに残高を追加(チャージ)すると、生成ごとにその提示価格が差し引かれます。画像はモデルや解像度に応じて$0.03〜$0.20、動画はモデル、長さ、解像度、音声の有無に応じて$0.10〜$4.40です。エージェントは事前に関連価格を把握しています。list_modelsツールからリアルタイムの数値を取得し、すべての動画生成(および複数画像のバッチ処理)では、まず見積もりが返され、ユーザーがconfirm_costでそれを確認するまで1セントも移動しません。すべての生成結果にはcost_charged_usd(課金されたコスト)とbalance_remaining_usd(残りの残高)がレポートされるため、会話の中で自然にコストを追跡できます。生成に失敗した場合は自動的に全額返金されます。エージェントの意図しない暴走(無限ループなど)が心配な場合は、「Profile」→「MCP API Keys」でキーごとに1日のドル上限額(USD制限)を設定したり、ツール、モデル、コスト、プロンプトのプレビューが記録されるキーごとの使用ログを監査したりすることができます。

作業の途中で残高がゼロになった場合はどうなりますか?

次に有料ツールを呼び出した際に、残高不足を知らせるチャージ用リンクを含んだINSUFFICIENT_BALANCEエラーが発生し、エージェントがそれをユーザーに伝えます。残高がマイナスになることはなく、当座貸越や突然の請求書が届く心配もありません。無料のツール(list_modelsget_accountget_resultlist_generations)は引き続き動作するため、すでに生成されたメディアへのアクセスは維持されます。また、残高が無くなる前に開始された生成処理は最後まで正常に完了します。課金は生成プロセスの開始時に1回だけ行われるためです。実際には、Claudeは単にチャージ用URLと共にエラーを報告し、残りの作業を続行します。突然の停止を避けてバッファを持たせたい場合は、各結果に表示されるbalance_remaining_usdを監視するか、バッチ処理を実行する前にエージェントにget_accountを確認させるように指示してください。

コンテンツフィルターは何をブロックしますか?また、フィルターに引っかかったプロンプトにも課金されますか?

アップストリームであるGoogleのモデルには、独自のセーフティフィルターが適用されています。生成が拒否された場合、本サーバーはGoogle内部の細かなバリアントエラーコードではなく、統一されたSAFETY_FILTEREDコードを返します。ブロック対象となるカテゴリは、GeminiやVeoのポリシーに準拠した一般的なもので、未成年者が関与する性的コンテンツ、過激な暴力、実在人物のディープフェイクなどが含まれます。また、意図しない健全なプロンプトに対して、フィルターが稀に誤検知(誤判定)を起こすこともあります。これについては当社の制御外であり、包み隠さずお伝えしておきます。課金ルールはシンプルです。完全にブロックされた生成に対しては自動的に全額返金されます。また、Googleが動画の一部のみをフィルタリングした場合は、その比率に応じて部分返金されます。つまり、実際に受け取ったメディアの分だけお支払いいただきます。もしプロンプトがフィルターにかかり続ける場合は、同じテキストを何度も再試行するのではなく、引き金となっている具体的な表現を書き直してください。

MCPサーバーを介して生成した画像の所有権は誰にありますか?

お客様自身にあります。当社の利用規約に基づき、生成された画像および動画は、基盤となるモデルプロバイダーの規約に準拠する範囲で、個人利用・商業利用を問わず完全にお客様の所有物となります。当社はお客様のコンテンツに対して一切の所有権を主張せず、送信されたプロンプトもお客様に帰属します。ただし、実際の運用において重要な保存に関する仕様が2点あります。第1に、get_resultが返すURLは24時間有効な署名付きリンクであるため、重要なメディアはすぐにダウンロードするか、再度get_resultを呼び出して新しいリンクを取得してください。第2に、生成されたメディアは30日間保存された後、完全に削除されます。MCPサーバーは「生成パイプライン」であり、アーカイブシステムではないためです。なお、MCP経由で生成されたすべてのアイテムはWebアカウントの生成履歴にも保存されるため、保存期間内であればサイト上からいつでも閲覧・再ダウンロードが可能です。

tutorialmcpclaude