ad-creative

広告クリエイティブ

使用方法

ブレインストーミングで出たコンセプトをもとに広告画像を作成する場合、A/B テスト用に複数の広告バリエーションを作成する場合、または広告デザイン（新しい見出し、別のスクリーンショット、色の変更など）を改善する場合に使用します。

プロセス

ステップ 1：入力情報を収集する

ユーザーに次の情報を尋ねます。

1. 見出しテキスト — 広告画像に表示するメインテキスト
2. ブランドカラー（任意）— メインカラー、背景色、テキスト色（16 進数値）。指定がない場合のデフォルト：背景 #0f172a、テキスト #ffffff、アクセント #3b82f6
3. フォント（任意）— フォントファミリー（デフォルト：システムのサンセリフフォントスタック）
4. ロゴ URL（任意）— ブランドガイドラインで必要な場合
5. 製品画像（任意。製品画像スタイルとブランドスタイルでは必須）— スクリーンショット、UI 画像、またはビジュアル素材へのパス
6. スタイル — ありきたり / ダサい / ミーム / ブランド / ネイティブ（デフォルト：ありきたり）
7. 寸法 — ピクセル単位の幅 x 高さ。一般的なプリセット：
   • square：1200x1200px（ソーシャルフィード）
   • landscape：1440x1000px（Reddit／ディスプレイ広告）
   • またはカスタム寸法
8. プラットフォーム — 広告を掲載するプラットフォーム（寸法のデフォルト値やテンプレートの調整に影響します）
9. ad-angles の広告コンセプト（任意）— 見出し、スタイル、画像の提案を含むコンセプト全体

ステップ 1b：見出しを選択または改善する

見出しが指定されていない場合や、見出しを強化する必要がある場合は、フックの公式集を使用します。

思わず惹きつけられる見出しの 5 つの特長：

1. 巧みさより明快さ — 読者が何についての広告かをすぐに理解できます
2. 約束を示す — 単に「X について」ではなく、「何が変わるか」を伝えます
3. 具体的である — 具体的な数値、成果、対象者を示します
4. 明確な立場を取る — 賛否が分かれる見出しは、適切な読者に「これは自分のことだ」と思わせます
5. 明かしすぎず、興味をそそる — 好奇心のギャップを生み出します

見出しの簡単な公式：

• [Number] [Things] [Audience] should [know/avoid/use]
• [Pain Point]なしで[Outcome]を実現する方法
• まだ[Painful Activity]を続けていますか？もっと良い方法があります。
• [Competitor]の、[Differentiator]版
• [Outcome]を実現するための[Number]段階の[System]

見出しの長さに関するルール（広告画像向け）：

• 短い見出し（40 文字未満）が最も高い効果を発揮します。短くまとめましょう。
• 見出しに説明が必要なら、広告画像には複雑すぎます。

ステップ 1c：ダイレクトレスポンスのチェックリスト

HTML を作成する前に、コンセプトが次の条件を満たしていることを確認します。

• メッセージは 1 つ — 広告が伝えるアイデアは 1 つです
• 見出しはベネフィットを中心にしている — 見込み客が得られるものを伝えています
• ビジュアルが見出しと一致している — 製品のスクリーンショットが訴求内容を裏付けています
• CTA が明確である — 閲覧者が取るべき行動を理解できます
• 要素同士が競合していない — 注意を奪い合う装飾的なグラフィックがありません
• モバイルでも読みやすい — 50% のズームでも見出しが読めます
• 感情に響く — 少なくとも 1 つの感情的なトリガーを喚起します

ステップ 2：HTML を作成する

選択したテンプレートを使用して、単独で動作する HTML ファイルを作成します。

---

Cookie-Cutter テンプレート — 見出し＋製品画像＋すっきりした背景：

┌─────────────────────────────┐
│                             │
│     HEADLINE TEXT            │
│     (large, bold)           │
│                             │
│   ┌─────────────────────┐   │
│   │   Product Image     │   │
│   │   (with shadow)     │   │
│   └─────────────────────┘   │
│                             │
└─────────────────────────────┘

デザインルール：

• 見出し：大きく、太字で、コントラストを高くします。最大 2 行です。
• 製品画像：中央に配置し、控えめなドロップシャドウを付け、キャンバス幅の約 60% にします。
• 背景：ブランドカラーを使った単色または控えめなグラデーションにします。
• ロゴ、装飾要素、追加テキストは使用しません。デザインは最小限にします。

見出しのフォントサイズ：40 文字未満 → 64px、40～70 文字 → 52px、70 文字超 → 42px。

---

Ugly Ads テンプレート — テキスト中心でコントラストが高く、意図的に洗練されていないデザイン：

┌─────────────────────────────┐
│   HEADLINE TEXT             │
│   (very large, bold,        │
│    fills top 60%)           │
│                             │
│   Optional: $PRICE          │
│   Optional: subtext/CTA     │
└─────────────────────────────┘

デザインルール：

• デフォルトは正方形（1200x1200px）です。
• キャンバス上部 60% をテキストで埋めます。
• 製品画像は使用しません。テキストそのものがクリエイティブです。
• 太字でウェイトの重いフォント（700-900）を使用します。
• 意図的に洗練されていないデザインにします。グラデーション、シャドウ、角丸は使用しません。

コントラストの高い配色：

組み合わせ	背景	テキスト	アクセント
黒／黄	#000000	#FFD700	#FFFFFF
赤／白	#CC0000	#FFFFFF	#FFD700
青／白	#003366	#FFFFFF	#FFD700
白／黒	#FFFFFF	#000000	#CC0000
黄／黒	#FFD700	#000000	#CC0000

見出しのフォントサイズ：30 文字未満 → 96px、30～60 文字 → 72px、60 文字超 → 56px。

---

Meme テンプレート — 注目を集め、メリットを伝えるミーム形式：

┌─────────────────────────────┐
│   TOP TEXT (setup)          │
│   ┌─────────────────────┐   │
│   │   Meme Image        │   │
│   └─────────────────────┘   │
│   BOTTOM TEXT (punchline)   │
└─────────────────────────────┘

デザインルール：

• Drake、Expanding Brain など、よく知られたミームのテンプレートを使用します。
• 上部のテキストは状況設定（問題や従来の方法）、下部のテキストはオチ（製品や新しい方法）にします。
• テキストは短くします。テキストが詰め込まれたミームでは、形式本来の力が失われます。
• 正方形（1200x1200）が最適です。

---

Branded テンプレート — 統計、製品画像、ソーシャルプルーフを使ったプロフェッショナルなデザイン：

┌─────────────────────────────┐
│     HEADLINE TEXT            │
│   STAT  |  STAT  |  STAT    │
│   ┌─────────────────────┐   │
│   │   Product Image     │   │
│   └─────────────────────┘   │
│   Social proof line          │
└─────────────────────────────┘

デザインルール：

• ブランドの実際のカラーを使用します。
• 統計にはアクセントカラーを使い、ラベルは控えめな色にします。
• シャドウ付きの製品画像を中央に配置します。
• 最下部にソーシャルプルーフの一文を入れます（クライアント名、G2 の評価など）。

---

Native テンプレート — オーガニックなソーシャル投稿のような見た目：

┌─────────────────────────────┐
│  Platform · Promoted         │
│  HEADLINE TEXT               │
│  Body text (reads like       │
│   a real post)              │
│  ┌─────────────────────┐    │
│  │  Product Image       │    │
│  └─────────────────────┘    │
│  142 upvotes · 38 comments   │
└─────────────────────────────┘

デザインルール：

• 明るい背景（#f8fafc または白）にします。
• システムフォントスタックを使い、通常のウェイトにします。
• 本文はマーケティング用の見出しではなく、自然な投稿のように読めるものにします。
• 下部に偽のエンゲージメント指標を入れます。

---

ステップ 3：HTML ファイルを保存する

HTML ファイルを作成します。ad-{slug}.html という説明的な名前を付けます。{slug} は見出しをケバブケースに変換したものです（40 文字に切り詰めます）。

ステップ 4：Playwright MCP でスクリーンショットを撮る（利用可能な場合）

Playwright MCP が設定されている場合：

1. browser_resize を使用して、ビューポートを正確な寸法に設定します。
2. file:// URL を使用して HTML ファイルに移動します。
3. ビューポートのスクリーンショットを撮ります。
4. スクリーンショットを PNG として保存します。

Playwright MCP は、--allow-unrestricted-file-access フラグと --browser chromium フラグを指定して設定する必要があります。

Playwright MCP が利用できない場合は、HTML ファイルを提示し、ブラウザーで開いて手動でスクリーンショットを撮るか、自動キャプチャ用に Playwright MCP を設定できることをユーザーに伝えます。

ステップ 5：確認、提示、修正を繰り返す

次の内容をユーザーに提示します。

• 各広告の画像プレビュー（スクリーンショットを撮影した場合）
• レンダリングされたすべての広告を示す概要表
• PNG ファイルと HTML ファイルの両方のパス

修正を希望するかユーザーに尋ねます。

• 見出しを変更する → HTML を更新して、スクリーンショットを再撮影します。
• 色やスタイルを変更する → 別のテンプレートを使って再構築します。
• 製品画像を変更する → 新しいスクリーンショットを撮影して再構築します。
• 寸法を変更する → 新しいビューポートサイズでスクリーンショットを再撮影します。

ユーザーが納得したことを確認するまで、バッチを完了したと見なさないでください。

出力形式

# Ad Creative Output

**Date:** [current date]
**Ads Produced:** [count]
**Dimensions:** [width]x[height]px

---

## Ad 1: [Concept name]

**Headline:** [headline text]
**Style:** [branded/product/meme/ugly/native]
**Files:**
- HTML: [path]
- PNG: [path] (if Playwright available)

[Image preview if available]

---

## Upload Checklist

- [ ] Images are correct dimensions
- [ ] File size under 3MB per image
- [ ] Format is PNG or JPG
- [ ] Headlines are readable on mobile (test at 50% zoom)
- [ ] Brand colors match landing page

ルール

• このひな形は意図的に最小限にしています。装飾を追加したくなる気持ちは抑えましょう。シンプルなほうが成果につながります。
• 製品画像には、モックアップやストック写真ではなく、実際のスクリーンショットを使用してください。
• 製品画像の背景が白なら、コントラストを確保するため広告の背景は暗くしてください（逆の場合も同様です）。
• 文字や UI のスクリーンショットを鮮明に表示するには、PNG がおすすめです。
• HTML ファイルは残しておくため、ユーザーはコピー、色、画像を手動で調整し、スクリーンショットを撮り直せます。
• 広告とランディングページのビジュアルに一貫性があると、離脱を減らせます。同じ色、フォント、デザインシステムを使用してください。