デザインの改善から効果測定までできる！HTMLメルマガの基礎知識＆簡単に作れるテンプレート10選

更新日: 2018年05月28日

自社のホームページの集客手段として、メールマガジンを利用している企業は多いでしょう。

近年のメールマガジンでは、商材の写真やロゴを使った「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

http://responsiveemailpatterns.com/

「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

https://beefree.io/template-catalog/

「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メールテンプレートです。ニュースレター系のフォーマットが中心ですが、レイアウトのバリエーションが豊富にあるため、プレスリリースや商品紹介系のメルマガにも応用できるでしょう。