101-skills/スーパーパワー

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

メールデザイン

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

クイックスタート

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

belt login

# メールヘッダーバナーを生成
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\">春のセール — 30%オフ</h1><p style=\"font-size:18px;opacity:0.9\">今週末限定</p></div></div>"
}'

メールの幅とレイアウト

制約	値	理由
最大幅	600px	Gmail、Outlook レンダリングの標準
モバイル幅	320-414px	レスポンシブフォールバック
シングルカラム	推奨	モバイルでの表示が良好
2カラム	控えめに使用	多くのクライアントで崩れる
画像幅	最大600px、2カラムでは300px	Retina では2倍（1200px）を提供
フォントサイズ（本文）	14-16px	14px未満はモバイルで読みづらい
フォントサイズ（見出し）	22-28px	スキャンしやすい必要がある
行間	1.5	すべてのデバイスで読みやすい

逆ピラミッドレイアウト

最も効果的なメールレイアウトは、単一の CTA に注意を集中させます:

┌──────────────────────────────────┐
│          ヘッダー画像            │  ← ブランド/ビジュアルフック
│          (600 x 200-300)         │
├──────────────────────────────────┤
│                                  │
│     見出し（1行）                 │  ← これは何についてか
│                                  │
│     2〜3行の本文                 │  ← なぜ気にする必要があるか
│     価値を説明。                   │
│                                  │
│        ┌──────────────┐          │
│        │  CTA ボタン   │         │  ← 1つの明確なアクション
│        └──────────────┘          │
│                                  │
├──────────────────────────────────┤
│     フッター: 配信停止リンク     │
└──────────────────────────────────┘

件名

効果的な公式

公式	例	開封率への影響
数字 + メリット	"ビルド時間を半減する5つの方法"	高い
質問	"まだ金曜日にデプロイしてる？"	高い
How-to	"レポートを3ステップで自動化する方法"	中〜高
緊急性（本物）	"年間プラン30%オフ 最終日"	高い（実際の場合）
パーソナライズ	"[名前]、週次レポートの準備ができました"	非常に高い
好奇心ギャップ	"ユーザーが話題にしているあの機能"	中〜高

ルール

ルール	値
長さ	30〜50文字（モバイルでは約35文字で切り詰められる）
プレビューテキスト	件名の後の最初の40〜100文字 — 意図的にデザインする
絵文字	最大1つ、最初か最後に、ターゲット層でテストする
すべて大文字	絶対に避ける — スパムフィルターを誘発する
スパムトリガーワード	避ける: 件名に「無料」「今すぐ行動」「期間限定」「こちらをクリック」
パーソナライズ	件名欄の [ファーストネーム] で開封率が20%以上向上

プレビューテキスト

プレビューテキストは、受信箱で件名の後に表示されます。無駄にしてはいけません。

❌ 「このメールをブラウザで表示する」（デフォルト、スペースの無駄）
❌ 「表示に問題がありますか？」（誰も気にしない）

✅ 件名: 「ビルド時間を短縮する5つの方法」
   プレビュー: 「3番目は週6時間の節約になりました」

✅ 件名: 「月次レポートの準備ができました」
   プレビュー: 「収益が23%向上 — その要因はこちら」

メールの種類

ウェルカムメール（自動、初日）

要素	内容
件名	「[プロダクト]へようこそ — 次にすること」
ヘッダー	ブランド画像またはプロダクトスクリーンショット
本文	3〜4文: 何に登録したか、期待できること、1つのクイックウィン
CTA	「セットアップを完了する」または「初めての[アクション]を試す」
タイミング	サインアップ直後

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

要素	内容
件名	メリット重視、実際に緊急性があれば含める
ヘッダー	オファー/成果を示すヒーロー画像
本文	問題 → 解決策 → オファー → 期限
CTA	「30%オフを入手」または「無料トライアルを開始」
緊急性	実際の期限、偽の希少性は使わない

プロダクトアップデート / チェンジログ

要素	内容
件名	「新機能: [機能名] が登場」
ヘッダー	機能のスクリーンショットまたはビジュアル
本文	新機能、その重要性、使い方
CTA	「[機能]を試す」

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

ルール	理由
件名で目的を明確に	「ご注文 #1234 が確認されました」
ミニマルなデザイン	マーケティングメールと混同させない
重要な情報はファーストビューに	注文番号、金額、日付
プロモーションコンテンツは最小限に（ほとんど）	CAN-SPAM で一部許可されるが、最小限に抑える

ヘッダー画像デザイン

# ウェルカムメールヘッダー
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\">ようこそ</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\">あなたのデータ、自動化</p></div></div>"
}'

# セール / プロモーションヘッダー
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\">今週末限定</p><h1 style=\"font-size:72px;margin:8px 0;font-weight:900\">30% OFF</h1><p style=\"font-size:18px;opacity:0.8\">全年間プラン。日曜日まで。</p></div></div>"
}'

# AIビジュアルを使用した機能アナウンスヘッダー
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（タップターゲット）
色	背景と高いコントラスト
テキスト	アクション動詞 + 成果: 「無料トライアルを開始」
形状	角丸（border-radius 4〜8px）
配置	ファーストビュー、長いメールの場合は下部にも繰り返す
数量	メールあたり1つのプライマリ CTA

弾丸対策ボタン

HTMLボタンはメールクライアントによってレンダリングが異なります。「弾丸対策ボタン」テクニックを使用します（Outlook は VML、それ以外は HTML/CSS）:

<!-- 弾丸対策ボタン（Outlookを含むすべてで動作） -->
<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;">
        無料トライアルを開始
      </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%以上をテキストに、画像には alt テキストを設定
複数の CTA	決断麻痺、クリック率の低下	メールあたり1つのプライマリ CTA
小さすぎるテキスト	モバイルで読めない	本文最小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