メールマーケティングスキル
単一のHTMLメールを生成します — 中央揃え、単一カラム、メール本文の周りにクローム（装飾枠）はありません。マーケティング成果物として扱います：1つの大きなアイデア、1つのCTA。
ワークフロー
- アクティブなDESIGN.mdを読む（上記で注入済み）。メールは他のどの画面よりもディスプレイフォントに依存します — デザインシステムの中で最も目立つタイプトークンをヘッドラインロックアップに選びます。
- ブリーフからブランド＋製品を選ぶ。実際のワードマーク、実際の製品名、1つの実際のメリット文章を生成します — プレースホルダーは使用しません。
- レイアウト、順番に、すべてを着色されたページ背景上の600〜680pxのカラム内に中央揃えで配置します（メール本文がページではなくメールのように見えるようにするため）：
- マストヘッド — 左側にワードマーク＋右側に3つの短いナビリンク（SHOP、JOURNAL、MEMBERS）。細い下線。
- ヒーローブロック — 16:9の製品画像プレースホルダー。デザインシステムの色合いのグラデーション、または製品（靴、ボトル、ヘッドホンなど、ブリーフが示すもの）のスタイライズされたSVGシルエットを使用します。左上に小さなブランドスタンプ、左下にカラーバリエーションタグを追加します。
- アイブロウ — スモールキャップス、アクセントカラー、
·文字で区切ります（例：「NEW · MAX-CUSHION TRAINER · EMBER FLARE」）。 - ヘッドラインロックアップ — ディスプレイフォントを使用した2〜3行のヘッドライン、すべて大文字、非常に狭いトラッキング。1つのアクセント単語にわずかな傾き（
transform: skew(-6deg)）を適用して、スポーティーな平行四辺形の印象を与えます。 - ボディ — 2〜3文の段落、左揃え、ボディフォント。
- プライマリCTA — ソリッドなピル型またはブロック型のボタン。1つだけ。
- 仕様グリッド — 2×2グリッドの（大きい数字＋単位＋ラベル）コールアウト。数字にはディスプレイフォントを使用します。
- フッター — ワードマーク、住所行、購読解除＋ブラウザで表示リンク。
- 1つのHTMLドキュメントを記述します:
<!doctype html>から</html>まで、CSSはインライン。- カラムを
margin: 0 autoで中央揃えにします。body { background: <色合い> }を設定して、ページ上のメールというメタファーが機能するようにします。 - 外部画像は使用しません — 製品写真にはインラインSVGまたはデザインシステムの色合いのグラデーションブロックを使用します。
- マストヘッド、ヒーロー、ヘッドライン、CTA、仕様に
data-od-idを設定します。
- セルフチェック:
- メールは上から下まで8〜10秒で読み終えられます。
- CTAは1つ。アクセントは最大2回出現します（アイブロウ＋CTA、またはヘッドラインの単語）。
- 480pxのウィンドウでも読めること（カラムがリフローし、タイプが1段階小さくなる）。
出力契約
<artifact> タグで囲んで出力します：
<artifact identifier="email-slug" type="text/html" title="メール — 件名">
<!doctype html>
<html>...</html>
</artifact>
アーティファクトの前に1文、後には何も付けません。