メルマガデザインのコツ｜構成・配色・フォント・フッターの決め方を解説

メルマガのデザインとは、読者が迷わず読み進めて行動できるように、メールの構成・色・文字・ボタン・フッターを設計することです。まず1通の目的を1つに絞り、HTMLメールかテキストメールかを決めます。そのうえで、スマホで読める文字の大きさ、文字と背景の明暗差、ボタンの分かりやすさ、配信停止などの表示の4点を整えると、見た目の派手さより成果に直結します。この記事では、基本構成、配色・フォント・レイアウト、CTAボタン、HTMLメルマガの作り方、フッターの法定表示、効果の測り方を、公式情報に沿って整理します(2026年10月20日確認)。

目次

開く

閉じる

1. メルマガデザインとは｜HTMLメールとテキストメールの違いと最初に決める3つ
2. メルマガの基本構成｜件名からフッターまで7つのパーツの役割
3. 配色・フォント・レイアウトの決め方｜読みやすさを左右する基準
4. CTAボタンとファーストビューの作り方｜押される導線の設計
5. HTMLメルマガの作り方｜自作・テンプレート・メール配信システムの違い
6. フッターのデザインと法定表示｜特定電子メール法とGmailの送信者ガイドライン
7. メルマガデザインの効果の測り方｜開封率に頼らずクリックで見る
8. メルマガだけに頼らない接点づくり｜SMS・SNSとの使い分けとデザインの使い回し
9. よくある質問(FAQ)
10. まとめ｜メルマガデザインで押さえたい6つのこと
11. 参考文献

メルマガデザインとは｜HTMLメールとテキストメールの違いと最初に決める3つ

メルマガデザインとは、読者がメールの内容を理解して行動に移れるよう、見た目・構成・導線を設計することです。デザインを始める前に、目的・読者・メール形式の3つを決めます。

メルマガの形式は、画像や色、ボタンを使えるHTMLメールと、文字だけのテキストメールに分かれます。どちらが優れているということはなく、伝える内容と受信環境で選びます。

比較項目	HTMLメール	テキストメール
表現	画像・色・ボタン・表を使える	文字だけで構成する
表示の安定性	受信するメールソフトやスマホで見え方が変わることがある	環境による崩れが起きにくい
作成の手間	デザインとテストの手間がかかる	短時間で作れる
向く用途	商品紹介・キャンペーン・読み物など、見せ方で行動が変わる内容	事務連絡・お知らせ・認証など、確実に読ませたい内容

最初に決める3つ｜目的・読者・形式

1つ目は目的です。「資料請求」「イベント申込」「記事を読んでもらう」のように、1通で取ってほしい行動を1つに絞ります。目的が複数あると、ボタンが増えて、どれも押されにくくなります。

2つ目は読者です。法人の担当者が会社のPCで読むのか、一般の消費者がスマホで読むのかで、情報量とレイアウトが変わります。スマホで読む人が多いなら、1カラムで縦に読み進められる構成が基本です。

3つ目は形式です。自社のメルマガの目的が行動を促すことなら、ボタンを置けるHTMLメールを軸にします。HTMLメールを使う場合も、画像が表示されなくても主旨が伝わるよう、文字情報を本文に残します。メルマガ配信そのものの基礎は、メルマガ配信とは？今更聞けないメルマガの基礎知識を徹底解説で確認できます。

デザインだけでは届かない場面｜メールを補う手段

デザインを磨いても、メールを開かない相手や、期日までに確実に伝えたい連絡は残ります。メールを補う手段の一例が、株式会社ネクスウェイが提供するSMS送信サービスのSMSLINKです。商品ページでは、国内の携帯キャリアと直接接続して送信できること、PCのWeb画面から宛先リストのアップロード、メッセージ作成、送信日時の設定の3ステップで送れること、配信結果やURLのクリック数を管理画面で確認できることが紹介されています。一方で、通数はキャリアごとの文字数で数え方が異なる点と、海外の携帯電話番号には送信できない点には注意が必要です。料金はプランによって異なるため、資料や公式サイトで確認してください。

サービス登録時のSMS認証にSMS送信サービス「SMSLINK」を導入し、安全性と利便性の両立を実現されています。

SMSLINK導入事例 トヨタ自動車株式会社(2024年9月時点の内容)

メルマガの基本構成｜件名からフッターまで7つのパーツの役割

メルマガの基本構成は、件名、ヘッダー、リード文、見出し、本文とCTA、クロージング、フッターの7つです。パーツごとに役割を決めておくと、毎回の制作が速くなり、読者も読み方を覚えます。

パーツ	役割	デザインの要点
件名	開く前に読まれる唯一の要素	内容が伝わる言葉を前半に置く。スマホでは後半が省略されることがある
ヘッダー	誰からのメールかを示す	ロゴとメルマガ名を入れる。高さを抑えて、本文が早く見えるようにする
リード文	読む理由を伝える	冒頭で、このメールで得られることを短く書く
見出し	流し読みで内容を伝える	大きさと色を統一し、見出しだけ追っても要点が分かるようにする
本文とCTA	行動を促す	1通1目的に合わせたボタンへ導く
クロージング	読後の行動や次回予告	担当者名や問い合わせ先を添える
フッター	法定表示と配信停止の案内	必須項目を読める大きさで置く(フッターの項で詳しく説明)

流し読みを前提にした並べ方｜結論を先に置く

メルマガは、全文を読まれる前提で作ると、途中で離脱されます。結論や一番伝えたい情報を上に置き、詳細を下に並べる逆ピラミッド型にすると、途中で離脱されても要点が伝わります。受信画面で最初に見える範囲(ファーストビュー)に、読む理由と最初のボタンを入れておくのが基本です。

メールソフトによっては、件名の近くに本文の冒頭の文字が表示されます。リード文の最初の1文を、挨拶ではなく内容の要点にしておくと、開封前の判断材料にもなります。

配色・フォント・レイアウトの決め方｜読みやすさを左右する基準

配色はベース・メイン・アクセントの3色に絞り、文字と背景は明暗差を十分にとります。フォントは受信者の端末に依存するため、複数の書体を指定するのが基本です。

配色｜3色に絞り、文字は背景との明暗差を確保する

ベースカラーは背景の白やごく薄い色、メインカラーは見出しやヘッダーに使うブランドの色、アクセントカラーはボタンなど押してほしい箇所だけに使う色です。アクセントを多用すると、どこを押せばよいかが分からなくなります。

文字の読みやすさは、色の組み合わせで決まります。Webのアクセシビリティ指針であるWCAG 2.1の達成基準1.4.3では、文字と背景の明暗差(コントラスト比)を、通常の大きさの文字で4.5:1以上、大きな文字で3:1以上とするよう定めています。メルマガ向けの法的な基準ではありませんが、薄いグレーの小さな文字や、背景と近い色のボタンを避けるための目安になります。

受信側のメールソフトによっては、ダークモードで色が反転します。ロゴなどの画像は、背景が透明だと暗い背景で見えなくなることがあるため、テスト送信で確認します。

フォントと文字サイズ｜受信者の端末で表示が変わる

メルマガで読みやすいフォントを探すときは、まず、メールのフォントは受信者の端末にあるものが使われる点を押さえます。Webフォントを読み込むCSSの@font-faceは、メールソフトごとに対応が異なります。メールの機能対応を調べるサイトCan I emailでは、Gmailのパソコン向けWeb版はカスタムフォントに対応せず、Windows版のOutlookでは指定したフォントが効かずに別のフォントに置き換わると記載されています(2026年10月20日確認)。

そのため、本文のフォントは、日本語のゴシック体を複数並べたうえで最後に汎用のsans-serifを指定し、どの端末でも読める書体に落ち着くようにします。デザイン性の高い書体を使いたい見出しだけを画像にする方法もありますが、画像が表示されない環境では読めなくなるため、重要な情報は文字で書きます。文字サイズは、スマホで拡大しなくても読める大きさにし、行間は詰めすぎないようにします。

カラム・余白・画像｜スマホで縦に読める構成にする

• カラム：スマホで読まれる前提なら1カラムが基本です。2カラム以上は、小さい画面で並びが崩れないよう、レスポンシブ対応を確認してから使います。
• 余白：見出しと本文、ボタンの周りに余白をとると、情報のまとまりが分かりやすくなります。詰め込むほど読まれなくなります。
• 画像：容量が大きいと表示が遅れます。画像には代替テキストを入れ、画像が表示されない設定の受信者にも主旨が伝わるようにします。メール全体を1枚の画像にすると、画像が非表示のときに何も読めなくなります。

配色や余白の考え方は、スライド資料にも共通します。パワーポイントデザインの基本とコツ｜テーマ・デザイナー機能・スライドマスターの使い分けも参考になります。

CTAボタンとファーストビューの作り方｜押される導線の設計

CTAボタンは、1通の目的に合わせて1個から2個に絞り、行動の中身が分かる文言と、指で押しやすい大きさで置きます。ファーストビューには、読む理由と最初のボタンを入れます。

• 文言：「詳しくはこちら」より、「資料を無料でダウンロード」「申し込みページへ進む」のように、押した後に起きることが分かる言葉にします。
• 大きさと色：指で押しやすい大きさにし、アクセントカラーを使って、周りの文字と区別します。文字と背景の明暗差は、前の項の基準で確認します。
• 位置：ファーストビューに1つ、本文の最後にもう1つ置くと、途中で離脱する読者にも、最後まで読んだ読者にも対応できます。
• ボタンの作り方：画像のボタンは、画像が非表示の環境で押せなくなります。文字と背景色で作るボタンのほうが、表示が安定します。

ボタンの先のページとデザインの雰囲気がずれると、読者は戸惑います。メールの配色とトーンを、遷移先のページにそろえるのが基本です。遷移先のページの考え方は、LPOにおけるデザインの重要性とは？作成・改善のポイントを解説で整理されています。

流行のデザインを取り入れる場合も、読みやすさを優先します。レトロ調や手書き風などの流行は、ブランドの印象とずれたり、読みにくくなったりすることがあるため、参考にするのはヘッダーやボタンなどの一部にとどめるのが安全です。

HTMLメルマガの作り方｜自作・テンプレート・メール配信システムの違い

HTMLメルマガの作り方は、自分でコーディングする、テンプレートを使う、メール配信システムのエディタで作る、の3つです。無料でも作れますが、配信と管理まで含めて選びます。

作り方	向く場面	注意したい点
自分でコーディング	デザインの自由度を最優先したい	HTMLの知識が必要。受信環境ごとの表示確認に手間がかかる
テンプレートを使う	短時間で統一感のあるメールを作りたい	自社らしさが出にくい。編集できる範囲に制限がある
メール配信システムのエディタ	作成から配信、配信停止の管理、効果測定までを同じ画面で行いたい	機能やプランは製品で異なるため、資料で確認する

メルマガ作成は無料でできる？｜作成と配信は別に考える

デザインを作る部分は、無料のデザインツールで始められます。たとえばCanvaの公式ページでは、メルマガのテンプレートを無料でカスタマイズでき、完成したファイルをダウンロードしてメールで配信できると案内されています。一方で、その公式ページには、HTMLメールとして書き出せるかどうかの記載がありません。画像として貼り付ける形になると、画像が表示されない環境で読めなくなります(2026年10月20日確認)。

また、作成が無料でも、大量に配信するには、宛先リストの管理や配信停止の処理が必要です。作成の費用と、配信・管理の費用は、分けて考えます。

メルマガの月額費用は？｜費用が変わる条件を押さえる

メール配信システムの月額費用は、配信先の数、配信する通数、機能、サポートの範囲で変わり、サービスごとに料金体系が異なります。比較するときは、同じ条件(配信先の数と月の配信回数)で見積もりを取り、HTMLエディタやテンプレート、効果測定、配信停止の管理が含まれるかを確認します。具体的な金額は、各社の資料や公式サイトで確認してください。

参考になるギャラリーサイトと見るポイント

国内のHTMLメルマガを集めたギャラリーとして、MAIL LIBRARYがあります。業種・テイスト・配色から探せるため、自社に近いデザインを見つけやすい構成です。海外のメールを集めたサイトには、Email GalleryとReally Good Emailsがあります。

参考にするときは、ヘッダーの高さ、メイン画像の大きさ、メール全体の長さ、使われている色数、見出しの形、ボタンの形、フッターの情報を順に見ると、自社のデザインに取り入れる点が整理できます。見た目をそのまま真似するのではなく、目的と読者が自社に近いメールを選びます。

フッターのデザインと法定表示｜特定電子メール法とGmailの送信者ガイドライン

広告や宣伝を含むメルマガのフッターには、送信者の名称、配信停止の連絡先、配信停止できる旨、住所、苦情・問い合わせの窓口を表示します。特定電子メール法に基づく表示義務です。

本記事は一般的な情報の整理であり、法的助言ではありません。個別の判断は、弁護士や所管官庁に確認してください。

特定電子メール法(特定電子メールの送信の適正化等に関する法律)でいう特定電子メールとは、営利を目的とする団体や営業を営む個人が、自己または他人の営業のために広告・宣伝を行う手段として送るメールです(第2条第2号)。メルマガに商品の案内やキャンペーンを載せるなら、この表示義務の対象になる可能性があります。

表示する項目	根拠	内容
送信者の氏名または名称	法第4条第1号	責任を持つ送信者の名称
配信停止(受信拒否)の連絡先	法第4条第2号、施行規則第8条	メールアドレス、または受信者が接続できるURLなどの符号
配信停止の連絡ができる旨	施行規則第9条第1号	連絡先に連絡すれば配信が止まることの案内
送信者の住所	施行規則第9条第2号	送信者の住所
苦情・問い合わせの窓口	施行規則第9条第3号	電話番号、メールアドレス、または窓口のURLなど

施行規則第7条では、送信者の名称と配信停止の連絡先を、受信者が容易に認識できる場所に表示するよう定めています。デザインの面では、フッターの文字を小さくしすぎたり、背景に溶け込む薄い色にしたりして、読みにくくしないことが大切です。

そのほか、法第3条では、原則としてあらかじめ送信に同意した人などにだけ送ることを定めており、同意を得た記録の保存も求めています。迷惑メールの全体像は、迷惑メール対策の完全ガイド｜受信・送信・法務まで実務手順を解説でも整理しています。

Gmailの送信者ガイドライン｜1日5,000件を超えるなら一目で分かる解除リンク

Googleの「メール送信者のガイドライン」では、2024年2月1日以降、Gmailアカウントに1日あたり5,000件を超えるメールを送る送信者は、マーケティング目的のメールをワンクリックで登録解除できるようにし、メッセージ本文に登録解除のリンクをわかりやすく表示する必要があると案内されています(2026年10月20日確認)。ワンクリック解除は、メールのヘッダーの設定が必要なため、使っているメール配信システムが対応しているかを確認します。

フッターのデザイン｜探させない、小さくしない

• 法定表示の項目を、最後の1か所にまとめて置く。
• 配信停止のリンクは、周りの文字と見分けがつく色にし、探させない。
• 文字サイズと明暗差は、本文と同じ基準で確認する。
• 送信者の名称と住所は、署名とフッターで食い違わせない。

メルマガデザインの効果の測り方｜開封率に頼らずクリックで見る

デザインの良し悪しは、開封率よりもクリック率と、クリック後の行動で見ます。Appleの「メールプライバシー保護」により、開封の計測が正確ではなくなったためです。

Appleは2021年6月の発表で、メールアプリのメールプライバシー保護が、目に見えないピクセルによる情報収集を防ぎ、差出人がユーザーがいつメールを開いたかを知るのを防ぐと説明しています(2026年10月20日確認)。そのため、開封率は、デザインの比較には使いにくい数字です。

• クリック数：ボタンごと、リンクごとに見られるかを、メール配信システムの機能で確認します。
• クリック後の行動：リンクに計測用のパラメータを付け、遷移先のページで資料請求や申込まで進んだかを見ます。
• 配信停止の数：デザインや頻度が合っていないと、増えます。
• テストは1回に1要素：件名、ボタンの文言、配色のうち、1回に変えるのは1つにすると、効果の原因が分かります。

メルマガだけに頼らない接点づくり｜SMS・SNSとの使い分けとデザインの使い回し

メールが開かれない相手や、確実に伝えたい連絡は、SMSやSNSと役割を分けて使います。メルマガで決めた配色やトーンは、SNSの投稿画像にも使い回せます。

手段	向く用途	注意したい点
メルマガ	情報量の多い案内や読み物	開かれない相手が残る。法定表示とデザインの確認が要る
SMS	期日のある連絡や、短い案内	文字数が限られる。通数はキャリアごとの文字数で数える
SNS	継続した発信で知ってもらう	投稿の制作と更新が止まりやすい

メルマガで決めたトーンをSNSにも広げる場合の一例が、株式会社トリドリが運営するSNS運用代行サービスのトリドリライクスです。商品ページでは、Instagramのアカウント設計から投稿画像の作成と投稿、分析月次レポートまでをまとめて依頼でき、月に約12回の投稿が実施されることが紹介されています。メルマガの配色や雰囲気を共有して、投稿画像のトーンを合わせたい場合に相談しやすい内容です。一方で、運用開始前の申込日から料金が発生する点と、撮影オプションなどは別途の月額費用が発生する点には注意が必要です。料金はプランによって異なるため、資料や公式サイトで確認してください。

よくある質問(FAQ)

Q1. メルマガのデザインで最初に決めることは何ですか？

A. 目的、読者、メール形式の3つです。目的は1通で取ってほしい行動を1つに絞り、読者はスマホで読む人が多いかを確認します。形式は、行動を促すならボタンを置けるHTMLメール、確実に読ませたい事務連絡ならテキストメールが向きます。

Q2. メルマガで読みやすいフォントは何ですか？

A. フォントは受信者の端末にあるものが使われるため、特定の書体を指定しても表示されないことがあります。本文は日本語のゴシック体を複数並べて最後にsans-serifを指定し、どの端末でも読める書体に落ち着くようにします。Webフォントは、Gmailのパソコン向けWeb版などで使えないため、重要な情報には使いません。

Q3. メルマガのデザインの参考サイトはありますか？

A. 国内のHTMLメルマガを集めたMAIL LIBRARYのほか、海外のメールを集めたEmail GalleryとReally Good Emailsがあります。参考にするときは、ヘッダーの高さ、色数、ボタンの形、フッターの情報を順に見ます。

Q4. メルマガ作成は無料でできますか？

A. デザインを作る部分は、無料のデザインツールで始められます。Canvaの公式ページでは、テンプレートを無料でカスタマイズできると案内されています。ただし、大量の配信には、宛先リストの管理や配信停止の処理が必要です。作成と配信は分けて費用を考えます。

Q5. メルマガの月額費用はいくらですか？

A. メール配信システムの月額費用は、配信先の数、配信する通数、機能、サポートで変わり、サービスごとに異なります。同じ条件で見積もりを取り、HTMLエディタ、効果測定、配信停止の管理が含まれるかを確認してください。具体的な金額は、各社の資料や公式サイトで確認できます。

Q6. メルマガのフッターには何を書く必要がありますか？

A. 広告や宣伝を含むメルマガでは、送信者の名称、配信停止の連絡先、配信停止できる旨、送信者の住所、苦情・問い合わせの窓口を表示します。送信者の名称と配信停止の連絡先は、受信者が容易に認識できる場所に置きます。1日5,000件を超えてGmailに送る場合は、ワンクリックで登録解除できる仕組みも必要です。

まとめ｜メルマガデザインで押さえたい6つのこと

メルマガのデザインは、見た目の華やかさより、読者が迷わず行動できるかで決まります。最後に、押さえておきたい点を整理します。

1. 1通1目的で、読者と形式を決める：目的を1つに絞り、スマホで読む人が多いかを確認してから、HTMLメールかテキストメールかを選びます。
2. 件名からフッターまでの7つのパーツを型にする：結論を上に置き、ファーストビューに最初のボタンを入れます。
3. 配色は3色に絞り、文字と背景の明暗差を確保する：WCAGの4.5:1を目安にし、フォントは複数指定します。
4. CTAボタンは1個から2個に絞る：押した後に起きることが分かる文言にし、文字と背景色で作ります。
5. フッターに法定表示を入れる：送信者の名称、配信停止の連絡先、住所、問い合わせ窓口を、読める大きさで置きます。
6. メール以外の接点も検討する：メールが届きにくい連絡はSMSLINK、SNSへの展開はトリドリライクスの資料で、自社に合うか確認します。

本記事は一般的な情報の整理であり、法的助言ではありません。法令・各社のページは、2026年10月20日に確認した内容に基づきます。

参考文献

• デジタル庁 e-Gov法令検索「特定電子メールの送信の適正化等に関する法律」(第2条・第3条・第4条)、2026年10月20日確認
• デジタル庁 e-Gov法令検索「特定電子メールの送信の適正化等に関する法律施行規則」(第7条・第8条・第9条)、2026年10月20日確認
• 総務省「迷惑メール対策」、2026年10月20日確認
• Gmail ヘルプ「メール送信者のガイドライン」、2026年10月20日確認
• ウェブアクセシビリティ基盤委員会(WAIC)「WCAG 2.1 日本語訳」(達成基準1.4.3 コントラスト(最低限))、2026年10月20日確認
• W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」、2026年10月20日確認
• Apple「Apple、iOS 15、iPadOS 15、macOS Monterey、watchOS 8でプライバシーに対する一層のリーダーシップを推進」(2021年6月)、2026年10月20日確認
• Can I email「@font-face」、2026年10月20日確認
• Canva「メールマガジンテンプレート」、2026年10月20日確認
• MAIL LIBRARY、Email Gallery、Really Good Emails(いずれも2026年10月20日確認)
• SMSLINK「SMSLINK導入事例 トヨタ自動車株式会社」(2024年9月時点の内容)、2026年10月20日確認