AIでSEO記事のサムネイルを自動生成する方法｜Claude Code × Gemini実践ガイド

この記事の著者

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

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

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

Claude CodeとGemini APIを使えば、SEO記事のアイキャッチ画像をコマンド1つで自動生成できます。

「記事は書けるようになったけど、サムネイルが毎回手間」「Canvaで1枚ずつ作るのに30分かかっている」——こうした課題を抱えるメディア担当者は少なくありません。

あるメディアサイトでは、Claude Codeのカスタムスキルを構築し、記事タイトルを渡すだけでブランドを統一したサムネイルを自動生成する仕組みを実現しました。この記事では、その実装手順・プロンプト設計・遭遇したトラブルと解決策を具体的に解説します。

Claude Codeで画像を生成する仕組み

Claude自体は画像を生成する機能を持っていません。しかし、Claude CodeからGemini APIを呼び出すスクリプトを実行することで、テキストプロンプトを画像に変換することができます。

Claude × Gemini連携の構成図

全体の流れは以下のとおりです。

Claude Codeは「指示を出す側」、Geminiは「実際に画像を生成する側」という役割分担です。この構成にすることで、Claude Codeの柔軟なテキスト処理能力と、Geminiの高品質な画像生成能力をそれぞれ活かせます。

使用するGeminiモデルの選び方

Gemini APIには複数の画像生成モデルがあります。サムネイル生成での推奨は以下のとおりです。

あるメディアサイトでは当初Proモデルを使用していましたが、Flash2でも品質が十分だと確認でき、速度とコストのバランスからFlash2（flash2）に切り替えました。日本語テキストの描画崩れも発生しておらず、現在は全サムネイル生成をflash2で運用しています。

Gemini API（Nano Banana）のセットアップ手順

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

1. Google AI Studio にアクセス
2. Googleアカウントでサインイン
3. 「APIキーを作成」をクリックし、プロジェクトを選択
4. 表示されたAPIキー（AIzaSy〜の形式）をコピーしておく

APIキーの取得は無料で、Gemini APIには無料枠があります。商用メディアで月100〜200枚程度生成する用途であれば、コストはほぼ気にならない水準です。

macOS KeychainへのAPIキー登録

APIキーをスクリプトに直接埋め込むのはセキュリティ上のリスクがあります。macOSのKeychainを使って安全に管理しましょう。

# Keychainにアンロックしてから登録（初回のみ）security unlock-keychain ~/Library/Keychains/login.keychain-db# APIキーを登録security add-generic-password -a "riku" -s "GEMINI_API_KEY" -w "あなたのAPIキー" -U

ポイントsecurity add-generic-password を実行すると「User interaction is not allowed」というエラーが出ることがあります。これはKeychainがロック状態のサインです。先に security unlock-keychain コマンドでロックを解除してから再実行してください。

Pythonスクリプト（nano-banana）の準備

Gemini APIへのリクエストを送るPythonスクリプトを用意します。依存ライブラリのインストールは以下のとおりです。

# 仮想環境を作成して有効化python3 -m venv /tmp/nano-banana-venvsource /tmp/nano-banana-venv/bin/activate# 必要なライブラリをインストールpip install google-genai Pillow

スクリプト自体はKeychainからAPIキーを自動取得し、プロンプトを受け取って画像を生成・保存する構成にします。これにより、毎回APIキーを指定せずに実行できます。

サムネイル生成プロンプトの設計法

サムネイル生成で最も重要なのが「プロンプトの設計」です。1枚ずつ違うプロンプトを書いていては再現性がなく、ブランドもバラバラになります。テンプレート化が鍵です。

ベーステンプレートの構造（3層構成）

実際に運用しているあるメディアサイトでは、以下の3層構成のプロンプトテンプレートを採用しています。

この3層構造はadobe系デザインソフトのレイヤー概念をプロンプトで再現したものです。各変数を差し替えるだけで、異なるテーマの記事でも一貫したデザインを保てます。

カラーパレットで記事ごとに表情を変える

ブランドを統一しながらも単調にならないよう、記事カテゴリ・テーマに応じて背景色を使い分けます。

連続する記事で同じ背景色を使わないルールを設けることで、メディアのトップページやカテゴリページで並べたときに視覚的な単調さを防げます。

日本語テキストの描画精度を上げるコツ

Geminiで日本語サムネイルを生成する際、テキストが崩れたり小さくなったりすることがあります。以下のポイントを守ることで精度が大幅に改善します。

• 引用符で囲む: "{MAIN_TITLE}" のように日本語テキストを必ず引用符で囲む
• 8文字以内に収める: メインタイトルは1行あたり最大8文字。それ以上だと文字が小さくなる
• billboard-scale を明示: プロンプトに「the headline must be the single largest element, occupying at least one-third of the image height」と明記する

Claude Codeの導入や活用方法について、個別にご相談いただけます。サムネイル生成スキルの構築や、プロンプトテンプレートのカスタマイズなど「自社メディアに合った形で実装したい」という段階から対応しています。

実際に生成してみる — コマンドと結果

生成コマンドの全体像

以下が実際にサムネイルを生成するコマンドの例です。

source /tmp/nano-banana-venv/bin/activate && \python3 ~/.claude/skills/nano-banana/scripts/generate_image.py \  --prompt "A clean and sophisticated campaign poster. Full-bleed dark teal (#0A3D5C) canvas. Ghost texture: 'AI' and 'AUTOMATION'. Hero: holographic brain with cyan glowing synaptic pathways, right-side. Headline: 'AI自動化' ultra-bold billboard-scale white, left. Sub: '記事サムネイル生成'" \  --output "~/Desktop/記事/sample/thumbnail.png" \  --model flash2 \  --aspect-ratio "16:9" \  --resolution 2K

--model flash2 でGemini Flash2を指定し、--resolution 2K で高解像度出力を指定します。生成にかかる時間は10〜30秒程度です。

記事テーマ別の生成例

あるメディアサイトで実際に生成した3パターンの例です（サイト名・記事タイトルは変更）。

3枚ともブランドのトーンマナー（ダーク背景×白テキスト×発光モチーフ）を保ちながら、テーマに応じた表情の違いが出ています。

生成結果のチェックポイント

生成された画像は以下の観点で確認します。問題があれば、プロンプトを微調整して再生成します。

• テキスト描画: 日本語タイトルが正確に描かれているか（1〜2文字の入れ替わりが稀に発生）
• コントラスト: 白テキストと背景色の差が十分か
• オブジェクト配置: ヒーローオブジェクトがテキストに被っていないか
• 全体の印象: ミニマル・コーポレートの雰囲気が保たれているか

Claude Codeのスキルとして体系化する方法

単発コマンドをその都度実行するのではなく、SKILL.md でワークフロー化しておくことで、「記事タイトルとカテゴリを渡すだけ」でサムネイル生成が完結します。

SKILL.mdの基本構造

---name: nexa-media-thumbnaildescription: サムネイル生成スキル---## ワークフロー1. 記事タイトル・カテゴリ・KW名を受け取る2. カテゴリに応じたカラーパレットを選択3. テーマに対応したヒーローオブジェクトをテンプレートから選択4. プロンプトテンプレートに変数を埋め込む5. nano-bananaスクリプトを実行して画像を生成6. 生成結果を確認（ファイルサイズ・解像度）7. 記事フォルダに thumbnail.png として保存

この形式で定義しておくと、Claude Codeがスキルを参照してサムネイル生成の全ステップを自動で実行します。

記事タイトルからプロンプトを自動構築するロジック

Claude Codeは記事タイトルからプロンプトの変数を自動判断します。

• BG_COLOR: カテゴリ・テーマから適切な背景色を選択（例: 導入事例 → チャコールブルー）
• HERO_OBJECT: テーマキーワードに対応したモチーフを辞書から選択（例: AI研修 → 浮遊するデジタルスクリーン）
• MAIN_TITLE: 記事タイトルを8文字以内に短縮してインパクト重視で再構成
• SUB_TITLE: 補足情報をサブタイトルとして15文字以内で設定

この自動化により、毎回プロンプトをゼロから考える必要がなくなります。

WordPress（WP-CLI）への自動アップロードまでをワンコマンドに

生成したサムネイルはSSH経由でWordPressサーバーに転送し、WP-CLIでアイキャッチ画像として設定します。

# サーバーに転送してメディアインポートscp thumbnail.png conoha:/tmp/nexa-thumb.pngATTACHMENT_ID=$(ssh conoha "php ~/wp-cli.phar \  --path=\$HOME/public_html/your-site/ \  media import /tmp/nexa-thumb.png \  --title='記事タイトル アイキャッチ' \  --alt='AIサムネイル生成のイメージ画像' \  --porcelain")# アイキャッチ画像として設定ssh conoha "php ~/wp-cli.phar \  --path=\$HOME/public_html/your-site/ \  post meta update $POST_ID _thumbnail_id $ATTACHMENT_ID"

この手順をスキルに組み込んでおけば、記事公開ワークフローの中でサムネイルのアップロードも自動的に行われます。

遭遇したトラブルと解決策

実際に運用する中でいくつかのトラブルに遭遇しました。同じ問題で詰まる方のために共有します。

KeychainがロックされていてAPIキーを取得できない

スクリプト実行時に security: User interaction is not allowed. というエラーが発生することがあります。

原因: macOSのKeychainがロックされている状態。スリープ復帰直後や、ターミナル起動直後に起きやすい。

解決策:

# Keychainをアンロックしてから再実行security unlock-keychain ~/Library/Keychains/login.keychain-db# ↑ Macのログインパスワードを入力# その後、通常通りスクリプトを実行

また、security add-generic-password でAPIキーを登録する際は、アカウント名（-aオプション）をスクリプト内の検索条件と一致させる必要があります。Keychainに gemini で登録していたのに、スクリプトが riku（macOSユーザー名）で検索して見つからないケースが実際にありました。

日本語テキストが文字化けする・小さすぎる

原因: プロンプトに日本語テキストを直接書いても、Geminiが正確に描画しないことがある。

解決策:- 引用符で囲む（"AI自動化" のように）- テキストが長すぎる場合は分割する（メインタイトル8文字・サブタイトル15文字以内）- the headline must occupy at least one-third of the image height という制約を明示する

モデル選択で生成品質が大きく変わる

Proモデルは高品質だが処理が遅く、Flash2は速くて品質も十分——という判断をするには実際に比較するのが早いです。あるメディアサイトでは同じプロンプトでProとFlash2を比較した結果、Flash2のほうがテキストレイアウトが整っているケースもありました。

ポイント最初はFlash2で生成し、品質に不満があればProモデルで再試行する、というアプローチが効率的です。Proは処理時間が数倍かかり、API費用も高くなります。

よくある質問

Q. Claude Codeを使わずGemini APIだけでサムネイルは生成できますか？

はい、可能です。Googleが提供するGoogle AI Studioのウェブ画面から、プロンプトを入力して画像生成できます。ただし、記事タイトルからプロンプトを自動構築したり、WordPressへの自動アップロードまで繋げたりするには、Claude Codeによる自動化が必要です。

Q. 生成した画像の商用利用は問題ありませんか？

Google AI Studioの利用規約によると、APIを通じて生成した画像の商用利用は原則として認められています。ただし、利用規約は変更される可能性があるため、最新のGoogle AI Studioの利用規約を確認することをお勧めします。

Q. 画像生成の費用はどのくらいかかりますか？

Gemini Flash2モデルは、競合の画像生成モデルと比較して低コストです。月100〜200枚程度の生成であれば、無料枠の範囲内で収まるケースも多くあります。費用が気になる場合はGoogle AI Studioの料金ページで最新情報を確認してください。

Q. WordPressへの自動アップロードはどうやって行いますか？

SSH経由でWP-CLIを使用します。詳細は「Claude Code × WordPressで記事公開を完全自動化」の記事で解説しています。サムネイルのアップロードだけでなく、記事本文・カテゴリ・SEOメタ情報の設定まで一括で行えます。

まとめ

この記事では、Claude Code × Gemini APIを使ったサムネイル自動生成の仕組みと実装手順を解説しました。

• Claude CodeはGemini APIと連携することで画像生成が可能になる
• Flash2モデルは日本語テキスト描画が安定しており、メディア運用に適している
• プロンプトテンプレートとカラーパレット管理でブランドを統一しながら量産できる
• SKILL.mdでワークフロー化することで「タイトルを渡すだけ」でサムネイル生成が完結する
• Keychain認証やテキスト描画のトラブルは、適切な対処法で解決できる

SEO記事の量産において、サムネイル制作は地味に時間のかかる工程です。一度仕組みを作っておけば、以後は毎回の工数がほぼゼロになります。まずはGoogle AI StudioでAPIキーを取得し、1枚サムネイルを試し生成してみることをお勧めします。