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

Gemini の画像生成機能を banana Creative Director パイプラインで実行し、SEO 用途の本番環境対応画像を生成します。SEO ニーズを最適化されたドメインモード、アスペクト比、解像度デフォルトにマッピングします。

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

この拡張機能は Claude Banana の上に構築されており、Claude Code 向けのスタンドアロン AI 画像生成スキルです。

このスキルには異なる役割を持つ 2 つのコンポーネントがあります：

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

前提条件

このスキルには banana 拡張機能のインストールが必要です：

./extensions/banana/install.sh

利用可能性の確認： 画像生成ツールを使用する前に、MCP サーバーが接続されていることを確認してください。gemini_generate_image または set_aspect_ratio ツールが利用可能かどうかをチェックしてください。ツールが利用できない場合は、拡張機能がインストールされていないことをユーザーに通知し、インストール手順を提供してください。

クイックリファレンス

コマンド	機能
/seo image-gen og <説明>	OG / ソーシャルプレビュー画像を生成（1200x630 相当）
/seo image-gen hero <説明>	ブログヒーロー画像を生成（ワイドスクリーン、劇的）
/seo image-gen product <説明>	商品写真を生成（クリーン、白背景）
/seo image-gen infographic <説明>	インフォグラフィック画像を生成（縦方向、データ重視）
/seo image-gen custom <説明>	Creative Director パイプライン全体を使用したカスタム画像
/seo image-gen batch <説明> [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. Reasoning Brief を構築：banana Creative Director パイプラインを使用
   • references/prompt-engineering.md から 6 コンポーネントシステムを読み込む
   • ドメインモードの重み付けを適用（Subject 30%、Style 25%、Context 15% など）
   • 具体的で視覚的に：カメラが見るものを説明
5. 生成：gemini_generate_image MCP ツールで
6. 生成後 SEO チェックリスト（下記参照）

プリセットをチェック

ユーザーがブランドを言及するか、SEO プリセットが設定されている場合：

python3 scripts/presets.py list

マッチするプリセットを読み込んでデフォルトとして適用します。また references/seo-image-presets.md で SEO 固有のプリセットテンプレートを確認してください。

生成後 SEO チェックリスト

成功した生成後、ユーザーに以下を指導してください：

1. Alt テキスト：生成された画像のための説明的でキーワード豊かな alt テキストを作成
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": "ターゲットキーワード入りの説明的なキャプション"
   }
   

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="説明的な alt テキスト" />
   

コスト意識

画像生成にはコストがかかります。透明性を保ってください：

• 生成前に推定コストを表示（特にバッチの場合）
• すべての生成をログに記録：python3 scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"
• ユーザーが使用状況を尋ねたら cost_tracker.py summary を実行

概算コスト（gemini-3.1-flash）：

• 512：約 $0.02 / 画像
• 1K 解像度：約 $0.04 / 画像
• 2K 解像度：約 $0.08 / 画像
• 4K 解像度：約 $0.16 / 画像

モデルルーティング

シナリオ	モデル	理由
OG 画像、ソーシャルプレビュー	gemini-3.1-flash-image-preview @ 1K	高速、コスト効率的
ヒーロー画像、商品写真	gemini-3.1-flash-image-preview @ 2K	品質とディテール
テキスト付きインフォグラフィック	gemini-3.1-flash-image-preview @ 2K、thinking: high	より良いテキスト描写
クイックドラフト	gemini-2.5-flash-image @ 512	迅速な反復

エラーハンドリング

エラー	解決策
MCP が設定されていない	./extensions/banana/install.sh を実行
API キーが無効	https://aistudio.google.com/apikey で新規キーを取得
レート制限（429）	60 秒待機してリトライ。無料ティア：約 10 RPM / 約 500 RPD
IMAGE_SAFETY	プロンプトを言い換える - references/prompt-engineering.md の Safety セクションを参照
MCP が利用できない	フォールバック：python3 scripts/generate.py --prompt "..." --aspect-ratio "16:9"
拡張機能がインストールされていない	インストール手順を表示：./extensions/banana/install.sh

クロススキル統合

• seo-images（分析）は seo-image-gen（生成）に入力：/seo images からの監査結果は欠落している、または品質の低い画像を特定；それらの結果を使用して /seo image-gen コマンドを駆動
• seo-audit は seo-image-gen agent（このスキルではない）を起動してサイト全体の OG / ソーシャル画像を分析し、優先順位付きの生成計画を作成
• seo-schema は生成された画像を使用可能：生成後、新しいアセットを指す ImageObject スキーママークアップを提案

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

オンデマンドで読み込みます。起動時にすべてを読み込まないでください：

• references/prompt-engineering.md：6 コンポーネントシステム、ドメインモード、テンプレート
• 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 チェックリスト：alt テキスト提案、ファイル命名、WebP 変換
5. スキーマスニペット：該当する場合は ImageObject または og:image マークアップ