image
マーケティング用の画像（ブログのヒーロー画像、SNSグラフィック、商品モックアップ、プロフィールバナー、リスティングビジュアル、ブランド素材など）を作成・生成・編集・最適化したい場合に使用します。「AI画像生成」「画像を作って」「グラフィック作成」「ヒーロー画像」「OG画像」「WebP変換」「画像圧縮」のほか、Flux・Midjourney・DALL-E・GPT Image・Ideogram・Gemini・Canva・Figmaといったツールに言及した際にも対応します。有料広告向けのクリエイティブはad-creative、動画制作はvideoをご利用ください。
description の原文を見る
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'Ideogram,' 'Gemini image,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
SKILL.md 本文
Image
AI生成モデル、デザインツール、最適化ベストプラクティスを使用してマーケティング画像を作成するのをサポートするエキスパート視覚コンテンツプロデューサーです。ブログヘッダーやソーシャルグラフィックから商品モックアップやプロフィールバナーまで、ユーザーが効率的にプロフェッショナルな視覚資産を制作できるようお手伝いするのが目標です。
開始前に
最初に商品マーケティングコンテキストをチェック:
.agents/product-marketing.md が存在する場合 (または .claude/product-marketing.md、またはレガシー設定では product-marketing-context.md)、質問をする前にそれを読んでください。そのコンテキストを使用し、すでに対象されている情報またはこのタスク固有の情報のみを質問してください。
このコンテキストを収集します (提供されていない場合は質問):
1. 画像の目的
- どのタイプの画像? (ブログヘッダー、ソーシャルグラフィック、商品モックアップ、バナー、ブランドアセット、OG画像)
- どのプラットフォームまたは配置? (ウェブサイト、ソーシャル、ディレクトリリスティング、アプリストア、メール)
- どのサイズが必要ですか?
2. 制作アプローチ
- 既存のブランドアセットがありますか? (ロゴ、色、フォント、スタイルガイド)
- フォトリアリスティックまたはイラストレーション風が必要ですか?
- 単発か、繰り返し使用するためのテンプレートですか?
3. 技術的コンテキスト
- 画像ツール用のAPIキーはありますか? (Gemini、Replicate/Flux、Ideogram)
- 予算制約? (一部のツールは画像ごとに課金)
- ウェブパフォーマンスのために画像を最適化する必要がありますか?
アプローチの選択
仕事に適したツールを選びます:
| アプローチ | 最適な用途 | ツール | 使用する場合 |
|---|---|---|---|
| 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 サーバーがあり、デザインを読み込める
デザインツール対 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、リンクカードに表示 |
| アプリストアスクリーンショット | デバイスにより異なる | aso スキルで完全なスペックを参照 |
| 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://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
OG & ソーシャルプレビュー画像
URL がソーシャルメディア、Slack、Discord など で共有されるときに表示される画像。
必須メタタグ
<meta property="og:image" content="https://yoursite.com/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://yoursite.com/og/page-name.jpg" />
動的OG画像
動的コンテンツを持つページ (ブログ投稿、ユーザープロフィール) の OG 画像をプログラム的に生成:
- Vercel OG (
@vercel/og) — JSX を使用してエッジで画像を生成 - Satori — HTML/CSS を SVG に変換 (Vercel OG をパワー)
- Cloudinary — テンプレート画像上の URL ベースのテキストオーバーレイ
プログラム的 SEO に最適: テンプレート + 動的データを使用してページごとにユニークな OG 画像を生成。
よくある間違い
- 商品UI スクリーンショットに AI を使用 — モデルはインターフェースを幻想する; 実際のスクリーンショットをキャプチャ
- 画像最適化をスキップ — 最適化されていない画像は #1 ページスピードキラー
- OG 画像なし — 共有リンクはプレビュー画像なしで壊れて見える
- 間違ったアスペクト比 — 生成前に常にプラットフォームスペックをチェック
- Ideogram なしのテキスト重い画像 — ほとんどの AI モデルはテキストを台無しにする; Ideogram を使用するか、テキストを後で追加
- スタイル方向なしで生成 — 「フォトリアリスティック」「フラットイラスト」「3D レンダー」は出力を大きく変える
- ブランドビジュアルが一貫性がない — Flux マルチリファレンスまたはデザインテンプレートを使用
- ランディングページの巨大な画像 — 圧縮、リサイズ、遅延ロード
タスク固有の質問
- どのタイプの画像が必要ですか? (ブログヒーロー、ソーシャルグラフィック、モックアップ、バナー、ブランドアセット)
- どのプラットフォームまたは配置? (これはサイズを決定します)
- 一致するブランドアセットはありますか? (色、フォント、ロゴ、スタイルガイド)
- これは単発か、繰り返し可能なテンプレートですか?
- 画像生成ツール用の API キーはありますか?
- これはウェブパフォーマンスのために最適化する必要がありますか?
関連スキル
- ad-creative: 有料広告画像クリエイティブ、プラットフォーム固有の広告スペック、スケーラブルな広告制作用
- video: AI ビデオ制作およびプログラム的ビデオ用
- social: 投稿内容とコンテンツ戦略用
- cro: ランディングページの画像配置およびコンバージョン最適化用
- seo-audit: 画像 SEO (alt テキスト、ファイル名、遅延ロード) 用
- aso: アプリストアスクリーンショットスペックと最適化用
- directory-submissions: Product Hunt ギャラリー画像とディレクトリリスティングビジュアル用
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- coreyhaines31
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/coreyhaines31/marketingskills / ライセンス: MIT
関連スキル
agent-browser
AI エージェント向けのブラウザ自動化 CLI です。ウェブサイトとの対話が必要な場合に使用します。ページ遷移、フォーム入力、ボタンクリック、スクリーンショット取得、データ抽出、ウェブアプリのテスト、ブラウザ操作の自動化など、あらゆるブラウザタスクに対応できます。「ウェブサイトを開く」「フォームに記入する」「ボタンをクリックする」「スクリーンショットを取得する」「ページからデータを抽出する」「このウェブアプリをテストする」「サイトにログインする」「ブラウザ操作を自動化する」といった要求や、プログラマティックなウェブ操作が必要なタスクで起動します。
anyskill
AnySkill — あなたのプライベート・スキルクラウド。GitHubを基盤としたリポジトリからエージェントスキルを管理、同期、動的にロードできます。自然言語でクラウドスキルを検索し、オンデマンドでプロンプトを自動ロード、カスタムスキルのアップロードと共有、スキルバンドルの一括インストールが可能です。OpenClaw、Antigravity、Claude Code、Cursorに対応しています。
engram
AIエージェント向けの永続的なメモリシステムです。バグ修正、意思決定、発見、設定変更の後はmem_saveを使用してください。ユーザーが「覚えている」「記憶している」と言及した場合、または以前のセッションと重複する作業を開始する際はmem_searchを使用します。セッション終了前にmem_session_summaryを使用して、コンテキストを保持してください。
skyvern
AI駆動のブラウザ自動化により、任意のウェブサイトを自動化できます。フォーム入力、データ抽出、ファイルダウンロード、ログイン、複数ステップのワークフロー実行など、ユーザーがウェブサイトと連携する必要があるときに使用します。Skyvernは、LLMとコンピュータビジョンを活用して、未知のサイトも自動操作可能です。Python SDK、TypeScript SDK、REST API、MCPサーバー、またはCLIを通じて統合できます。
pinchbench
PinchBenchベンチマークを実行して、OpenClawエージェントの実世界タスクにおけるパフォーマンスを評価できます。モデルの機能テスト、モデル間の比較、ベンチマーク結果のリーダーボード提出、またはOpenClawのセットアップがカレンダー、メール、リサーチ、コーディング、複数ステップのワークフローにどの程度対応しているかを確認する際に使用します。
openui
OpenUIとOpenUI Langを使用してジェネレーティブUIアプリを構築できます。これらはLLM生成インターフェースのためのトークン効率的なオープン標準です。OpenUI、@openuidev、ジェネレーティブUI、LLMからのストリーミングUI、AI向けコンポーネントライブラリ、またはjson-render/A2UIの置き換えについて述べる際に使用します。スキャフォルディング、defineComponent、システムプロンプト、Renderer、およびOpenUI Lang出力のデバッグに対応しています。