email-design

belt CLI スキルをインストール： npx skills add belt-sh/cli

メールデザイン

inference.sh CLI を使用し、AI 生成ビジュアルでコンバージョン率の高いマーケティングメールをデザインします。

クイックスタート

inference.sh CLI（belt）が必要です。インストール手順

belt login

# Generate email header banner
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:36px;margin:0\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'

メールの幅とレイアウト

制約	値	理由
最大幅	600px	Gmail、Outlook の標準的な表示幅
モバイル幅	320-414px	レスポンシブ対応のフォールバック
1 カラム	推奨	モバイルでの表示に適しています
2 カラム	使用は控えめに	多くのクライアントでレイアウトが崩れます
画像の幅	最大 600px、2 カラムでは 300px	Retina 向けに 2 倍（1200px）で用意します
フォントサイズ（本文）	14-16px	14px 未満ではモバイルで読みにくくなります
フォントサイズ（見出し）	22-28px	ざっと見て内容を把握できる必要があります
行の高さ	1.5	すべてのデバイスで読みやすくなります

逆ピラミッド型レイアウト

最も効果的なメールレイアウトでは、1 つの CTA に注意を集めます。

┌──────────────────────────────────┐
│           HEADER IMAGE           │  ← Brand/visual hook
│          (600 x 200-300)         │
├──────────────────────────────────┤
│                                  │
│     Headline (one line)          │  ← What's this about
│                                  │
│     2-3 sentences of body copy   │  ← Why should I care
│     explaining the value.        │
│                                  │
│        ┌──────────────┐          │
│        │   CTA BUTTON  │         │  ← One clear action
│        └──────────────┘          │
│                                  │
├──────────────────────────────────┤
│     Footer: Unsubscribe link     │
└──────────────────────────────────┘

件名

効果的な形式

形式	例	開封率への影響
数字 + メリット	"5 ways to cut your build time in half"	高
質問	"Are you still deploying on Fridays?"	高
方法の紹介	"How to automate your reports in 3 steps"	中〜高
緊急性（本物の場合）	"Last day: 30% off annual plans"	高（本当の場合）
パーソナライズ	"[Name], your weekly report is ready"	非常に高
好奇心を引く内容	"The one feature our users can't stop talking about"	中〜高

ルール

ルール	値
長さ	30-50 文字（モバイルでは約 35 文字で省略されます）
プレビューテキスト	件名の後に表示される最初の 40-100 文字 — 意図的に設計しましょう
絵文字	最大 1 つ。先頭か末尾に置き、読者層に合わせてテストします
すべて大文字	使用しないでください — スパムフィルターに引っかかります
スパム判定の引き金となる語句	件名では「free」「act now」「limited time」「click here」を避けます
パーソナライズ	件名に [First name] を入れると開封率が 20% 以上上がります

プレビューテキスト

プレビューテキストは受信トレイで件名の後に表示されます。無駄にしないようにしましょう。

❌ "View this email in your browser" (default, wasted space)
❌ "Having trouble viewing this?" (no one cares)

✅ Subject: "5 ways to cut build time"
   Preview: "Number 3 saved us 6 hours per week"

✅ Subject: "Your monthly report is ready"
   Preview: "Revenue up 23% — here's what drove it"

メールの種類

ウェルカムメール（自動送信、0 日目）

要素	内容
件名	"Welcome to [Product] — here's what's next"
ヘッダー	ブランド画像または製品のスクリーンショット
本文	3〜4 文：登録した内容、今後の流れ、すぐに役立つヒントを 1 つ
CTA	"Complete your setup" または "Try your first [action]"
送信タイミング	登録直後

プロモーション / キャンペーン

要素	内容
件名	メリットを中心にし、本当に必要な場合のみ緊急性を強調
ヘッダー	オファーや成果を示すメイン画像
本文	課題 → 解決策 → オファー → 期限
CTA	"Get 30% Off" または "Start Free Trial"
緊急性	偽の品薄感ではなく、実際の期限を設定

製品アップデート / 変更履歴

要素	内容
件名	"New: [Feature name] is here"
ヘッダー	機能のスクリーンショットまたはビジュアル
本文	新機能の内容、重要な理由、使い方
CTA	"Try [feature]"

トランザクションメール（領収書、確認）

ルール	理由
件名で目的を明確にする	"Your order #1234 is confirmed"
デザインはシンプルにする	マーケティングメールと混同されないようにします
重要な情報をファーストビューに配置する	注文番号、金額、日付
（ほとんどの場合）宣伝コンテンツは含めない	CAN-SPAM では一部認められていますが、最小限にとどめます

ヘッダー画像のデザイン

# Welcome email header
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#2d3436,#636e72);display:flex;align-items:center;padding:40px;font-family:system-ui;color:white\"><div><p style=\"font-size:14px;text-transform:uppercase;letter-spacing:2px;opacity:0.7;margin:0\">Welcome to</p><h1 style=\"font-size:42px;margin:8px 0 0;font-weight:800\">DataFlow</h1><p style=\"font-size:18px;opacity:0.8;margin-top:4px\">Your data, automated</p></div></div>"
}'

# Sale / promotional header
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:600px;height:300px;background:linear-gradient(135deg,#e74c3c,#c0392b);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;opacity:0.9;margin:0\">This Weekend Only</p><h1 style=\"font-size:72px;margin:8px 0;font-weight:900\">30% OFF</h1><p style=\"font-size:18px;opacity:0.8\">All annual plans. Ends Sunday.</p></div></div>"
}'

# Feature announcement header with AI visual
belt app run falai/flux-dev-lora --input '{
  "prompt": "clean modern email header banner, abstract flowing data visualization, dark blue gradient background, subtle glowing nodes and connections, tech aesthetic, minimal, no text, 600x250 equivalent",
  "width": 1200,
  "height": 500
}'

CTA ボタン

ルール	値
幅	200-300px。全幅にはしません
高さ	最低 44-50px（タップ領域）
色	背景とのコントラストを高くします
テキスト	動作を表す動詞 + 成果：「Start Free Trial」
形状	角丸（border-radius 4-8px）
配置	ファーストビューに配置し、長いメールでは末尾にも繰り返します
数	1 通につき主要な CTA は 1 つ

誰でも表示できるボタン

HTML ボタンは、メールクライアントによって表示が異なります。「誰でも表示できるボタン」の手法（Outlook では VML、それ以外では HTML/CSS）を使用してください。

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#22c55e" style="border-radius:6px;">
      <a href="https://yoursite.com/action" target="_blank"
         style="font-size:16px;font-family:sans-serif;color:#ffffff;
                text-decoration:none;padding:12px 24px;display:inline-block;
                font-weight:bold;">
        Start Free Trial
      </a>
    </td>
  </tr>
</table>

モバイル向けの最適化

ルール	理由
単一カラムレイアウト	複数カラムはモバイルで崩れます
フォントサイズは最低 14px	それより小さいと読みにくくなります
CTA ボタンの高さは最低 44px	Apple/Android のタップ領域に合わせます
画像の幅は 100% に調整	横スクロールを防ぎます
要素を縦に配置	横並びは画面幅が狭いと崩れます
Gmail アプリ、Apple Mail、Outlook でテスト	主要な 3 つのメールクライアントです

メールの 60% 以上はモバイルで開かれます。 モバイルファーストでデザインしましょう。

到達率チェックリスト

要素	ルール
画像とテキストの比率	画像は最大 40%、テキストは 60%（画像が多いメールはスパムフィルターに検知されます）
画像の代替テキスト	必ず設定します。多くのクライアントでは画像がデフォルトでブロックされます
配信停止リンク	法律（CAN-SPAM、GDPR）で義務付けられています。見つけやすい場所に配置します
送信者名	認識しやすい個人名またはブランド名を使います
返信先	no-reply@ ではなく、実在するアドレスを使います（到達率が低下します）
リストの管理	バウンスしたアドレスを削除し、非アクティブな購読者を四半期ごとに整理します
SPF/DKIM/DMARC	技術的な認証です。一度設定すればよく、受信トレイへの到達に不可欠です

よくある間違い

間違い	問題	修正方法
プレビューテキストがない	「ブラウザーで表示」や無関係なコードが表示されます	意図したプレビューテキストを設定します
画像のみのメール	画像がブロックされると、メールが空白になり、スパムのリスクも高まります	テキストを 60% 以上にし、画像に代替テキストを設定します
CTA が複数ある	選択に迷い、クリック率が低下します	メールごとに主要な CTA を 1 つにします
文字が小さすぎる	モバイルで読めません	本文は最低 14px、見出しは 22px にします
no-reply@ の送信者	到達率が低下し、よそよそしい印象を与えます	実在する返信先アドレスを使います
モバイルでのテストがない	読者の 60% 以上にレイアウトが崩れて表示されます	Gmail アプリと Apple Mail でテストします
配信停止リンクがない	違法（CAN-SPAM）となり、迷惑メール報告につながります	フッターにわかりやすい配信停止リンクを設置します
デザインしすぎる	メールクライアントによって CSS の表示に一貫性がありません	シンプルなレイアウトとインラインスタイルを使います
偽りの緊急性	信頼を損ね、ユーザーが無視するようになります	実際の期限がある場合にのみ使います

関連スキル

npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@prompt-engineering

すべてのアプリを見る：belt app list