ClaudeCodeでNanoBananaを使おう🍌

はじめに 🍃

学長が限定ライブで話していたClaude CodeでNano Bananaを使う方法を実際に試してみた内容を記事にしました😆

皆様ご存知の「Nano Banana」をGoogle Gemini APIを経由して、Claude Codeで画像生成してみましょう！

プロンプトを入力するだけで高品質な画像が生成でき、透過背景（透過PNG）にも対応しています。

この記事では、セットアップから実際の使い方、トラブルシューティング、そして課金設定までを解説します。

限定ライブで教えていただいたリンクを使います👇️

https://github.com/kingbootoshi/nano-banana-2-skill

大前提として 🙌

・Claude Codeに課金していること

・Claude Codeの設定やインストールが終わっていること

・CLI（ターミナル）が少し使えること

・Gitをインストールしていること

・Gitを少し知っていること

・クレジットカードを持っていること

・わからないことはClaude AIで聞くこと

使用したターミナル 🖥️

※正確には、CursorとVSCodeはエディタ（メモ帳みたいな感じ）で、プログラムのコードなどを書くものです。

👇️ Cursor

👇️ VSCode

👇️ ターミナル

Claude CodeでNano Banana使うって？🤔

まずは整理しましょう

全体像的にはこんな感じ

セットアップの手順✨

《 必要なもの 》

まず以下のツールがインストールされていることを確認してください。

・Bun（JavaScriptランタイム）

・FFmpeg（動画・画像処理ツール）

・ImageMagick（透過処理に必要）

・Google Gemini APIキー

ステップ 1️⃣ ：

BunとFFmpeg・ImageMagickのインストール

Bunのインストール（Macの場合）：

FFmpegとImageMagickのインストール（Homebrewを使用）：

ステップ 2️⃣ ：

リポジトリをクローンする

要するに自分のPCに学長が限定ライブで添付していたリンクからファイルをローカルもってくる作業のことです

ステップ 3️⃣：

依存関係をインストールしてグローバルにリンクする

※ `bun link` を実行することで、どのディレクトリからでも `nano-banana` コマンドが使えるようになります。

ステップ 4️⃣：

Google AI StudioでAPIキーを取得する

手順が参考になる動画 → Youtube

1．Google AI Studioにアクセスします

２．Googleアカウントでサインインします

３．左側のメニューにある「Get API key」（または「APIキー」）をクリックします

４．「Create API key」（APIキーを作成）ボタンをクリックします

５．プロジェクトの選択画面が表示されます

６．「Create API key in new project」（新しいプロジェクトでAPIキーを作成）を選択すると、自動でプロジェクトが作成され、キーが発行されます

７．「API key created」という画面が表示され、英数字の長いキーが表示されます

８．表示されたAPIキーの右側にあるコピーアイコンをクリックして、キーをクリップボードにコピーします

注１ ）APIキーは他人に知られないように管理してください

注２ ）必ずクレジットカードの登録が必要になります

注３ ）課金を必ず有効にして下さい

ちなみに私は課金を有効にしていなかったので、エラーがでました😂

こういう場合も、ClaudeAIやClaudeCodeに写真を貼り付けるだけで、簡単に解決します✌️

※※ 補足 ※※

もしかしたらGoogle Cloudの登録、プロジェクト作成や課金を有効設定など、他の作業が必要になる可能性があります。

私の場合は以前登録をして使用していたので、この辺の作業は必要ありませんでした ✋️

１．Google Cloud Console にアクセスします

２． 上部のプロジェクト名をクリックして、AI Studioと同じプロジェクトを選択します

３． 左メニューから『お支払い』を選択します

４． 『お支払いアカウントをリンク』をクリックして、クレジットカード情報を登録します

５． 請求先住所を入力して『保存』を押します

ステップ 5️⃣：

Gemini APIキーを設定する

APIキーはいくつかの方法で設定できますが、今回は推奨されている方でやっていきます。

ホームディレクトリの `.env` ファイルに記載する（推奨）

※ [あなたのAPIキー] の部分をGoogle AI Studioで取得したキーに置き換えてください。

基本的な使い方 🚀

ここまできたら、後は画像を生成するコマンドをターミナルに入れるだけです！

・コマンド構文

・主なオプション一覧

・使用例

👇️ 実際につくってみた画像です

コスト感の目安 💰

Gemini APIは使った分だけ課金される従量制です。個人的な印象としては、比較的安価に使えると思っています。

↓気になる方はAPIを使用後、下のコマンドで金額確認も可能です。

※あくまで理論値です。プロンプトの複雑さや試行回数によって変動します。生成コストは `~/.nano-banana/costs.json` に自動で記録されます。

私は１２円の支払いが発生しました 💸

⚠️ トラブルシューティング ⚠️

エラーが出た場合は、Claude AIやClaude Codeに撮った写真を添付して「エラーがでました。どうすればいいですか？」と雑い質問をしても解決方法を教えてくれます。

最後に☘️

すごく手順が多くて、パソコンが苦手な方は気が滅入ってしまいますよね😓

でも大丈夫です！１つずつ進めて、わからないことはClaude AIに聞いていけば、解決できます💪

そして、Claude Codeのスキルとして画像生成を取り込めるNano Bananaは、開発者・クリエイターの両方にとって便利なツールだと思います。

最初のセットアップさえ済ませてしまえば、あとはプロンプト一行で素材が作れる体験は気持ちいいです。

ぜひ皆さんも試してみてください！

お好みのプロンプトでどんな画像が生成されるか、楽しんでみてください🥰
最後まで読んでいただき、本当にありがとうございました。

今後も少しでも皆様の一助になるような情報提供を心がけていきたいと思います🙏