伝わるHTMLメール!テンプレートを使って手軽に作ろう

シェア

ツイート

LINEで送る

Pocket

ブックマーク

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

企業のメルマガではテキストに装飾がついていたり、画像が挿入されていたり、視覚的に内容が理解しやすいメルマガが多いですね。

これらはHTMLを使ってメールを作成しています。

 

HTMLと聞くと抵抗を感じてしまう方もいるかもしれませんが、WEBデザインの専門的な知識がない方でもテンプレートを使うことで簡単に作成が可能です。

HTMLメールとは

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

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

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

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

BeeFree

https://beefree.io/

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

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

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

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

編集が完了したら作成画面上にある「SAVE」ボタンを押してテンプレートをダウンロードします。実際に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/

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

編集方法はHTMLファイルを開き、コードを書き換えていくスタイルです。扱いやすかった点として、各テンプレートにはimageフォルダが用意されており、そのフォルダの中にHTMLで使用する画像が纏められています。そのため、画像の差し替えをしたい時も、作成するべき画像のサイズ(縦横のpx幅)や拡張子がわかりやすく作業しやすいと感じました。

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

HTMLメールを配信しよう

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

 

[手順]

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

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

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

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

5)本文が(1)で確認したページと同じように表示されたことを確認し、メールを送信。

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

 

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

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

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

メール作成者が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メールを作成することができますね。

 

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
ツール
tree