シンプル操作で誰でもカンタンに一斉送信ができる「ブラストメール」をお試ししてみませんか？
大量メール配信でもすぐに届く、14年連続顧客導入数シェア No.1のメール配信システム
→「ブラストメール」無料版をこちらからお試しいただけますHTMLメールとは、その名の通り「HTML」と呼ばれるWebプログラミング言語で作られたメールのことです。
HTMLメールを使えば本文中にボタンを設置したり、画像を表示させたりなど、テキストメールでは不可能なデザインが可能になり、より高い訴求効果が期待できます。そのため今や企業が発行するメルマガのほとんどは、HTMLメールが主流です。
一方で、テキストメールを使っている企業の中には、「自社もHTMLメールにしたいが、作り方が分からない」というところも少なくないでしょう。そこで本記事では、誰でもできるHTMLメールの作り方を解説します。
HTMLメールとは？
そもそも「HTML」とはHyper Text Markup Languageの略で、Webブラウザが読み取れるマークアップ言語のことです。HTMLを使えばサイト内のテキストの色や大きさを変える、画像を表示させる、リンクを埋め込むなどが可能になりますが、これをメールでも行えるのが「HTMLメール」となります。
HTMLメールなら、テキストを装飾したり、メールの本文中に画像を設置できるなど、テキストメールでは不可能なデザインを施せます。そのため、メールの視覚的な訴求効果が高まるのです。
HTMLメールとテキストメールの違い
上の画像を見ると一目瞭然です。
HTMLメールはテキストメールと比べるとデザイン性が高く視認性が良いです。そのため、読者が興味を持ちやすいというメリットがあります。
その他にも、HTMLメールの場合は開封率の計測も可能となっているため、マーケティングや営業で利用する場合はHTMLメールが不可欠と言えるでしょう。
そのような事情も有り、HTMLメールを利用する人は増加しています。MarketingProfsによると、マーケターの約74％がHTMLメールを使用して視覚的に魅力的なコンテンツを提供しているようです。
HTMLメールのメリット
HTMLメールのメリットは、大きく分けると下記3点です。
- 視覚的な訴求効果が高まるため、反応率の向上が期待できる
- 画像などを活用して情報の伝達率を上げることが可能
- 開封率が計測できるなど効果測定が簡単
HTMLメールの目立った特徴といえば、デザインの自由度が上がることです。デザインを入れることでより視覚的な訴求効果が高まり、メール配信の効果も向上します。
また、実はHTMLメールによって開封率の測定が可能になる、というメリットもあります。開封率は送信したメールがどのくらい開封に至ったかを表すメール配信の重要指標で、メールマーケティングを行うなら必ず測定すべき数値です。
デザインだけでなく効果測定の面でもHTMLメールは重要なため、たとえデザインの入らないメールを送る場合でも、HTML形式を選ぶ必要性は高いといえます。
HTMLメールのデメリット
HTMLメールのデメリットとしては、下記3点が挙げられます。
- デザインをこだわる場合は作成コストがかかる
- 画像を入れすぎるとメールの表示が重くなる
- 受信メーラーによっては表示されない場合がある
HTMLメールは、デザインにこだわりすぎるとメールの作成コストがかさむ他、メールの表示が重くなる恐れもあります。つまり、メールのデザインにこだわりすぎるとかえって費用対効果が悪くなるのです。
画像はアイキャッチ一枚にとどめる、毎回使えるデザインテンプレートを準備するなどして、費用対効果を意識してHTMLメールを活用しましょう。
また、メーラーにはHTMLメールが正しく表示できないものもあり、HTMLメールだけでは全顧客に十分な訴求が難しくなります。このデメリットを解消するには、顧客の受信環境に応じてHTMLメールとテキストメールのどちらかを送り分ける（マルチパート配信）機能を備えるメール配信システムを使いましょう。
HTMLメールの作り方
HTMLメールの作り方は「自力で作る」方法と、「HTMLメール作成機能があるシステムで作る」方法のふたつが代表的です。それぞれの作り方について詳しく解説します。
自力でHTMLメールを作る【経験者向け】
ひとつ目に紹介するのは、自らでHTMLタグを使って文章をマークアップし、HTMLメールを作る方法です。
HTMLタグとは「< >（半角不等号）」で囲まれたテキストのことで、文章の見た目を変えたり画像を表示させたりなど、様々な種類があります。
| 種類 | テキスト | 使用例 |
| 太字 | <b> もしくは <strong> | <b>ここが太字になります</b>
<strong>ここが太字になります</strong> |
| 画像を表示する | <img> | <img src=”画像のURL”> |
| リンクを設置する | <a> | <a href=”URL”>ここからアクセスできます</a> |
HTMLの知識がある人なら自分で作るのもアリですが、それでも注意点があります。注意点とは、Webサイトの場合と異なり、HTMLメールには標準的な規格が存在しないことです。
例えば、Webサイト構築では当たり前に使えるタグ（divやstyle など）が使えなかったり、padding・margin（各要素の間隔や余白のこと）をサポートしていないメーラーがあったりするのです。
そのためHTMLメールは閲覧環境によって見え方が変わることが多く、これを防ぐために通常のWeb開発とは異なるマークアップを行う必要があります。
HTMLメール作成機能があるシステムで作る【初心者向け】
HTMLメールを作るもっとも手っ取り早い方法は、HTMLメール作成機能があるメール配信システムを利用することです。
HTMLメール作成機能があるメール配信システムを使えば、HTMLについてまったく知識がなくても、まるで積み木を組み立てるかのような手軽さでHTMLメールが作れます。
なお、メール配信システムとは、メルマガの大量送信を安定的に行ったり、セグメント配信や効果測定といった、メール配信の効果を最大化するための機能を備えるツールです。
メールマーケティングを実施している企業のほとんどは、メール配信システムを使って顧客にメールを配信しています。
自分でHTMLメールを作る場合の手順
ここからは、何らかの事情でHTMLメールを自作したい方に向けて作成手順を解説します。大まかな手順は以下の通りです。
- ベースを作成する（DOCTYPE宣言）
- マークアップする
- スタイリングする
- テスト送信し、問題ないかどうかチェックする
それでは、各手順について詳しく解説します。
手順1. ひな形を作成する（DOCTYPE宣言）
まずは「DOCTYPE宣言」でHTMLメールのベースを作ります。HTMLメールの場合、DOCTYPEは「XHTML 1.0」もしくは「HTML4.01」が使われますが、当サイトではHTML4.01をおすすめします。下記は、HTML4.01でDOCTYPE宣言を行った場合のサンプルです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes"> <meta http-equiv="Content-Language" content="ja"> <meta charset="shift_jis"> <title></title>
HTML4.01をおすすめする理由は、HTMLメールでは「テーブルレイアウト」でコンテンツを作成するからです（テーブルレイアウトの詳細は後述）。XHTMLではテーブルレイアウトが許容されませんが、HTML4.01では許容されます。
手順2. マークアップする
次にメールの中身をマークアップしていきますが、HTMLメールはテーブルレイアウトを使って構成するのが基本です。「そんな古い方法で大丈夫か」と思う人もいるかもしれませんが、HTMLメールでCSSレイアウトを利用すると表示が崩れやすくなります。
下記はテーブルレイアウトを使ったマークアップのサンプルです。
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>ここに本文が入ります</td>
</tr>
</table>
サンプルではstyleで横幅を100%に指定していますが、HTMLメールではCSSをインライン形式か埋め込み形式で記述していくようにします。
手順3. スタイリングする
通常のWeb開発では外部読み込みでCSSを適用するのが一般的ですが、多くのメーラーは外部読み込みのCSSをサポートしていません。
そのためHTMLメールでは、CSSを各HTMLタグ内で直接指定する「インライン形式」か、headタグ内にCSSを記述する「埋め込み形式」でスタイリングを行います。
どちらの方法を選べば良いかと言う点ですが、HTMLメールが単に表示できれば良いという場合は埋め込み形式の方が作業は簡単です。
ただし、HTMLメールを印刷する場合、埋め込み形式だとCSSがすべて削除されてしまうケースがあるため（Gmailなど）、印刷が想定される場合は「インライン形式」をおすすめします。
インライン形式は手間も時間もかかる方法なので、以下のようなサイトを活用してできる限り効率を高めましょう。
参考：CSS Inliner Tool | Email Design Reference
手順4. テスト送信し、問題ないかどうかチェックする
一通りコーディングを終えたら、テスト用のメールアドレスあてにHTMLメールを送信して、表示がおかしくないかどうか確認しましょう。
デバイスごとだけでなく、メーラー（Gmail、Outlook、Yahooなど）ごとのチェックも行ってください。主要なメーラーは以下の記事でも紹介していますので参考にしてください。
関連記事：本当に使いやすいおすすめのメールソフト7選！【フリーメール】
HTMLメール作成機能があるシステムで作る
HTMLメールでの配信を効率的に実施したい場合は、HTMLメール作成機能があるシステムを活用しましょう。
現代のマーケティングにおいては、視覚的に魅力的なコンテンツが重要となります。実際にテキストメールよりもHTMLメールの方が開封後のアクション率が高くなっています。
ここでは、技術的な専門知識がなくても簡単にHTMLメールを作成できる「HTMLメール作成エディタ」と「HTMLメールのテンプレート」について詳しく解説します。
HTMLメール作成エディタとは？
HTMLメール作成エディタとは、HTMLメールのデザインとコンテンツを作成するためのツールです。
技術的な知識がなくても、簡単にHTMLメールを作成できるようになるため、誰でも簡単におしゃれなHTMLメールを作ることができます。
例えば、契約数14年連続No.1のメール配信サービス「ブラストメール」であれば、ドラッグアンドドロップでメールの作成が可能です。
その他にも配配メールやMailsalesなどのサービスもHTMLメールエディタを提供しています。それぞれのサービスの特徴などは後述します。
HTMLメール作成エディタのメリット
HTMLメール作成エディタは、自身でHTMLメールを作成するよりも効率的に高品質なHTMLメールを作成することができます。
- HTMLメールが簡単に作れる
- HTMLメールを素早く作れる
- テンプレートを活用できる
非技術者でも使いやすく、メールのカスタマイズが容易であるため、多くの企業が活用しています。
その他にも、HTMLメール作成エディタを利用することにより、デザインの一貫性、時間の節約、エラーの減少などが実現できます。
これにより、メールマーケティングの効率と効果を高めることができるのです。
HTMLメールのテンプレートを使えばより簡単に
HTMLメールのテンプレートを活用することで、さらに効率よくメールを作成することができます。
テンプレートの使用は、デザイン作成のプロセスをさらに簡略化し、高品質なメールを迅速に作成し配信するのに役立ちます。
また、デザインの一貫性を保ちつつ、ブランドのイメージに合わせてカスタマイズが可能です。これにより、HTMLメール作成にかかる手間と時間が大幅に削減されます。
上記で紹介したブラストメールでは以下のようなテンプレートが合計30種以上も用意されています。
自由にカスタマイズ可能なレイアウトも提供されているので、自由度が高く自身の目的を達成するためのオリジナルテンプレートを作成することができます。
HTMLメールをカスタマイズして作成する場合は以下の4つがポイントとなります。
- ロゴ画像
- 背景色や文字色
- CTAボタンの色
- SNSへの誘導
また、テンプレートを活用することで重要なことは一貫性を持たせることです。
例えば、色をたくさん使いカラフルなメールにしてしまうと読者がブランドイメージを感じることができずチープなメールになってしまいます。
特にBtoBビジネスにおいて、メルマガは短期の成果だけでなく中長期で読者を育てるナーチャリングの側面もあります。
一貫性を持ったうえで有益な情報を提供し読者から信頼を得ることで成果につながっていくのです。
HTMLメールのテンプレートについては以下の記事でより詳しく解説しています。テンプレートを使ってみたい方は併せてご覧ください。
関連記事：【無料で使える】HTMLメールのテンプレートおすすめ10選
HTMLメールの作成・配信におすすめのメール配信システム
自分でHTMLメールを作る方法も解説しましたが、正直なところ、メール配信システムで作る方法が簡単で時間もかからないのでおすすめです。
実際、HTMLメールを自らコーディングして作る方法は、手間がかかりすぎるため主流ではありません。HTMLメールは通常のWeb開発とは大きくルールが異なり、経験者でも時間がかかる作業となります。
また、メール配信システムを導入すれば、メール配信の効果測定が行えたりセグメント配信が行えたりと、HTMLメールにとどまらないメリットを得られます。
ここではHTMLメールの作成・配信におすすめのメール配信システムを2サービスに厳選して紹介します。
シェア1位のメール配信システム「ブラストメール」
ブラストメールは14年連続顧客導入シェア1位のメール配信システムです。
ブラストメールの特徴は、シンプルな操作性と、コストパフォーマンスの高さです。様々な業種や官公庁の導入もあり、定番のメール配信システムと言えるでしょう。
・HTMLメール作成エディタはドラッグアンドドロップで簡単
・シンプルで簡単なサービスなので誰でも始めやすい
・テンプレートは30種以上と豊富
その他にもセグメント（ターゲット）配信や効果測定、HTMLメールエディタなど、基本的な機能は全て揃っており、最も安いプランであれば月額4,000円以下で導入できます。
シンプルかつ安いので、簡単かつ迅速にHTMLメールを配信したい方におすすめです。無料トライアルも可能となっているので、まずは試してみてはいかがでしょうか。
関連記事：【3分で分かる！】ブラストメールとは？ブラストメールのトライアル期間を使って徹底レビュー！
費用対効果が高いメールマーケティングサービス「配配メール」
配配メールは、集客に特化したツールを売りとしており、セグメント配信だけでなく、ステップメールも配信することができます。
そのため、メルマガやメールマーケティングなどのメールを使った集客に幅広く対応することが可能です。
HTMLメール作成エディタも搭載しているので、メールを使った集客をしている企業で、「HTMLメールを活用したメルマガもメールマーケティングも実施したい」という場合には心強いメール配信システムとなります。
関連記事：配配メールとは？公式サイトや口コミをまとめてご紹介します
HTMLメールの作り方まとめ
HTMLメールを作る方法は、「自作する」か「メール配信システムで作る」かの二通りが存在します。HTMLに関する知識がまったくないのであれば、メール配信システムで作る方法が確実におすすめです。
HTMLに関する知識があれば自作は選択肢のひとつとなりえますが、HTMLメールは一般的なWeb開発とはルールが異なり、一筋縄では作れません。
結論として、経験者もそうでない人でも、HTMLメールを作るならメール配信システムを使うのがおすすめです。HTMLメールをいずれ配信する予定があるなら、こちらの記事を参考にして、早い内にサービスの選定を進めていきましょう。
