トップ Marketing Knowledge

メルマガデザインのコツとは？ HTMLメールのレイアウトのポイントを紹介！

2022/07/28 2024/09/19

メルマガは配信することがゴールではありません。受け取った人がそれを開封し、内容をチェックし、配信者側の意図する行動をとってもらうことが目的です。いわゆるコンバージョン率（CVR）の向上を狙う必要があります。では、実際にCVRを向上させるメルマガとはどのようなものなのでしょうか。この記事では主にデザインに焦点を当て、CVR向上に効果的なメルマガの基本や特徴を解説します。

マーケティングDXならノーコードで

●目次
1. デザインを工夫してメルマガ施策を改善しよう！
2. HTMLメールでメルマガをデザインするメリット
3. 効果が出やすいメルマガデザインの3つポイント・コツ
4. メルマガデザインの参考サイトをご紹介
5. HTMLメルマガ作成時に気をつけるべきポイント
6. まとめ

1. デザインを工夫してメルマガ施策を改善しよう！

商品同様、メルマガもデザインが消費者や顧客の行動を決めることがあります。CVR（CV数 ÷ 配信数）の向上等の目的を達成するには、デザインの工夫が欠かせません。そこで、メルマガのどのような点を改善できるのかを紹介していきます。

1-1. よりよいメルマガ配信とは？

よいメルマガは、配信者の目的を達成できるメルマガです。まさにCVRの高いメルマガといえるでしょう。CVRを高めるためには、読者にストレスを与えてはいけません。そのうえで読者の印象に残ることが、よいメルマガ配信の条件となります。よいメルマガの条件はデザインを工夫することでクリアできるケースが少なくありません。言い換えれば、デザイン性の高いメルマガへと仕上げることで、よりよいメルマガ配信とすることができます。

1-2. HTMLメールでデザインを工夫しよう

メルマガは文字のみで構成されたテキスト形式と、画像や動画などを組み合わせて構成されたHTML形式とに分けられます。テキスト形式はHTML形式のような高いデザイン性は実現できません。よりよいメルマガ配信を行い、CVRを高めることに重きをおくのであれば、効果測定もしやすいHTML形式のメルマガを取り入れる必要があります。視覚的な効果を狙えるため、文字を読み慣れていない人や、重要なメールでなければ最後まで目を通さない人にも興味を持ってもらいやすくなるでしょう。また、文字のみでは伝えることが難しい情報、特に感情や感覚といった抽象的な情報も伝えやすくなります。さまざまな層へと効果的にアプローチできる点もHTML形式でデザインを整えるメリットです。

1-3. そもそもHTMLメールとは

まずHTMLメールは、HTMLタグを使ってデザインされたメールのことで、文字の色付けや画像の表示が可能な形式です。情報を視覚的に訴求できるほか、開封率の追跡もできます。調査によれば、メールマーケティング担当者の79.7％がHTMLメールを主に利用しており、テキストメールは1.6％に過ぎません。このことからも、ほとんどのメルマガがHTML形式で作成されいていることが分かります。

2. HTMLメールでメルマガをデザインするメリット

HTML形式は、画像や装飾文字などを使用した配信形式のことです。HTML（Hyper Text Markup Language）とは、プログラミングの言語の一つでWebページの制作にも使われています。メルマガのデータとしては、テキスト形式より重くなりますが、画像などで視覚的なインパクトを与えられるのがメリットです。一般的に、新しい商品の案内やイベントの告知など、ユーザーに一目でイメージしてもらいたい案内を送るときに適しています。

文字と画像で構成されるのでユーザーに読みやすい形式

HTMLメールは文字と画像を組み合わせており、非常に読みやすい形式です。画像や装飾を加えることで、視覚的に魅力的になり、読者の興味を引き続けることができます。文字だけのメールは読みにくくなることがありますが、HTMLメールでは強調したい部分に色やマーカーを使い、適切な量の画像や動画を挿入することで、読者を飽きさせずに情報を効果的に伝えることができます。

商品画像やロゴなどで視覚的に伝えられる

HTMLメールでは、商品画像やロゴを挿入することで、文字だけでは伝えきれない情報を視覚的に表現できます。これにより、メールを開いた読者がすぐに情報を理解しやすくなり、より効果的なメルマガを作成することができます。

クリック率が高いためコンバージョンに繋がりやすくなる

HTMLメールを使用することで、クリック率が高まり、コンバージョンに繋がりやすくなります。リンクボタンやカラフルなテキストリンクを設置することで、読者が簡単に購入ページに遷移できることが伝わりやすくなります。テキストメールに比べて、HTMLメールは読まれやすく、クリック率が向上するため、多くの顧客をコンバージョンに導くにはHTMLメールが効果的です。

メッセージを伝えやすくなる

HTMLメールは、まずイメージで伝えたいメッセージを視覚的にアピールし、その後にテキストで詳細に説明することができます。テキストメールは装飾がなく、重要なポイントや伝えたい内容が分かりにくくなりますが、HTMLメールでは色や画像を使うことで視覚的に明確に伝えられ、読みやすいメルマガを作成することができます。

開封率や購入率が分かるため効果測定がしやすい

HTMLメールを使用すると、開封率やクリック率、コンバージョン率などを計測しやすくなります。効果測定はメールマーケティングにおいて重要で、リンクやパラメーターを利用して効果を測ることで、コンバージョンの向上や読者ファンの獲得に向けた改善が可能です。多くのメール配信システムにはデフォルトで効果測定機能が備わっているため、改善作業が容易に行えます。

3. 効果が出やすいメルマガデザインの3つポイント・コツ

配信の目的とメッセージにあったデザインにする

HTMLメルマガを配信する前に、そもそもなぜメールを配信するのか、なぜHTMLメルマガにするのかを明確にする必要があります。例えば、メールを送る目的がプロダクトに興味を持ってもらうことであれば、魅力を伝える画像や、有名な企業の成功事例などをメール内に挿入することで、より「プロダクトへの興味を引き出しやすい」「資料請求などのクリック率を高められる」などの効果が期待できます。

ターゲットを決めて、顧客に合わせたデザインにする

上記のHTMLメルマガ配信の目的とも似た内容ですが、HTMLメルマガを作成する際はターゲットを具体的に定め、その読者に合わせたデザインにする必要があります。今回は、金融業界向けのメルマガを例に挙げてご紹介します。

以上のように、まず金融業界の従事している方が「共感できるか」「知りたい情報が取り込まれているか」が重要なポイントになります。画像のように金融のイラストや金融業界で重要となるKPIをHTMLメルマガ内に差し込んでいます。

文字は少なく、画像は大きく、文字サイズは18pt以上がおすすめ

HTMLメルマガできは文字情報を入れすぎないようにしましょう。また、画像は大きめに配置し、文字が小さすぎる場合は離脱につながるため、フォントサイズはクリックしやすいよう18px以上と大きめに設定することがおすすめです。

ABテストを実施するためのメール配信ツールの機能や各社比較について下記資料にてご紹介しておりますので、こちらも是非合わせてご一読ください。

4. メルマガデザインの参考サイトをご紹介

成果UPに繋がるメルマガ作成のためには、HTMLメールのデザインを数多く見て学ぶことが大切です。

ここで、HTMLメールのデザインを掲載しているWebサイトを3つご紹介します。

4-1. MAIL LIBRARY

「 MAIL LIBRARY 」は、日本国内のHTMLメルマガデザインを集めたギャラリーサイトです。
最新のデザイントレンドに合わせたさまざまな事例を紹介しており、カテゴリやタグ別に検索することができる上、色合いでの検索も可能なので、カラーバランスの参考にも使うことができます。

4-2. Email-Gallery

「 Email-Gallery 」は、海外のメルマガを集めたギャラリーサイトです。
有名企業から中小企業まで様々なデザインが取りそろえられており、様々な業種の中から自分と同業種のデザインを選べるため探しやすく、どのデザインが人気かを「いいね」から判断できることが特徴的です。

4-3. Pinterest

「 Pinterest 」は画像や動画を中心に情報を探せるSNSです。メルマガのデザイン例だけでなく、レイアウトのコツや関連キーワードが画像や動画で豊富に表示されるため、様々なデザインのインスピレーションを得ることができます。

5. HTMLメルマガ作成時に気をつけるべきポイント

HTMLメールを送信する際は、3つの注意点を意識することが大切です。

・DKIMを設定する
・メールのサイズに気をつける
・受信チェックする

各項目を詳しくみてみましょう。

DKIMを設定する

DKIMとは、電子メールを送信する際のドメイン認証技術を指します。DKIM設定でメールの送信時に電子署名を付与すると、なりすましや改ざんなどを防ぐことが可能です。メールが正しく送信されたものであると証明できるため、迷惑メール判定を防止する効果があります。
メール配信システムのなかには、DKIMに対応しているものも多く存在しています。また、送信者自身が電子署名を付与するためのツールもあります。HTML形式でメールを送信する機会が多い場合は、DKIMに対応したシステムやツールの導入を検討してみてください。

メールの容量に気をつける

自由に装飾を加えたり画像を添付したりできるHTMLメールは、データ容量が大きくなりやすい傾向にあります。
データ容量が大きいメールは、迷惑メール判定やダウンロード時間の増加、簡略化によるレイアウト崩れなどのリスクが高まります。HTMLメールの容量は、100KB以下を目安にするとよいでしょう。

受信チェックする

HTMLメールは、受信環境によってはレイアウト崩れが起きる場合があります。もちろん、すべての環境に対応したメールを作成することはできません。

しかし、ビジネスで使われる機会が多い「Gmail」や「Outlook」については、正しく受信できるかどうかを確認しておくと安心です。
メールを正しく表示させてしっかりと読んでもらうためにも、あらかじめ受信チェックをしてから顧客にメールを送信しましょう。

6. まとめ

メルマガは、ただ配信するだけでは効果は見込めません。開封率やCVRを向上させることが、商品の売上や企業の利益へとつながります。CVR向上に効果的なメルマガを作るにはデザインを重要視していきましょう。同時にタイトルも工夫しなければいけません。HTML形式で読みやすくわかりやすいデザインを採用し、タイトルとともにABテストを繰り返しながら最良のメルマガを目指しましょう。

弊社が提供しているマーケティングツール『b→dash』は、マーケティングプロセス上に存在する全てのビジネスデータを、ノーコードで、一元的に取得・統合・活用・分析することが可能なSaaS型データマーケティングプラットフォームであり、BtoC業界を中心に、様々な業種・業態のお客様にご導入頂いております。

Editor Profile

福井和典

株式会社データX マーケティング管掌執行役員

日本IBMにてシステムエンジニア、GREEにてCRM領域のオペレーション企画、PwCでの業務コンサルタントとしての経験を経て、2016年よりデータXに入社。データX入社後は、カスタマーサクセス部門に在籍し、小売/金融/アパレル/ECなど幅広い業種に対するb→dash導入支援を統括。
その後は、主にb→dashのマーケティング/広報/PR活動や事業企画に従事。