mcpField
S
seo-image-gen

seo-image-gen

github.com/infrasity-labsクリエイティブ・メディア15087 回インストール18 週間前に更新
リポジトリ

seo-image-gen について

seo-image-gen は、Gemini と banana Creative Director のパイプラインで SEO 向け画像を生成するスキルです。SNS プレビュー、ブログのヒーロー画像、商品写真、インフォグラフィックなどのプリセットを備え、監査専用エージェントが画像生成計画も作成します。

主な機能

  1. 01SEO 用画像プリセット
  2. 02アスペクト比と解像度の既定値
  3. 03Gemini の画像生成ツール
  4. 04画像バリエーションの一括生成
  5. 05生成後の SEO チェックリスト
  6. 06監査専用の画像計画エージェント

活用シーン

  1. 01OG 画像や SNS プレビューの作成
  2. 02ブログのヒーロー画像や商品画像の生成
  3. 03インフォグラフィックやアイコンの制作
  4. 04品質の低いサイト画像の差し替え計画

MCP 対応

このスキルは banana MCP サーバーの `set_aspect_ratio` と `gemini_generate_image` ツールで設定と画像生成を行います。生成前にサーバーへの接続を確認します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill seo-image-gen

インストール後、Claude Code で/seo-image-genを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
cost-tracking.md
gemini-models.md
mcp-tools.md
post-processing.md
presets.md
prompt-engineering.md
seo-image-presets.md
scripts/
batch.py
cost_tracker.py
edit.py
generate.py
presets.py
setup_mcp.py
validate_setup.py

詳細

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

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

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

この拡張機能は、Claude Code 向けのスタンドアロン AI 画像生成スキルを基盤としています。

このスキルは、役割の異なる 2 つの要素で構成されています。

  • SKILL.md（このファイル）：画像を生成する対話型の /seo image-gen コマンドを処理します
  • エージェント（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:91KProduct または UI/Webすっきりとしていて、プロフェッショナルで、テキストに適しています
ブログのヒーロー画像16:92KCinema または Editorialドラマチックで、雰囲気があり、エディトリアル品質です
スキーマ画像4:31KProductすっきりとしていて説明的な、スキーマの ImageObject 向けです
ソーシャル用スクエア画像1:11KUI/Web各プラットフォームに最適化された正方形です
商品写真4:32KProduct白い背景、スタジオ照明です
インフォグラフィック2:34KInfographicデータ重視の縦長レイアウトです
ファビコン／アイコン1:1512Logoシンプルで、拡大縮小しやすく、認識しやすいデザインです
Pinterest ピン2:32KEditorial縦長のカードです

生成パイプライン

すべての生成リクエストで、次の手順を実行します。

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

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

python3 scripts/presets.py list

一致するプリセットを読み込み、デフォルト値として適用します。また、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" />

コストへの配慮

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

  • 生成前に推定費用を提示します（特にバッチ処理の場合）
  • 生成のたびに記録します：python3 scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"
  • ユーザーから使用状況について質問された場合は、cost_tracker.py summaryを実行します

おおよその費用（gemini-3.1-flash）：

  • 512：1枚あたり約$0.02
  • 1K解像度：1枚あたり約$0.04
  • 2K解像度：1枚あたり約$0.08
  • 4K解像度：1枚あたり約$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のエージェント（このスキルではありません）を起動し、サイト全体の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 チェックリスト：代替テキストの候補、ファイル名、WebP 変換
  5. スキーマのスニペット：該当する場合は、ImageObjectまたはog:imageのマークアップ

コメント

Markdown 対応