メルマガのデザインを考えるとき、多くの場合は「見栄えを良くする」という方向で検討が始まります。しかし配信の成果を左右するのは、装飾の量ではなく読者を次の行動へ運ぶ構造です。
この記事では、デザインが開封後の行動に効く仕組みを整理したうえで、配信目的別に3つの設計の型を示します。どの型を選ぶかによって、同じ内容でも読者の反応は変わります。
結論として、メルマガのデザインで最初に決めるべきは読者に取ってほしい行動です。配色やレイアウトはその後に決まります。
メルマガは、最後まで読まれることを前提にできません。読者は受信箱で多くのメールを処理しており、開いた直後に読み進めるかどうかを判断します。この判断は本文の内容ではなく、画面の見た目で行われます。
したがってデザインの役割は、美しく見せることではなく、①読み進める判断を通すこと、②要点を読み飛ばされても残すこと、③次の行動の場所を明示することの3つになります。
「メルマガのデザイン」という言葉は、複数の異なる作業を含んでいます。整理しておきます。
| 領域 | 決めること | 本記事での扱い |
|---|---|---|
| 構造の設計 | 情報の順序、CTAの位置、1通の役割 | 本記事で扱う |
| 視覚の設計 | 配色、余白の使い方、強調の付け方 | 本記事で扱う |
| 寸法の設計 | 横幅、画像サイズ、1行の文字数 | 別記事で解説 |
| 実装 | HTMLとCSSでの構築 | 制約のみ触れる |
このうち寸法については、具体的な数値を含めて別途解説しています。横幅や画像サイズ、1行あたりの文字数を検討する場合は、メルマガの横幅・画像サイズの最適解をご覧ください。
本記事では、その手前にある構造と視覚の設計を扱います。
デザインが成果に影響する経路は、大きく3つあります。
読者がメールを開いて最初に行うのは、読むかどうかの判断です。この時点では本文を読んでいません。判断材料は、情報が整理されているように見えるかだけです。
文字が詰まっている、どこが見出しか分からない、どこから読めばよいか分からない。こうした状態では、内容が優れていても読み進められません。
読者は本文を精読しません。多くの場合、上から下へ視線を走らせ、目に留まった要素だけを読みます。
このとき何が目に留まるかを設計するのがデザインです。見出し、強調、ボタン。これらが適切に配置されていれば、読み飛ばされても要点は伝わります。逆に、すべてが同じ強さで並んでいると、何も残りません。
クリックは、押す場所が分かって初めて起きます。CTAが本文に埋もれている、リンクと分からない、押せる範囲が狭い。こうした状態ではクリックは発生しません。
特に注意が必要なのは、CTAボタンを画像で作った場合です。画像の表示をブロックしている環境では、ボタンごと消えます。読者からはクリックする場所が見えなくなり、その環境からのクリックは構造的にゼロになります。
これら3つは、いずれもクリック率に表れます。開封率には表れません。デザインは開封後に見られるものだからです。
ただし次回以降の開封率には影響します。開いたメールが読みづらい、目的の情報にたどり着けないという体験が続けば、読者は次から開かなくなります。
1つの用件だけを扱い、それ以外の情報を入れない型です。
セミナーの申込、新サービスの案内、期限のあるキャンペーン。読者に取ってほしい行動が1つに定まっている場合に適します。
関心のない読者にとっては情報がゼロになります。配信対象を絞れる場合、あるいはリスト全体に関係する内容の場合に有効です。
複数の話題を並べ、読者が関心のあるものを選ぶ型です。
定期配信で関係を維持する、読者の関心分野を把握する。
この型には副次的な利点があります。読者がどの項目をクリックしたかで関心を把握できるため、次回以降のセグメント分けの材料になります。
継続的にコンテンツを供給できることが前提です。また、クリックが分散するため、特定のページへ集中的に送客したい場合には向きません。
本文だけで完結する内容を届け、リンクへの誘導を最小限にする型です。
専門性の提示、送信者への信頼形成、検討期間が長い商材での関係構築。
書き手が継続的に内容を供給できることが前提です。3つの型の中で制作の負荷が最も高く、担当者の力量に依存します。
短期的なクリック数は他の型より低くなりますが、読者との関係の質を高める目的では有効です。
| 配信目的 | 適した型 | 主に見る指標 |
|---|---|---|
| 申込・参加を得たい | 告知型 | クリック率、申込数 |
| 関係を維持したい | 一覧型 | クリック率、配信停止率 |
| 読者の関心を把握したい | 一覧型 | 項目別のクリック分布 |
| 信頼を形成したい | ストーリー型 | 継続率、返信の有無 |
| 複数の用件を伝えたい | 一覧型 | クリック率 |
1つの型に固定する必要はありません。定期配信は一覧型、セミナー告知は告知型というように、目的に応じて使い分けるのが実務的です。
その場合、読者が混乱しないよう、ヘッダーとフッターなどの共通部分は揃えておきます。
型を意識せずに作ると、多くの場合は「一覧型のようだが項目の強さがばらばら」という状態になります。主となる話題があるのかないのかが読者に伝わらず、どのリンクもクリックされにくくなります。
最初に型を決めることが、デザインの一貫性を担保します。
設計した型は、実装できなければ意味がありません。HTMLメールには、Webページとは異なる制約があります。
| 制約 | デザイン上の意味 |
|---|---|
| 横並びのレイアウトが分解する環境がある | 分解されても意味が通る順序で組む |
| Webフォントが使えない環境が多い | どのフォントに置き換わっても成立する設計に |
| 背景色が反映されない場合がある | 背景に依存した配色を避ける |
| ダークモードで色が反転する場合がある | 白背景前提の設計を避ける |
| 画像がブロックされる場合がある | CTAを画像で作らない |
CTAボタンを画像で作らない。画像がブロックされる環境ではボタンごと消えます。背景色を指定した領域にテキストリンクを置く形で実装すれば、画像がブロックされても色と文字が残ります。
ダークモードを想定する。白背景を前提にした濃色のロゴや、薄いグレーの文字は、暗い背景に置かれると読めなくなります。確認は通常表示とダークモードを対で行ってください。
ここまで述べた設計は、すべて読者の環境で意図どおりに表示された場合にのみ機能します。
メールクライアントによってHTMLとCSSの解釈が異なるため、送信側の環境で整って見えても、読者の環境では崩れていることがあります。崩れた状態では、見出しも余白も強調もCTAも機能しません。
クリック率が説明のつかない低さで推移している場合、デザインの問題ではなくそもそも表示されていない可能性を確認してください。
実装上の制約とその対処については、別途詳しく解説する予定です。
読者に取ってほしい行動です。配色やレイアウトはその後に決まります。行動が1つに定まっているなら告知型、複数の話題から選んでもらうなら一覧型、信頼形成が目的ならストーリー型というように、目的によって適した設計の型が変わります。型を決めずに作ると、主となる話題があるのかが読者に伝わらず、どのリンクもクリックされにくくなります。
見た目の良さと成果は直接には結びつきません。デザインの役割は、読み進める判断を通すこと、読み飛ばされても要点を残すこと、次の行動の場所を明示することの3つです。また装飾を増やすほどメールクライアントによって表示が崩れる可能性が高くなります。装飾の量より、情報の構造が伝わるかを優先してください。
その回の開封率には影響しません。デザインは開封後に見られるものだからです。デザインの効果はクリック率に表れます。ただし次回以降の開封率には影響します。開いたメールが読みづらい、目的の情報にたどり着けないという体験が続けば、読者は次から開かなくなります。
おすすめしません。画像の表示をブロックしている環境では、ボタンそのものが表示されなくなり、読者からはクリックする場所が見えなくなります。背景色を指定した領域にテキストリンクを置く形で実装すれば、画像がブロックされてもボタンとして機能します。
問題ありません。定期配信は一覧型、セミナー告知は告知型というように、目的に応じて使い分けるのが実務的です。ただし読者が混乱しないよう、ヘッダーやフッターなどの共通部分は揃えておくことをおすすめします。
メルマガのデザインにおける要点は次のとおりです。
HTMLメールの制作、プロに任せませんか
B.A.Dは約30通りのメーラー×OS環境で表示検証済みのHTMLメールを、
デザインからコーディング・配信・分析改善までワンストップで提供しています。