image について
マーケティング画像の企画・制作を支援するスキルです。生成、デザイン、スクリーンショット、Web向け最適化の方法を案内し、各種掲載先に合う素材を必要とするチームや制作者向けです。
主な機能
- 01画像制作手法の選定
- 02画像生成モデルの比較
- 03プロンプトと画像寸法の計画
- 04媒体に合わせた販促素材の作成
- 05画像形式と配信の最適化
活用シーン
- 01ブログのヒーロー画像やSNS画像の企画
- 02掲載用の製品スクリーンショットの準備
- 03プロフィールやマーケットプレイス用バナーの作成
- 04Webページ用画像の容量削減
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/imageを入力して読み込まれたか確認します。
同梱ファイルreferences/ai-image-prompting.md
詳細
画像
AI 生成モデル、デザインツール、最適化のベストプラクティスを活用して、マーケティング画像の作成を支援する、ビジュアルコンテンツ制作のエキスパートです。ブログのヒーロー画像やソーシャルグラフィックから、製品のモックアップやプロフィールバナーまで、プロ品質のビジュアルアセットを効率よく制作できるようユーザーを支援します。
開始前に
まず、製品のマーケティングコンテキストを確認してください。
.agents/product-marketing-context.md が存在する場合（旧環境では .claude/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 など）です。
モデルの使い分け
Need text/headlines in the image?
├── Yes → Ideogram (best), Gemini (good), GPT Image (decent)
└── No ↓
Need product/brand consistency across images?
├── Yes → Flux (multi-image reference)
└── No ↓
Need to edit an existing image?
├── Yes → Gemini (native editing), Flux Flex
└── No ↓
Need highest visual quality?
├── Yes → Flux Pro, Midjourney
└── No ↓
Need volume at low cost?
└── Flux Klein, Gemini Flash
プロンプトの基本
効果的な画像プロンプトは、被写体＋設定＋スタイル＋照明＋構図＋技術的な指定で構成されます。
A laptop on a minimal white desk showing a dashboard UI,
soft directional lighting from the left, shallow depth of field,
clean commercial photography style, 16:9 aspect ratio, 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 にフォールバックします
プロンプトのパターン：
[Visual metaphor for topic], clean modern style,
bright natural lighting, shallow depth of field,
professional blog header aesthetic, 1200x630
ソーシャルメディアのグラフィック
オーガニック投稿向けの、プラットフォーム固有の画像です。
| プラットフォーム | 基本サイズ | アスペクト比 | 備考 |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | 大きな画像カード |
| 1200x627 | 1.91:1 | フィード画像 | |
| Instagram Feed | 1080x1080 | 1:1 | 正方形。1080x1350（4:5）も適しています |
| Instagram Stories | 1080x1920 | 9:16 | 縦長の全画面表示 |
| 1200x630 | 1.91:1 | リンク共有画像 |
ワークフロー：
- 必要な最大解像度でヒーロー画像のコンセプトを作成します
- Canva Magic Resize または手動のトリミングで、プラットフォームごとのバリエーションを作成します
- 必要に応じて、プログラムでテキストを重ねます（Ideogram または後処理）
- プラットフォーム固有の寸法でエクスポートします
製品のモックアップとスクリーンショット
製品の UI を実際の利用場面とともに紹介します。AI モデルは UI を幻覚で生成するため、この用途には使わないでください。
- 製品の実際のスクリーンショットを 2 倍の解像度で撮影します
- デバイスのモックアップに配置します — ブラウザーフレーム、ノートパソコン、スマートフォンのテンプレートを使います
- 補足情報を加えます — 注釈付きの矢印、機能ラベル、変更前後の比較など
- コードで注釈を加えます — プログラムによるオーバーレイには Hyperframes または HTML/CSS を使います
ツール： Browser 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）
- 代替テキストを追加する — 説明的でキーワードに関連する内容とし、キーワードを詰め込まないでください
すぐに使える最適化コマンド
# Convert to WebP (using cwebp)
cwebp -q 80 input.png -o output.webp
# Batch convert with ImageMagick
mogrify -format webp -quality 80 *.png
# Optimize JPEG (using jpegoptim)
jpegoptim --max=80 --strip-all *.jpg
# Check image sizes on a page
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を使う — モデルはインターフェースを幻覚するため、実際のスクリーンショットを撮影してください
- 画像の最適化を省略する — 最適化されていない画像は、ページ速度を低下させる最大の原因です
- OG画像がない — プレビュー画像がないと、共有リンクの見栄えが悪くなります
- アスペクト比が間違っている — 生成前に必ずプラットフォームの仕様を確認してください
- Ideogramを使わずにテキストの多い画像を作る — ほとんどのAIモデルはテキストの生成が苦手です。Ideogramを使うか、後からテキストを追加してください
- スタイルの方向性を決めずに生成する — 「フォトリアリスティック」「フラットイラスト」「3Dレンダリング」で出力は大きく変わります
- ブランドのビジュアルに一貫性がない — 一貫性を保つには、Fluxのマルチリファレンス機能またはデザインテンプレートを使ってください
- ランディングページに巨大な画像を使う — 圧縮し、サイズを変更して、遅延読み込みしてください
タスク別の質問
- どのような画像が必要ですか？（ブログのヒーロー画像、ソーシャル用グラフィック、モックアップ、バナー、ブランド素材）
- どのプラットフォームまたは掲載場所で使いますか？（これによって寸法が決まります）
- 合わせるべきブランド素材はありますか？（色、フォント、ロゴ、スタイルガイド）
- これは一度限りのものですか、それとも繰り返し使えるテンプレートですか？
- 画像生成ツールのAPIキーを持っていますか？
- ウェブのパフォーマンスに合わせて最適化する必要がありますか？
関連スキル
- ad-creative：有料広告用の画像クリエイティブ、プラットフォームごとの広告仕様、広告制作の拡大向け
- video：AI動画制作とプログラマティック動画向け
- social-content：投稿内容とコンテンツ戦略向け
- page-cro：ランディングページでの画像配置とコンバージョン最適化向け
- seo-audit：画像SEO（代替テキスト、ファイル名、遅延読み込み）向け
- aso-audit：アプリストアのスクリーンショット仕様と最適化向け
- directory-submissions：Product Huntのギャラリー画像とディレクトリ掲載用ビジュアル向け
コメント
Markdown 対応