過去 3 年間で 200 通以上のメールキャンペーンをデザインした。SaaS ニュースレター。e コマースのプロモーション。B2B の販売シーケンス。オンボーディングフロー。再エンゲージメントキャンペーン。全範囲。
最もコンバージョンした上位 20% には 1 つの共通点があった: 受信者が開く前にメッセージを明確に伝えていた。残りの 80% には 1 つの共通点があった: 受信者に考えさせていた。
うまくいった例は、視聴者がチャートを読み終わる前に質問に答えていた。うまくいかなかった例は、視聴者に目を細めさせ、比較させ、計算させ、最終的に諦めさせていた。
違いはデータではなかった。同じデータ、異なるデザイン、完全に異なる結果だった。デザインアセットが実際にジョブをするように見えるようにする方法を説明する。
高コンバージョンメールデザインの 7 つのパターン
パターン 1: 受信トレイプレビュー認識
受信者がメールを開く前に、Gmail、Apple Mail、Outlook、その他のクライアントで 200 ピクセルのクロップが表示される。クロップには次のものが表示される: 送信者名、件名、送信者アバター、メール本文の最初の約 100 ピクセル。
ほとんどのメールデザインはこのクロップを完全に無視している。メールの上部にバナー画像があり、その中に見出しがある — プレビュークロップでは見えない。または、上部にナビゲーションバーがあり、実際のコンテンツが fold の下から始まる。受信者はメッセージではなくナビゲーションを見て、開くのをスキップする。
高コンバージョンメールは、最初に受信トレイプレビューをデザインする。最初の 100 ピクセルに見出しを置く。小さいスケールで生き残るブランドカラーまたは視覚的 signature を使用する。プレビュークロップに実際の仕事をさせる — メッセージを伝え、ブランドをシグナルし、開く理由を与える。
メトリクス: 20 件のキャンペーンを受信トレイプレビュークロップ用に最適化したとき、開封率は平均 18% 上昇した。一部は 40% 上昇した。下がったものはない。
パターン 2: モバイルファースト、デスクトップファーストではない
メール開封の 60% 以上がモバイルだ。デスクトップファーストでデザインし、「モバイルに縮小」しようとすると、メールクライアント全体で壊れたレイアウトが生成される。Outlook はモバイルを Gmail とは異なる方法で処理し、Apple Mail はモバイルを Gmail とは異なる方法で処理する。
高コンバージョンメールはモバイルファーストでデザインされる。fold の上に単一カラム。大きいタップターゲット（少なくとも 44x44 ピクセル — iOS タッチターゲットと同じ）。generous な行高（フォントサイズの 1.5 倍）。電話で 16 ピクセル以上で読める最小フォントサイズ。
次にデスクトップ用に強化する。下部のセクションにマルチカラムレイアウト。大きい画像。サポートされている場合はホバーステート。デスクトップバージョンはボーナスだ。モバイルバージョンがデフォルトだ。
メトリクス: モバイルファーストで再デザインされたキャンペーンは、クリックスルー率が平均 27% 増加した。何件かは 50% 以上のリフトを見た。リフトは、以前は小さすぎて CTA をタップできなかったモバイルユーザーからほぼ完全に得られた。
パターン 3: 単一のプライマリ CTA
ほとんどのメールには 3-4 の競合するコールトゥアクションがある — 「今すぐ購入」、「詳細を読む」、「ソーシャルでフォロー」、「ブログを読む」。受信者はどれが重要か分からない。クリックしないか、間違ったものをクリックし、キャンペーンはアンダーパフォームする。
高コンバージョンメールには 1 つのプライマリ CTA がある。1 つのボタン。1 つのアクション。CTA は視覚的に支配的 — 彩度の高い色、周囲の generous なホワイトスペース、メールの上部 3 分の 1 にスクロールせずに見える位置に配置される。
セカンダリリンクは存在する（「ブラウザで表示」、「設定を更新」、「購読解除」）が、競合するボタンではなくテキストリンクとしてスタイル付けされている。目は 1 つのボタンを見る。脳は 1 つのアクションを処理する。受信者は 1 つのボタンをクリックする。
メトリクス: 単一 CTA に再デザインされたメールは、クリックスルー率が平均 34% 増加した。私がデザインした最大の単一のリデザイン — 4 つの CTA を 1 つに削減した SaaS ニュースレター — CTR が 2.1% から 7.8% に上昇した。
パターン 4: サイズによるビジュアル階層
メール内で最も重要なメッセージは最大の要素であるべきだ。二次的なメッセージは二番目に大きい要素であるべきだ。CTA は視覚的に支配的であるべきだ。
ほとんどのメールデザインはこのルールに違反している。見出しは中サイズ。本文は中サイズ。CTA は中サイズ。受信者の目はどこから始めればよいか分からず、ランダムにスキャンし、諦める。
高コンバージョンメールは、最初の 1 秒から階層を明白にする。見出しは 28-32pt。本文は 16pt。CTA は 18-20pt でウェイト 600+。要素間のサイズギャップが、重要度のギャップをシグナルする。
メトリクス: 強いサイズ階層を持つメールは、サイズが均一なメールと比較して、エンゲージメント（開封 + クリック + 返信の合計）が 22% 高かった。
パターン 5: generous なホワイトスペース
プレミアムブランド — Apple、Aesop、The New York Times、Patagonia — はメールデザインで 50-70% のホワイトスペースを使用している。バジェットブランドはすべてのピクセルをコンテンツで埋める。視覚的な違いは紛れもない。
ホワイトスペースは 3 つのことをする: (1) コンテンツを隔離することで重要なコンテンツを重要に感じさせる、(2) メールを上質に感じさせ、信頼とエンゲージメントと相関する、(3) メールをスキャンしやすくし、より多くの受信者が実際にメッセージを読む。
高コンバージョンメールはコンテンツに余地を与える。60-80px で区切られたセクション。30-40px のパディングを持つボタン。generous な行高の見出し。16-24px の段落間隔を持つ本文コピー。
メトリクス: generous なホワイトスペースで再デザインされたメールは、メール滞在時間（隠れたピクセル追跡で測定）が 14% 増加し、クリックスルー率が 9% 増加した。
パターン 6: fold の上に 1 つのカラム
fold の上（スクロールせずに見える部分）で、レイアウトは単一カラムであるべきだ。1 つの見出し、1 つのサポート画像、1 つの CTA。垂直フロー。
fold の上にマルチカラムレイアウトは、受信者に水平にスキャンさせ、モバイルではより難しく、デスクトップでは遅くなる。また、デザイナーにレイアウトの妥協 — 左カラムと右カラムに何が入るかを強制し、しばしば明確なメッセージングにならない結果を生む。
fold の上に単一カラム、fold の下にマルチカラム — それがパターンだ。fold の上のセクションは普遍的なメッセージだ。fold の下のセクションはコンテンツによって変動できる（商品グリッド、複数の記事、複数のオファー）。
メトリクス: fold の上に単一カラムで再デザインされたキャンペーンは、スクロール深度（受信者がメールをどれだけ下にスクロールしたか）が 19% 高かった。
パターン 7: ウェブサイトとのブランド一貫性
メールはウェブサイトのように見える。同じフォント。同じ色。同じボタンスタイル。同じ写真スタイル。同じボイス。
ほとんどのブランドはメールを別のデザインシステムで扱う別チャネルとして扱う。メールはウェブサイトとは異なるフォント、わずかに異なるブランド色、異なるボタンスタイルを持つ。結果: 受信者がメール CTA をクリックしてウェブサイトに着地するとき、耳障りな視覚的ジャンプがある。
高コンバージョンメールはブランド一貫性を維持する。受信者の目は、メールからウェブサイトへのジャンプでブランドを認識する。「ちょっと待って、これは同じ会社？」の認知的摩擦が消える。
メトリクス: ウェブサイトとのブランド一貫性のために再デザインされたメールは、クリックスルー率が 12% 増加し、クリックスルー後のコンバージョン（受信者がランディングページで望ましいアクションを完了する可能性が高い）が 23% 増加した。
メールパフォーマンスを殺す 5 つの間違い
間違い 1: 見出しが画像の中にあるバナー画像
メールはヒーロー画像で始まる。見出しは画像の一部だ。受信者はメールを開くまで見出しを読めない — そしてそのとき、受信者は画像がロードするのを待たなければならない。
修正: 見出しを HTML テキストに置き、画像の中に入れない。HTML テキストは即座にロードし、モバイルでスケールし、受信トレイプレビュークロップで読める。
間違い 2: 小さすぎるタップターゲット
CTA ボタンは 28 ピクセルの高さだ。電話画面では、平均的な大人の指が正確にタップできるよりも小さい。受信者はボタンの隣をタップし、間違ったものをクリックするか、ボタンがタップ可能でない領域をタップするため何も起こらない。
修正: インタラクティブな要素ごとに最小 44x44px のタップターゲット。ボタン、テキストリンク、画像リンク — すべて 44x44px 最小。
間違い 3: 3 つの競合する CTA
「今すぐ購入」、「詳細を読む」、「ソーシャルでフォロー」。受信者は何をすべきか分からない。何もしない。
修正: 1 つのプライマリ CTA。二次的なアクションは、ボタンではなくテキストリンクとして。
間違い 4: 一般的なストック写真
会議室でハイタッチするチーム。ホワイトボードを指す人。木製デスク上のラップトップ、コンテキストなし。ストック写真は「これはブランドの bother しなかったメールだ」とシグナルを送る。
修正: 実商品写真、実顧客写真、実スクリーンショット、またはキャンペーンに特別に適合する AI 生成画像を使用する。一般的なストック写真は 2015 年のデザインパターンだ。
間違い 5: デスクトップのみのデザインとモバイル「サポート」
1440 ピクセル幅でデザインし、375 ピクセルモバイルに「縮小」。モバイルバージョンは常に悪い — ボタンが小さすぎ、テキストが小さすぎ、階層が不明確、画像が伸びたり切れなかったりする。
修正: モバイルファースト。375 ピクセル幅から始める。デスクトップにスケールアップする。モバイルバージョンが優先だ。なぜなら、ほとんどの受信者はモバイルにいるからだ。
メールデザインの AI ワークフロー
3 つのツール、1 つのワークフロー:
**ステップ 1（5 分）: ブランドシステムを定義する**
**Lovart の Brand Kit** にブランド標準（フォント、色、ボタンスタイル、ボイス）を保管する。メールを開始するとき、Brand Kit は生成するテンプレートに自動的に適用される。結果: 各メールが手動適用なしで自動的にブランド内になる。
**ステップ 2（15 分）: MCoT でテンプレートのバリエーションを生成する**
Lovart の ChatCanvas で MCoT を使用してキャンペーンを記述する。「SaaS 製品ローンチのメール。オーディエンス: 既存顧客。ゴール: 新機能のトライアルを推進。トーン: 自信過剰ではなく。長さ: 300 語。CTA: 「新機能を試す」。モバイルファースト、fold の上に単一カラム。」
MCoT は 4-5 のテンプレートのバリエーションを生成する。最も強いものを選び、精緻化する。
**ステップ 3（10 分）: テストして反復する**
375 ピクセル（モバイル）と 1440 ピクセル（デスクトップ）でメールを描画する。受信トレイプレビュークロップを確認する。CTA が 44x44 ピクセル最小であることを確認する。見出しが HTML テキストにであることを確認する。画像の中ではなく。上記の 5 つの間違いを探す。
メールがこれらのチェックに合格すれば、送信する準備ができている。そうでなければ、反復する。
**私が毎日走らせるペアリング**: Lovart Brand Kit が標準用、MCoT がバリエーション生成用、**Litmus** または **Email on Acid** が受信トレイプレビューテスト用、シンプルなテキストエディタが実際のコピー執筆用。AI がプロダクションの 70% を処理する。私が戦略とコピーの決定を処理する。
月曜日の朝にこれらのパターンを使用する方法
最初に適用する最も簡単なパターンを選ぶ。ほとんどのブランドにとって、それはパターン 1（受信トレイプレビュー認識）だ — メールの上部を再デザインして、メッセージがプレビュークロップで見えるようにする。その 1 つの変更だけで、残りの仕事を正当化できるほどのメトリクスが動くことが多い。
その後、パターン順に作業する: - パターン 2（モバイルファースト）— 次のキャンペーンをモバイルファーストでデザイン - パターン 3（単一 CTA）— 競合する CTA をテンプレートから取り除く - パターン 4（サイズ階層）— 明確なタイプスケールを確立する - パターン 5（ホワイトスペース）— セクションと段落の間隔を増やす - パターン 6（fold の上に 1 カラム）— 上部のセクションを簡素化する - パターン 7（ブランド一貫性）— メールデザインをウェブサイトと同期する
キャンペーンごとに 1 つ適用する。メトリクスをテストする。次へ移動する。
200 通のメールが私に教えたこと
最も反直観的な教訓: 最もコンバージョンするメールは通常最もシンプルだ。1 つのメッセージ。1 つの CTA。1 つのカラム。generous なホワイトスペース。ウェブサイトとブランド一貫性がある。
メールでの誘惑は常に追加だ — より多くのセクション、より多くのオファー、より多くの CTA、より多くのリンク、より多くの画像。すべての追加はメールを「より完全」に感じさせるが、実際にはコンバージョン率を低下させる。
規律は、デザイナーが訓練されることの反対だ。少ないほど多い。ホワイトスペースがコンテンツだ。階層がメッセージだ。単一 CTA がアクションだ。
200 の再デザインの後、うまくいったメールは私がより多くを追加したものではほぼ常に — 取り除いたものがメッセージを着地させたものだった。アプローチを信頼するブランドは最大の Lift を見た。
それがメールデザインのシフトだ。「このメールに何を詰め込めるか」から「メッセージを着地させるために何を取り除くか」へ。
Lovartで試す
メールデザインを変換したい？ [Lovartを無料で試す](https://lovart.ai/signup) で、メールテンプレートジェネレーターと Brand Kit 統合を含む。
スケールで展開したいチーム向け: [Lovart料金プラン](https://lovart.ai/pricing) は月額 24 ドルから始まり、無制限のメールキャンペーン、A/B テスト、分析統合、チームワークフローを含む。
FAQ
良いメールデザインを作るものは何ですか？
すべての高コンバージョンメールに現れる 7 つのパターン: (1) 受信トレイプレビュー認識 — デザインは Gmail が開封前に示す 200 ピクセルのクロップで機能する。(2) モバイルファースト — メール開封の 60% 以上がモバイルで、親指スクロール用にまずデザインする。(3) 単一のプライマリ CTA — 3 つの競合するものではなく 1 つの明白なアクション。(4) サイズによるビジュアル階層 — 最大の要素は最も重要なメッセージ。(5) generous なホワイトスペース — プレミアムブランドはエリアごとに 60% 以上のホワイトスペースを使用。(6) fold の上に 1 カラム — 単一カラム階層はデフォルトでモバイルフレンドリー。(7) ブランド一貫性 — ウェブサイトと同じフォント、色、ボタンスタイル。
AI はメールデザインでどのように使用されるか？
3 つの主な用途。(1) AI はメールテンプレートのバリエーションを分で生成する — ヒーローを変更し、CTA 色を交換し、異なるレイアウトを試す。(2) AI は行動データに基づいて受信者ごとにメールコンテンツをパーソナライズし、動的コピーと画像のバリエーションを生成する。(3) AI は過去のメールパフォーマンスを分析して、オーディエンスのために実際にコンバージョンしたデザインパターンを特定する — 一般的なベストプラクティスではなく。最も有用な AI メールワークフローは、ブランド標準（Brand Kit から）を AI バリエーション生成と組み合わせる。
開封率を最も左右するメールデザインの要素は？
受信トレイプレビュー。受信者がメールを開く前に、送信者名、件名、メール本文の最初の約 100 ピクセルを示す 200 ピクセルのクロップが表示される。デザインは、そのクロップでメッセージを伝える必要がある — さもないとメールは開かれない。ほとんどのメールデザインが見出しを画像の下に埋め込んだり、小さすぎるテキストを使用したりしてこのテストに失敗する。
開封率を上げるには？
3 つのデザインレバー。(1) 受信トレイプレビュー — メールの最初の 100 ピクセルをクリアなメッセージとブランド認識で視覚的に魅力的にする。(2) 送信者名の一貫性 — 送信者名を送信間で一貫して保つ。受信者は認識できる送信者からのメールを 2-3 倍多く開封する。(3) 件名 + プレビューテキストの位置合わせ — 件名が約束し、プレビューテキストがその約束を果たす。件名とプレビューが矛盾すると、開封率が 30-50% 低下する。
メールデザインの最大の間違いは？
デスクトップ用にデザインし、モバイル用に「縮小」すること。メール開封の 60% 以上がモバイルで、ほとんどのメールクライアントはレスポンシブデザインを一貫性なく処理する。修正: モバイルファーストでデザインし、デスクトップ用に強化する。fold の上に単一カラム、大きいタップターゲット（少なくとも 44x44px）、generous な行高、16px 最小で読めるフォントサイズ。デスクトップファーストでデザインし、モバイルを後付けで修正することは、メールクライアント全体で壊れたレイアウトの最も一般的な原因だ。
