お役立ちコラム

HTMLメールの作り方とメルマガ配信で使える無料テンプレート12選

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

テキストメールとHTMLメール

一般的にメールといえば、パソコンや携帯電話などで利用されるテキストメール（書式が「プレーンテキスト」のメール）を指します。
近年はメッセージアプリの登場によって個人間の連絡にメールを使う機会は減っていますが、ビジネスの場では、取引先との連絡やメルマガの配信などで変わらず頻繁に利用されています。
しかし、メルマガ配信ではテキストメールよりもHTMLメールが多く使われる傾向にあります。

HTMLメールとは？　メリットは？

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

視覚的に訴求できる

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

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

HTMLメールでは、メールを受け取ったユーザーがとった行動（アクション）を測定できます。
たとえば「ユーザーはメールを開封して読んだか」「どのボタンやURLをクリックしたのか」など、ユーザーがメールに対してとった行動をHTMLの技術によって計測できます。
ユーザー行動の測定は、今後のメルマガ作成・配信の最適化を可能にします。ユーザーの多くがメルマガを開封していなかったならば「メールタイトルの見直しが必要だ」と仮説を立てられますし、頻繁にクリックされているボタンがあれば「ユーザーが押しやすいボタンだから重要な部分に配置しよう」と、ユーザーを誘導する戦略を立てることができます。
URLのクリック率はテキストメールでも測定できますが、メルマガの開封率の測定はHTMLメールでなければ困難です。より多くの、奥深いユーザー情報を得られるHTMLメールは、マーケティングにも有効です。

HTMLメールの作り方

テキストメールは文字を書き込むだけで作成できましたが、HTMLメールでメルマガ配信を行うには、別途作業が必要です。
HTMLメールの作成方法について手順を追いながら解説します。

関連記事はこちらメルマガ効果UP！初心者でもできるHTMLメール活用法

テンプレートの作成

HTMLメールではまず、テンプレートを作成します。
テンプレートとは、メールのデザインのことです。テンプレート作成時には、画像やテキストの配置などのレイアウトデザインを考えます。
本来はテンプレート作成にはIllustratorやPhotoshopなどの画像編集ソフトを使用しますが、最近では無料で、専門的な知識がなくても利用できるテンプレート作成ツールがあります。初めてHTMLメールを作成する場合や、画像編集ソフトを用意できない場合はテンプレート作成ツールを活用するのがおすすめです。

コーディング

コーディングとは、作成したテンプレートをHTML化することを指します。
HTMLメールは、文字通りHTML言語によって作成するメールです。作成したテンプレートはHTMLで表示できるように変換する必要があります。このHTML言語への変換作業を「コーディング」と呼びます。テンプレートをHTML言語に置き換える「翻訳」作業だと考えると、わかりやすいでしょう。
コーディングには、オーサリングソフト（HTMLやCSSなどのファイルを編集できるWebページ作成用ソフト）を使用するため、HTML言語に習熟している必要はありません。オーサリングソフトの機能を使えば初心者の方でもそれほど難しくはないでしょう。
なお、テンプレート作成ツールの中には、コーディングを自動的に行ってHTMLとして出力するものも多くあります。この場合、テンプレート作成とコーディングをワンステップで行えます。

表示確認

コーディングが完了したら、HTMLメールの表示を確認します。
メルマガを配信する前に、表示が崩れていないか、ボタンが動作するかなど、意図どおりに機能するかどうかを確認してください。誤字・脱字がないかも同時に確認します。
表示確認過程を怠って不完全なメルマガを配信してしまうと、メルマガへの信用度が低下し、ユーザーに読んでもらえなくなる恐れがあります。Web上でメルマガの表示を確認し、自分のメールアドレス宛に一度送信して、ユーザーになったつもりで表示と動作をひととおり確認しましょう。

本配信

表示が崩れていないこと、内容や文章に誤りがないことを確認したら、メルマガを本配信します。メルマガ配信には通常のメーラーで行う方法やメール配信ソフトを利用する方法などがありますが、通常のメーラーで一斉送信を行うのはさまざまなリスクがありますので、メール配信ソフトを使うことをおすすめします。

関連記事はこちらメール一斉送信で効率化！配信ソフトで簡単に情報発信

HTMLメールの「埋め込み形式」と「インライン形式」

HTMLメールの作り方には、「埋め込み形式」と「インライン形式」の2種類があります。他にもいくつかの方法はありますが、多くのHTMLメールは埋め込み形式とインライン形式のどちらかを選択して作られています。
ここでは、それぞれのHTMLメールの作り方をご紹介します。

埋め込み形式のHTMLメール

埋め込み形式によるHTMLメールの記述は、セクション内に必要な情報を記入する方法が取られています。

<style type="text/css">

</style>

上記の中にHTMLメールの設定情報を記述することで、文字の装飾や画像の位置などを指定できます。たとえば、下記のような記述例があります。

■文字の外側の幅を0px、文字の内側の幅を0pxに設定する

* { 
    margin:0;
    padding:0;
}

■「img」タグで指定された画像の幅の表示を100%にする

img { 
    max-width: 100%; 
}

設定情報は全て<style>～</style>内に記述しておき、</style>の後ろに</head>を示すことで構成設定をあらわします。その後、<body>の下にHTMLメールの本文を記述します。

インライン形式のHTMLメール

インライン形式のHTMLは、HTMLメールのデザインをまとめて指定するのではなく、コンテンツの要素一つひとつに対してCSSでデザインを指定する方法です。たとえば下記のように記述します。

■「image.png」という画像を幅100%で表示し、マージンとパディングを10pxずつ指定する

<img src="image.png" alt="説明" style="width: 100%; margin:10;
 padding:10; border:none;"/>

<img src="image.png" alt="説明"
 style="width: 100%; margin:10;
 padding:10; border:none;"/>

要素ごとにデザインを指定するため、細かくデザインにこだわりたい時はインライン形式が効果的な場面が多いでしょう。

HTMLメール配信の注意点

HTMLメールは、受信するユーザーが利用しているデバイスによって表示が崩れたり、読めなかったりする場合があります。配信する際はスマートフォンやタブレットなど、さまざまな閲覧環境を想定して「レスポンシブデザイン」を導入しましょう。
レスポンシブデザインとは、表示される画面のサイズに合わせて自動的に見やすいサイズ、デザインに切り替わるデザインです。レスポンシブデザインに対応したHTMLメールを作成すれば、デバイスを問わず多くのユーザーに閲覧してもらえます。

加えて、「マルチパートメール」の機能も活用することをおすすめします。
レスポンシブデザインにしても、HTMLメールに対応していないメーラーをユーザーが利用していると本文が表示されなかったり、HTMLのソースコードがそのまま表示されたりする可能性があります。

マルチパートメールの機能を活用すれば、送信先のデバイスがHTMLメールに対応しているかどうかを自動で判断し、非対応と判断した場合にはテキストメールに切り替えて配信できます。もちろん、HTMLメールに対応しているデバイスなら、HTMLメールで表示されます。

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

HTMLの作り方において、初心者がつまずきやすいポイントが、テンプレートの作成です。HTMLメールはテキストメールとは違い、デザインの影響力がとても強くなります。読者（ユーザー）の興味を引きつけ、行動へつなげるためには、デザインに注力する必要があります。
そこで、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 Responsive 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メールは現在、メルマガの主流となっています。
HTMLメールにはさまざまな装飾ができたり、効果測定ができたりといった、テキストメールにはないメリットがあるので、メルマガ配信を行う場合には利用することをおすすめします。
今回ご紹介したデザインテンプレートを活用すれば、初めてHTMLメールを作成する場合でもスムーズに進めることができます。メルマガのデザインで悩んでいる企業には、利用の検討をおすすめします。他にもHTMLメールでのメルマガ配信に便利なツールはたくさんあるので、気になる方はぜひ探してみてください。

関連記事はこちらメルマガのテンプレートはラインが重要！デザインの秘訣を紹介

HTMLメール配信が可能なツール

ここまでHTMLメールのテンプレートをご紹介しました。しかし、メールは作成して終わりではなく、実際に配信する必要があります。メール配信ツールにもさまざまなものがありますが、特におすすめのHTMLメール配信ツールをご紹介します。

Benchmark Email

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

Benchmark Email

Cuenote FC

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

CuenoteFC

ワイメール

HTMLメールに対応しているのみでなく、ステップメールを含めたさまざまな機能を搭載したメール配信サービスです。
大規模サーバーと同様の100Mbpsが標準で装備されているため、常に安定した速度でメール配信を行えるという点も魅力的です。
コストも月額4,980円～の定額制で企業のみならず個人での利用にもおすすめです。

ワイメール

オレンジメール

使いやすくシンプルな操作で大量のメールを素早く配信することができるツールです。登録件数100件までであれば、6ヶ月間無料で使用することができるため、まずは一度メール配信サービスを試してみたいという方にもおすすめです。

オレンジメール

配配メール

ドラッグ＆ドロップの簡単な操作で魅力的なデザインメールが作成できるHTMLエディターを搭載したツールです。配信はもちろんのこと、効果測定から改善まで行えますので、メール配信の効果が最大限になります。
さらに、IP分散によって受信ブロックを回避し、迷惑メールに間違われない仕組みも導入しています。

配配メール

ツールを活用してHTMLメールの効果的な配信を

テンプレートを使用することで、専門的な知識がなくてもHTMLメールの作成は可能です。しかし、対応ツールを活用すれば、完全オリジナルのHTMLメールも簡単に作成できます。配信や効果測定などまで行えますので、よりメールの配信効果を高めることにもつながります。ツールを上手に活用して、効果的な配信を行いましょう。

－メルマガ・メール配信サービス－

「配配メール」は、企業の集客・販促活動に携わる方のメールマーケティング業務を支援するサービスです。
シンプルな配信操作、見やすい成果指標レポート、メールの反応による見込み客の可視化、サイト来訪通知といった機能によりメールマーケティングの実践をサポートします。
また、機能の提供だけではなく、ナレッジ提供や個社の運用に踏み込んだ手厚いアフターフォローにより、お客様の販促の成功に向け伴走します。
メール配信の初心者から本格的なメールマーケティングの実践を目指している方まで、どなたでも安心してお使いいただけるサービスとして、お客様に長く愛され、98%の継続利用率を維持しています。