email-design

メールデザインスキル

ブランドらしさが際立つメールを作成します。構成されたブリーフを作成した後、接続済みの送信ツールに引き渡します。単独で完結します。

使用する場面

次のような場合に使用します。

• 「メールを下書き／執筆／作成／デザイン／構築する」（ニュースレター、キャンペーン、一斉配信、ブロードキャスト、お知らせ、ウェルカムメール、休眠顧客への再アプローチ、購入後メール、カート放棄メール、プロモーション、トランザクションメール）
• 「このメールをもっとありきたりでなく／素っ気なくなく／ブランドらしくする」
• 「このメールを再デザイン／評価／ブラッシュアップする」
• 「Nitrosend／Klaviyo などを通じてキャンペーンを送信する」

次の場合は使用しません。

• 戦略のみの場合（「どのくらいの頻度で送信すべきですか？」）
• 到達性のみの場合（「なぜ迷惑メールに振り分けられるのですか？」）
• プラットフォーム選定の場合（「Klaviyo と Mailchimp のどちらがよいですか？」）
• デザインを伴わないコピーライティングのみの場合

流れ（5 つのステップ）

1. コンテキストの確認 — 接続済みの ESP とプロジェクトファイルからブランド情報を取得します。まだ質問はしません。
2. 最大 3 つの質問 — 最も重要な不足情報だけを確認します。1 つのメッセージにまとめます。
3. アーキタイプを選び、ブリーフを作成します。 執筆を始める前に方針を決めます。
4. 画像枠を解決します — ブランドサイトやブランドアセットから取得するか、ユーザーに依頼します。
5. ブリーフを送信ツールの形式に変換し、承認前にドライランプレビューを実行します。

---

ステップ 1 — コンテキストの確認（サイレント）

すでにわかっている情報を取得します。まだユーザーに質問してはいけません。

Nitrosend MCP ツール（nitro_*）が利用できる場合：

• nitro://account リソースを読み取り、ブランド情報（会社名、ブランドカラー、ロゴ、フォント、所在地、存在する場合はボイスドキュメント）を確認します。
• nitro_get_status を呼び出して、オンボーディング状況と明らかな不足情報を確認します。
• nitro_query({ entity: "templates", limit: 3 }) を呼び出して、過去のデザイン言語を確認します。実際のセクション、色、タイポグラフィ、トーンを見ます。

接続済みの ESP が別のサービスの場合は、同等の情報を探します。ほとんどの ESP にはブランド情報または設定のエンドポイントがあります。ESP が不明な場合は、プロジェクトファイルに切り替えます。トーンの手がかりとして、BRAND.md、email-brand.md、PRODUCT.md、または最上位の README.md を確認します。

次の項目を含むブランドプロフィールを頭の中で作成し、それぞれに known、inferable、missing のいずれかを付けます。

• 会社名、差出人名、差出人メールアドレス、ミッション／タグライン
• メインのブランドカラー（16 進数）、あればセカンダリカラー
• ロゴ URL
• ボイスの特徴（例：創業者本人の語り口、エディトリアル、遊び心のある、技術的、控えめな高級感）
• フッターに必要な情報：所在地、SNS アカウント、配信停止の処理方法

missing の項目が 3 つ以上ある場合は、質問してかまいません。それ以外は推測した値を使い、ブリーフにその旨を記載します。

---

ステップ 2 — 最大 3 つの質問（必要な場合のみ）

上限は3 つの質問を 1 つのメッセージに番号付きリストで送ることです。不足項目がそれ以上ある場合は、妥当なデフォルト値で補い、その旨をブリーフに記載します。詰問してはいけません。

優先順位 — 不足していて、かつ今回のメールにとって重要な項目から上位 3 つを選びます。

1. メールの目的 — このメールで何を達成する必要がありますか？（クリックを促す？ストーリーを伝える？操作を確認する？離脱したユーザーに再アプローチする？新製品の発売を予告する？）セッション内で最初にメールを作る場合は、ほぼ必ず確認する価値があります。
2. トーンの方向性 — エディトリアル、ボールド・モノクロ、ミニマル・ラグジュアリー、創業者からの手紙、パンク／キャラクター、ルックブックのどれですか？過去のテンプレートからボイスが明確でない場合のみ確認します。
3. メインのブランドカラー — 16 進数表記が望ましいです。カラーが不明で、ロゴから抽出もできない場合のみ確認します。
4. ミッションの一文 — 会社の存在意義を一文で説明してください（販売しているものではありません）。フッターに必須で、情報がない場合のみ確認します。
5. SNS アカウントと所在地 — フッター／CAN-SPAM 用のアカウント名と郵送先住所を 1 件。フッターの情報が不足する場合のみ確認します。

ユーザーがセッション内ですでに回答している場合は、再度質問しません。

---

ステップ 3 — アーキタイプを選び、ブリーフを作成する

安易な凡庸さを避けます。下書きを始める前にアーキタイプを決めます。最もよくある失敗は、無難に感じるという理由で「ミニマル・ラグジュアリー」を選ぶことです。この選択が正解なのは、おそらく 30% の場合です。それ以外は、意図を持って選びます。

アーキタイプ

アーキタイプ	使用場面	特徴	参考ブランド
エディトリアル	ニュースレター、ブランドストーリー、長文コンテンツ	セリフ体の見出し、全面写真、ゆったりとした行間、1カラム、豊かな語り口	Patagonia、Tracksmith、Lucy Folk
ボールド・モノ	プロモーション、ローンチ、声明	彩度の高い1色で画面を覆い、大きく力強い文字、最小限のコピー	Absolut、Liquid Death、Fly By Jing
ミニマル・ラグジュアリー	プレミアム、取引、ポジショニングとしての抑制	色味のあるニュートラルカラー、幅472～520px、アクセントカラーは1色、たっぷりとした余白、値引き訴求はしない	Stripe、Aesop、Apple、MoMA
創業者の手紙	ウェルカム、再アプローチ、節目、返信の促進	プレーンテキストのような印象、一人称、短い段落、署名入り、テンプレートの装飾なし	Ugmonk、Superhuman、Tracksmith CEO
パンク／キャラクター	ブランドの語り手、顧客維持	強い個性、マスコットやキャラクター、型破りなコピー、オリジナル画像	Frank Body、Duolingo、Liquor Loot、Chubbies
ルックブック	商品、ファッション、食品、塗料など、商品そのものがデザインとなるもの	コピーよりエディトリアルな写真を重視、ギャラリーレイアウト、全面ヒーロー画像	Dior、Clare Paint、Starbucks seasonal

共通するビジュアル原則

すべてのアーキタイプに適用します。実装は美学に合わせてください。大胆なデザインには揺るぎない決断力を、ミニマルなデザインには精密さが必要です。

色

• 色を選ぶ前に、方針を決めます。
  • 抑制的 — 色味のあるニュートラルカラー＋アクセントカラー1色。画面の10%以下にします。取引目的とミニマル・ラグジュアリーのみで使用するデフォルトです。
  • 大胆 — 彩度の高い1色で画面の30～60%を占めます。ブランドアイデンティティを伝えるメールでのデフォルトです。
  • 全面 — 画面全体を1色で覆います。ヒーローや声明メールに使用します。
• #000 や #fff の純色は使いません。ニュートラルカラーにもブランドカラーの色味を加えます。
• 明度が極端に高いと高彩度の色はけばけばしく見えます。黒や白に近づくほど彩度を下げます。
• カテゴリー反射チェック。 カテゴリーだけで配色を推測できる場合は見直します。たとえば、フィンテック → ネイビー＋ゴールド、ウェルネス → 白＋セージ、AI → 黒＋ネオン、Eコマース → ミレニアルピンク＋クリームなどです。学習データ由来の反射的な選択は、メールを印象に残らないものにします。

タイポグラフィ

• 1通のメールで使う書体ファミリーは1つにします。明確な機能上の理由がある場合のみ、2つ目を追加します。
• 本文は14～16px。見出しは22～34px。階層間の比率は1.25以上にします。
• 1行の長さは50～65文字以内にします。
• グラデーション文字は使いません。background-clip: text も使いません。効果ではなく、ウェイトやサイズで強調します。

レイアウト

• 1カラムにします。幅は472～600px。これより広いとデスクトップ向けに見え、モバイルで崩れます。
• リズムを出すため、間隔に変化をつけます。どこも同じパディングだとワイヤーフレームのように見えます。
• カードは安易な選択肢です。本当に最適な表現である場合にのみ使います。カードの入れ子は常に避けます。
• タッチターゲットは44×44px以上にします。

余白（AIが下書きしたメールで最も問題が起きやすい箇所です）

LLMは余白を取りすぎる傾向があります。各セクションに上下の大きなパディングを設定し、独立したスペーサー行まで追加してしまいます。その結果、月面のようなレイアウトになります。次の方法で調整します。

• 独立したスペーサーは禁止。 spacer セクションが2つ連続するのは、どのような場合でも誤りです。まとめます。
• パディングに非対称性を持たせます。 ほとんどのセクションでは padding_top: 0, padding_bottom: 32 にします。リズムは次のセクションの上パディング（またはその欠如）に任せます。
• ヒーロー画像を密着させます。 ヒーロー画像はヘッダーに隙間なく配置し（間隔は8px以下）、画像の両側ではなく下に十分な余白を取ります。
• 末尾のルール。 フッター直前の最後のコンテンツセクションは padding_bottom: 32–48px とし、それ以上にはしません。フッターには独自の上パディングを設定します。
• 禁止事項： 空の段落を2つ連続させること、ブロック間に <br> を2つ入れること、同じ側にマージンとパディングの両方を設定すること、余白目的で空の text セクションを使うこと。

プラットフォーム側で余白を詰める処理があっても、これは変わりません。念には念を入れてください。

画像

• 実際の写真または依頼制作のイラストのみを使用します。ストック素材、AI 生成の粗悪な画像、装飾としての平面的な幾何学図形は使用しません。
• ヒーロー画像には目的が必要です。商品、人、場所、または瞬間を表現してください。装飾だけでは不十分です。
• 画像は1点あたり200KB以下、合計データ量は800KB以下にします。
• すべての画像に代替テキストを付けます。画像をブロックする約33％の人にとっての代替手段として扱ってください。
• ダークモードでは、ロゴとアイコンに透過 PNG を使用し、背景は純白ではなくオフホワイトにします。

コピー

• 逆ピラミッド型にします。最初に答えを示してください。
• 段落は短くします。すべての言葉に意味を持たせてください。
• 見出しの内容を繰り返さないでください。主題を繰り返す導入段落も不要です。
• 本文では em ダッシュ（—）や en ダッシュ（–）を使わないでください。カンマ、コロン、セミコロン、ピリオド、括弧を使ってください。-- も使用しないでください。
• ファーストビューに CTA を1つ置きます。最後に2つ目の CTA を置くのは問題ありません。3つ以上は効果が薄れます。
• 件名は45文字以下、プリヘッダーは90文字以下にします。どちらも情報を付け加える内容にし、件名を繰り返さないでください。

ブリーフ（構造化）

セクションを作成する前に、ブリーフを JSON として記述します。これは送信ツールに渡すデータです。契約として扱ってください。

{
  "name": "Campaign or template name",
  "subject": "subject line ≤45 chars",
  "preheader": "preheader ≤90 chars adding new info",
  "archetype": "editorial | bold-mono | minimal-lux | founder-letter | punk-character | lookbook",
  "color_strategy": "restrained | committed | drenched",
  "primary_color": "#hex",
  "secondary_color": "#hex or null",
  "voice_descriptors": ["e.g. founder-personal", "wry", "concrete"],
  "structure": [
    { "kind": "header",         "logo": true, "padding": "compact" },
    { "kind": "hero",           "image_slot": "<slot-id>" },
    { "kind": "headline",       "content": "..." },
    { "kind": "body",           "content": "..." },
    { "kind": "cta",            "label": "...", "url": "..." },
    { "kind": "secondary_body", "content": "..." },
    { "kind": "footer" }
  ],
  "image_slots": [
    {
      "slot_id": "hero",
      "purpose": "what it must convey",
      "candidate_url": "<url-from-brand-site or null>",
      "user_prompt": "<text to show user if no candidate>"
    }
  ],
  "footer": {
    "mission_line": "exact verified copy from brand fields or brand site, or null — never invent",
    "socials": [{ "name": "instagram", "url": "..." }],
    "physical_address": "one line",
    "unsubscribe": "{{unsubscribe_url}}"
  },
  "anti_slop_checks": ["no category-reflex palette", "real imagery", "distinctive voice"]
}

---

ステップ4 — 画像スロットを解決する

各 image_slot には、実在する候補 URL またはユーザーへの明示的な依頼を設定する必要があります。ソースは次の優先順位で確認します。

1. すでにアップロード済みのブランド素材。 Nitrosend が接続されている場合は、nitro_query({ entity: "media" }) を実行します。新しい素材を取得する前に、登録済みのものを使用してください。
2. ブランドのサイト。 WebFetch で https://<brand-domain>/ を取得し、次を確認します。
   • <meta property="og:image">
   • ホームページのヒーロー画像（<section class="hero"> img、<header> img、[data-hero] img、バナーらしいファイル名を確認）
   • ポートレートやライフスタイル画像がある /press、/about、/blog ページ
   • 長辺が1200px以上の画像を優先します。
3. ブランドのソーシャルプロフィール。 ポートレートやライフスタイルの画像には、Instagram または X のプロフィール画像を使用します。
4. ユーザーに一度だけ依頼する。 具体的な説明と選択肢を含めます。「ヒーロー画像には [X] をイメージしています。それに合う画像はありますか？それとも、メディアアップローダーから追加できるようにプレースホルダーを残しましょうか？」

ストック素材のような画像を捏造したり、AI で生成したりしないでください。見た目の粗悪な画像を使うより、明示したプレースホルダーを使うほうが適切です。

新しい画像をアップロードし、ブランドが Nitrosend を使用している場合は、nitro_ingest_image({ url: "...", purpose: "hero" }) を実行します。

---

ステップ5 — ブリーフを変換して引き渡す

ブリーフの structure 配列を、送信ツールのセクションタイプに対応付けます。Nitrosend の nitro_compose_campaign の場合：

ブリーフの種類	Nitrosend のセクション	備考
header	theme.logo_url にロゴが設定されている場合は省略。それ以外の場合は image	ロゴの高さは32〜48px
hero	image	全幅、左右のパディングなし。クリック可能な場合のみ link_url を設定
headline	<h1> または <h2> のマークアップを使用した text	上にスペーサーを別途追加せず、次のセクションの上部パディングで間隔を調整
body	text	段落は短く
cta	button	CTA は1つ。モバイルでは全幅
secondary_body	text	任意
divider	divider	メール1通あたり最大1つ
footer	footer	アカウントのフッターが設定されていれば自動的に表示。それ以外の場合は明示的に作成

呼び出し時の余白の上書き

作成時に、プラットフォームのデフォルトのパディングを上書きします。プラットフォームに余白をトリミングする処理があっても、必ず上書きしてください。

{
  "type": "image",
  "props": {
    "src": "...",
    "alt": "...",
    "padding_top": 0,
    "padding_bottom": 24
  }
}

セクションごとのデフォルトルール：padding_top: 0, padding_bottom: 32。理由がある場合にのみ上書きします。

フッター — ほとんどの AI メールが間違えている部分

理想的なフッターの順序は次のとおりです。

1. ミッションを伝える一文。 会社が何を売っているかではなく、なぜ存在するのかを一文で伝えます。（「ランナーのために。ボストンで作りました。」は、「2014年創業のプレミアムスポーツウェア」よりも優れています。）推測したり、作り上げたりしないでください。 次のいずれかから、文言をそのまま引用します。接続済みの ESP のブランド項目（Nitrosend：ブランドの company_description。Brand settings でも確認できます）、またはブランドのホームページ／会社概要ページ（ヒーローのサブ見出し、フッターのタグライン、「私たちは信じています……」という文言）。どちらからも正確で確認済みの文言が見つからない場合は、ミッションを伝える一文を丸ごと省略してください。ミッションを載せないほうが、捏造するよりもよいです。
2. ソーシャルアイコン。 最大3～5個まで。実在するアカウントと URL を使います。アイコンは24～32pxにします。
3. 住所。 CAN-SPAM で必須です。1行で記載します。
4. 配信停止リンク。 はっきりと見えるようにし、極端に小さくしないでください。見えにくい「設定」という婉曲表現ではなく、「配信停止」という言葉を使います。CAN-SPAM および Gmail／Yahoo の一括送信者向けルールで必須です。
5. 任意： タグライン、連絡先メールアドレス、「このメールが届いた理由……」の説明。

見た目：小さめの文字（12～13px）、本文のコントラストの60～70％程度の落ち着いた色のテキスト、十分な内部余白を設け、直前に余分なスペーサーを入れないでください。

引き継ぎ

必ず最初にドライランを実行し、実際の送信をユーザーが承認する前にプレビュー URL を必ず提示してください。テストメールを希望するかどうかも尋ねてください。

nitro_compose_campaign({
  name: brief.name,
  subject: brief.subject,
  preheader: brief.preheader,
  sections: <translated from brief.structure with explicit padding>,
  theme: {
    brand_color: brief.primary_color,
    bg_color: ...,
    text_color: ...,
    font_body: ...,
    font_heading: ...,
    logo_url: ...
  },
  audience: { audience_type: "lists", contact_list_ids: [...] },
  dry_run: true
})

その後、レスポンスからプレビュー URL を提示します。ユーザーの確認後に限り、実際の送信に進みます。

テスト送信を提案する

ドライランのプレビュー後、実際に送信する前に、次のように尋ねます。

「先にテストメールを送信しましょうか？ [from_email from account] または別のアドレスに送信できます。ご希望をお知らせください。」

宛先は、アカウントの from_email または保存済みのテスト用宛先をデフォルトにしますが、ユーザーが指定した任意のアドレスも受け付けます。ユーザーが希望した場合は、プラットフォームのテスト用エンドポイントから送信し、結果を提示します。

Nitrosend の場合：

nitro_send_test_message({
  template_id: <id from compose response>,
  email: "<recipient>"
})

その他の ESP では、同等の機能を使用します（Nitrosend REST API の POST /v1/my/templates/{id}/send_test。その他のサービスでも同様のエンドポイントを使用します）。テストメールが届いたら、実際に送信する前に最終調整が必要かどうかを尋ねます。

---

引き継ぎ前のチェックリスト

作成前に、頭の中で次の項目を確認します。3項目以上に問題があれば、書き直してください。

• 件名は45文字以内で、追加情報を伝えている
• プリヘッダーは90文字以内で、件名を言い換えていない
• アーキタイプは1つだけで、一貫して適用されている
• 配色方針が明確に定まっている（ミニマルラグジュアリーでない限り、反射的に「ニュートラルカラー＋アクセント」にしていない）
• カテゴリーにありがちな配色に頼っていない
• 実際の画像を1点以上使っている。画像は出典付き、または明示的に生成を依頼している
• ファーストビューに CTA が1つあり、全体で2つ以内
• フッターにソーシャルリンク、住所、配信停止リンクがある（ミッションを伝える一文は確認済みの場合のみ。決して捏造しない）
• スペーサーを二重に入れていない。<br><br> や、margin と padding の併用もない
• 本文に em ダッシュを使っていない
• 1カラムで幅は600px以内。タップ領域は44px以上
• テンプレートではなく、ブランドらしい口調になっている
• 実際に送信する前に、ユーザーへテスト送信を提案している

要望への対応パターン

ユーザーが修正を希望した場合：

• 「もっと大胆に」 → 配色方針を強め（抑制的 → 明確に打ち出す → 全面に展開）、文字のコントラストを上げ、行の長さを短くし、太字モノまたはパンクキャラクターのアーキタイプに変更します。
• 「もっと控えめに」 → 色使いを抑え、余白を選択的に増やします（均一に増やすのではありません。それが月面のような失敗パターンです）。副次的な CTA を削り、ミニマルラグジュアリーまたはエディトリアルに変更します。
• 「個性を加えて」 → 創業者の手紙またはパンクキャラクターに変更し、一人称でコピーを書き直し、意外性のある要素を1つ加えます（手書きの素材、マスコット、突飛な件名など）。
• 「地味すぎる」 → ほとんどの場合、アーキタイプが合っていないことを意味します。ミニマルラグジュアリーにしていた場合は、太字モノとルックブックのどちらがよいか、一度だけ尋ねます。
• 「AI が作ったように見える」 → カテゴリーにありがちな配色、ストック画像のようなビジュアル、またはブランドらしい声がないことが原因です。原因を特定し、その点だけを修正します。

例

例 — SaaS のウェルカムメール（創業者の手紙）

{
  "name": "Welcome 1 — Founder Hello",
  "subject": "you're in",
  "preheader": "a quick note from the founder, plus what to expect this week",
  "archetype": "founder-letter",
  "color_strategy": "restrained",
  "primary_color": "#1f2933",
  "voice_descriptors": ["first-person", "concrete", "warm", "no marketing fluff"],
  "structure": [
    { "kind": "header", "logo": true, "padding": "compact" },
    { "kind": "headline", "content": "Hey, I'm [name]." },
    { "kind": "body", "content": "Three short paragraphs. What we built, why we built it, what to do this week." },
    { "kind": "cta", "label": "Reply with one thing you're trying to do", "url": "mailto:..." },
    { "kind": "footer" }
  ],
  "image_slots": [],
  "footer": {
    "mission_line": "Building [thing] so [who] can [outcome].",
    "socials": [{ "name": "linkedin", "url": "..." }],
    "physical_address": "...",
    "unsubscribe": "{{unsubscribe_url}}"
  },
  "anti_slop_checks": ["plain-text feel keeps it personal", "no stock imagery", "single CTA is a reply, not a click"]
}

例 — D2C 製品のローンチ（太字モノ、全面展開）

{
  "name": "Launch — Nitro Blue Drop",
  "subject": "blue.",
  "preheader": "the new colorway. limited run. tomorrow 9am.",
  "archetype": "bold-mono",
  "color_strategy": "drenched",
  "primary_color": "#1d4ed8",
  "voice_descriptors": ["punchy", "confident", "few words"],
  "structure": [
    { "kind": "hero", "image_slot": "hero" },
    { "kind": "headline", "content": "Blue." },
    { "kind": "body", "content": "Limited to 200. 9am tomorrow." },
    { "kind": "cta", "label": "Set a reminder", "url": "..." },
    { "kind": "footer" }
  ],
  "image_slots": [
    {
      "slot_id": "hero",
      "purpose": "Single product shot on solid background. Same blue as primary_color. No text overlay.",
      "candidate_url": "https://brand.com/og-image.jpg",
      "user_prompt": "Got the product photo of the blue colorway? Drop the URL or upload via the media uploader."
    }
  ],
  "footer": {
    "mission_line": "Made for runners. Made in [city].",
    "socials": [
      { "name": "instagram", "url": "..." },
      { "name": "tiktok", "url": "..." }
    ],
    "physical_address": "...",
    "unsubscribe": "{{unsubscribe_url}}"
  },
  "anti_slop_checks": ["committed to one colour", "real product photo, not stock", "no double-padding"]
}

例 — エディトリアルニュースレター（Patagonia スタイル）

{
  "name": "Newsletter — Running gear for winter's worst",
  "subject": "running gear for winter's worst",
  "preheader": "what we wear when it's brutal out there",
  "archetype": "editorial",
  "color_strategy": "committed",
  "primary_color": "#0a3d2e",
  "voice_descriptors": ["earnest", "specific", "outdoorsy", "sells the weather, not the product"],
  "structure": [
    { "kind": "header", "logo": true, "padding": "compact" },
    { "kind": "hero", "image_slot": "winter-trail" },
    { "kind": "headline", "content": "When the weather wins, you don't." },
    { "kind": "body", "content": "Short essay — 120 words on running in horizontal sleet. No product names yet." },
    { "kind": "cta", "label": "See the kit", "url": "..." },
    { "kind": "secondary_body", "content": "Three pieces, briefly. Photo above each, not in a grid card." },
    { "kind": "footer" }
  ],
  "image_slots": [
    {
      "slot_id": "winter-trail",
      "purpose": "Editorial landscape — runner small in frame, weather doing the talking. No product close-ups in the hero.",
      "candidate_url": null,
      "user_prompt": "Have a winter trail / weather shot? Or shall I leave a placeholder?"
    }
  ],
  "footer": {
    "mission_line": "We're in business to save our home planet.",
    "socials": [{ "name": "instagram", "url": "..." }],
    "physical_address": "...",
    "unsubscribe": "{{unsubscribe_url}}"
  },
  "anti_slop_checks": ["no category-reflex green-and-brown palette", "hero sells the moment, not the product", "voice carries the email, not the design chrome"]
}