イベントサムネイルをClaude Codeで自動生成する — Nano Banana活用の実践ガイド

この記事の著者

株式会社Nexa 代表取締役川島 陸

一橋大学経済学部卒業後、フォーティエンスコンサルティング株式会社（旧 株式会社クニエ）にて法人向けAI導入支援等を経験。独立後、AI系メディア運営やDify/n8nの導入支援を経て、株式会社Nexaを創業。法人向けAI研修・AI導入支援・AI関連メディア運営を手掛ける。

詳しく見る無料相談をする

参考画像を1枚渡すだけで、Claude CodeがデザインのトーンマナーをAIに伝え、イベント告知サムネイルを自動生成できます。

「勉強会の告知画像を毎回デザインツールで作るのが面倒」「デザインに統一感を出したいが、自分でゼロから作るのは難しい」——こうした課題は、AI（Claude Code × Gemini API）を組み合わせることで解消できます。

この記事では、あるAI勉強会のLumaイベントページ用サムネイルを実際にClaude Codeで生成した全プロセスを公開します。参考画像の読み込みから、プロンプト構築、複数パターンの生成、修正ループ、そして別PCへの転送まで、一連のワークフローを具体的に解説します。

Nano Banana（Gemini API）でAI画像生成ができる仕組み

Nano BananaはGeminiのAI画像生成機能

Nano Bananaとは、Google社のGeminiモデルが持つAI画像生成機能の通称です。Gemini 2.0 Flash Imageなどのモデルを使い、テキストプロンプトから高品質な画像を生成できます。

従来のAI画像生成ツールが苦手としていた「日本語テキストの正確な描画」に対応しており、日本語のイベント名や日時をサムネイル内に組み込む用途に適しています。

Claude CodeからスクリプトでAPIを呼び出す流れ

Claude CodeはターミナルでAIと対話しながらコードを生成・実行できるAnthropicのツールです。Claude Codeに「このイベントのサムネイルを作って」と指示するだけで、裏側でPythonスクリプトを自動生成し、Gemini APIを呼び出して画像を生成します。

具体的なフローは以下のとおりです。

APIキーはmacOS Keychainで管理するため、コード内に直接記載する必要がなく、セキュリティ面でも安心です。

事前準備 — APIキーの取得とKeychain登録

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

まずGoogle AI Studio（aistudio.google.com/apikey）にアクセスし、Gemini APIキーを発行します。無料枠でも月間の呼び出し回数の制限内であれば画像生成を試せます。

取得したAPIキーは安全に管理する必要があります。コード内にベタ書きすると、誤ってGitにpushしてしまうリスクがあるため、macOS Keychainへの登録を推奨します。

macOS KeychainにAPIキーを安全に登録する

ターミナルで以下のコマンドを実行します。<YourAPIKey> の部分を実際のAPIキーに置き換えてください。

# まずKeychainをアンロックsecurity unlock-keychain ~/Library/Keychains/login.keychain-db# APIキーを登録（-a はアカウント名。$USER = ログインユーザー名）security add-generic-password -a "$USER" -s "GEMINI_API_KEY" -w "<YourAPIKey>" -U

ハマりポイント: Keychainがロックされている場合

headlessなSSH環境やMac miniのリモート操作中は、KeychainがUIロック状態になりCLIからのアクセスをブロックすることがあります。security unlock-keychain でログインパスワードを入力してアンロックするか、Keychainアクセスアプリ（Spotlight → 「キーチェーンアクセス」）からGUIで登録する方法が確実です。

登録後は security find-generic-password -a "$USER" -s "GEMINI_API_KEY" -w で正しく取得できるか確認します。

参考画像からプロンプトを構築する — トーンマナーの言語化

ここが今回のポイントです。「参考画像と同じ雰囲気で作って」という指示だけでは、AIは正確なデザインを再現できません。参考画像のデザイン要素をテキストに変換する作業が必要です。

参考画像のどの要素をプロンプトに変換するか

以下の要素を言語化します。

実際のセッションでは、Claude Codeが参考画像ファイルを読み込み、デザイン要素を自動的に言語化してプロンプトに反映しました。最初の解析結果は「白背景に青のアクセントライン（L字型）」でしたが、ユーザーのフィードバック（「枠は四辺均等に」）を受けて修正されました。

プロンプト構築のテンプレートと変数設計

繰り返し使えるプロンプトテンプレートを設計することで、毎回ゼロから書く手間がなくなります。変数（イベント名、日時、色）を切り替えるだけで別パターンを量産できます。

白背景（pure white）に {BORDER_COLOR} の細い均等幅のボーダーが四辺を囲む。中央に太字の日本語テキストを配置:  - 大見出し: {MAIN_TITLE}  - 副題: {SUB_TITLE}  - 日時: {DATE_AND_TIME}  - 開催形式: {FORMAT}テキストのみ。アイコン・ロゴ・ターミナルマーク等は一切不要。1:1の正方形（1024×1024px）。

Claude Codeの環境構築や活用方法について、個別にご相談いただけます。「どの機能から始めればいいか」「自社業務への適用方法を知りたい」といった段階から対応しています。

Claude Code個別指導の無料相談はこちら →

実際のサムネイル生成手順（A日程・B日程の2パターン）

生成コマンドの実行と初回の確認

Claude Codeへの指示はシンプルです。

勉強会のLumaサムネイルを作成してください。参考画像: /path/to/sample.avifA日程（3/11水 20:00-22:00）とB日程（3/14土 14:00-16:00）の2枚を生成してください。1:1の正方形サイズで、参考画像と同じトーンマナーで。

Claude Codeは参考画像を読み込み、デザイン要素を解析した上でプロンプトを構築し、Nano Banana（Gemini API）を呼び出して画像を生成します。

フィードバックを反映して再生成するループ

最初の生成結果を確認すると、いくつかの修正ポイントが見つかりました。

修正前の問題点と対処:

修正指示は会話形式で行えます。

B日程は枠線の色を薄赤にして再生成してください。

この一言でB日程のサムネイルだけを差し替え生成できます。

最終的にA日程は薄青枠、B日程は薄赤枠に仕上げ、2枚のバリエーションで統一感と識別性を両立させました。

実際のフィードバックループの回数: 初回生成→2回の修正→完成（合計3回の生成）

このプロセスをデザインツール（Canvaなど）で手動対応した場合と比較すると、作業時間は10〜15分程度節約できました。

生成した画像を別のPCにTaildropで即転送する

Tailscale Taildropとは

Tailscaleは、VPN技術を使って複数のデバイスを安全な仮想ネットワークで繋ぐツールです。Taildropはその機能の一つで、同じTailscaleネットワーク上のデバイスにSSH設定やIPアドレス確認なしでファイルを転送できます。

今回の事例では、Mac mini（生成環境）からMacBook Air（作業環境）への転送に使いました。

taildrop送信のワークフロー

# tailscale file cp でデバイス名を指定して送信tailscale file cp ./luma_thumbnail_A.png macbook-air:tailscale file cp ./luma_thumbnail_B.png macbook-air:

MacBook Air側では自動的に通知が届き、~/Downloads/ に保存されます。

Tailscaleのデバイス名は固定されているため、DHCPでIPが変わっても設定変更不要です。また、SSH設定（リモートログインの有効化・鍵認証設定）も不要で、セットアップコストがほぼゼロです。

このTaildropの手順はClaude Codeのスキルとして保存しておくと便利です。 一度スキルファイル（SKILL.md）に記録しておけば、次回から「Taildropで送って」と一言指示するだけで実行できます。

ビジネス活用の広がり — イベント以外の用途

メディア記事のアイキャッチ画像を統一デザインで量産

今回の手法は、勉強会・セミナーの告知画像だけでなく、以下のような用途にも応用できます。

ある企業の事例では、広告素材の画像生成にAIを導入した結果、デザイン工数を約50%削減できたとされています（ニューラルオプト調査より）。反復的な画像生成作業をAIに委ねることで、クリエイティブの検討・改善に集中する時間が生まれます。

X記事のサムネイル（5:2比率）への応用

X（Twitter）のArticle機能用サムネイルは5:2の横長比率が最適です。Nano Bananaではアスペクト比の指定が可能なため、同じプロンプトテンプレートを流用しつつ --aspect-ratio 5:2 に変更するだけで対応できます。

python3 generate_image.py \  --prompt "..." \  --aspect-ratio "5:2" \  --output "x_article_thumbnail.png"

よくある質問

Q. Gemini APIキーの取得は有料ですか？

Google AI Studioで発行するAPIキーは無料プラン（Free tier）で利用できます。無料プランでも月間の呼び出し回数の制限内であれば画像生成が可能です。商用利用や高頻度の利用には有料プランへのアップグレードが必要ですが、個人・小規模チームの勉強会サムネイル生成程度であれば無料枠で十分対応できます。

Q. 日本語テキストが正確に生成されないときは？

Gemini Flash2モデル（Nano Banana）は日本語テキストの描画精度が高いですが、それでも文字化けや誤字が発生する場合があります。対処法は次のとおりです。

• テキストを引用符（" "）で明示的に囲む
• 1回の生成で表示するテキスト量を減らす（長文は避け、最大20文字程度に収める）
• Claude Codeに「テキストが正確に描画されているか確認して」と指示し、問題があれば自動で再生成させる

Q. 参考画像なしでデザインを指定する方法は？

参考画像がない場合でも、以下のように言語でデザインを具体的に指定できます。

「白背景、薄いネイビーの細い枠線（四辺均等幅）、中央に太字の日本語テキスト、シンプルでコーポレートなデザイン、1:1サイズ」

ポイントは「背景色」「枠線の有無と色・太さ」「テキストの配置とスタイル」「余白の大きさ」「不要な要素の列挙」を明記することです。

まとめ

Claude Code × Nano Banana（Gemini API）を活用したイベントサムネイル自動生成の要点をまとめます。

• Nano BananaはGemini APIの画像生成機能 で、日本語テキストの正確な描画に対応している
• 参考画像のデザイン要素をテキスト化することで、トーンマナーを再現したサムネイルが生成できる
• フィードバックループを繰り返す（平均3回程度）ことで精度の高い仕上がりになる
• Tailscale Taildropを使えばSSH設定不要で別PCに即転送でき、実務ワークフローに組み込みやすい

「AIで作った画像はどうせクオリティが低い」と思っていた方も、実際に試してみると短時間でブランド統一感のあるサムネイルが仕上がることに気づくはずです。まずはGemini APIキーを取得し、1枚生成してみることをおすすめします。

Claude Codeの導入・活用をサポートします

株式会社Nexaでは、Claude Codeを活用した業務自動化の個別指導・企業研修を提供しています。「Nano Bananaの環境構築から始めたい」「自社のイベント・メディア運用にAIを組み込みたい」という段階からご支援いたします。非エンジニアの方も対象です。

Claude Code個別指導の詳細・無料相談はこちら →