ad-creative-design

広告クリエイティブデザイン

コンバージョン率の高い広告バナーやディスプレイクリエイティブをデザインします。標準的な IAB サイズ、プラットフォーム要件、CTA の最適化、A/B テストのフレームワークを網羅しています。出力形式は、Gemini で生成した画像を正確なサイズにトリミングしたもの、または、小さいサイズでもテキストをピクセル単位で鮮明に保つ必要がある場合は HTML/CSS（アニメーションは任意）です。

---

ステップ 1：デザインコンテキストの読み込み

1. まず .agents/design-context.md を読み込みます。ブランドカラー（hex）、フォント、スタイルの類型を確認します
2. ファイルが見つからない場合は、design-context のデフォルトのフォールバックを使用し、デフォルトが使用されたことをユーザーに伝えます
3. 広告クリエイティブは厳密にブランドイメージに沿わせる必要があります。広告はブランドとの最初の接点となることがよくあります

---

Gemini 画像生成の手順

パイプライン／CLI：image-generation。プロンプトの作成、トリミング、テキストオーバーレイのフォールバックについては、graphic-design のステップ 3 を参照してください。

1. IAB サイズは Gemini のアスペクト比とは異なります。ステップ 2 の表にある Gemini のアスペクト比で生成し、その後 --resize WxH でリサイズします（例：--aspect-ratio 5:4 --resize 300x250）
2. 小型フォーマット（728x90、320x50、160x600、300x250）： AI 生成テキストは縮小するとぼやけたり、スペルミスが生じたりします。ビジュアル／背景のみを「テキストなし」で生成し、その上に HTML/CSS で見出しと CTA を配置して、正確なサイズでスクリーンショットを撮ります。複数サイズのセットでは、アスペクト比のファミリーごとにマスターを 1 つ生成し、そこからトリミングします
3. 出力された PNG をすべて 100% 表示で確認します。スペル、オファーの詳細（価格、%、日付）、CTA の読みやすさ、ロゴの再現性をチェックします。追加のやり取りごとに問題を 1 つずつ修正します

プロンプトの例

• ディスプレイ広告：「[背景]に配置した[商品／サービス]のビジュアルを使った[正方形／横長／縦長]のディスプレイ広告を作成してください。[スタイル]の見出し「[テキスト]」。[色]の CTA ボタン「[アクション]」。すっきりとした、コンバージョン重視のレイアウト。」
• ソーシャル広告：「正方形の Meta フィード広告を作成してください。[背景色]を背景に、[商品]の写真を中央に配置。上部に短い見出し「[価値提案]」。下部に[ブランドカラー]の CTA ボタン「[アクション]」。テキストは最小限にし、画像は大胆に。」
• リターゲティングバナー：「超横長のリーダーボード広告の背景（8:1）を、テキストなしで作成してください。コピー用に中央を空けてください。左にロゴ、中央に[フォントの太さ]の[フォントファミリー]で「[オファーの見出し]」、右に[アクセントカラー]のピル型ボタンで CTA「[アクション]」。背景は[ブランドカラー]。緊急性を訴求するデザイン。」

---

ステップ 2：広告フォーマットとサイズの特定

標準的な IAB 広告サイズ

名前	寸法	種別	パフォーマンス	Gemini の比率 -> --resize
ミディアムレクタングル	300 x 250	ディスプレイ	在庫が最も多い	5:4 -> 300x250
ラージレクタングル	336 x 280	ディスプレイ	高パフォーマンス	5:4 -> 336x280
リーダーボード	728 x 90	ディスプレイ	ページ上部	8:1 -> 728x90
モバイルリーダーボード	320 x 50	モバイル	モバイル標準	8:1 -> 320x50
ラージモバイル	320 x 100	モバイル	エンゲージメント向上	4:1 -> 320x100
ワイドスカイスクレイパー	160 x 600	ディスプレイ	サイドバー	1:4 -> 160x600
ハーフページ	300 x 600	ディスプレイ	高いインパクト	9:16 -> 300x600
ビルボード	970 x 250	ディスプレイ	プレミアムな掲載枠	4:1 -> 970x250
ラージリーダーボード	970 x 90	ディスプレイ	ワイドフォーマット	8:1 -> 970x90
正方形	250 x 250	ディスプレイ	コンパクト	1:1 -> 250x250

静止画広告は 2 倍のサイズで書き出します（例：300x250 の場合は 600x500）。ただし、広告サーバーが高 DPI のアセットに対応している場合に限ります。対応していない場合は正確なサイズで納品し、ファイルサイズの上限を超えないようにしてください。

ソーシャル広告のサイズ

プラットフォーム	フォーマット	寸法
Meta（フィード）	単一画像	1080 x 1350（4:5、モバイルで最適）または 1080 x 1080
Meta（ストーリーズ／リール）	フルスクリーン	1080 x 1920（9:16）
Google レスポンシブ ディスプレイ／PMax	アセットセット	横長 1200 x 628、正方形 1200 x 1200、縦長 960 x 1200、ロゴ 1200 x 1200 および 1200 x 300、各 5MB 以下
LinkedIn	スポンサードコンテンツ	1200 x 627 または 1080 x 1080
Twitter/X	プロモート	1200 x 675 または 1080 x 1080

---

ステップ 3：広告コンテンツの階層

すべての広告は、この厳密なコンテンツ階層に従う必要があります。スペースが限られているため、優先順位を徹底して付けます。

広告のAIDAフレームワーク

1. 注意 -- 視覚的なフック（画像、色、アニメーション）
2. 関心 -- 価値提案（何なのか、なぜ気にかけるべきなのか）
3. 欲求 -- ベネフィットの提示（何が得られるのか）
4. 行動 -- CTAボタン（次に何をすべきか）

サイズ別のコンテンツ優先度

大きなフォーマット（300x600、970x250、300x250）

1. Logo (small, top-left or top-center)
2. Hero image or visual
3. Headline (primary value prop, 5-8 words max)
4. Supporting text (1 line, optional)
5. CTA button

中程度のフォーマット（728x90、320x100）

1. Logo (left side, compact)
2. Headline (3-5 words)
3. CTA button (right side)
-- No room for supporting text or large visuals

小さなフォーマット（320x50、幅の狭い領域の160x600）

1. Logo or brand name (text only)
2. Headline (2-4 words)
3. CTA (text link or small button)

---

ステップ4：CTAボタンのデザイン

CTAは最も重要な要素です。ひと目で分かるようにする必要があります。

CTAボタンのスタイル

次の3つのパターンのいずれかを使用します：塗りつぶし（高コントラストの塗り＋シャドウ）、アウトライン（背景は透明＋境界線）、またはピル型（角丸＋矢印アイコン）。主なプロパティ：

• padding: 10-12px 24-28px、font-weight: 700、text-transform: uppercase
• ホバー時にtranslateY(-1px)を追加し、シャドウを強めるか背景を切り替えます
• ピル型の場合は、border-radius: 50pxに::afterの矢印コンテンツを組み合わせます

CTAコピーのベストプラクティス

弱い表現	強い表現	理由
送信	今すぐ始める	行動を促す
ここをクリック	セール商品を見る	具体的なメリット
詳細はこちら	仕組みを見る	好奇心を刺激する
今すぐ購入	20％オフを利用する	価値を訴求する
登録	無料トライアルを始める	気軽に始められる
ダウンロード	無料ガイドを入手する	所有感のある表現

CTAの配置ルール

• 300x250： 下部中央または右下
• 728x90： 右側、垂直方向の中央
• 160x600： 下部中央
• 320x50： 右側
• CTAの周囲には常に少なくとも8pxのパディングを確保します
• CTAは広告全体の幅の15～25％を占めるようにします

---

ステップ5：価値提案のフレームワーク

見出しの定型パターン

1. ベネフィットを先に提示：「毎週3時間を節約」
2. 問題と解決策：「[問題]にうんざりしていませんか？[製品]をお試しください」
3. 社会的証明：「50,000人以上の[ユーザー]が利用中…」
4. 緊急性：「最終日：全商品40％オフ」
5. 好奇心：「トップ企業が[成果]のために使う[ツール]」
6. 数値：「今日から[タスク]を3倍速く」

サイズ別のコピー制限

サイズ	見出しの最大語数	本文の最大語数	CTAの最大語数
300x250	8語	12語	3語
728x90	5語	0（スペースなし）	2語
160x600	6語	10語	2語
300x600	8語	15語	3語
320x50	4語	0	2語

---

ステップ6：サイズ別レイアウトテンプレート

サイズ別のレイアウトパターン

• 300x250：Flexのカラム。ロゴを上部に配置（パディング12px）、ビジュアル領域（flex:1）、コンテンツを下部に配置（パディング16px、中央揃え）。見出しは18px/700。
• 728x90：Flexの行、align-items: center、間隔20px。ロゴを左側に配置（高さ28px）、見出し（flex:1、20px/700）、CTAを右側に配置。
• 160x600：Flexのカラム、テキストは中央揃え。ロゴを上部、ビジュアルを中央（flex:1）、見出しは16px/700、本文は12px、CTAは下部（margin-top: auto）に配置。
• 320x50：ブランドカラーの背景でFlexの行。テキスト（flex:1、13px/700、白）、CTAは右側（白い背景、ブランドカラーのテキスト、パディング6px 14px）。

すべてのサイズ：position: relative; overflow: hidden; border: 1px solid #E5E7EB;

---

ステップ7：A/Bテストのバリエーションフレームワーク

可能な場合は、必ず少なくとも2つのバリエーションを生成します。次の要素をテストします：

バリエーションの軸

軸	バリエーションA	バリエーションB
見出し	ベネフィット重視	緊急性重視
CTAの色	ブランドのプライマリーカラー	高コントラストのアクセントカラー
CTAのコピー	「今すぐ始める」	「無料で試す」
レイアウト	画像を上、テキストを下	テキストを左、画像を右
背景	明るい色／白	暗い色／ブランドカラー
ビジュアル	製品のスクリーンショット	抽象的なビジュアル／ライフスタイル画像

バリエーションの生成

広告を作成する際は、次を作成します：

• バージョンA： 基本となるデザイン
• バージョンB： コンテンツは同じで、変数を1つ変更（CTAの色、見出し、またはレイアウト）

出力では、各バリエーションを明確にラベル付けします：

<div class="ad variation-a">...</div>


<div class="ad variation-b">...</div>

---

ステップ8：プラットフォーム固有の要件

Google Display Network

• ファイルサイズ：静的なアップロード画像広告と ZIP 形式の HTML5 バンドルは最大 150KB
• アニメーション：ループを含め、合計 30 秒以内に停止する必要があります
• 白または非常に明るい背景の広告には、ページと区別できるように目に見える枠線が必要です
• HTML5 広告では、<head> 内に <meta name="ad.size" content="width=300,height=250"> が必要です
• クリック可能な領域は広告全体を覆う必要があります
• 音声の自動再生は禁止です

Meta (Facebook/Instagram) Ads

• 画像内のテキスト：2020 年に 20% テキストルールは廃止され、適用されていません。画像内のテキストは引き続き短くしてください。コピーは見出し欄とメインテキスト欄に記載します
• メインテキスト：切り捨て前は約 125 文字
• 見出し：切り捨て前は約 40 文字
• 9:16 のセーフゾーン（1080x1920）：ストーリーズでは上下約 14%（250px）にテキストやロゴを配置しないでください。リールでは上部約 14%、下部約 35%（670px）、左右約 6%に配置しないでください
• Google Responsive Display：Google が見出しを重ねて表示するため、画像上のロゴやテキストは推奨されません。文字のない画像を使用してください
• モバイルでは正方形（1:1）と縦長（4:5）が最も効果的です
• 動画のサムネイルにも同じルールが適用されます

LinkedIn Ads

• プロフェッショナルなトーンにし、クリックベイトは避けてください
• 統計やデータに基づく見出しが効果的です
• 青系の色はプラットフォームに溶け込むため、コントラストの高い色を使用してください
• 会社のロゴを見えるようにする必要があります

Programmatic Display

• 代替の静止画像を用意し、正常に表示できない場合も適切に代替表示される必要があります
• すべてのアセットは相対パスまたはデータ URI から読み込む必要があります
• クリックタグの実装が必要です

<script>
var clickTag = "https://example.com";
</script>
<a href="javascript:void(window.open(window.clickTag))" style="position:absolute;inset:0;z-index:999;">
</a>

---

ステップ 9：広告向け HTML5 アニメーション

アニメーションのパターン

段階的な表示：ロゴ、ビジュアル、見出し、CTA に、0.2s ずつ遅延させて fadeSlideIn（opacity 0->1、translateY 10px->0）を使用します。表示完了後に、控えめな ctaPulse（scale 1->1.03）を追加します。

複数フレームの切り替え：フレームを絶対位置に配置し、opacity のイン／アウトに共通の @keyframes frame を使用します。遅延は total-duration / num-frames とします。10～15 秒間に最大 3 フレームまでにしてください。

アニメーションのガイドライン

• アニメーションの合計時間：ループを含めて最大 30 秒（例：10 秒のシーケンスを 3 回ループ）
• CTA を見える状態にした静止フレームで終了する
• フレーム／シーンは 3 つまで
• 高速点滅は避ける（アクセシビリティ）
• 最終フレームには、見出し、CTA、ロゴを表示する必要があります

---

ステップ 10：広告の枠線とコンテナー

すべてのディスプレイ広告には明確な境界線を付けてください（背景が白または非常に明るい場合は必須です）。

• border: 1px solid #CCCCCC; border-radius: 0; overflow: hidden; position: relative; box-sizing: border-box;（border-box により、広告を IAB の正確なサイズに保ちます）
• 全面を覆うクリック可能領域：position: absolute; inset: 0; z-index: 100; cursor: pointer;

---

品質チェックリスト

• 寸法がターゲット広告サイズに正確に一致している（Gemini の出力は --resize でトリミング済み）
• PNG 出力／スクリーンショットを 100% 表示で読み、コピー、価格、CTA の表記が正しく、読みやすいことを確認済み
• 明確な視覚的階層：ビジュアル > 見出し > CTA
• CTA が目立ち、クリック可能であることが明確
• コピーが簡潔で、文字数制限内
• design-context にあるブランドカラーとフォントを使用
• 白／明るい背景のディスプレイ広告に目に見える枠線がある
• ファイルサイズが適切（合計 150KB 未満を目安）
• アニメーションがある場合、CTA が見える静止フレームで終了する
• A/B テスト用のバリエーションを 2 種類以上用意
• フォントサイズが 10px 未満のテキストがない
• コントラスト比：通常のテキストは 4.5:1、大きなテキスト（>=24px または >=18.66px の太字）と CTA ボタンは周囲に対して 3:1