今すぐ作れるHTMLメールのテンプレートと作成のコツとは

皆さんはメールを作成していて文章だけでは情報が十分に伝わらないな…と感じたことはありませんか？

企業のメルマガではテキストに装飾がついていたり、画像が挿入されていたり、視覚的にもわかりやすいメルマガが多いですね。これらはHTMLを使ってメールを作成しています。

HTMLと聞くと抵抗を感じますが、WEBデザインの専門的な知識がない方でもテンプレートを使えば簡単に作成が可能です。

HTMLメールとは

メールの形式には、テキストのみで構成される「テキストメール」と、文字の装飾や画像を使用している「HTMLメール」の2種類があります。HTMLメールは高いデザイン性により記事の訴求効果を発揮しやすく、メールの開封率やクリック率の向上ができます。

HTMLメール用テンプレート　おすすめサイト

今回はユーザー登録なしで、今すぐ無料で使えるHTMLメールのテンプレートサイトをご紹介します。

HTMLについて専門的な知識がない方はもちろんHTML初心者の方も作成しやすいものばかりなので、安心して始めることができますよ。

BeeFree

https://beefree.io/

BEE Freeは無料で使えるテンプレートをベースに、本サイト上でカスタマイズすることでHTMLメールを作成できます。レスポンシブデザインに対応したメールもすばやく作成ができる機能的なサイトです。

デザイン性の高いテンプレートが30種類以上用意されており、作成したいメールの業種、用途に合わせたデザインのテンプレートを検索することができます。

編集方法は、お好みのテンプレートを選び、選んだテンプレートをベースにパーツをドラッグ＆ドロップしながら編集していくスタイルです。

テキストだけではなく、リンクボタンや画像、SNSソーシャルボタンなどを設置もできます。

編集が完了したら作成画面上にある「ＳＡＶＥ」ボタンを押してテンプレートをダウンロードします。実際にHTMLファイルを開いて、コードを書くという作業が発生しないので、出来上がりイメージを目で見ながら作ることができます。

専門的な知識を必要しない上に操作が簡単なので、HTMLメールに初めて挑戦する方はまず試してみてほしいと思います。

ZURB

https://zurb.com/playground/responsive-email-templates

ZURBはベーシックなレイアウトを始め、サイドバー付きのレイアウトなどの5種類の定番の無料テンプレートを提供しています。レスポンシブデザインにも対応しています。

編集方法はHTMLファイルを開きコードを書き換えていくスタイルですが、ダウンロードできるテンプレートのデザインはとてもシンプル。無駄が少ない分、コードが読みやすく自分好みにアレンジしやすいです。HTMLの勉強を始めた方におすすめです。

Benchmark Email

https://www.benchmarkemail.com/jp/

Benchmarkはデザイン性の高い無料テンプレートを5種類提供しています。編集方法はHTMLファイルを開き、コードを書き換えていくスタイルです。

無料トライアルにてアカウントを作成すれば、テンプレートをドラッグ&ドロップで編集したり、毎月250通までのメール配信サービスの利用ができます。メルマガを始めてみたいマーケティング担当の方にぜひ試していただきたいです。

また、当サイトは日本語に対応したサイトなので、ご紹介した他のサイトより理解しやすいかもしれません。

CakeMail

https://www.cakemail.com/templates/

Cakemailは50種類上のテンプレートを無料で提供しています。ビジネスからイベントなど用途別で使える非常にデザイン性の高いテンプレートばかりです。

編集方法はテンプレートをダウンロードしてHTMLファイルを開き、コードを書き換えていくスタイルです。扱いやすかった点として、各テンプレートにはimageフォルダが用意されており、そのフォルダの中にHTMLで使用する画像が纏められています。

そのため、画像の差し替えをしたい時も、作成するべき画像のサイズ（縦横のpx幅）や拡張子がわかりやすく作業しやすいと感じました。

テンプレートの数が豊富なので、レイアウトやデザインにこだわりたい方におすすめです。

HTMLメールを配信しよう

HTMLメール用テンプレートの編集が終わったとして、果たしていつものテキストメールをどのようにHTMLメールにすればよいのでしょうか。HTMLメールの配信までの流れをご簡単にご紹介します。

 

[手順]

１）編集したHTMLファイルをブラウザで開きます。

２）ブラウザに表示されたテキストや画像など全てを選択してコピーします。

３）お使いのメーラーを起動し、メール作成画面の本文にペーストします。

４）HTMLファイルのソースコードをメール本文にペーストするのではない点に注意が必要です。

５）本文が（１）で確認したページと同じように表示されたことを確認し、メールを送信。

正しくHTMLメールが作成できている場合、メール本文が以下の図のように表示されます。

 

もし（３）でメール本文にペーストした際に全てテキストで表示されてしまう場合は、ご使用のメーラーの設定がHTMLメールを作成できる設定になっているかを確認してください。

プレーンメール作成になっていると以下の図のようになってしまいます。

HTMLメールの配信で気を付けたいこと

画像や装飾を駆使して素敵なHTMLメールが完成したとしても、メール受信者が正しくメールが見れないと本末転倒です。

作成したデザインどおりに表示されるように、特に気をつけてほしいことをご紹介します。

 

１）作成したメールの容量が軽くなるよう心がける

画像や装飾を多く含むHTMLメールなので、自ずとメールの容量が大きくなるものです。容量が大きくなるとスパム扱いされることが増えるので注意が必要です。

できるだけ100KB程度に収まるメール容量に収めることを心がけましょう。使用する画像はあらかじめ容量を落としてからHTMLメール上で使用するとよいでしょう。

 

２）CSSはインライン形式で書く

HTMLメール上の装飾となるCSSは「インライン形式」で書くことをお勧めします。インライン形式はHTMLに直接CSSを記述します。

多くホームページのCSSは「外部スタイルシート」として、HTMLファイルとは別ファイルで作成、管理することが主流ですが、HTMLメールでは使用するメーラーによっては外部スタイルシートが適用されない場合があります。

作成者が意図するデザインが表示するためにも、インライン形式でCSSを書くようにしましょう。

 

３）マルチパートで配信する

メール作成者がHTMLメールを送信したとしても、受信者がテキストメールしか読めない環境の方もいます。

その方のためにも受信者の環境に応じてHTMLメールとテキストメールを表示分けできるマルチパートで配信することを心がけましょう。

実はHTML形式のみのHMTLメールはスパムメールとみなされやすいのですが、マルチパートで配信することで受信ブロックを減らすことができます。

HTMLメール作成で知っておくと便利なこと

今回ご紹介したテンプレートで使われていた代表的なタグは以下です。

HTMLメールテンプレートは、tableタグによるレイアウトが主流のようです。HTMLメールを編集する上で知っておくとスムーズに作業が進むと思います。

HTMLタグ

タグ名	説明
table, tr, th, td	表や表のセルを作成
img	画像を表示
a	ハイパーリンクをの設置
p	段落を表す（テキスト等を入れます）
ul, ol, li	リスト（箇条書き）やリストの項目の表示

 

特殊文字、記号

HTMLで特殊文字や記号を表示したい場合、HTMLのコードに直接記述できないものがあります。その時に、特殊文字を表す文字コード（文字実態参照）を使います。中でもよく使うものをご紹介します。

文字実態参照	表示	説明
 		半角のスペース。折り返しはなし。
"	”	二重引用符
&	&	アンパサンド
&lt;	<	不等号（小なり）
&gt;	>	不等号（大なり）
&copy;	©	コピーライト

 

HTMLを1から書いていた筆者からすると、ドラッグ&ドロップで編集できるツールやテンプレートの使用は簡単で目から鱗でした。

レスポンシブデザインに対応したテンプレートを使えば、時短でデザイン性の高いHTMLメールを作成することができます。いつもの文章に加えて、画像や装飾を入れることで伝わりやすいメールを作って発信していきましょう。