デザインの改善から効果測定までできる!HTMLメルマガの基礎知識&簡単に作れるテンプレート10選
自社のホームページの集客手段として、メールマガジンを利用している企業は多いでしょう。
近年のメールマガジンでは、商材の写真やロゴを使った「HTMLメール」が一般的になりつつあります。
とはいえ、HTMLやCSSのようなWeb制作知識を要することから、なかなか着手できない企業も少なくないでしょう。
HTMLメールは、デザイン性に富んでいるだけでなく、リンクの効果測定ができるなどマーケティング面でのメリットもあります。
メールマガジンの施策改善を行うのであればHTMLメールを導入するべきです。
技術的な要因で利用に躊躇しているということであれば、テンプレートを利用すると良いでしょう。
今回は、Web制作スキル不要でHTMLメールが作れるデザインテンプレートをご紹介します。
HTMLやCSSに制作のハードルを感じる方は、ぜひ参考にしてみてください。
HTMLメールとは?一般的なテキストメールとの違いは?
HTMLメールとは、メール本文に画像やロゴ、フォントのカラーや大きさなどを加工できる「HTML形式」のメールを指します。様々なデザイン要素を本文中に利用できるのが特徴で、ホームページのようにHTMLやCSSといった言語を用いて作成します。
「テキストメール」は、文字情報だけのメールを指します。本文への画像やロゴ挿入や文字の装飾などはできませんが、文章を入力するだけで良いため気軽に行えるメール配信の方法と言えるでしょう。文字の加工ができない分、文字や記号を用いて装飾するのが一般的です。
HTMLメールを利用するメリット・デメリット
デザインの拡張性の高さが特徴のHTMLメールですが、具体的にどのようなメリットやデメリットがあるのでしょうか。メリット・デメリット2つの側面からHTMLメールについて解説します。
メリット
HTMLメールのメリットは、画像を使用できるため、文字情報だけのテキストメールと比べて自社の商品を視覚的に伝えやすいというメリットがあります。また、自社のコンセプトに合わせた配色やレイアウトにすることで、他社のメルマガと差別化を図ることができるでしょう。
また、HTMLメールを利用することで、メールの開封率や本文中に掲載したURLのクリック率などを細かく計測できるというメリットもあります。メルマガの効果を高めるための検証データとして活用できるため、メールマーケティングを本格的に行い人にとって大きなメリットと言えるでしょう。
デメリット
HTMLメールのデメリットは、HTMLやCSSなどのWeb制作に関するスキルが必要な点です。HTMLメールのデザインは、ホームページを制作するのに比べ、難易度は高くないもののテキストメールと比べ工数負担が大きくなります。
また、HTMLメールは受信する端末によってデザインのレイアウトにズレが生じてしまう可能性があります。PCやスマートフォン、タブレットなど様々な端末が普及している現代において、「レスポンシブデザイン」に対応させることが必須でしょう。
非デザイナーでも簡単につくれるHTMLメルマガテンプレート10選
1.Benchmark Email
https://www.benchmarkemail.com/jp/resources/Free-HTML-Email-Templates
「Benchmark Email」は、20種類のHTMLメルマガテンプレートを提供しています。シンプルなニュースレター風のテンプレートからイラストが豊富に使われたテンプレートまでバリエーションが豊富に揃っているのが特徴です。カラーに個性があるテンプレートもあるため、自社で利用する際は配色を調整してみるのも良いでしょう。
2.99 designs メールデザインテンプレート
https://99designs.jp/blog/inside-99designs/99designs-introduces-email-design-category/?lang=ja
「99 designs メールデザインテンプレート」は、デザイナーのクラウドソーシングサービス99 designsが提供するHTMLメールのテンプレートです。通知用・プロモーション用・ニュースレター用の3タイプのシンプルなテンプレートが用意されており、施策に合わせて使い分けしやすいのが特徴です。
3.ZURB
http://zurb.com/playground/responsive-email-templates
「ZURB」は、5種類のHTMLメールのフレームテンプレートを提供しています。装飾はほとんど無く非常にシンプルなのが特徴です。フレームのパターンごとに、推奨画像サイズなども表記されているため初めて利用する方でも使いやすいでしょう。また、レスポンシブデザインに対応しているため、テンプレートを適用させるだけでPCからスマートフォンまでの表示に対応します。
4.Responsive Email Patterns
「Responsive Email Patterns」は、ZURB同様にHTMLメールのフレームテンプレートを提供しています。HTMLメールの中心部分になるカラムから、本文の上部や両端に掲載すナビゲーションなど、パーツごとに組み合わせて利用できるのが特徴です。HTMLやCSSを大まかに理解しておく必要はありますが、自社に合わせて柔軟にカスタマイズしたいという方に最適です。
5.MailChimp
https://mailchimp.com/features/email-templates/
「MailChimp Email Templates」は、無料メール配信サービス「MailChimp」が提供するHTMLメールテンプレートです。MailChimpに登録したユーザーであれば誰でも利用することができます。ビジネス系の落ち着いたテンプレートがあるため、BtoB向けのメール配信などにも活用できるでしょう。
6.BeeFree
「BeeFree」は、HTMLメールエディタ「Bee」が提供する無料テンプレートです。基本のテンプレートからデザインを選び、ドラッグ&ドロップで画像やテキスト、リンクの追加が行えるのが特徴です。作成したデザインを保存することで、自動的にHTML形式でのダウンロードが行えます。
7.Open Source Email Templates
https://www.sendwithus.com/resources/templates
「Open Source Email Templates」は、メールマーケティングのソリューション提供を行うSendwithusのHTMLメールテンプレートです。Sendwithusのアカウント登録を行うことでテンプレートをダウンロードできます。デザイン性の高いテンプレートが豊富なので、手軽にリッチなデザインのHTMLメールが作成できるでしょう。
8.Antwort
http://internations.github.io/antwort/
「Antwort」は、レスポンシブデザインに対応したシンプルなHTMLメールテンプレートを提供しています。また、GmailやOutlookなど代表的なメールクライアントに一通り対応しているのが特徴です。送り先の端末やメールクライアントに左右されないデザインでメールを作成できるでしょう。
9.Cakemail Free newsletter templates
http://templates.cakemail.com/
「Cakemail Free newsletter templates」は、メール配信サービスCakemaillが提供するHTMLメールテンプレートです。ニュースレター系のフォーマットが中心ですが、レイアウトのバリエーションが豊富にあるため、プレスリリースや商品紹介系のメルマガにも応用できるでしょう。
10.7 Free Email Templates from Stamplia
https://litmus.com/blog/go-responsive-with-these-7-free-email-templates-from-stamplia
「Free Email Templates from Stamplia」は、メール配信ツールやレイアウトチェックなどを提供するlitmusのHTMLメールテンプレートです。7種類のテンプレートを無料で提供しており、どれもシンプルなので配色を変更するだけで自社のメルマガとして活用できます。
まとめ
無料で利用できるHTMLメールのテンプレートは豊富にあります。ダウンロードしたテンプレートのHTMLタグを自社で利用しているメール配信サービスにペーストするだけでメールのデザインとして反映されます。
初めてHTMLメールを利用する際は、個性的なデザインよりもシンプルなデザインのテンプレートの利用をオススメします。配色やロゴ写真を差し替えやすいためです。
また、メールマーケティングの効果測定という側面からもメリットが大きいため、HTMLメールを利用するキッカケとしてテンプレートを活用してみてはいかがでしょうか。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- コンセプト
- コンセプトとは、作品やサービスなどに一貫して貫かれている考え方をいいます。デザインと機能がバラバラだったり、使い勝手がちぐはぐだったりすると「コンセプトが一貫してないね」などと酷評されてしまいます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- メルマガ
- メルマガとは、電子メールにて発信者が、情報を配信する手法の一つで、『メールマガジン』の略です。 一部有料のものもありますが、多くのメルマガは購読も配信も無料で行っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- 開封率
- 開封率とは、ユーザーに対して一斉配信したメルマガを、どの程度の割合のユーザーが開封しているのかを表した指標です。主にメールマーケティングシステムに標準で搭載されている機能で、開封率を知ることで、過去のメールの開封率と比較し、メールのタイトルや配信する時間帯の改善点を見つける事が出来ます。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- メルマガ
- メルマガとは、電子メールにて発信者が、情報を配信する手法の一つで、『メールマガジン』の略です。 一部有料のものもありますが、多くのメルマガは購読も配信も無料で行っています。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- メルマガ
- メルマガとは、電子メールにて発信者が、情報を配信する手法の一つで、『メールマガジン』の略です。 一部有料のものもありますが、多くのメルマガは購読も配信も無料で行っています。
- クラウドソーシング
- クラウドソーシング(Crowdsourcing)とはcrowd(群衆)とsourcing(業務委託)を組み合わせた造語であり、webサービス上のやり取りで不特定多数の人々に仕事を依頼する新しい雇用形態の一種です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- BtoB
- BtoBとは、Business to Businessの略で、企業間での取引のことをいいます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- アカウント
- アカウントとは、コンピューターやある会員システムなどサービスを使うときに、その人を認識する最低必要な情報として、パスワードと対をなして使う、任意で決めるつづりです。ユーザー、ID、などとも言います。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- メルマガ
- メルマガとは、電子メールにて発信者が、情報を配信する手法の一つで、『メールマガジン』の略です。 一部有料のものもありますが、多くのメルマガは購読も配信も無料で行っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- メルマガ
- メルマガとは、電子メールにて発信者が、情報を配信する手法の一つで、『メールマガジン』の略です。 一部有料のものもありますが、多くのメルマガは購読も配信も無料で行っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング