mcpField
G
gemini-image-gen

gemini-image-gen

github.com/jezwebクリエイティブ・メディア1.1k197 回インストール3 週間前に更新
リポジトリ

gemini-image-gen について

Gemini API を使い、Web プロジェクトの文脈に合う画像を生成するスキルです。プロンプト作成、複数案の生成、任意の後処理を案内します。

主な機能

  1. 01Gemini API による画像生成
  2. 02プロジェクトの配色に沿ったプロンプト
  3. 03複数の画像バリエーション生成
  4. 04参照画像に合わせたスタイル調整
  5. 05任意の画像後処理

活用シーン

  1. 01Webサイトのヒーロー背景の作成
  2. 02Open Graph カードやプレースホルダーの生成
  3. 03スタイルを合わせた画像案の作成

インストール

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

$npx skills add https://github.com/jezweb/claude-skills --skill gemini-image-gen

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

同梱ファイルreferences/api-pattern.mdreferences/prompting-guide.md

詳細

Gemini 画像生成ツール

Gemini API を使用して、ウェブプロジェクトに合わせた画像を生成します。ヒーロー背景、OG カード、プレースホルダー写真、テクスチャ、スタイルを合わせたバリエーションを生成します。

セットアップ

API キー：GEMINI_API_KEY を環境変数として設定します。キーをお持ちでない場合は、https://aistudio.google.com/apikey から取得してください。

export GEMINI_API_KEY="your-key-here"

ワークフロー

ステップ 1：必要なものを把握する

ユーザーまたはプロジェクトのコンテキストから、以下の情報を集めます。

  • 内容：ヒーロー背景、商品写真、テクスチャ、OG 画像、プレースホルダー
  • スタイル：暖色系／寒色系／ミニマル／高級感／大胆 — プロジェクトのカラーパレット（input.css、tailwind config）を確認します
  • 寸法：ヒーロー（1920x1080）、OG（1200x630）、正方形（1024x1024）、カスタム
  • 枚数：単一画像、または選択用の複数バリエーション
ステップ 2：プロンプトを作成する

抽象的な形容詞ではなく、具体的な撮影パラメーターを使います。全体的な手法については、references/prompting-guide.md を参照してください。

簡単なルール：

  • 写真家に指示するように描写します
  • カメラの仕様を使います：「85mm f/1.8」、「広角 24mm」
  • プロジェクトのパレットから色を指定します：「暖かみのあるテラコッタ（#C66A52）とクリーム（#F5F0EB）の色調」
  • 照明を指定します：「左から差し込むゴールデンアワーの光、4500K」
  • 必ず末尾に追加します：「テキスト、透かし、ロゴ、手は入れないでください」
ステップ 3：生成する

標準ライブラリ以外の依存関係を使わず、Gemini API を呼び出す Python スクリプトを生成します。スクリプトでは、以下を行います。

  1. 環境変数から GEMINI_API_KEY を読み取る
  2. https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent に POST する
  3. generationConfig に "responseModalities": ["TEXT", "IMAGE"] を含める
  4. レスポンスを解析する：候補のパーツから inlineData.data（base64）を取り出す
  5. base64 をデコードし、PNG として保存する
  6. 複数のバリエーションに対応する（N 回生成し、name-1.png、name-2.png として保存する）

参照画像に合わせたスタイルにするには、テキストプロンプトの前に参照画像を inlineData パーツとして含め、温度を 1.0 ではなく 0.7 に設定します。

エラー処理とレスポンス解析を含む実装の全体像については、references/api-pattern.md を参照してください。

重要：プロンプトを curl と bash の引数で渡さないでください。シェルのエスケープ処理はアポストロフィで問題が発生します。必ず Python の json.dumps() を使うか、先にプロンプトをファイルに書き込んでください。

ステップ 4：後処理（任意）

リサイズ、形式変換、最適化には image-processing スキルを使用します。

ステップ 5：ユーザーに提示する

生成した画像を表示して確認してもらいます。可能であれば画像ファイルを読み込んでインライン表示し、そうでなければ生成した内容を説明して、ユーザーがファイルを開けるようにします。

プリセット

プロジェクト固有の情報（色、雰囲気、被写体）を加えて調整するための基本プロンプトです。

プリセット基本プロンプト
hero-background"雰囲気のある横長の背景、ソフトフォーカス、[色調]、[雰囲気]、横長 1920x1080"
og-image"ブランドを反映したすっきりしたカード背景、[ブランドカラー]、控えめなグラデーション、1200x630"
placeholder-photo"[被写体]のプロ仕様のストック写真風、自然な照明、暖色系"
texture-pattern"控えめな反復テクスチャ、[素材]、継ぎ目のないタイル、落ち着いた[色]"
product-shot"商品写真、[アイテム]を[表面]に配置、柔らかなスタジオ照明、すっきりした背景"

モデルの選択

用途モデルコスト
下書き、すばやく用意するプレースホルダーgemini-2.5-flash-image無料（約 500 件／日）
クライアント向けの最終アセットgemini-3-pro-image-preview約 0.04 ドル／画像
スタイルを合わせたバリエーションgemini-3-pro-image-preview + 参照画像約 0.04 ドル／画像

エラーが発生した場合は、モデル ID が頻繁に変更されるため、最新の ID を確認してください。

参照ファイル

場合参照先
効果的なプロンプトを作成するときreferences/prompting-guide.md
API の実装詳細を確認するときreferences/api-pattern.md

コメント

Markdown 対応