HTMLメールのサンプルデザインと事例まとめ

2018.11.12

メールマガジンの効果を高めるためにHTMLメールを企画するとき、メールの構成やそのデザインについて悩むことがあるかと思います。そんなときはメールマーケティング施策に優れた企業のメールデザイン事例を数多く見て、自社と目的に近いメールデザインを参考にしてみることをオススメします。

そもそも、最適なHTMLメールの構成やデザインはメールマガジンの目的によって変わってきます。例：営業リードのナーチャリング型メルマガ、ECサイトなど販売型メルマガ、ファンや既存顧客向けの会報誌型など

例えば、「メール内でメッセージを伝えたい」という場合であっても、短いキャッチコピーであれば目立つ画像で表現したり、長い説明文であればフォントや文字を工夫しつつもテキストで伝える必要があります。

「リンクをクリックして記事を読んで欲しい」「商品ページへリンクして商品の申し込み・購入をして欲しい」という場合であれば、”記事を読む”、”商品の詳細を見る”というテキストリンクを設置したり、”もっと読む”、”商品ページ”などのキャッチを含むイメージ画像のボタンを設置することでクリックを促せるかもしれません。

まずは自社のライバル企業や海外の類似企業のメールマガジンを読んでみるのが一番の近道だと思います。

HTMLメールを作るときに使う素材

HTMLメールで用いられる素材としては主に以下のものがあります。もちろん必ず必要というわけではなく、メールマガジンの中には前文テキストで書かれていて一見テキストメールに見えるものの、効果測定の為だけにHTMLメールで作られている場合もあります。自社がメールマガジンで伝えたい情報を考えて、それを最大化できる素材を用意しましょう。

ロゴ

Webサイト同様に企業やサービスのロゴをメール上部に設置することでメールを開いた読者に親近感を与えることができますし、ブランドの認知を深めることができます。ロゴの画像には企業サイトへのリンクを挿入することで読者がサイトの確認をできます。

テキスト

メールの文章自体を読ませることが目的のメールマガジンでは従来どおりメールの中心となる要素です。一方、イメージ画像で伝えたい内容が十分に表現できる場合には、むしろテキストは最小限に抑える努力が必要かもしれません。昨今はメールだけでなくSNSから伝わる情報も多いため、テキストが多すぎて読むのに時間がかかってしまうと読者が読むのをためらってしまいかねません。

なお、受信機種によっては画像を見られない人もいるため、画像が開かずにテキストだけの表示となった場合でも伝えたい内容が一通り伝わることが望ましいです。

リンク先URL

計測タグなどの影響でリンク先URLが長すぎるときは、テキストリンクや画像リンクの形にするのがデザインする上で望ましいです。

イメージ画像

1枚のイメージ画像が伝えられる情報量はテキストの比ではありません。画像は容量が大きくなり過ぎないように気を付けつつも、下記の様な効果を狙って選定すると良いかと思います。

・自社のブランドイメージ、一貫したメッセージを伝える
例：Webサイトで用いているTOP画像、etc

・テキストでは伝えきれない美しさや機能性を伝える
例：商品画像(ECサイト等)、観光地の景観や宿泊施設(トラベル等)、美味しそうな料理(レストラン、ホテル等)、etc

・インパクトのあるメッセージを伝える
例：コンセプトやキャッチコピー(ブランド等)、キャンペーンの日程や特典(小売業等)、「Happy Birthday!」などのお誕生日メッセージ(サービス全般)、etc

・クリックを促す
例：「詳しく見る」「記事を読む」など、ボタンやナビゲーションも交えてリンクのクリックを促す、etc

これらを踏まえて以下の事例記事を読んでみてください。現状では海外企業のHTMLメールの方が日本企業よりも事例が多くてクオリティも高いので、海外事例をまとめた記事からご紹介します。

海外企業のHTMLメール事例記事

まず一番のオススメはこちら。メール配信システムのBenchmark Emailがブログが、海外のHTMLメール事例をまとめています。事例数が50と多く解説も丁寧に付いているので、これから構成やデザインを行う方が一気に見る際に参考になると思います↓
メールデザインの参考に！読者の心を動かすメール海外事例50選

こちらもBenchmark Emailの記事で、イメージ画像やシネマグラフの利用例をまとめています↓
メールデザインの最先端！リッチコンテンツ活用と10の注意点とは？

米国のマーケティング管理ツール「ハブスポット」のブログがスターバックスやUberなどの有名企業のHTMLメールを取り上げています。こちらの記事も各メールへコメントが入っていて参考になります↓
海外の素晴らしいEメールデザイン厳選９例

こちらは少し昔の記事ですが、アスキーが海外の有名ブランドのメールをまとめています↓
マネしたくなる海外企業の美しいHTMLメールまとめ