email-marketing

メールマーケティングスキル

単一の HTML メールを作成します。中央揃えの単一カラムとし、メール本文の周囲に余計な装飾は加えません。マーケティング用の制作物として、ひとつの大きなアイデアとひとつの CTA を掲げます。

ワークフロー

1. 有効な DESIGN.md を読みます（上で挿入されています）。メールでは他のどの画面よりもディスプレイフォントが重要です。見出しのロックアップには、DS の中で最も目を引くタイポグラフィトークンを選びます。
2. ブリーフからブランドと製品を選びます。実在感のあるワードマーク、製品名、メリットを伝える一文を作成します。プレースホルダーは使いません。
3. 次の順にレイアウトします。背景に色味をつけたページ上で、すべてを幅 600–680px のカラム内に中央揃えします（メール本文がページそのものではなく、メールに見えるようにします）。
   • マストヘッド — 左にワードマーク、右に短いナビゲーションリンクを 3 つ（SHOP、JOURNAL、MEMBERS）。下に細い線を引きます。
   • ヒーローブロック — 16:9 の製品画像プレースホルダー。DS の色味を使ったグラデーションか、製品（シューズ、ボトル、ヘッドホンなど、ブリーフの内容に応じたもの）の様式化した SVG シルエットを使います。左上に小さなブランドスタンプ、左下にカラーウェイのタグを追加します。
   • アイブロウ — 小文字、アクセントカラー、· 文字で区切ります（例：「NEW · MAX-CUSHION TRAINER · EMBER FLARE」）。
   • 見出しのロックアップ — ディスプレイフォントを使った 2～3 行の見出しをすべて大文字で組み、字間をかなり詰めます。アクセントワードのひとつに軽い傾斜（transform: skew(-6deg)）を適用し、スポーティな平行四辺形の印象を加えます。
   • 本文 — 2～3 文の段落を本文フォントで左揃えにします。
   • プライマリー CTA — 塗りつぶしのピル型またはブロック型ボタンをひとつだけ配置します。
   • スペックグリッド — 数字、単位、ラベルのコールアウトを 2×2 のグリッドで配置します。数字にはディスプレイフォントを使います。
   • フッター — ワードマーク、住所の行、配信停止とブラウザーで表示するためのリンクを配置します。
4. 単一の HTML ドキュメントを作成します。
   • <!doctype html> から </html> までを記述し、CSS はインラインにします。
   • margin: 0 auto でカラムを中央揃えにします。メールがページ上に載っているように見えるよう、body { background: <tint> } を設定します。
   • 外部画像は使いません。製品写真にはインライン SVG または DS の色味を使ったグラデーションブロックを使います。
   • マストヘッド、ヒーロー、見出し、CTA、スペックに data-od-id を設定します。
5. セルフチェック：
   • メールを上から下まで 8～10 秒で読めます。
   • CTA はひとつです。アクセントの使用は最大 2 回までです（アイブロウと CTA、または見出しのワード）。
   • 幅 480px のウィンドウでも読みやすく表示されます（カラムがリフローし、文字サイズが 1 段階小さくなります）。

出力形式

<artifact> タグで囲んで出力します。

<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に一文だけ記述し、その後には何も記述しません。