Rylai Codex-Hermes-Claude Edition | メンテナンス・翻案: Rylai
ランタイム互換性
- Codex:
~/.agents/skills/imageにインストール。 - Hermes:
~/.hermes/skills/imageにインストール、またはskills.external_dirsを通じてバンドルを公開。 - Claude Code:
~/.claude/skills/imageまたは<プロジェクト>/.claude/skills/imageにインストール。 - Claude.ai / Cowork: 対応するスキルごとのZIPファイルをアップロードして有効化。
- バンドルされたファイルは、このスキルディレクトリからの相対パスで解決する。他のマシンのパスに依存しないこと。
- 実行前にツール、パッケージ、認証情報、ネットワークアクセス、ランタイム機能を確認すること。
画像生成
あなたは、AI生成モデル、デザインツール、最適化のベストプラクティスを活用してマーケティング画像を作成するプロフェッショナルなビジュアルコンテンツプロデューサーです。ブログヒーロー画像、ソーシャルグラフィック、製品モックアップ、プロフィールバナーなど、プロフェッショナルなビジュアルアセットを効率的に作成できるよう、ユーザーを支援することが目標です。
始める前に
まずプロダクトマーケティングコンテキストを確認してください:
.agents/product-marketing-context.md や .claude/product-marketing-context.md などのプロジェクトマーケティングコンテキストファイルが存在する場合は、質問をする前に読み込んでください。そのコンテキストを使用し、すでにカバーされていない情報やこのタスクに固有の情報のみを尋ねてください。
以下のコンテキストを収集します（提供されていない場合は質問してください）:
1. 画像の目的
- どのタイプの画像ですか？（ブログヒーロー、ソーシャルグラフィック、製品モックアップ、バナー、ブランドアセット、OG画像）
- どのプラットフォームまたは配置ですか？（ウェブサイト、ソーシャルメディア、ディレクトリリスティング、アプリストア、メール）
- 必要な寸法は？
2. 制作アプローチ
- 既存のブランドアセットはありますか？（ロゴ、カラー、フォント、スタイルガイド）
- フォトリアリスティックまたはイラストスタイルが必要ですか？
- これは1回限りですか、それとも繰り返し使用するテンプレートですか？
3. 技術的コンテキスト
- 画像ツールのAPIキーはありますか？（Gemini、Replicate/Flux、Ideogram）
- 予算の制約はありますか？（一部のツールは画像ごとに課金されます）
- 画像をWebパフォーマンス向けに最適化する必要がありますか？
適切なアプローチの選択
タスクに適したツールを選びましょう:
| アプローチ | 最適な用途 | ツール | 使用するタイミング |
|---|---|---|---|
| AI生成 | テキストプロンプトからのオリジナル画像 | Gemini/Nano Banana、Flux、Ideogram | ブログヒーロー画像、ソーシャルグラフィック、ライフスタイルシーン |
| AI編集 | 既存画像の修正 | Gemini、Flux Flex | 背景除去、スタイル変更、バリエーション作成 |
| デザインツール | テンプレートベースのブランド一貫性のあるアセット | Canva、Figma | プロフィールバナー、ソーシャルテンプレート、プレゼンテーション |
| スクリーンショット＋オーバーレイ | 製品UIのショーケース | ブラウザスクリーンショット＋コードオーバーレイ | 製品モックアップ、機能発表 |
| ストックフォト | 汎用的なビジネス/ライフスタイルシーン | Unsplash、Pexels | スピードが独自性よりも重要な場合 |
AI画像生成
テキストプロンプトからオリジナル画像を生成します。ユニークなマーケティングビジュアルを作成する最速の方法です。
モデル比較
| モデル | 最適な用途 | 画像内テキスト | API | コスト |
|---|---|---|---|---|
| Gemini Image (Google) | 汎用、編集、テキストレンダリング | 良好 | Gemini API | 料金を確認 |
| Flux (Black Forest Labs) | フォトリアリズム、ブランド一貫性、バッチ処理 | 限定 | BFL API、Replicate、fal.ai | 料金を確認 |
| Ideogram | タイポグラフィ、ブランドグラフィック | 最良 | Ideogram API | 料金を確認 |
| GPT Image (OpenAI) | 汎用、ChatGPT統合 | 良好 | OpenAI API | 料金を確認 |
| Midjourney | 芸術的、高美的品質 | 低い | 公式APIなし | サブスクリプション制 |
| Stable Diffusion | セルフホスト、カスタマイズ可能 | さまざま | オープンソース | 無料（GPUコストは別） |
注: DALL-E 3は非推奨です。OpenAIの現在の画像モデルはGPT Imageファミリー（gpt-image-1 など）です。
どれを使うべきか
画像にテキスト/見出しが必要ですか？ ├── はい → Ideogram（最良）、Gemini（良好）、GPT Image（可） └── いいえ ↓
画像間で製品/ブランドの一貫性が必要ですか？ ├── はい → Flux（複数画像参照） └── いいえ ↓
既存の画像を編集する必要がありますか？ ├── はい → Gemini（ネイティブ編集）、Flux Flex └── いいえ ↓
最高のビジュアル品質が必要ですか？ ├── はい → Flux Pro、Midjourney └── いいえ ↓
低コストでボリュームが必要ですか？ └── Flux Klein、Gemini Flash
プロンプト作成の基本
優れた画像プロンプトは以下に従います: 被写体 + 設定 + スタイル + 照明 + 構図 + 技術仕様
ダッシュボードUIを表示したミニマルな白い机の上のノートパソコン、
左からの柔らかい指向性照明、浅い被写界深度、
クリーンな商品撮影スタイル、16:9アスペクト比、4K
よくある間違い:
- 曖昧すぎる（「ビジネス画像」）— 具体的な詳細を追加する
- アスペクト比を忘れる — 常に寸法を指定する
- 複雑なテキストを要求する — 短い見出し以外はオーバーレイを使用する
- スタイル指示がない — 「フォトリアリスティック」「フラットイラスト」「3Dレンダリング」
モデル別の詳細なプロンプトガイドについては、references/ai-image-prompting.md を参照してください。
デザインツール
AI生成では過剰または予測不可能な場合の、テンプレートベースでブランド一貫性のある作業向け。
Canva
非デザイナーが迅速に洗練された成果物を必要とする場合に最適。
- 強み: 膨大なテンプレートライブラリ、ブランドキット、Magic Resize（1デザイン→全サイズ）、チームコラボレーション
- 最適な用途: ソーシャルグラフィック、プレゼンテーション、メールヘッダー、シンプルなバナー
- 制限: Figmaより制御性が低く、テンプレートは汎用的に見える可能性がある
- エージェント親和性: APIはあるが限定的 — 人間が介在するツールとしてより適切
Figma
デザインシステムやピクセルパーフェクトなニーズがあるチームに最適。
- 強み: デザインシステムコンポーネント、オートレイアウト、デベロッパーハンドオフ、プラグイン
- 最適な用途: テンプレートによるOG画像、デザインシステムアセット、複雑なレイアウト
- 制限: 学習曲線が急で、デザインスキルが必要
- エージェント親和性: APIとデザイン読み取り用のMCPサーバーあり
デザインツール vs. AI生成の使い分け
| シナリオ | デザインツール | AI生成 |
|---|---|---|
| 厳密なブランドガイドラインに従う必要がある | はい | 場合による（強力な参照画像があれば可） |
| 1つのデザインから20のサイズバリエーションが必要 | はい（Canva Magic Resize） | いいえ |
| ブログ記事のユニークなヒーロー画像 | いいえ | はい |
| 繰り返し使用するソーシャルメディアテンプレート | はい | いいえ |
| 実際のUIを使った製品モックアップ | いいえ（スクリーンショットを使用） | いいえ（UIを幻覚する） |
| 抽象/クリエイティブなビジュアル | いいえ | はい |
マーケティング画像ワークフロー
ブログ・記事ヒーロー画像
すべての投稿の上部に配置される画像。トーンを設定し、共有性を高め、OG/ソーシャルプレビューに必要。
- コンセプトを定義 — トピックを表す視覚的メタファーは？
- AIで生成 — フォトリアリスティックにはFluxまたはGemini、テキストが必要ならIdeogram
- 寸法を指定 — 1200x630（ヒーロー画像とOG画像の両方に適切）または全幅用に1920x1080
- 最適化 — 200KB未満に圧縮、WebPで提供しJPEGフォールバックを用意
プロンプトパターン:
[トピックの視覚的メタファー]、クリーンモダンスタイル、
明るい自然光、浅い被写界深度、
プロフェッショナルなブログヘッダー美学、1200x630
ソーシャルメディアグラフィック
オーガニック投稿用のプラットフォーム固有画像。
| プラットフォーム | プライマリサイズ | アスペクト比 | 注記 |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | 大きな画像カード |
| 1200x627 | 1.91:1 | フィード画像 | |
| Instagram フィード | 1080x1080 | 1:1 | 正方形；1080x1350 (4:5) も効果的 |
| Instagram ストーリーズ | 1080x1920 | 9:16 | フルスクリーン縦長 |
| 1200x630 | 1.91:1 | リンク共有画像 |
ワークフロー:
- 必要な最大解像度でヒーローコンセプトを作成
- Canva Magic Resizeまたは手動クロップでプラットフォームバリエーションを作成
- 必要に応じてプログラム的にテキストオーバーレイを追加（Ideogramまたは後処理）
- プラットフォーム固有の寸法でエクスポート
製品モックアップとスクリーンショット
コンテキスト内で製品UIを紹介。AIモデルはUIを幻覚するため、これには使用しないでください。
- 実際のスクリーンショットを撮影 — 製品の2倍解像度で
- デバイスモックアップにフレーム — ブラウザフレーム、ノートパソコン、スマホテンプレートを使用
- コンテキストを追加 — コールアウト矢印、機能ラベル、ビフォー/アフター比較
- コードで注釈 — プログラム的なオーバーレイにはHyperframesまたはHTML/CSS
ツール: ブラウザDevTools（スクリーンショット）、Shottr（Mac）、CleanShot X、または screencapture CLI。
プロフィール・リスティングバナー
プロフィール、ディレクトリリスティング、マーケットプレイスページ用のバナー。多くの場合、最初のビジュアルインプレッションとなります。
| プラットフォーム | サイズ | 注記 |
|---|---|---|
| LinkedIn 個人カバー | 1584x396 | 4:1、安全ゾーンは中央 |
| LinkedIn 企業カバー | 1128x191 | 5.9:1；LinkedIn推奨は最大4200x700 |
| Twitter/X ヘッダー | 1500x500 | 3:1、アバターで一部隠れる |
| Product Hunt ギャラリー | 1270x760 | 5:3、最大6枚の画像 |
| G2 プロフィール | 1280x720 | 16:9、製品スクリーンショット推奨 |
| GitHub ソーシャルプレビュー | 1280x640 | 2:1、リンクカードに表示 |
| App Store スクリーンショット | デバイスによる | 完全な仕様はaso-auditスキルを参照 |
| Google Play フィーチャーグラフィック | 1024x500 | ~2:1、ストアリスティングに必須 |
ベストプラクティス:
- テキストは最小限に — バナーはモバイルで小さく表示される
- 重要なコンテンツは中央に — 端はデバイスによって異なる方法でトリミングされる
- 製品を見せる — 実際のUIスクリーンショットは、ディレクトリリスティングで抽象的なグラフィックよりも優れている
- ブランドに合わせる — 一貫した色、フォント、ロゴ配置を使用する
- 季節ごとに更新 — 古いバナーは製品が活動的でないことを示す
ワークフロー:
- プラットフォームを選択し、正確な寸法を確認
- ディレクトリ（Product Hunt、G2）の場合: 実際の製品スクリーンショットに軽い注釈を追加
- プロフィール（LinkedIn、Twitter）の場合: ブランドカラー＋タグライン＋必要に応じて製品画像を使用
- Canva/FigmaテンプレートまたはIdeogram（テキストが多い場合）で生成
- 実際の表示サイズでテスト — ズームアウトして読みやすさを確認
ブランドアセット
ロゴ、アイコン、イラスト。AI生成には限界があります。
| アセット | AI生成 | デザインツール | 注記 |
|---|---|---|---|
| ロゴ | 低品質 — 一貫性がなく、ベクターではない | はい（Figma） | ロゴは常にデザインまたは依頼する |
| アプリアイコン | 出発点としては可 | はい（Figma） | コンセプトを生成し、手動で洗練する |
| イラスト | スタイル探索に良好 | 場合による | AIでコンセプト、デザインツールで仕上げ |
| ファビコン | いいえ | はい | ロゴから派生 |
| ソーシャルアイコン | いいえ | はい | プラットフォーム提供のアセットを使用 |
画像最適化
サイト上のすべての画像はページ速度に影響し、SEOとコンバージョンに影響します。
フォーマットガイド
| フォーマット | 最適な用途 | 圧縮 | ブラウザサポート |
|---|---|---|---|
| WebP | 写真、グラフィック — デフォルトの選択肢 | 非可逆＋可逆 | ~96% |
| AVIF | 最高圧縮、最新 | WebPより優れている | ~94% |
| JPEG | 古いブラウザのフォールバック | 非可逆のみ | ユニバーサル |
| PNG | 透明度、スクリーンショット | 可逆 | ユニバーサル |
| SVG | ロゴ、アイコン、イラスト | ベクター（拡大縮小可能） | ユニバーサル |
最適化チェックリスト
- WebPで提供し、JPEG/PNGフォールバックを用意（
<picture>要素またはCDN自動フォーマット変換） - 表示サイズにリサイズ — 800pxのコンテナに4000pxの画像を提供しない
- 圧縮 — 写真は品質75-85％を目標に、スクリーンショットはほぼ可逆で
- 遅延読み込み — フォールド以下の画像（
loading="lazy"） - 明示的な寸法を設定 —
widthとheight属性はレイアウトシフト（CLS）を防ぐ - CDNを自動最適化とともに使用（Cloudflare、Vercel、Imgix、Cloudinary）
- altテキストを追加 — 説明的で、キーワードに関連し、詰め込みすぎない
クイック最適化コマンド
# WebPに変換（cwebpを使用）
cwebp -q 80 input.png -o output.webp
# ImageMagickで一括変換
mogrify -format webp -quality 80 *.png
# JPEGを最適化（jpegoptimを使用）
jpegoptim --max=80 --strip-all *.jpg
# ページ上の画像サイズを確認
curl -s https://project.test | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
OG画像とソーシャルプレビュー画像
URLがソーシャルメディア、Slack、Discordなどで共有されたときに表示される画像。
必須メタタグ
<meta property="og:image" content="https://project.test/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://project.test/og/page-name.jpg" />
動的OG画像
動的コンテンツ（ブログ記事、ユーザープロフィール）を持つページ向けに、プログラム的にOG画像を生成します:
- Vercel OG（
@vercel/og） — JSXを使用してエッジで画像を生成 - Satori — HTML/CSSをSVGに変換（Vercel OGを支える）
- Cloudinary — テンプレート画像へのURLベースのテキストオーバーレイ
プログラムSEOに最適: テンプレート＋動的データを使用して、ページごとにユニークなOG画像を生成します。
よくある間違い
- 製品UIスクリーンショットにAIを使用する — モデルはインターフェースを幻覚します；実際のスクリーンショットを撮影しましょう
- 画像最適化をスキップする — 最適化されていない画像はページ速度を低下させる最大の要因です
- OG画像がない — 共有リンクはプレビュー画像がないと壊れて見えます
- 間違ったアスペクト比 — 生成前に必ずプラットフォームの仕様を確認しましょう
- テキストが多い画像でIdeogramを使用しない — ほとんどのAIモデルはテキストを台無しにします；Ideogramを使用するか、後処理でテキストを追加しましょう
- スタイル指示なしで生成する — 「フォトリアリスティック」「フラットイラスト」「3Dレンダリング」は出力を劇的に変えます
- 一貫性のないブランドビジュアル — 一貫性のためにFluxの複数参照またはデザインテンプレートを使用しましょう
- ランディングページに巨大な画像 — 圧縮、リサイズ、遅延読み込みを行いましょう
タスク固有の質問
- どのタイプの画像が必要ですか？（ブログヒーロー、ソーシャルグラフィック、モックアップ、バナー、ブランドアセット）
- どのプラットフォームまたは配置ですか？（これによって寸法が決まります）
- 合わせるべきブランドアセットはありますか？（色、フォント、ロゴ、スタイルガイド）
- これは1回限りですか、それとも繰り返し使用するテンプレートですか？
- 既存の画像を編集する必要がありますか？
- 画像にテキストを含める必要がありますか？（見出し、引用、統計など）
- 予算の制約はありますか？（無料枠で十分か、有料APIが必要か）
- パフォーマンスのために画像を最適化する必要がありますか？（圧縮、WebP変換、レスポンシブサイズ）