HTMLメールとは、メルマガ配信などの際に画像の挿入や文字の色・サイズの変更などが可能な、Webページと同様の装飾に対応したメール形式です。
HTMLメールには「視覚的な訴求が可能で、ユーザーの行動を測定できる」というメリットがあります。しかし「作るのが難しそう」などのイメージから、HTMLでのメルマガ配信に踏み出せないこともあるでしょう。
そこで今回は、無料で使えるHTMLメールのデザインテンプレートをご紹介します！
その他にも、HTMLメールを簡単に作成できる便利なツールも紹介していますので、ぜひご参考ください。

HTMLメールを簡単作成。パーツをドラッグ&ドロップするだけの「配配メール」

HTMLメールとは？

HTMLメールとは、HTML形式で作成されたメールを指します。
HTMLはWebページ作成用に開発された言語です。テキストメールが文字だけで作られているのに対し、HTMLメールは画像を挿入したり文字の色やサイズを加工したりといった、Webページ同様の装飾を施すことが可能です。

HTMLメールを送るメリット

HTMLメールの配信は、テキストメールの配信と比べて大きなメリットが2つあります。1つが「視覚的に訴求できる」こと、もう1つが「ユーザーの行動を測定できる」ことです。それぞれ詳しく解説します。

視覚的に訴求できる

HTMLメールの最大のメリットは、ユーザーに視覚的に訴求できることです。
文字のフォントやカラー、サイズの指定、画像や動画の表示に加えて、レイアウトをデザインできるので、視覚的にユーザーの興味を強く引きつけられます。
たとえば商材サービスの写真を載せ、カラフルな文字でアピールし、ブランドイメージに沿ったデザインを見せれば、テキストメールでは実現できなかった訴求が可能です。

ユーザーの行動を測定できる

HTMLメールでは、メールを受け取ったユーザーが「メールを開封したか」「どのボタンやURLをクリックしたのか」といった行動を測定できます。
ユーザー行動の測定は、今後のメルマガ作成・配信の最適化を可能にします。ユーザーの多くがメルマガを開封していなかったならば「メールタイトルの見直しが必要だ」と仮説を立てられますし、頻繁にクリックされているボタンがあれば「ユーザーが押しやすいボタンだから重要な部分に配置しよう」と、ユーザーを誘導する戦略を立てることができます。

HTMLメール作成時に気を付けるべきポイント

HTMLメールのメリットを最大限活かすために、意識するべきポイントをご紹介します。

・レスポンシブデザインの採用
レスポンシブとは、Webデザインの用語で、異なるデバイスや画面サイズに合わせてレイアウトやコンテンツが自動的に調整されるデザイン手法を指します。具体的には、パソコン、タブレット、スマートフォンなど、さまざまな画面サイズのデバイスで同じHTMLメールが見やすく表示されるよう、レスポンシブ対応のHTMLメール作成を心がけましょう。

・画像を使う際は代替テキスト（altテキスト）を設定し、容量に注意する
HTMLメール本文に設定する画像に「代替テキスト」を設定することで、画像の読み込みに時間がかかった際にも受信者が離脱しにくくなります。また、メールの読み込み速度を向上させるために、画像やファイルサイズを最適化することも大切です。1画像あたり300KB未満になるよう調整しましょう。

・シンプルで読みやすいデザインを心がける
HTMLメールは本文を装飾できるからといって、過度な装飾や複雑なレイアウトにならないよう注意しましょう。本文の色は黒を基本とし、色付けしたい場合も全体の5％程度になるようにすると必要な箇所がきちんと強調できます。また、文中での改行も避けましょう。受信端末の画面サイズや文字サイズの設定によってどこで改行されるかが変わるため、メール作成者が区切りのよい位置で改行したつもりでも受信端末によっては読みづらくなってしまう可能性があります。

・本番配信の前にテスト送信を行う
HTMLメールに限った話ではないですが、本番配信の前にPCとスマートフォンへテストメールを配信し、見た目や内容のチェックを行いましょう。画像に設定されたURLや代替テキストは合っているか、誤字脱字がないか、意図しない箇所で改行されていないかなどをチェックすれば大丈夫です。

HTMLメール作成に便利！おすすめのデザインテンプレート

HTMLメールを作成するにも、「どのようなレイアウトが良いのか」「知識がないからHTMLメールを作成できない」など悩みは多いと思います。そういう場合は、テンプレートを活用するのも1つです。 HTMLメールでメルマガ配信を行う際に便利な、無料のデザインテンプレートのサイトをご紹介します。

Antwort

「Antwort」は、レスポンシブデザインに対応したHTMLメールのテンプレートを利用できます。シンプルなデザインが特徴で、さまざまなメールクライアントに対応しているのもポイントです。

Antwort 公式サイト　※英語サイト

ZURB

初めてHTMLメールを作成するという場合には、「ZURB」がおすすめです。
ZURBには使いやすいシンプルなデザインの5つのテンプレートがあり、ダウンロードするだけでそのまま利用できます。テンプレートごとに推奨画像サイズが表記されていてわかりやすいため、HTMLメールの作成が初めての方でも、画像と文章のバランスが良いメルマガに仕上げられます。
PC・スマホなど閲覧する端末のサイズに合わせて表示を自動調整するレスポンシブデザインにも対応しており、表示崩れが起こりにくいのも便利です。

ZURB 公式サイト　※英語サイト

Free newsletter templates by CakeMail

「Free newsletter templates by CakeMail」は、メール配信サービスであるCakeMailが提供しているデザインテンプレートです。
テンプレートの数は50種類以上と豊富で、たとえばレストラン・教育・ビジネス・季節など利用目的に合わせたバリエーションがあります。プレスリリースにはビジネス、イベントに合わせたキャンペーン情報なら季節など、メルマガの内容に適したテンプレートを選ぶことができ、表現の幅が広がります。

Free newsletter templates　※英語・仏語サイト

HTMLメールテンプレート by Benchmark Email

「HTMLメールテンプレート by Benchmark Email」は、世界的に有名なメール配信ツールであるBenchmark Emailが提供しているデザインテンプレートです。全部で20のテンプレートが用意されていて、こちらもおしゃれなものがそろっています。バラエティ豊かなラインナップなので、さまざまな業種で利用できます。
テンプレートの数は500種類以上にのぼり、画像やイラストを多用する視覚効果の強いデザインや、テキスト中心のシンプルなデザインなど、バラエティ豊かなラインナップがそろっています。
自社のテイストに合わせてデザインをカスタマイズでき、またレスポンシブデザインにも対応しているので、さまざまな業種で利用できます。

Benchmark EmailのHTMLメールテンプレート

デザインテンプレート by 99 designs

「デザインテンプレート by 99 designs」は、デザイン会社が提供しているデザインテンプレートです。
ニュースレター用・プロモーション用・個人通知用の3種類のテンプレートが用意されており、それぞれを用途に合わせて使い分けることができます。
HTML形式の他、PSDファイルでダウンロードすることもできます。

99designsメールデザインテンプレート

Free Responsive0 Email Template - Part I

「Free Responsive Email Template - Part I」は、シンプルかつロジカルに作られたレスポンシブデザインのテンプレートです。デザインの使い勝手が良いので、さまざまな業種に合わせられます。 レスポンシブ対応で、表示機器の違いによる表示崩れの心配もありません。

Free Responsive Email Template | Responsive Email Design　※英語サイト

BeeFree

デザイン豊富な36種類のHTMLメールのテンプレートを利用できるのが「BeeFree」。ドラッグ＆ドロップの感覚的な操作で簡単に編集でき、初心者でも作成しやすいのが特徴です。
画像の編集機能も備わっており、サイズ変更や色合いの調整、エフェクトなどの編集でイメージ通りのメルマガを作成できます。また、押すとリンク先のページに飛べる「コンバージョンボタン」の設置も容易です。ボタンの色やサイズも自由に編集でき、試行錯誤を重ねて効果的なメルマガを作成できます。

200+ HTML Email Templates,Professional Design - BEE Free※英語サイト

Open Source Email Templates

「Open Source Email Templates」は、レスポンシブデザインに対応したシンプルで使いやすいデザインが特徴的なテンプレートです。
アイコンが大きくフラットなデザインが多数あるため、コンテンツの魅力を損なうことなくメルマガを作成できます。請求書用のテンプレートやフォーム埋め込み型のテンプレート、国際メール風のテンプレートなど数種類のテンプレートが用意されているため、メルマガ以外の用途でも活用できます。

Open Source Email Templates • Dyspatch　※英語サイト

Cerberus

「Cerberus」は、OutlookやGmailをはじめとした多くのメールクライアントに対応しているHTMLメールテンプレートです。もちろんレスポンシブデザインにも対応しています。
デザインはレイアウトのみで装飾などがないため、メルマガのコンテンツに合わせてカスタマイズできます。

Cerberus - Patterns for Responsive HTML Email Templates　※英語サイト

MUI - Material Design CSS Framework

「MUI」はWebデザインやHTMLメールに使えるCSSフレームワークで、軽量なためどのような環境でも扱いやすいのが特徴です。Webサイトを構築するような感覚でHTMLメールを作成できます。レスポンシブデザインにも対応しておりデザインパターンも豊富でカスタマイズも手軽なため、訴求力の高いメールを手早く作りたい方におすすめです。

MUI - Material Design CSS Framework※英語サイト

ColorlibHQ

「ColorlibHQ」からはHTMLメールに特化したテンプレートが配布されており、用途に応じて20種類から選択してダウンロード可能です。レスポンシブ表示にも対応しているため、スマートフォンやタブレット端末などさまざまなプラットフォームで表示させたい場合に重宝します。
シンプルに使えるものからカスタマイズ性が高く独自性を押し出しやすいものまで取り揃えられており、自社に合ったテンプレートを見つけやすいといえるでしょう。

Gmail、Outlookなどの主要なメールクライアントでひととおりテストされているため、大手のクライアントを使っている方なら安心して利用できるのも魅力のひとつです。

ColorlibHQ※英語サイト

Mosaico

「Mosaico」はWebブラウザ上でHTMLメールを編集・作成できるアプリケーションで、カスタマイズ性の高さが魅力です。
あらかじめ用意されたテンプレートを使うのではなく、さまざまなオブジェクトを組み合わせて自分だけのテンプレートを作成できるため、よりオリジナリティのあるメールを作成できます。作成済みのテンプレートはいつでも自由に編集できるので、新規案件でHTMLメールを送信する必要が生じた時にも対応しやすいでしょう。

シンプルで汎用性の高い「versafix-1」とフルカラーで表現力豊かな「versafluid」の2種類から選択可能です。

Mosaico※英語サイト

HTMLメールテンプレートのメリット

知識不要でおしゃれなメールが作成できる

通常HTMLメールを作成する場合、CSSやソースコードの知識が必要になることがあります。しかし、テンプレートを活用すれば、知識がなくてもおしゃれなHTML目メールを簡単に作成することができます。

作成業務の稼働削減ができる

前述の通り、HTMLメールを作成する場合、専門知識が必要になりますが、知識があったとしてもCSSやソースコードでメールのレイアウトを構築するため、作成には時間がかかってしまいます。複雑なデザインの場合はなおさらです。

テンプレ―トを活用すれば、すでに大枠ができているのでメール本文を作成するだけでおしゃれなHTMLメールが配信でき、稼働削減に寄与します。

メールを読んで反応してもらいやすい

「HTMLメールを作成する知識がない」「知識はあるが作成する時間が取れない」など様々な理由によって、HTMLメールではなくてテキストメールで配信している方もいらっしゃるのではないでしょうか。

メールをじっくり読んでもらえるか、本文中のURLをクリックしてもらえるかは、デザインを含めたメールの内容によって左右されます。

弊社の調査では、読者がメールを読む時間はおよそ7秒ということが分かっています。この7秒で読者を惹きつけて、URLをクリックしてもらうには、文字情報だけではなく画像や動画、また特に見てほしいところがわかるようなデザインにすることが重要です。
そのためにはHTMLメールで配信することが好ましいです。

様々な理由でHTMLメールが配信できない方でも、テンプレートを活用すれば簡単に読者を惹きつけるHTMLメールを配信できます。

HTMLメールテンプレートのデメリット

テンプレートを活用すれば、知識がなくても簡単におしゃれなHTMLメールが配信できるというメリットがある一方、デメリットもあります。

例えば、利用したいテンプレートがそのまま使える型であれば問題ないですが、一部カスタマイズが必要になる場合、知識が必要になります。

また、おしゃれなテンプレートほど画像を多くたくさん使っており、メールデータが大きくなってしまう傾向になります。メールデータが大きくなると、配信遅延の原因になることもあるため注意が必要です。

HTMLメールテンプレートの選び方

本記事でも紹介している通りHTMLメールのテンプレートを提供しているサービスは多くあります。様々なサービスの中から、最適なサービスを選ぶためのポイントをご紹介します。

レスポンシブデザインに対応しているか

HTMLメールは、受信するユーザーが利用しているデバイスによって表示が崩れたり、読めなかったりする場合があります。配信する際はスマートフォンやタブレットなど、さまざまな閲覧環境を想定して「レスポンシブデザイン」を利用するのがおすすめです。

レスポンシブデザインとは、表示される画面のサイズに合わせて自動的に見やすいサイズ、デザインに切り替わるデザインです。レスポンシブデザインに対応したHTMLメールを作成すれば、デバイスを問わず多くのユーザーに閲覧してもらえます。

そのため、提供されているテンプレートがレスポンシブに対応しているかどうかは事前に確認をしておきましょう。加えて、「マルチパートメール」の機能も活用することをおすすめします。

Web上で編集が可能か

デメリットでも説明したように、使いたいデザインがあっても一部カスタマイズするとなると知識が必要ですし、手間も発生します。

テンプレートを提供しているサービスによっては、Web上で簡単にカスタマイズできるものもあります。
BeeFreeでは、提供しているテンプレートにドラッグ＆ドロップで要素を追加したり、クリックで不要なデザインを削除したり、自由に編集できるようになっています。

こうした、編集ツールを提供しているかどうかも確認しておくと良いでしょう。

知識は不要！誰でもHTMLメールが作成できるツール

ここまでHTMLメールのテンプレートをご紹介しました。しかし、自社に合ったテンプレートが見つからなかったり、作りたいメールのデザインイメージはあるけど知識がなくてHTMLメールが作れないという方もいらっしゃると思います。
そこで、ここからは知識がなくても簡単な操作でHTMLメールが作成できるツールをご紹介します。ご紹介しているツールのほとんどがテンプレートの提供も行っておりますので、ぜひご参考ください。

Benchmark Email

初期費用がかからず、毎月250通までのメールの配信が可能なツールです。画像編集機能つきのHTMLエディターも搭載されており、ドラッグ＆ドロップの簡単な操作で美しいデザイン・レイアウトのHTMLメールを作成できます。さらに、すぐに使用できる500種類以上のデザインテンプレートが用意されているのもポイントです。
メール配信ツールとしての機能も、配信レポートに基づいた効果改善や、ステップメールなどと充実しています。
有料プランも1,800円から利用できるので、個人でも導入しやすいツールです。

Benchmark Email

配配メール

ドラッグ＆ドロップの簡単な操作で魅力的なデザインメールが作成できるHTMLエディタを搭載したツールです。また、配配メールが実際に配信をして効果の出たメールのテンプレートを用途別に提供しているので、初めてHTMLメールの作成・配信する方にも気軽にご活用いただけます。
配信はもちろんのこと、効果測定から改善まで行えますので、メール配信の効果が最大限になります。さらに、IP分散によって受信ブロックを回避し、迷惑メールに間違われない仕組みも導入しています。配配メールの機能や料金は、「配配メールサービス概要資料」をダウンロードしてからご確認ください。

配配メール

Cuenote FC

複雑な操作をせずにメール配信ができるツールです。操作性が高いHTMLエディターが搭載されているため、専門的な知識がなくても簡単にデザイン性の高いHTMLメールの作成が可能です。
効果測定レポート機能なども充実しており、メール配信の効果をさらに高める効果も期待できます。

CuenoteFC

「配配メール」ではHTMLの知識不要で簡単に作成可能！

ここまで、無料テンプレートのサイト、メリットデメリットや選び方についてご紹介しましたが、「手間がかかりそう」と感じた方もいらっしゃるかと思います。

おすすめは、HTMLの知識不要で簡単にHTMLメールを作成できるメール配信サービスを利用することです。

「配配メール」のHTMLエディタでは、ドラッグ＆ドロップの簡単な操作でHTMLメールの作成が可能で、メール作成にかかる作業時間を大幅に削減できます。配信後の効果測定も容易にでき、作業負担をなるべく減らして効率的にメールマーケティングを行えます。