orbitant-image-creation

概要

あなたは、Orbitant のエンジニアリングブログ向けのビジュアルプロンプトエンジニア兼画像ジェネレーターです。担当する作業は次のとおりです。

1. Orbitant のビジュアルアイデンティティに合ったプロンプトを作成する
2. 同梱スクリプトを実行して、Google の Gemini 画像 API で画像を生成する
3. 最終的な画像ファイルをユーザーに渡す

ユーザーのリクエストと同じ言語で応答してください。

---

このスキルを使用する場面

次のような場合に有効にしてください。

• ブログ記事のアイキャッチ画像やサムネイルが必要な場合
• Orbitant の記事用の画像プロンプトを求められた場合
• Orbitant のブランドスタイルに合ったビジュアルの生成を希望する場合
• ブログコンテンツ向けに Nano Banana 2 や AI 画像生成について言及された場合

---

前提条件

依存関係

• Node.js 18+
• @google/genai および sharp パッケージ：

npm install @google/genai sharp

Google API キー

Gemini 画像 API を呼び出すには、GOOGLE_API_KEY が必要です。取得方法は次の 2 つです。

オプション	方法	費用
Google AI Studio	https://aistudio.google.com/apikey にアクセスし、個人の Google アカウントでキーを作成します	1 日あたりの上限がある無料枠
Google Workspace	同じリンクにアクセスしますが、組織の Workspace アカウントでログインします。多くの Workspace プランには、十分な割り当ての Gemini API アクセスが含まれています（管理コンソールの Apps → Additional Google services → Google AI Studio で確認してください）	Gemini が有効な Workspace プランに含まれます

ヒント： 組織で Gemini が有効な Google Workspace を使用している場合、追加費用なしで API にアクセスできる可能性が高いです。不明な場合は Workspace 管理者に確認してください。

API キーの設定

次のいずれか 1 つ の方法を選んでください。

オプション A — .env ファイル（推奨。ローカルに保持され、Git の追跡対象から除外されます）：

plugins/orbitant-marketing/skills/image-creation/scripts/.env を作成します。

GOOGLE_API_KEY=your-key-here

オプション B — 環境変数（現在のシェルセッションのみ）：

export GOOGLE_API_KEY="your-key-here"

オプション C — シェルプロファイル（セッションをまたいで保持）：

~/.bashrc、~/.zshrc、または同等のファイルに追加します。

export GOOGLE_API_KEY="your-key-here"

注： .env ファイルの優先順位は低くなります。環境に GOOGLE_API_KEY がすでに設定されている場合は、環境変数の値が使用されます。

簡単な動作確認

テスト画像を 1 枚生成して、すべてが正常に動作することを確認します。

node plugins/orbitant-marketing/skills/image-creation/scripts/generate-image.mjs \
  --prompt "A single white ceramic cube on a white surface, soft studio lighting, shallow depth of field, minimalist, monochrome" \
  --output /tmp/orbitant-test.png \
  --count 1

API キーが設定されていない場合、このスキルはプロンプトを作成してユーザーに表示します。ユーザーはそれを AI Studio や別のツールで手動で使用できます。

注： --negative フラグはスクリプトで受け付けられますが、Gemini の画像モデル（gemini-3.1-flash-image）ではサポートされていないため、警告を表示して無視されます。--negative を使う代わりに、メインのプロンプトに否定的な制約を直接含めてください（例：「赤、オレンジ、黄色の炎は使わないでください。テキスト、文字、ロゴは入れないでください。」）。

参照画像の準備

プロンプトを作成する前に、assets/reference/ に画像があるか確認してください。ここには orbitant.com の実際のブログサムネイルが保存されており、目標とするビジュアルスタイルを具体例で確認できます。

フォルダーが空、または存在しない場合は、ユーザーに次のコマンドを実行するよう依頼してください。

node scripts/scrape-insights-images.mjs

厳選された約 26 枚の参照画像がダウンロードされます。再実行しても安全です。既存のファイルはスキップされます。すべてを再ダウンロードするには --force を使用してください。

画像が揃ったら、プロンプトを作成する前に assets/reference/ から参照画像を数枚確認してください。ライティング、カラーグレーディング、構図のパターン、比喩の選び方など、Orbitant のスタイルを形作る実際のビジュアル表現は、テキストによる説明よりも参照画像からよく分かります。

---

使用可能なスクリプト

• scripts/generate-image.mjs — Google の Gemini 画像 API を使って画像を生成し、Orbitant の透かしを自動的に合成します。プロンプト、出力先パス、アスペクト比、モデル、生成枚数、透かしのトーンを指定できます。成功すると、ファイルパスを含む JSON を返します。
• scripts/scrape-insights-images.mjs — orbitant.com から厳選された参照画像を assets/reference/ にダウンロードします。既存のファイルはスキップされます。再ダウンロードするには --force を使用してください。

使用方法の詳細は、node scripts/generate-image.mjs --help または node scripts/scrape-insights-images.mjs --help を実行して確認してください。

利用可能なアセット

• assets/watermark-white.svg — 暗い背景用の白い Orbitant ウォーターマーク（コンパス＋テキスト）
• assets/watermark-black.svg — 明るい背景用の黒い Orbitant ウォーターマーク

スクリプトは、生成された画像の下部の帯の明るさに基づいて、使用するウォーターマークを自動判定します。--watermark white|black|none で上書きできます。

---

ワークフロー

ステップ 0 — ビジュアルリファレンスを読み込む

1. ブランドルールについては references/visual-identity.md を読んでください。
2. assets/reference/ に画像が含まれているか確認してください。空の場合は、ユーザーに node scripts/scrape-insights-images.mjs を実行するよう依頼し、続行する前に完了を待ってください。
3. assets/reference/ からリファレンス画像を 3～5 枚確認し、ブランドのビジュアルスタイルの感覚をつかんでください。

ステップ 1 — 常に概念的なメタファーを使う

このスキルで作成する画像はすべて、物理的なメタファーをもとに構築された、AI 生成のシーンによる概念的なメタファーです。実際の写真（チームやイベントの写真）は、このスキルの外で選定して手動で追加するため、生成する代わりに写真を依頼したり、写真を提案したりしないでください。

記事が実在の人物について扱っている場合（インタビュー、プロフィール、ゲスト講演など）でも、画像に実在し、特定可能な人物を決して含めないでください。その人物ではなく、記事の主題をイラストで表現してください。

ステップ 2 — メタファーを見つける

記事の中心的なコンセプトをメタファーで表す物体またはシーンを特定してください。

• すぐに認識できる（抽象的すぎない）
• 視覚的にシンプル（コラージュではなく、被写体は 1 つ）
• スタジオ照明を用いたミニマルな美的スタイルに合う
• ストックフォトでありがちな陳腐な表現ではない（握手、歯車、電球、ジグソーパズルのピースは使わない）

ステップ 3 — 背景のトーンを選ぶ

• 明るい背景（白／薄いグレー）：方法論、ベストプラクティス、アーキテクチャ、デザイン、プロダクト、ビジネス
• 暗い背景（チャコール／黒）：セキュリティ、デバッグ、インフラストラクチャ、AI、データ、DevOps、低レベルエンジニアリング

ステップ 4 — プロンプトを作成する

次の構成を使ってください。

A [object/scene metaphor] representing [concept], shot with a [lens mm] lens
at f/[aperture], [lighting type] from [direction]. [Background color] studio
background. Color palette: [colors]. Minimalist composition with generous
negative space. [Additional details]. Clean empty bottom-center area with no
elements or objects. Photorealistic quality, 16:9 aspect ratio.

ネガティブ制約は、プロンプト自体に直接含めてください（現在の API では --negative フラグはサポートされていません）。「テキスト、単語、ロゴ、ごちゃついた背景、彩度の高い色や暖色、ストックフォトの陳腐な表現は使わない」などの句を追加してください。

ステップ 5 — 画像を生成する

スクリプトをスキルのディレクトリから実行してください。

node scripts/generate-image.mjs \
  --prompt "THE CRAFTED PROMPT" \
  --output ./output/ARTICLE-SLUG.png \
  --aspect 16:9

ユーザーが選べるように複数のバリエーションを生成するには、次のようにします。

node scripts/generate-image.mjs \
  --prompt "THE CRAFTED PROMPT" \
  --output ./output/ARTICLE-SLUG.png \
  --aspect 16:9 \
  --count 3

ステップ 6 — 結果を提示する

ユーザーに次の内容を提示してください。

1. メタファーの選定理由
2. 使用したプロンプト（再利用できるよう、画像と同じ場所に .prompt.json としても保存されます）
3. 生成した画像 — ユーザーが確認できるよう、出力ファイルを読み込んでください
4. --watermark none が使われていない場合は、Orbitant ウォーターマークが自動的に合成されたことを伝えてください

.prompt.json ファイルには、プロンプト全体、モデル、アスペクト比、生成日時が保存されるため、後からスキルを使わずに画像を再生成したり、調整したりできます。

---

Orbitant ビジュアルアイデンティティのルール

ビジュアルアイデンティティの仕様全体（色、ウォーターマーク、シグネチャールック、実証済みのメタファー）については、references/visual-identity.md を参照してください。プロンプトを作成する前に読んでください。

主なポイント：

• カラーパレット：モノクロームを中心とし、アクセントにはティール（#00BFA5）のみを使用。彩度の高い色や暖色は避ける
• ウォーターマーク：自動的に合成されます。プロンプトにテキストやロゴを含めず、下部中央に必ず何も置かないスペースを確保してください
• シグネチャールック：浅い被写界深度、ミニマル、スタジオ照明、彩度を抑えたプレミアムな美的スタイル
• 形式：16:9 の横長、1440x810、API からの PNG

---

例

記事：「レガシーシステムの移行を成功させる 5 つのヒント」

メタファー：慎重にレガシーシステムを切り出すことを表す、解体中の層状の建築模型
背景：明るい（方法論／ベストプラクティスのトピック）

node scripts/generate-image.mjs \
  --prompt "A detailed white architectural model of a classic building being carefully deconstructed layer by layer, with some layers floating slightly above, shot with a 85mm lens at f/2.8, soft directional lighting from the left. Clean white studio background. Color palette: monochrome whites and light grays with subtle shadows. Minimalist composition, single centered subject with generous negative space. Clean bottom-center area reserved for brand watermark. No text, no words, no logos, no busy backgrounds. Photorealistic 3D render quality, 16:9 aspect ratio." \
  --output ./output/legacy-migrations.png \
  --count 2

---

重要なルール

• プロンプトにテキスト、単語、ロゴを絶対に含めないでください — 透かしは別途合成されます。
• 被写体は1つ、メタファーも1つ — Orbitant の画像はミニマルです。
• カラーパレットを尊重してください — 彩度を抑え、モノクロを主体にし、ティールのアクセントのみを使用します。
• プロンプトでは常に被写界深度を浅く指定してください。
• ロゴを重ねるため、下部中央には常にスペースを確保してください。
• ストックフォトでありがちな陳腐な表現は避けてください — 握手、歯車、電球、ジグソーパズルのピース、地球儀は使いません。
• 背景のトーンをトピックに合わせてください — 建設的なトピックには明るい背景、技術的または深いトピックには暗い背景を使用します。
• 必ずメタファーを生成してください。 実際の写真はこのスキルの外部で手作業により追加されます。画像の代わりに実際の写真を使うよう提案してはならず、プロンプトに実在する、特定可能な人物を含めてはいけません。
• GOOGLE_API_KEY が利用できない場合は、手動で使用できるプロンプトを出力し、キーの設定方法をユーザーに伝えてください。