メルマガデザイン初心者でも90点レベルのHTMLメールを作れる6つの思考

こんにちは。Benchmark Emailメールマーケティングアドバイザーの山本です。

「文字の大きさや色などデザインの工夫しているはずなのに、読者に伝わらないメルマガになってしまった」という経験はありませんか？

逆に「情報が分かりやすく、意図した誘導につなげやすいこと」と「企業イメージに沿っていること」が達成できれば、メルマガデザインの目的のうち9割は果たしたと言えるでしょう。今回はメルマガデザインの「90点」の答えにたどり着くまでの手順を解説いたします。1ステップごとに経過のデザインをお見せしますので、デザインが得意でない方もわかりやすいと感じて頂けるはずです。

原稿→途中経過→完成したメール

今回あなたはハンバーガーチェーンのメルマガ担当で、目標は「配信当日に発売する新メニューの訴求」「配達注文の獲得」だとしましょう。原稿担当者からは、こんなメルマガ用原稿を渡されました。どんなメルマガにするか少し考えてみてください。

（拡大する）

完成したメルマガを、先にお見せしますね。
いきなりこのデザインを思いつくのは難しいと思うかもしれませんが、今回ご紹介する情報整理の5ステップを踏んでいけば、このようなメールを作ることができますよ。

（全文を見る）

1.原稿に数字（階層）を振ろう

まずは原稿内の要素を3〜5段階程度の階層に分けます。

原稿には「大きな文字で伝えたい、見出しにするべき情報」と「小さな文字で伝えたい、補足情報」があるはずです。例えば会議資料は見出しとして「1. 2. 3. ….」と見出しが並びます。そして「1.」の中に細かい議題である「(1)(2)(3)」があり、「(1)」の中にはさらに細かい話題として「(a)(b)(c)」がありますね。情報は階層に分けられていると読みやすいのです。

左：原稿　　右：ラベリングしたもの（拡大する）

今回の原稿は「新商品」「既存のおすすめメニュー」「まとめ（編集後記）」の3つの話題グループから構成されているようです。今回の原稿上は「既存のおすすめメニュー」グループに見出しがついていないので補足で追加しています（ここがポイントです）。
さらに詳しく見てみるとそれぞれ商品名や価格、商品の特徴が紹介されています。そこで原稿内の要素を「①見出し」「②商品名」「③価格」「④解説、コラム」に分けました。①が最も高い階層で④は補足情報的な階層です。

2. 階層ごとにフォントサイズを変えよう

①〜④の階層に対してフォントサイズを仮に決めていきます。サイズや色はあとで調整しますので、この時点では大きめに違いを持たせると良いでしょう。まだ色は付けずにモノクロ（白・黒・どうしても他の色が必要な場合は灰色）で作業します。

仮のフォント設定を、先程のメールに機械的に当てはめます。

（拡大する）

原稿と比べて、商品名や価格と言った情報が伝わりやすいデザインになりました。
（ちなみに「新メニュー」「既存のおすすめメニュー」「まとめ」の間は距離をあけて、別のトピックであることを強調しています。）

3. 画像とボタンを入れよう

今回のメルマガ配信の目的に合わせて、画像とボタンを入れます。

新メニューの訴求　→味や素材が伝わる商品画像
配達注文の獲得　→オンライン注文ページのボタンリンク

画像を入れる場所もルールを決めるといいでしょう。今回は「②商品名」の直前で統一しています。
また、ボタンリンクは商品紹介の後に2箇所入れました（クリックされやすいCTAを置くコツはこちらの記事をご覧ください）。
このステップもモノクロ（白・黒・灰色）で作業します。

（全文を見る）

4. 画像のサイズを調整しよう

画像を入れるとステップ1〜3で整えた情報の序列が崩れてしまうことがあります。大切なトピックの画像は大きく、サブ的な要素の画像は小さく並べると、情報の序列が守られます。また、画像はグループごとに縦横比を揃えると綺麗に見えます。

今回は「新メニュー」が目立つように「既存のおすすめメニュー」を「画像＋テキストブロック」を使って3列に並べました。

ここで一度「読みやすいメルマガになっているか」をチェックしましょう。

情報のグルーピングは明確か（さっと眺めたとき、それぞれの見出しが目に留まりますか？）
トピックの順番は適切か（読んでほしい情報は、メールの上のほうに置かれていますか？）
ユーザーに取ってほしい行動に誘導できそうか（例えば、注文ボタンの位置は適切でしょうか。）

これらが崩れている場合は、色をつける前に直しておきます。

5. 色を足す

商品や企業のイメージに合わせて色を調整していきます。色は自社サイトに合わせて2〜3色に抑えましょう。

今回は企業ロゴの黄色（#ffdd57）と、企業サイトで使っている赤色（#c64545）にしました。色を足し、フォントサイズを調整したのがこちらです。

（全文を見る）

文字のルールは以下の通りにしました。

このルールを①②③④に機械的に適用すると、不自然になることもあるので、以下の工夫をしています。

①の中でも「まとめ」だけは、グループ自体の重要度が低いですよね。そのため他の①よりさりげない①’のデザインを新たに設定し「■ ■ ■ まとめ ■ ■ ■」という意匠にしました（ここで②のデザインは使わないことが差別化ポイントです。階層同士を混ぜるのはなるべく避けましょう）。

②は赤文字で統一し、フォントサイズは2種類使って良いことにしました。重要な「新メニュー桜バーガー」は大きなフォントサイズで、「既存のおすすめメニュー」の3商品（ダブルチーズバーガー、ロコモコバーガー、アボガドバーガー）は小さなフォントサイズとしています。

なお基本は自社サイトの色を使いたいところですが、困った時はカラーパレットツールがあります。
【2020年版】もう配色デザインには迷わない！すごい無料カラーパレットツール66個まとめ（外部リンク）
この中で紹介されているColor Palette Generatorは、写真の中で使われている色からカラーコードを発行できます。よく使う画像の色味が決まっている場合は、これで相性の良い色が見つけられるでしょう。他にも様々なツールがありますので、必要な人は試してみてください。