「ブログ記事を書いた。あとはサムネイルと図解画像だけ。」
ここで毎回、手が止まっていました。
記事はClaude Codeで書ける。でも画像は別のツールを開いて、プロンプトを入力して、ダウンロードして、リサイズして、フォルダに保存して。この往復作業が、地味に面倒なんです。
「Claude Codeの中で画像も作れたらいいのに。」
実はこれ、MCPという仕組みを使えば実現できます。しかもGoogle AI Proに加入している方なら、毎月$10のクレジットで実質無料です。
この記事では、Claude CodeにGoogleの画像生成AI「Nano Banana 2」をつなげる方法を、非エンジニアの僕が実際にやった手順でお伝えします。
Claude Codeは文章を書ける。でも画像は作れない
Claude Codeの得意分野はテキスト処理です。記事の下書き、構成案の作成、SNS投稿文の生成。日常的なコンテンツ制作の多くを担ってくれます。
ところが、記事を書いた後に「サムネイルを作りたい」「図解を入れたい」となると、途端にClaude Codeでは対応できません。Claudeはあくまで文章のAIだからです。
そこで多くの人は、別のツールを開きます。Canva、Gemini、Felo。それぞれ優れたサービスですが、その都度ツールを切り替えて、プロンプトを入力して、画像をダウンロードして、また戻ってくる。この往復作業が積み重なると、結構な時間ロスになります。
でも、Claude Codeの中で直接画像を生成できたらどうでしょう?
「この記事のサムネイルを16:9で作って」と指示するだけで、その場で画像が生成されて保存まで完了する。
記事を書く→画像を作る→保存する、この全工程がClaude Codeの中だけで完結します。
これを実現するのが、MCPという仕組みです。
MCPとは?:Claude Codeに「外部ツールをつなぐコンセント」
MCP(Model Context Protocol)は、Anthropicが2024年11月に発表した「AIと外部ツールをつなぐための共通規格」です。
たとえ話で説明すると、MCPはコンセントです。
以前は、Claude Codeに画像生成ツールをつなぐには専用の配線が必要、GitHubをつなぐにはまた別の配線が必要、という状態でした。MCPはこれを共通コンセントに統一したんです。コンセントの形が決まれば、どんなツールでも同じ差し込み口で使えるようになります。
現在、MCPで接続できるツールは1,000種類以上あります。
| できること | MCPの例 |
|---|---|
| 画像を生成する | Nano Banana MCP(今回使うもの) |
| Webページの内容を取得する | Fetch MCP |
| Googleカレンダーを操作する | Google Calendar MCP |
| Notionと連携する | Notion MCP |
今回やることをシンプルに言うと、Claude Code(文章AI)にNano Banana 2(画像生成AI)をMCPでつなげる。これだけです。
Claude Codeは文章しか作れないけど、MCPでGoogleの画像生成AIとつながることで、「文章も画像も1つの環境で完結する」状態になります。
以前の記事「ChatGPT vs Claude vs Gemini 徹底比較」でも触れましたが、各AIツールには得意分野があります。Claudeは文章、Geminiは画像やGoogle連携が強い。MCPはこの「それぞれの強み」を組み合わせられる仕組みなんです。
Google AI Proユーザーなら毎月$10が実質無料で使える
ここで大事な話をします。
Google AI Pro(Gemini Advanced等)に加入している方は、毎月$10分のクレジットがGoogleから付与されています。正式名称は「$10の毎月の生成AIとCloudクレジット」。Google Developer Programの特典として自動的に含まれます。
ただし、このクレジットには注意点があります。
翌月に繰り越されません。使い切らなかった分は、月末でリセットされて消えます。
「そんなクレジットがあったの?」という方もいると思います。
毎月$10が使われずに消えている。もったいないですよね。
$10で何ができるのか
Nano Banana 2の画像生成コストは、1枚あたり約$0.065です。$10のクレジットで計算すると、月に約150枚の画像が生成できます。
ブログ記事1本あたり2〜3枚の図解画像を作るとして、月に50本以上の記事の画像をカバーできる計算です。個人ブロガーなら十分すぎる枚数です。
ハンズオン:$10クレジットを適用する4ステップ
ここからは、実際にクレジットを使えるようにする手順を解説します。必要なのは、Google AI Proに加入しているGoogleアカウント(Gmailアドレス)だけです。
ステップ1:Google Cloudで「請求先アカウント」を作る
APIを利用するための土台となるアカウントを作ります。$10の無料枠の範囲内であれば、実際の引き落としはありません。

- Google Cloud コンソール(console.cloud.google.com/billing)にアクセスします
- 「+アカウントを作成」をクリックし、わかりやすい名前を入力します(例:ichi AI)
- 国を「日本」、通貨を「JPY」にして、クレジットカード情報を登録します

ここで超重要なポイントがあります。
作成するアカウントは、必ずGoogle AI Proに登録しているのと同じGmailアドレスで行ってください。別のアドレスだとクレジットが適用されません。
ステップ2:特典と「請求先アカウント」を紐づける
ここが一番忘れやすい手順です。設定しただけではクレジットは使われません。特典とステップ1で作った請求先アカウントをつなぐ必要があります。

- Google Developer ProgramのMy Benefitsページ(developers.google.com/program/my-benefits)にアクセスします
- 一覧から「$10の毎月の生成AIとCloudクレジット」という項目を見つけます
- 「請求先アカウントを選択」から、ステップ1で作ったアカウントを選びます
- 「常にこの請求先アカウントを使用する」にチェックを入れて申し込みます
これで、毎月自動的に$10のクレジットが付与されるようになります。
ステップ3:Google AI StudioでAPIキーを発行する
次に、Nano Banana 2を使うための「APIキー」を発行します。APIキーは、画像生成サービスを使うためのパスワードのようなものです。

1.Google AI Studio(aistudio.google.com)にアクセスして「APIキーを作成」をクリックし、新しいプロジェクトを作成します(名前は何でもOK。例:Nano Banana)
※発行されたAPIキーをコピーして、メモ帳などに安全に保管します。


2.お支払い情報の設定画面が出たら、ステップ1で作ったGoogle Cloudの請求先アカウントを選択します。

APIキーは他人に見せないでください。このキーを知っている人があなたのアカウントでAPIを使えてしまい、費用が発生します。
Gemini APIは使いすぎ防止のために上限を設定することができます。ここでは念のため上限を設定しておきましょう。

左側メニューの「利用額」をクリックすると、画像の画面に切り替わります。費用の上限を編集を押して、上限を設定しましょう。

上限金額を入力し保存をしたら完了です。
ステップ4:Google Cloudで「予算アラート」を設定する
ステップ3の費用の上限を設定した場合、上限設定した金額以上使用されることはありませんが、予算アラートを設定することで体感的に作業量とAPIの使用量が分かりやすくなります。

Google AI Studio(aistudio.google.com)にアクセスして、アカウント名をクリック、画面が変わったら左側メニューの「予算とアラート」を選択で下記画像になります。

「+Create budget(予算を作成する)」をクリックします。

名前に「AIクレジット監視」や「クレジット管理」など、わかりやすい名前を入力。期間を「月別」にして次へ。

予算タイプを「指定額」にし、目標金額を「¥1,500」に設定し次へ。

しきい値を「50%」「90%」「100%」に設定し、メール通知にチェックを入れて終了をクリック。
しきい値は任意で追加していくことも可能です。
アラームを設定することで体感的に使用量が分かりやすくなります。
以上の4ステップで、$10クレジットを安全に適用する設定は完了です。
Claude CodeにMCPを設定する(ここが一番簡単)
クレジットの設定が終わったら、いよいよClaude CodeにNano Banana 2をつなげます。
ここが今回の記事で最も伝えたいことなのですが、MCP設定はClaude Code自身に頼むのが一番簡単です。
Claude Codeを開いて、APIキーを手元に用意した状態でこう伝えてください。
「Nano Banana 2の画像生成MCPをセットアップして」
Claude Codeが設定ファイルの作成からMCPサーバーの登録まで自動で進めてくれます。途中でAPIキーの入力を求められますが、チャット画面にAPIキーを直接貼り付けるのはNGです。チャットの履歴にキーが残ってしまい、漏洩のリスクがあります。
代わりに、Claude Codeに「APIキーは.envファイルで管理したい」と伝えてください。Claude Codeがプロジェクト内に.envファイルを作成してくれるので、そこにAPIキーを貼り付けます。.envファイルはGitの管理対象外(.gitignoreに追加済み)になるため、外部に漏れる心配がありません。
セットアップが完了すると、Claude Codeが「テスト画像を生成しますか?」と聞いてくれるので、試しに1枚作ってみてください。画像が表示されれば成功です。
考えてみれば当然なんです。MCP設定はClaude Code自身の設定ファイル(settings.json)を編集する作業です。Claude Codeは「自分の設定ファイルをどう書けばいいか」を最初から知っています。人間が英語のドキュメントを読んでJSONを手打ちするより、AIに任せた方が早いし、正確です。
僕は非エンジニアで、JSONファイルの編集とか正直よくわかりません(笑)でもClaude Codeに頼んだら、何のトラブルもなくMCPが動き始めました。
非エンジニアこそ、設定作業はAIに任せるべきです。それがClaude Codeの一番の強みだと思います。
画像生成の実践:日本語プロンプトで指示するだけ
MCPが動いたら、あとは画像を作るだけです。
Nano Banana 2は日本語のプロンプトで指示できます。以下のような構造のプロンプトを使うと、意図に近い画像が生成されます。
# コンセプト:
- テーマ: 効率化、ビフォーアフター比較
- スタイル: フラットデザイン、インフォグラフィック
# 画像に掲載するテキスト:
## メインコピー:
- 1行目: AI時短術5選の効果
# 配色:
- 背景: #FFFFFF
- メインコピー: #333333英語で長い説明文を書く必要はありません。「コンセプト」「テキスト」「配色」「レイアウト」を日本語で指定するだけで、しっかり反映された画像が出てきます。
実際に作った画像の例
僕はこのワークフローで、ブログ10記事分の図解画像を作りました。
- Before/After棒グラフ: AI時短術の効果を視覚化(121分→23分)
- 3カード比較: AI副業3ジャンルの難易度・月収を並べた一覧
- ステップフロー: 議事録作成3ステップ(メモ→AI構造化→チェック)
- 月収タイムライン: AI副業の1〜12ヶ月の収入推移
どれも「テキストだけでは伝わりにくい情報を、1枚の画像で直感的に見せる」ために作ったものです。
WebP変換も一括で自動化
WebP変換も一言で完了
生成した画像はそのままだとファイルサイズが大きいので、ブログに載せる前にWebP形式へ変換するのがおすすめです。
これもClaude Codeに「画像をWebPに変換して」と伝えるだけで1200×630pxにリサイズされて、ファイルサイズは元画像から90%以上小さくなります。
僕の場合、Claude Codeにあらかじめ画像サイズを伝えているので、SWELLテーマに最適なサイズを自動変換してくれるので、手動でリサイズする作業は一切ありません。
もっと便利に使うなら「スキル」を作ろう
ここまでの設定で画像生成はできるようになりますが、もっと便利に使いたい場合はClaude Codeの「スキル」機能を活用するのがおすすめです。
スキルとは、Claude Codeに特定の作業手順を覚えさせる仕組みです。たとえば、僕が使っている画像生成スキルには以下のようなルールが入っています。
- 画像生成前にプロンプト内容をユーザーに確認する
- 1枚ずつ順番に生成する(API制約への対応)
- 生成した画像を指定フォルダに自動保存する
- エラーが出たらリトライする
こうしたルールをスキルとして保存しておけば、毎回細かい指示を出す必要がなくなります。「画像を作って」の一言で、確認→生成→保存まで自動で進みます。
スキルの作り方もClaude Codeに頼めばOK。
「こういうルールで画像生成するスキルを作って」と伝えれば、Claude Codeがスキルファイルを自動作成してくれます。
スキルの詳しい作り方は、別記事で解説予定です。画像生成スキルだけでなく、記事執筆スキルやリサーチスキルなど、Claude Codeをさらに便利にするスキルの作り方をハンズオン形式で紹介します。
画像生成がワークフローに入ると何が変わるか

MCP導入前と後で、記事制作の流れがこう変わりました。
導入前(6ステップ)
- Claude Codeで記事を書く
- 画像が必要な箇所をメモする
- 別のツール(Canva、Gemini等)を開く
- プロンプトを入力して画像を生成
- ダウンロードしてリサイズ
- フォルダに保存して記事に挿入
導入後(3ステップ)
- Claude Codeで記事を書く
- 「図解画像を作って」と指示する
- 画像が生成されて自動保存される
ステップが6つから3つに半減しました。
ツール間の行き来がなくなるだけで、集中力が途切れなくなります。「記事の流れを考えながら、同じ環境で画像も作れる」のは、想像以上に快適です。
まとめ:Claude Codeの中だけで完結する世界
Claude Codeの本当の強みは、文章が書けることだけではありません。
MCPで他のAIやツールとつながることで、やりたいことがClaude Codeの中だけで完結する。これが最大の価値です。
今回は画像生成をつなげましたが、同じ仕組みでNotionと連携したり、Googleカレンダーを操作したり、Webページの情報を取得したりもできます。MCPは1,000種類以上のツールに対応しています。
まずは今回の画像生成MCPから試してみてください。
- Google AI Proの$10クレジットを有効化する(ステップ1〜2)
- APIキーを発行する(ステップ3)
- 予算アラートを設定する(ステップ4)
- Claude Codeに「MCPをセットアップして」と頼む
非エンジニアでも、この手順でClaude Codeから画像生成ができるようになります。毎月$10のクレジットを無駄にせず、ブログやSNSの画像制作に活用しましょう。
AIツールの選び方や使い分けをもっと詳しく知りたい方は、「ChatGPT vs Claude vs Gemini 徹底比較」の記事も参考にしてみてください。今回の$10クレジット活用は、Geminiエコシステムの強みを最大限に活かした使い方です。

🎟️お得な招待コード
Windows/Mac対応の超高速・高精度なAI音声入力ツール
Aqua Voice(1か月間無料でProプラン利用招待コード)
指示1つで計画・実行・成果物まで自律的に仕上げるAIエージェント
Manus(500クレジット獲得招待コード)
安定性・高速性・コスパに優れた国内シェアNo.1のレンタルサーバー
X Server(初回利用料金最大20%割引き)

