メルマガデザインのコツ12選｜初心者向けHTMLメール入門

　メルマガで成果を出すためには、魅力的なデザインが欠かせません。読者の興味を惹いて、具体的なアクションを起こしてもらうためには、デザインの細部にまで気を配る必要があります。

　そこで本記事では、HTMLメール形式のメルマガをデザインする際に使える12のコツをご紹介します。これらのコツを実践することで、初心者の方でも読者を魅了するような美しいメルマガをデザインすることができるようになります。

はじめに確認すべき3つのポイント

　実際にメルマガのデザインを始める前に、まずは以下の3つのポイントを確認しておきましょう。

1. メルマガの目的を明確にする

　まずはメルマガで、読者に対して何を伝えたいのか、何を提供したいのかといった目的を明確にしましょう。なぜなら、目的によって求められるデザインが異なるからです。例えば、セール告知のメルマガと、メンテナンス告知のメルマガでは、使用すべきデザインは異なります。

　また、メルマガの目的と合わせて、どんな読者にメルマガを送るのかも明確にしておきましょう。メール配信用のメールアドレスリストを適切にセグメンテーションし、本当に情報を必要としている読者に対して、メルマガを送るようにしましょう。

2. メール形式を決める

　メルマガの用途や目的によって、「HTMLメール」と「テキストメール」のどちらのメール形式を使用すべきかを決めましょう。できるだけ多くの読者にメールを届ける方法として、両方のメール形式でメルマガを作成し、マルチパート配信を行う方法も検討しましょう。

　HTMLメールとテキストメールの違いや、適したメール形式の選び方については、以下の記事て詳しく解説しています。

3. メルマガ作成ツールを選ぶ

　メルマガを作成する方法は、主に以下の3つの方法があります。

プログラムで自作する

　HTMLとCSSのプログラム言語を使って、一からHTMLメール形式のメルマガを作成する方法です。プログラムの専門的な知識や、HTMLメール特有の作成ルールを把握している必要があります。

　作成には、テキストエディタやWEBデザイン用のソフトウェアツールが使用されます。プログラムとHTMLメールの専門知識を持っている上級者向けの方法になります。

メールテンプレートを使う

　ダウンロードして使えるHTMLメールのプログラムテンプレートを使って、メルマガを作成する方法です。テキストや画像を差し替えるだけでメルマガが出来上がります。ただし、デザインのカスタマイズをしたい場合には、プログラムの知識が必要になります。

　また、テンプレートの中には、表示崩れを起こすものや、スマートフォン表示に対応していないものもありますので、使用前には十分な表示テストを行うようにしましょう。作成には、テキストエディタやWEBデザイン用のソフトウェアツールが使用されます。中級者向けの方法になります。

メール配信システムを使う

　メール配信システムに搭載されている専用のエディタを使って、メルマガを作成する方法です。専用エディタを利用することで、プログラムの知識がなくても、ドラッグ＆ドロップなどの簡単な操作で、本格的なHTMLメールを作成することができます。

　また、メールテンプレートの利用や、スマートフォン表示にも対応している場合が多いため、初心者はもちろん上級者の方であっても、メルマガ作成に掛かる手間を大幅に削減することができます。

HTMLメールの基本構成

　HTMLメールの基本的な構成は、大きく分けて「ヘッダーエリア」「コンテンツエリア」「フッターエリア」の3つのエリアに分けられます。

ヘッダーエリア
　ブランドロゴ、HTMLメールが表示されない場合のリンク、ナビゲーションリンクなどが配置されます。

コンテンツエリア
　ヘッドラインテキスト、アイキャッチ画像、見出しテキスト、本文テキスト、画像、CTAボタンなどが配置されます。

フッターエリア
　配信停止リンク、発行元、SNSリンク、プライバシーボリシーリンクなどが配置されます。

メルマガデザインのコツ12選

　それでは、ここからはメルマガをデザインする際に、押さえておくと良いコツや注意点について詳しくご紹介していきます。

1. ブランドロゴを適切に使用する

　メルマガのヘッダーエリアには、必ずブランドロゴを配置するようにしましょう。ヘッダーエリアのデザインを毎回統一することによって、読者にどこから届いたメルマガなのかを一目で認識させ、安心感を与えることができます。

　ロゴは、ヘッダーアリアの左揃えか、中央揃えで配置します。ロゴの周囲には、なるべく他の要素を置かずに、適度な余白を持たせるようにすしましょう。ロゴに自然と視線が集まります。

　また、Webサイトに使用しているロゴと、メルマガで使用するロゴのデザインや配置を統一しておくことも重要になります。例えば、ロゴの大きさや、下地の背景色がWebサイトと極端に異なってると、読者に違和感を与えてしまう可能性があります。

2. 目を惹くヘッドラインテキスト

　ヘッドラインテキストは、メルマガデザインの中で最も重要な要素の一つです。なぜなら、メルマガを開いた読者の目に一番に飛び込んでくるのは、ヘッドラインテキストである場合が多いからです。ヘッドラインテキストは、メルマガの第一印象を決める要素だとも言えます。

　目を惹くヘッドラインテキストをデザインするためのポイントをいくつか挙げておきます。

　上記のポイントを全て網羅する必要はありませんが、メルマガの用途や目的に合わせて、最適だと思うヘッドラインテキストをデザインしましょう。

　メルマガのヘッドラインテキストは、コピーライターが書いたような上手いキャッチコピーである必要はありません。メルマガで最も伝えたいことをシンプルに表現することを心掛けると良いでしょう。

3. 魅力的で高品質な画像を使う

　画像には、文章では説明できないような、一瞬で何かを訴えかける視覚的な効果があります。そのため、メルマガに掲載する画像は、魅力的で見栄えのする画像を厳選して使用するようにしましょう。

　特にファーストビューに表示されるアイキャッチ画像は重要です。メルマガで一番伝えたいことを反映している写真やグラフィックを選びましょう。読者の興味を惹いて、そのメルマガをスクロールして読むかどうか、また具体的な行動（CV）を起こすかどうかを左右する重要な要素です。

　注意点としては、ヘッドラインテキストなど重要なテキスト情報は、できるだけ文字画像として埋め込まないようにしましょう。なぜなら、メールクライアントの設定でHTMLメールの画像を非表示にしている読者も多いため、メールアクセシビリティの観点からも良くありません。

　また、画像にはaltテキストを適切に設定し、画像を無効にしていても意味が伝わるようにしておくことも大切です。

4. 配色のルールに一貫性を持たせる

　読者の心に響くメッセージの作成や、メルマガへの信頼感を高めるためには、メルマガに使用する配色にも注意を払いましょう。どのような色を使用するべきかについては、あらかじめ基本的な配色ルールを作成しておくと良いでしょう。

　配色ルールの基本としては、あらかじめ「ベースカラー」「メインカラー」「アクセントカラー」の3種類の配色を決めておきます。

　ベースカラーは、背景色に用いられる色で、大きな面積を占める色になります。文字や読みやすさや、画像を引き立てるために、白が使用される場合が多いと思います。その他、薄いグレー、黒、パステルカラーなども使用されます。

　メインカラーは、メルマガの印象を決める最も重要な色になります。通常、ブランドカラーや、製品をイメージさせるカラーなどが使用されます。メインカラーは、メルマガのヘッダー・フッター、ヘッドラインテキスト、見出し、などに使用されます。

　アクセントカラーは、強調色とも言われ、注目させたいポイントに使う色です。例えば、リンク色やボタン色などに使用されます。派手な色である必要はありませんが、ベースカラー、メインカラーに重ねた時に、視認性の高い色を選ぶようにしましょう。メインカラーの補色を選ぶと、互いの色が引き立って鮮やかに見えます。

　3つの色の割合は、ベースカラー（75%）、メインカラー（25%）、アクセントカラー（5%）を目安に配色すると、最もバランス良く見えると言われています。ただし、画像にも色々な色が使われるため、全体の色バランスを見ながら、配色の割合は調整しましょう。

　また、3色では足りないという場合には、あらかじめメインカラーやアクセントカラーを2〜3色決めておきます。ただし色が増えると、バランスを取ることが難しくなり、統一感も失われて行きますので、色の増やし過ぎには注意してください。

5. 読みやすいフォントサイズと行間

　メルマガに使用するフォントサイズと行間は、読みやすさを重視して設定するようにしましょう。見出しと本文テキストのフォントサイズには、十分な差を付けて、どの部分が重要なのかが一目で分かるようにしなければなりません。メルマガは、流し読みされる場合も多いため、行間は少し広めに設定しておいた方が、読みやすくなります。

　フォントサイズは、ヘッドラインや見出しには20〜36ピクセル、本文テキストは14〜18ピクセルを目安に設定すると良いでしょう。メルマガの用途や文章量によっても適切なフォントサイズは異なりますので、フォントサイズを設定したメルマガをプレビューしながら、最適な設定を見つけてみてください。

◎良い例：見出しと本文に十分な差があり、行間を広めに設定

△悪い例：見出しと本文の差が小さく、行間を狭めに設定

6. 適切なカラムの設計

　メルマガのレイアウト設計で重要になるのがカラム（列）の設定です。一般的にメルマガでは、1〜4カラムのレイアウトが使われています。採用するカラム数については、メルマガの用途や目的、伝えたい情報量などを考慮して決める必要があります。

　例えば、メルマガで伝えたい情報が一つであれば、シンプルな1カラムレイアウトが向いています。ECサイトのメルマガなど、伝えたい商品情報が複数あるような場合には、2〜4カラムのレイアウトが向いているでしょう。

　また、伝えたい情報に優先順位がある場合、「上段部分は1カラム、中断は2ラカム、下段は4カラム」といった具合に、メルマガ内でいくつかのカラムを使い分ける方法も考えられます。ただし、情報量が多く、レイアウトが複雑なメルマガは、読者の気が散ってしまい、CVが下がる可能性もありますので、情報の詰め込みすぎには注意してください。

7. ホワイトスペースは広めに取る

　メルマガをシンプルで美しいデザインに見せるテクニックとして、ホワイトスペースの設計があります。ホワイトスペースとは、何も要素が置かれていない空白領域のことを指します。「ホワイト」と呼ばれてはいますが、白である必要はありません。

　具体的には、見出し、画像、テキストなど要素と要素の間の余白のことを指します。テキストの行間の余白も該当します。

　ホワイトスペースを広めに取ることで、メルマガはシンプルで美しく、洗練された印象に仕上がります。逆にホワイトスペースが狭い場合、視覚的に窮屈で、読み難い印象を与えてしまう可能性があります。

◎良い例：十分なホワイトスペースが確保されている

△悪い例：適切なホワイトスペースが確保されていない

　また、十分なホワイトスペースを取ることで、それぞれの要素が引き立って見える効果があります。メルマガ内で特に強調したいヘッドラインテキストや、CTAボタン周りのホワイトスペースの設計は綿密に行うようにしましょう。

　ただし、ホワイトスペースにも適切な量とバランスがあります。過渡に余白を開け過ぎると、間抜けで薄い印象になってしまうことがあります。余白の設定をいくつか試しながら、最も美しく読みやすいデザインになるように調整してみてください。

8. CTAボタンを作り込む

　最終的にメルマガで成果を出せるかどうかは、メルマガ内のボタンやリンクがクリックされるかどうかに掛かっています。読者にとって魅力的で価値のあるCTA（コール トゥ アクション）を設定し、CTAボタンやリンクを設置します。

　CTAボタンのデザインは、メルマガデザインの中でも特に重要です。徹底的にこだわって、読者がクリックしたくなるようなボタンをデザインしましょう。CTAボタンは、以下のデザイン要素で構成されています。

ボタンの色
　ボタンには、メインカラーやアクセントカラーを使用します。背景色とのバランスも考慮しながら目立つ色を設定します。

ボタンのサイズ
　ボタンは自然に見つけてもらえるサイズで作成します。スマートフォンでタップしやすいサイズであることも重要です。

ボタンの形状
　ボタンの形状は、「四角」か「角丸」のどちらかです。ブランドの印象に合う形状を採用しましょう。四角：信頼感・スタイリッシュ ／ 角丸：親みやすい、ポップ

ボタンのテキスト
　ボタンを押したら、具体的に何が起こるのかが分かるようなテキストを意識しましょう。文字数、フォントサイズ、フォント色も重要です。

ボタンのマイクロコピー
　ボタン周辺にクリックを後押しするようなコピーを配置します。マイクロコピーの有無でクリック率が大きく変わる場合があります。

9. レスポンシブデザイン対応

　近年、スマートフォン端末でメールを閲覧する人が多いため、メルマガもスマートフォン表示に対応したレスポンシブデザインを採用する必要があります。レスポンシブデザインとは、PC、スマートフォン、タブレットなどの端末の画面サイズに応じて、自動的に表示を切り替えてくれる方法です。

　レスポンシブデザインを採用するには、HTMLとCSSのプログラム作成スキル、HTMLメール特有の作成ルール、メールクライアントのサポート状況の把握、新しく発売された端末への対応など、多くの知識と手間が必要となります。

　初心者の方は、メールテンプレートやメール配信システムを利用すれば、簡単にレスポンシブデザインのHTMLメールを作成することができます。ただし、思わぬ表示崩れが起こる場合もありますので、実機での表示テストはしっかり行うようにしましょう。

10. 画像の最適化

　HTMLメールに使用する画像は、適切な画像サイズと画像フォーマットで書き出し、ファイル容量をなるべく小さく抑えることが重要です。

　必要以上に大きなサイズの画像を使用すると、メール読み込み速度の遅延、メールの不達、メールのレイアウト崩れなどの原因を引き起こす場合があります。

　画像サイズは、HTMLメールのレイアウトデザインに合わせて、横幅のサイズを最適化します。画像の横幅を決める際には、以下の点を考慮します。

　また、HTMLメールの画像に関して、よくある悪い例として、自社のWebサイトからダウンロードした画像をそのままHTMLメールの画像として転用する場合が挙げられます。

　Web用に作成された画像は、画像サイズや容量が大きい場合があります。Web用の画像をHTMLメールに転用する場合は、必ず画像の横幅と容量を確認し、必要に応じて画像のリサイズや圧縮を行うようにしてください。

11. フッターデザインの重要性

　メルマガのフッターには、発行元の企業名、連絡先情報、配信停止リンク、個人情報保護へのリンクなど、法的な義務を果たすための重要な情報が含まれています。

　適切にフッターをデザインすることで、企業・ブランド・メルマガ自体の信頼性が向上し、読者は安心してメルマガを購読することができます。フッターのデザインは、頻繁に変えると読者が混乱するため、毎回統一したものを使用しましょう。

　また、フッターには、ソーシャルメディアへのリンクなど、読者とのコミュニケーションを促進するための要素を入れることも効果的です。

　メルマガとソーシャルメディアを連携させることで、メルマガコンテンツの拡散や、企業やフランドの知名度向上、さらなる読者の拡大などに繋がります。

12.デザイントレンドを意識する

　メルマガは、毎回統一されたデザインであることが重要ですが、最新のトレンドを取り入れた新しいデザインに挑戦してみることも、読者の興味を集め続けるためには重要になります。

　Webサイトやグラフィックデザインの世界には、毎年トレンドというものがあります。色使い、タイポグラフィ、レイアウトなどのトレンドは、メルマガのデザインにも活用できるものが多く、とても参考になります。

　今すぐに最新のデザインに変更する必要はありませんが、まずは近年どのようなトレンドがあるのかを把握するところから始めてみましょう。その中で自社のメルマガに取り入れられそうなトレンドがあれば、積極的に試してみてください。

まとめ

　いかがでしたでしょうか。今回ご紹介させていただいた内容を参考に、ぜひ一度自社のメルマガ内の要素を一つずつ見直してみてください。配色や余白の設定など、デザインの細部にまでこだわることで、読者に与える印象は大きく変わります。

　そして、メルマガのデザインに変更を加えたら、クリック率、CV率、配信停止率などの指標に変化があったかどうかも必ず検証しましょう。