メルマガのデザイン｜凝るほど崩れる

メルマガのデザインを、Webサイトを作る感覚で凝る人は多いです。画像を並べ、色をつけ、装飾を足していきます。

先にお伝えします。メールは、受け取る人の環境によって、見え方が変わります。

自分の画面では完璧でも、相手の画面では色が反転していたり、中身が消えていたりします。

この記事では、デザインの基本を整理したうえで、崩れても伝わる作り方を書きます。

メルマガデザインの作り方

まず、装飾のあるメール（HTMLメール）の作り方は、3つあります。

①を選ぶ人は少数です。多くの場合、②のテンプレートか、③の配信ツールで足ります。

押さえる基本｜横幅とファーストビュー

作り方を問わず、共通する基本が2つあります。

1つは横幅です。PCで見るHTMLメールは、横幅600px前後で作るのが定石とされています。これより広いと、画面からはみ出します。

もう1つはファーストビューです。最初に見える範囲に、何のメールかが分かる要素を置きます。スクロールしないと用件が分からないと、そこで閉じられます。

メルマガの装飾｜罫線とバナー

装飾には、大きく2つの方向があります。

• 画像・バナー — 見た目のインパクトは強い。ただし表示されないことがある（後述）
• 罫線・記号 — テキストメールでも使える。崩れない

文字だけのテキストメールでも、罫線（──── などの記号）で区切りを作れます。地味ですが、どの環境でも同じように表示されるのが強みです。

画像に頼りすぎると、次に書く「崩れる」問題に直撃します。罫線で骨組みを作り、画像は補助にするのが安全です。

ここからが本題｜凝るほど崩れる

ここまでが作り方の話です。調べれば分かる範囲でもあります。

そのうえで、今日いちばん書きたいことを書きます。

メールのデザインは、Webサイトのデザインとは別物です。凝るほど、相手の環境で崩れるリスクが上がります。

Webサイトは、見る人の環境がある程度そろっています。ところがメールは、受信側のアプリも設定もバラバラです。同じHTMLを送っても、届いた先で見え方が変わります。

ダークモードで反転する

スマートフォンやアプリを暗い配色にしている人は多くいます。この状態では、背景が黒に変わります。

白背景に黒文字で作ったメールが、黒背景に黒文字になり、読めなくなることがあります。凝った配色ほど、反転したときの崩れが大きくなります。

画像がオフだと消える

画像を自動で表示しない設定の人もいます。この場合、バナーやボタンを画像で作っていると、そこが空白になります。

対策は、画像に代替テキスト（alt）を設定することです。画像が出なくても、何の画像かが文字で伝わります。willcloudの解説でも、altの設定が挙げられています。

アプリによって解釈が違う

同じHTMLでも、受信に使うアプリによって、対応している装飾が違います。あるアプリで表示できる指定が、別のアプリでは無視されることがあります。

だから、1つの画面で完璧に見えても、それは全員の画面ではありません。

崩れても伝わる作り方

結論はシンプルです。凝ることより、崩れても伝わることを先に決めます。

1. 用件は、文字で書く — 画像の中に大事な言葉を入れない。消えたら終わりだから
2. 画像には、必ずaltを付ける — 表示されなくても意味が残る
3. 色に頼りすぎない — 反転しても読める配色にする
4. 骨組みは罫線で作る — どの環境でも崩れない部分を土台にする
5. 送る前に、複数の環境で見る — 自分のスマホ・PC・別アプリに送って確かめる

いちばん確実なのは、5番目です。本番前に、自分の別のアドレスへ試し送りする。これだけで、大きな崩れは事前に見つかります。

よくある質問

まとめ｜デザインは、届いた先で完成する

この記事では、メルマガのデザインと、崩れても伝わる作り方を整理しました。

デザインを頑張ること自体は、悪いことではありません。問題は、頑張った成果が、相手の画面で崩れていることに気づけないことです。

自分の画面は、いつも完璧に見えます。だから、崩れは自分では見つかりません。

だから私は、メルマガのデザインは「作ったとき」ではなく「届いたとき」に完成すると考えています。試し送りをして、相手の画面で確かめて、そこで初めて出来上がりです。