HTMLメールの基本的な作り方は？特徴・作成時の注意点など
メルマガを使ったマーケティングでよく活用されるHTMLメール。
このHTMLメールの基本的な作り方からテンプレートの作り方、またHTMLメールを作成する際の注意点をご紹介します。
あわせて、ノーコードで初めての方でも簡単に「HTMLメール」を作成できるメール配信サービス「アララ メッセージ」を紹介します。
これからメルマガの導入を検討している方はもちろん、すでに「HTMLメール」を使ったメルマガを実施している方もぜひご覧ください。
目次[非表示]
- 1.HTMLメールとは？作成前に知っておきたい基礎知識
- 1.1.HTMLメールの特徴
- 1.2.テキストメールとの違い
- 1.3.HTMLメールの閲覧環境は様々
- 2.HTMLメールの基本の作り方
- 2.1.手順①DOCTYPE宣言をする
- 2.2.手順②メールの中身をマークアップする
- 2.3.手順③スタイリングする
- 2.4.手順④テスト送信
- 2.5.手順⑤エラーがあれば修正する
- 3.HTMLメールのテンプレートの作り方
- 3.1.手順①DOCTYPE宣言をする
- 3.2.手順②文字コードの設定
- 3.3.手順③枠組みを作る
- 3.4.手順④ヘッダー・フッターを作る
- 3.5.手順⑤大見出しの追加
- 3.6.手順⑥本文を入力
- 3.7.手順⑦リンク先ボタンの設置
- 3.8.手順⑧画像の挿入
- 4.HTMLメールを作成するときの注意点3つ
- 5.もっと簡単にHTMLメールを作成・配信したいなら？
- 6.効率的にメール配信を行うなら、アララメッセージ
- 7.HTMLメールを作ろう
HTMLメールとは？作成前に知っておきたい基礎知識
HTMLメールは、HTML（Webページを作るための言語）で作られた電子メールのことをいいます。
その特徴を解説します。
HTMLメールの特徴
HTMLメールの最大の特徴は、メール本文に画像やボタンを入れられることです。また、文字のフォントカラーや大きさも自由に変えることができます。
具体的なイメージや、ビジュアルで訴求できるため、メルマガやプロモーションといったマーケティングの場で活用されています。
そのほかの特徴として、HTMLメールでは、読者がメールを開いたかを確認する「開封数（率）」を計測できます。
先にもお伝えした通り、HTMLメールではメール本文内に画像を含めることができるので、開封確認用の画像データを付けて送ることで、開封したかどうかを識別することができます。
この開封数とメールを配信した件数から開封率を算出し、効果検証に活用できます。
リンクやパラメータなどをメール本文に入れられるのも、HTMLメールの特徴といえるでしょう。
テキストメールとの違い
HTMLメールとテキストメールの違いはどのような点にあるのでしょうか。
テキストメールとは文字だけで構成されたメールのことで、一般的なメールの形式です。
一方HTMLメールとは、画像やボタン、文字のフォントカラー、大きさを自由にアレンジできるHTML言語で作成したメールのことをいいます。テキストメールと比べ、訴求力の高いメールといえます。
両者の大きな違いは、文字以外の要素が表示できるかどうかです。
またメールの容量は、テキストメールと比べると画像などを含むHTMLメールのほうが大きくなります。
HTMLメールの閲覧環境は様々
スマートフォンが浸透したことにより、HTMLメールは、あらゆる環境で確認することが可能となりました。
さまざまなメールクライアント、デバイス、それらのバージョンの組み合わせにより、閲覧環境は100万種類以上あると言われています。
これだけ多くの閲覧環境があるため、どんな環境でも閲覧できるHTMLメールを作るのは簡単ではありません。
また、HTMLメールを利用する際は最新のCSS仕様、および一般的なHTMLが使用できない場合もあります。例えば、Outlookは画像に使用される「マージンタグ」がサポートされていない等です。
トラブルを防ぐために、あらかじめ複数の端末やメールクライアントに送信して、どのように表示されるか確認をおこないましょう。
HTMLメールの基本の作り方
ここからはHTMLメールの基本の作り方として、全体の構成を大まかに解説します。
テキストエディタを使い、HTMLタグを書いていきましょう。
手順①DOCTYPE宣言をする
最初に行うのは、ファイルの先端にDOCTYPE宣言を記述することです。DOCTYPE宣言は「文書型宣言」ともいいます。
HTMLにはさまざまなバージョンやルールがあるため、DOCTYPEの宣言を行い、「これから作成する文章がHTMLであること」や「HTMLのどのバージョンなのか」を明確にして、HTMLメールのベースを作ります。
なおHTMLのバージョンは、デザインが崩れにくく、レイアウトしやすい「HTML4.01」がおすすめです。
手順②メールの中身をマークアップする
HTMLメールのベースができたら、メールの中身をマークアップしていきましょう。
パソコン、モバイル、いずれの環境でも閲覧できるようにするなら、表組みのデータを表すための要素を使用してレイアウトを行う「テーブルレイアウト」を使用しましょう。
「テーブルレイアウト」でのマークアップ方法は以下の通りです。
<table border="0" width="100%" cellspacing="0" cellpadding="0"> |
手順③スタイリングする
続いて、メール内で共通して使用するフォントやCSSスタイルを指示するためのスタイリングをおこないます。
通常のWeb開発では、CSSは外部読み込みが一般的ですが、多くのメールクライアントではCSSの外部読み込みをサポートしていないため、「埋め込み形式」または「インライン形式」でスタイリングします。
「埋め込み形式」は、HTMLの<head>タグの項目内でCSSの情報を書き出すことでレイアウトを組みます。スマートフォンが浸透し、レスポンシブデザイン需要が増えたことで多く使われる形式です。
「インライン形式」は、CSSを各HTMLタグ内で直接指定する形式です。メールクライアント間での互換性があり安全な方法ではありますが、直接入力をしていくため、作成に時間がかかるデメリットがあります。
うまく機能せずコンテンツが表示されない問題も発生しやすいため、初心者には向いていない形式だと言われています。
どちらの形式でもスタイリングできますが、単にメールが表示できればいいという場合は、作業が楽な「埋め込み形式」を選びましょう。
HTMLメールを印刷することが想定される場合は「インライン形式」がおすすめです。
手順④テスト送信
ここまで作成が終わったら、テスト用のメールアドレスにHTMLメールを送信します。
正しく表示されるか、レイアウトは崩れていないかなどを確認しましょう。
テスト送信はGmail、Outlook、Yahoo！メールなどのメールクライアントごと、さらに複数のデバイスでの確認も行ってください。
手順⑤エラーがあれば修正する
手順④でメールが正しく表示されなかったり、レイアウトが崩れていたりするようなら修正を行いましょう。
HTMLメールのテンプレートの作り方
ここでは、実際にHTMLメールで使えるテンプレートの作り方を紹介します。
基本的なHTMLコードは次のとおりです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTMLのバージョンを書く//EN"> ・DOCTYPEを宣言する <html> <head> ・HTMLメールの基本情報を設定する ‐style type：文字コードの設定 ‐content-Type：メールの形式をレンダリングエンジンに伝える ‐viewport：コンテンツの表示領域宣言する <title>お得情報をお届け！春のキャンペーン</title> ・ページのタイトル </head> <body> ・本文の内容、コンテンツとしてユーザーに表示される部分 </body> </html> |
手順①DOCTYPE宣言をする
これから作成する文章がHTMLであることや、どのHTMLバージョンなのかをプログラムに伝えるため、DOCTYPE宣言を行います。
たとえば、HTMLのバージョンに「HTML4.01 Transitional」を使い、宣言する場合のコードは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
となります。
続けて、「端末の幅に合わせてコンテンツを表示する」コードを記述します。
「width=device-width, initial-scale=1.0」が、それを意味する部分です。
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> |
このコードを記述することで、スマートフォンなどで閲覧したとき、作成したメールが画面の端にしっかりと収まります。
手順②文字コードの設定
文字化けを防ぐために、文字コードの設定を行います。
metaタグ（ページに関する情報タグ）を使用し、<head>要素の中を、<style type="text/css" >と</style>で区切ります。
この区切りの中に「埋め込み形式」でCSSの情報を書いていきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
手順③枠組みを作る
メール全体の枠組みを作るために<body>要素を使用し、テーブルレイアウトを組み立てていきます。
タグの属性は、表やセルの幅を変える「width」、表の高さを変える「height」、要素内容の配置方向を設定する「align」、枠線の「border」などです。
加えて、さらに装飾したい箇所にCSSを記述します。
手順④ヘッダー・フッターを作る
メールの最上部に「ヘッダー」を、最下部に「フッター」を作ります。
テーブルを複製してエリアを表示させます。
<!--ヘッダー（フッター）エリア) --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="left"> ヘッダーまたはフッター情報を追加 </td> </tr> </table> |
手順⑤大見出しの追加
大見出しのテーブルを作り、大見出しを追加していきます。
「fontタグ」と「CSS」でフォントサイズ、フォントの色、大見出しのテキストを書きましょう。
<!-- 大見出し --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="center"> <font size="6" style="font-size: 26px; color:#333333; line-height:1.5;"> 大見出しを追加<br> 大見出しを追加 </font> </td> </tr> </table> |
手順⑥本文を入力
ここまで作成したら、テキストのテーブルを作り、メールの本文を入力していきます。
大見出し同様、「fontタグ」と「CSS」でフォントサイズ、フォントの色、行間、テキストを書きましょう。
<!-- テキストtable --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="left"> <font size="3" style="font-size:16px;color:#333333; line-height:1.5;">本文を入力・・・<br>本文を入力・・・<br></font> </td> </tr> </table> |
手順⑦リンク先ボタンの設置
メールからWebサイトに飛んでほしい場合は、リンク先ボタンを設置します。
TDタグのなかにボタン用のテーブルを書きましょう。
<!-- ボタンテーブル --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="left"> <!-- ボタンテーブル --> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"> <a target="_blank" href="#"> <font size="5" color="#ff0000">ボタンテキスト</font> </a> </td> </tr> </table> </td> </tr> </table> |
手順⑧画像の挿入
メルマガの訴求力を高め、印象を大きく左右するのが、画像の挿入です。
画像を挿入する際にはアイキャッチ画像テーブルを作成します。
<!-- アイキャッチ画像テーブル --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="left"> <img src="https://www.sample.co.jp/img/eyecatch.png" alt="アイキャッチ画像" style="width:100%;"> </td> </tr> </table |
なお、サーバー内にある画像は「絶対パス」で記述しなければ読み込めません。
絶対パスとは、「https://～」ではじまるアドレスでファイルの場所を示すものです。HTMLメールの画像は、サーバに置いた場所から読み込み、表示する仕組みです。
もし、画像がうまく表示されない場合は、絶対パスで記述されているか確認してください。
HTMLメールを作成するときの注意点3つ
HTMLメールを作成するときには、いくつか注意したいポイントがあります。以下3つのことに気をつけましょう。
注意点①スマートフォンでの閲覧を想定し、レスポンシブデザインにする
HTMLメールを、パソコンでもスマートフォンでも閲覧できるようにするためには、それぞれの横幅に注意する必要があります。
どちらのデバイスでも見やすくするために、レスポンシブデザインを使いましょう。
レスポンシブデザインとは、ユーザーが閲覧する際に使うデバイスの画面サイズに応じた表示を最適化するデザインのことです。
またフォントのサイズ、文字数も考慮すると読みやすくなります。フォントのサイズは15pt以上、テキスト1行に45文字以内がスマートフォンでも最適なサイズと文字量です。
注意点②ブラウザ表示の設定をしておく
メールが正しく表示されない場合を想定して、ブラウザ表示用のHTMLメール設定をしておくことをおすすめします。
ブラウザ表示の設定をしておけば、インターネット上でメール内容を閲覧してもらえます。
設定の仕方は、HTMLメール作成をしたファイルをブラウザにアップロードするだけと簡単です。
合わせてメール開封後の見やすい位置に「メールが正しく表示されない場合はこちら」などの文章と、リンクを貼るようにしてください。
注意点③Outlookメールでは専用の設定が必要
OutlookメールでHTMLメールを表示させると、テーブルレイアウト上に余計なスペースが入ってしまうことがあります。
このスペースが入らないようにするためには、Outlookメールだけに適用されるCSSを記述する必要があります。
以下のコードを用いて、余計なスペースが入る問題を回避しましょう。
<!--[if mso]> <style type="text/css"> /* Outlook専用のcss */ table,td { border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; } table tr td { line-height: 1.5; } </style> <![endif]--> |
もっと簡単にHTMLメールを作成・配信したいなら？
HTMLの知識が少ない方がHTMLメールを作成するのは、なかなか骨が折れる作業です。
しかしそんな方でも簡単にHTMLメールを作成でき、配信する方法があります。
それが「メール配信サービス」を利用することです。ここでは、メール配信サービスの活用をおすすめする理由を解説していきましょう。
メール配信サービスの活用がおすすめ
メール配信サービスはメルマガやお知らせ等を一度に多くの宛先に配信できるサービスです。
高速に、高い到達率を保ったまま配信ができるだけでなく、メール作成機能から効果測定機能まで備わっています。
メール配信サービスを活用すると、具体的には以下のようなメリットがあります。
- メールアドレスを手入力しなくてもよい
- 大量のメールを一斉配信できる
- HTMLメールが誰でも簡単に作成可能
- セグメント配信ができる
生産性の向上にもつながるメール配信サービスの導入を、ぜひ検討してみましょう。
効率的にメール配信を行うなら、アララメッセージ
「アララ メッセージ」は、到達率向上・自動化・効果測定で円滑なメールマーケティングを実現するメール配信システムです。
アララ メッセージの「HTML簡単モード」は、HTMLに関する知識やスキルがなくても誰でも簡単にHTMLメールを作成することができる機能です。画像や要素の入れ替えはドラッグ&ドロップで簡単にできるので、初心者でも安心です。
さらに、130種類以上のテンプレートが用意されているので、テンプレートを活用することで一から作る必要もありません。
「HTML簡単モード」以外にも、セグメント配信や効果測定、ステップメールまでマーケティングメールに必要な機能が揃って月額7,000円から利用できます。
国内の携帯キャリア各社やISP事業者が抱える配信ロジックに対応し、システムでの問題からメール配信のコツまで幅広くサポートします。
マーケティングご担当者様の工数削減に貢献する「アララ メッセージ」を、ぜひ検討してみてはいかがでしょうか。
HTMLメールを作ろう
いかがでしたでしょうか。
プログラミングコードを記述するとなるとハードルが高いように感じますが、全体の構造やテンプレートなどを使えば、初心者でもHTMLメールを簡単に作ることができます。
視覚的な訴求ができるHTMLメールを作ってみませんか。
関連コラム
