seo-image-gen

SEO Image Gen：SEO アセット向け AI 画像生成（拡張機能）

banana Creative Director パイプラインを通じて Gemini の画像生成を利用し、SEO 用途に適した本番環境向け画像を生成します。SEO のニーズを最適化されたドメインモード、アスペクト比、解像度のデフォルト設定に対応付けます。

アーキテクチャに関する注記

この拡張機能は、Claude Code 向けの独立した AI 画像生成スキルである Claude Banana 上に構築されています。

このスキルは、役割の異なる 2 つのコンポーネントで構成されています。

• SKILL.md（このファイル）：画像を生成する対話型の /seo image-gen コマンドを処理します
• Agent（agents/seo-image-gen.md）：/seo audit 中に起動する監査専用のアナリストです。既存の OG／ソーシャル画像を評価し、生成計画を作成します（自動生成は行いません）

前提条件

このスキルを使用するには、banana 拡張機能がインストールされている必要があります。

./extensions/banana/install.sh

利用可能か確認する： 画像生成ツールを使用する前に、gemini_generate_image または set_aspect_ratio ツールが利用可能か確認し、MCP サーバーが接続されていることを検証してください。ツールが利用できない場合は、拡張機能がインストールされていないことをユーザーに伝え、インストール手順を提示してください。

クイックリファレンス

コマンド	機能
/seo image-gen og <description>	OG／ソーシャルプレビュー画像を生成します（1200x630 相当）
/seo image-gen hero <description>	ブログのヒーロー画像を生成します（ワイドスクリーン、ドラマチック）
/seo image-gen product <description>	商品写真を生成します（すっきりした白背景）
/seo image-gen infographic <description>	インフォグラフィック画像を生成します（縦長、データ重視）
/seo image-gen custom <description>	Creative Director パイプライン全体を使ってカスタム画像を生成します
/seo image-gen batch <description> [N]	N 個のバリエーションを生成します（デフォルト：3）

SEO 画像の用途

各用途は、事前設定済みの banana パラメーターに対応付けられています。

用途	アスペクト比	解像度	ドメインモード	備考
OG／ソーシャルプレビュー	16:9	1K	Product または UI/Web	すっきりとしたプロフェッショナルな画像で、テキストを載せやすい
ブログのヒーロー画像	16:9	2K	Cinema または Editorial	ドラマチックで雰囲気があり、エディトリアル品質
スキーマ画像	4:3	1K	Product	すっきりとした説明的な ImageObject スキーマ画像
ソーシャル用スクエア画像	1:1	1K	UI/Web	各プラットフォームに最適化された正方形画像
商品写真	4:3	2K	Product	白背景、スタジオ照明
インフォグラフィック	2:3	4K	Infographic	データ重視の縦型レイアウト
ファビコン／アイコン	1:1	512	Logo	シンプルで拡大縮小可能、認識しやすい
Pinterest ピン	2:3	2K	Editorial	縦長のカード

生成パイプライン

生成リクエストごとに、以下の手順を実行します。

1. コマンドまたはコンテキストから用途を特定します（og、hero、product など）。
2. 上記の用途一覧表に基づいて SEO のデフォルト設定を適用します。
3. set_aspect_ratio MCP ツールでアスペクト比を設定します。
4. banana Creative Director パイプラインを使って Reasoning Brief を作成します。
   • 6 コンポーネントシステムについて references/prompt-engineering.md を読み込みます。
   • ドメインモードの重点度を適用します（Subject 30%、Style 25%、Context 15% など）。
   • 具体的かつ生々しく描写します。カメラに何が映るかを説明します。
5. gemini_generate_image MCP ツールで生成します。
6. 生成後の SEO チェックリストを実施します（以下を参照）。

プリセットの確認

ユーザーがブランドに言及した場合、または SEO プリセットが設定されている場合：

# Use the installed Banana MCP/tool configuration to list presets.

該当するプリセットを読み込み、デフォルト設定として適用します。また、SEO 固有のプリセットテンプレートについては references/seo-image-presets.md も確認します。

生成後のSEOチェックリスト

生成が成功するたびに、ユーザーに次の項目を案内してください。

1. 代替テキスト：生成画像を説明する、キーワードを含んだ代替テキストを作成します
2. ファイル名：SEOに適した形式に変更します：keyword-description-widthxheight.webp
3. WebP変換：ページ速度を最適化するため、WebPに変換します：

   magick output.png -quality 85 output.webp
   

4. ファイルサイズ：メインビジュアルは200KB未満、サムネイルは100KB未満を目標にします
5. スキーママークアップ：生成画像にImageObjectスキーマを使用することを提案します：

   {
     "@type": "ImageObject",
     "url": "https://example.com/images/keyword-description.webp",
     "width": 1200,
     "height": 630,
     "caption": "Descriptive caption with target keyword"
   }
   

6. OGメタタグ：ソーシャルプレビュー画像について、次の点を忘れずに確認するよう案内します：

   <meta property="og:image" content="https://example.com/images/og-image.webp" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
   <meta property="og:image:alt" content="Descriptive alt text" />
   

コストへの配慮

画像生成には費用がかかります。透明性を保ってください。

• 生成前に推定コストを表示します（特に一括生成の場合）
• 利用可能な場合は、インストール済みのBanana MCP/toolの台帳に生成ごとの記録を残します
• ユーザーから使用状況について質問されたら、インストール済みのBanana MCP/toolの使用状況サマリーを使用します

概算コスト：

• 料金を提示する前に、インストール済みのMCP/tool設定で現在の料金を確認してください

モデルの振り分け

シナリオ	モデル	理由
OG画像、ソーシャルプレビュー	インストール済みMCP/toolのデフォルト @ 1K	高速で費用対効果が高い
メインビジュアル、製品写真	インストール済みMCP/toolの高品質モデル @ 2K	品質と詳細
テキスト入りインフォグラフィック	インストール済みMCP/toolのテキスト対応モデル @ 2K、対応している場合はthinking: high	テキスト描画に優れている
クイックドラフト	インストール済みMCP/toolのドラフトモデル @ 512	素早く反復できる

エラー処理

エラー	解決方法
MCPが設定されていない	./extensions/banana/install.shを実行します
APIキーが無効	https://aistudio.google.com/apikey で新しいキーを取得します
レート制限（429）	60秒待って再試行します。無料枠：約10 RPM／約500 RPD
IMAGE_SAFETY	プロンプトを言い換えます。references/prompt-adaptation-safety.mdを参照してください
MCPを利用できない	./extensions/banana/install.shでMCPを設定します。claude-seoにはローカル生成のフォールバックスクリプトは同梱されていません
拡張機能がインストールされていない	インストール手順./extensions/banana/install.shを表示します

スキル間の連携

• seo-images（分析）からseo-image-gen（生成）に情報を渡します。/seo imagesの監査結果から、画像の不足や品質の低い画像を特定し、その結果をもとに/seo image-genコマンドを実行します
• seo-auditはseo-image-genのエージェント（このスキルではありません）を起動して、サイト全体のOG画像／ソーシャル画像を分析し、優先順位を付けた生成計画を作成します
• seo-schemaでは生成画像を利用できます。生成後、新しいアセットを参照するImageObjectスキーママークアップを提案します

リファレンスドキュメント

必要に応じて読み込みます。起動時にすべて読み込まないでください。

• references/prompt-engineering.md：6要素のシステム、ドメインモード、高度な手法
• references/prompt-templates.md：ユースケース別のすぐに使えるテンプレート
• references/prompt-adaptation-safety.md：モデルの調整ルール、よくある間違い、安全フィルターに対応する言い換え
• references/gemini-models.md：モデルの仕様、レート制限、機能
• references/mcp-tools.md：MCPツールのパラメーターと応答
• references/post-processing.md：ImageMagick／FFmpegのパイプラインレシピ
• references/cost-tracking.md：料金、使用状況の追跡
• references/presets.md：ブランドプリセットの管理
• references/seo-image-presets.md：SEO専用のプリセットテンプレート

応答形式

生成後は、必ず次の情報を提供してください。

1. 画像パス：保存先
2. 作成したプロンプト：APIに送信した内容を表示します（参考用）
3. 設定：モデル、アスペクト比、解像度
4. SEOチェックリスト：代替テキストの提案、ファイル名、WebP変換
5. スキーマのスニペット：該当する場合はImageObjectまたはog:imageのマークアップ