まずはこれだけ!HTMLメールに関する技術的理解

  • このエントリーをはてなブックマークに追加

スマートデバイスの普及により、今や一般的となったHTMLメール。BtoCの企業を中心に、メルマガなどでも積極的に利用されています。
様々なツールの登場やテンプレートの充実によって、HTMLメールの作成もどんどん手軽になってきていますが、実際に「HTMLメールの中身がどうなっているのか」についてはわからないという担当者も多いのではないでしょうか?
エディタやツールで便利に作成できるのはもちろん良いことなのですが、何か問題が起きた時にあたふたしないようにするためにも、HTMLメールに関する最低限の知識はおさえておかれることをおすすめします。

そして、HTMLメールのメリットや作り方ついても解説しています。あなたのメルマガづくりに、ぜひお役立てください。

HTMLメールの作成方法

HTMLメールの作成は、大きく2つの側面で行います。
1つ目が「文章や画像などの構造を作成する(マークアップ)」という側面で、2つ目が「装飾を施す(スタイリング)」という側面です。

基本的には、この2つの作業によってHTMLメールは作成されます。以下にシンプルな例を挙げていますので、それぞれの特徴を確認してみましょう。

文章や画像などの構造を作成する

まず1つ目ですが、HTMLメールの骨格を作り、そこに文章や画像を入れ込んでいく、というものです。
具体的には、HTMLタグと呼ばれる目印によってメールを構造化していく作業となります。

<html>
<head>
<title>メルラボ通信 </title>
</head>
<body>
</body>
</html>

↑こういうやつです

装飾を施す

2つ目の装飾(スタイリング)ですが、これは構造化したHTMLメールに対して、サイズや色など、装飾のための指示を与えていくことを指します。
具体的には、cssという仕組みに則って装飾のための設定情報を記述していく作業となります。

body {
font-size: 12px;
color: #ff0000;
}

↑こういうやつです

基本的には、この2つの作業によってHTMLメールは作成されます。
このように見ると、通常のHTMLページの作成とあまり変わらないように思えますが、HTMLメールならではの注意点があります。

関連記事:BtoBのメルマガ担当者必見!テキストメールで使いたい装飾まとめ~本文編<2>~

メーラーによってできることが変わる

webブラウザに比べ、メーラー(メールソフト、メールクライアント)では解釈できるタグやスタイル設定が大きく制限されます。そのため、「メーラーで解釈可能なものにどんなものがあるのか?」ということをざっくりと理解しておく必要があります。
更に、実はOutlookやGmailなどのメーラー間でも解釈に差があるため、その部分についても認識をしておく必要があります。
そこで、まずは以下の2つの原則について覚えておいていただければと思います。

1.HTMLメールの構造を作る際には、「テーブルレイアウト」

web制作に馴染みのない方にとっては「?」という感じだと思いますが、「テーブルレイアウト」という方法は現代のweb制作においては”過去の手法”と言われています。
<table>という、表を作成するためのタグを使って構造を作成する方法なのですが、web制作の現場ではあまり使われなくなったこの手法も、HTMLメールの作成においてはまだまだ現役です。
↓具体的なことは、以下のページが分かりやすいかと思います↓

テーブルレイアウトとフルCSSレイアウトの違い

2.装飾をする際には、「インラインスタイル」

cssを利用した装飾には、大きく分けて

ⅰ.インラインスタイル
HTMLタグに直接スタイル情報を記述する方法。

ⅱ.内部(埋め込み)スタイルシート
HTMLの<head>というセクションの中でスタイル情報を記述する方法。

ⅲ.外部スタイルシート
スタイル情報を記述した別の専用ファイルを用意し、HTML内で読み込む方法。

という3つの方法があります。
このうち「内部(埋め込み)スタイルシート」と「外部スタイルシート」は、メーラーによって読み込めない可能性がありますので、HTMLメールの作成においては最も安全な「インラインスタイル」を利用します。
現代のweb制作では「外部スタイルシート」の利用が主流となっていますので、装飾に関してもweb制作とHTMLメール制作で大きな違いがありますね。
↓具体的なことは、以下のページが分かりやすいかと思います↓

スタイルシートの設定 * スタイルシートリファレンス

まずはこれだけ覚えておこう

では原則をおさえたところで、続いて具体的なHTMLタグやスタイル設定で、HTMLメール作成において最低限知っておきたいものを紹介いたします。

HTMLタグ編

<table>
テーブル(表)の作成に利用するタグです。<table>タグ内で<tr>、<td>などのタグを用いて構造を作成していきます。

<tr>
Table Rowの略で、テーブル内の1行を表します。<tr>内で<td>を使ってデータを定義します。

<td>
Table Dataの略で、<tr>で定義した行の中に表示するデータを記述します。

<p>
Paragraphの略で、一つの段落であることを表します。メールの文章などは<p>タグを使用して記述します。

<img>
Imageの略で、画像を表示する際に使用します。メール内で画像を利用する際には、このタグを使って記述します。

<a>
Anchorの略で、リンクを設定する際に使用します。<img>タグと組み合わせて、画像にリンクを設定することも可能です。

<br>
Breakの略で、改行を意味します。空白行を入れたい場合にも<br>を利用します。

なお<br>以外のタグでは、終了タグと言われる「このタグはここまでですよ」という宣言が必要となりますのでご注意ください。具体的には、各タグの文字列の先頭にスラッシュを入れる形となります(</table>など)。

スタイル設定編

cellpadding
<table>タグ内で利用します。テーブルのセル内の余白の大きさを指定します。HTMLメールの場合は0を指定します。

cellspacing
<table>タグ内で利用します。テーブルのセル同士の間隔を指定します。HTMLメールの場合は0を指定します。

border
<table>タグ内で利用します。テーブルの枠線の太さを指定します。HTMLメールの場合は0を指定します。

style
各タグ内で利用します。スタイルについての記述を行うことができます。

font-size
style内で利用します。文字通り、フォントの大きさを指定します。

font-weight
style内で利用します。文字の太さを指定します。

color
style内で利用します。文字色を指定します。

厳密には、cellpadding~borderまではCSSのスタイル設定ではありませんが、HTMLメール内の装飾という点で並列で紹介させていただきました。
詳細な設定方法やその他のタグやスタイルについては、以下のサイトなどを参考にしてみてください。

HTMLタグリファレンス(ABC順)

スタイルシートリファレンス(ABC順)

HTMLメルマガのメリットや注意点

メルマガをHTMLで配信することには、どのようなメリットがあるのでしょうか。作成するときに注意しておきたいことも、併せて確認していきましょう。

HTMLメルマガのメリット

メルマガ配信は、従来はテキストメールが主流でしたが、作成ツールの進化に伴い、徐々にHTML形式の割合が増えてきています。

HTML形式であれば、フォントの色や大きさなども調整できるため、重要ポイントも伝わりやすくなります。画像や動画も挿入できるため、シンプルかつ十分な情報量を盛り込めるのです。

ビジュアル的要素が充実すると内容の訴求力も高まります。実際に、メルマガを読まれる中でのクリック率もテキストメールより高くなるようです。

また、HTMLメールの場合、開封やクリックの状況が計測できることも、改善の可能性を広げる大きなメリットといえます。

関連記事:【担当者必見】メルマガの開封率を倍増させるタイトル(件名)の作り方!

注意ポイント

ただし、HTMLメールで配信するメルマガでは、注意しておきたいこともあります。
まず、HTMLの知識が必要になることです。そして、テキストメールに比べてメール容量が大きくなります。現在はドラッグ&ドロップで簡単に作れるものもありますが、その際のHTMLコード量はさらに大きくなるでしょう。

また、受け取り手のメーラーがHTML対応でない場合もあります。意図した通り(作成した通り)に表示されなかったり、本来は裏側にあるべきHTMLのコードなど構造が見えてしまったりするのです。

メール作成、メルマガ配信の際には、これらの点に考慮しながら、受け取り手に合わせてメール形式を調整できるのが理想でしょう。

HTMLメールサンプル

最後に、紹介したタグを使ったHTMLメールのサンプルをお見せしたいと思います。

HTMLメールサンプル

かなりシンプルな見た目ではありますが、使われているタグはほぼ紹介したもののみとなっています。

↓コード↓

<html>
    <head>
        <title>HTMLメールサンプル</title>
    </head>
    <body>
      <table cellpadding="0" cellspacing="0" border="0" width="600px">
      <tr>
      <td bgcolor="#1757b9">
        <table cellpadding="0" cellspacing="0" border="0" width="580px" style="margin-left:10px;margin-right:10px">
          <tr>
            <td style="font-size:32px;font-weight:bold;color:#1757b9;padding-left:5px" bgcolor="#ffffff">メルラボ通信</td>
            <br>
          </tr>
          <tr>
            <td bgcolor="#ffffff">
              <img src="//mailmarketinglab.jp/word-dir/wordpress/wp-content/uploads/2013/10/161864712-660x330.jpg" width="570px" style="padding-left:5px;padding-right:5px">
              <br>
            </td>
          </tr>
          <tr>
            <td bgcolor="#ffffff">
              <p style="font-size:14px;padding-left:5px">
                こんにちは、メルラボ編集部です。<br><br>
                このメールはサンプルです。<br>
                このメールはサンプルです。<br>
                このメールはサンプルです。<br><br>
                ↓ここをクリック!↓<br>
                <a href="//mailmarketinglab.jp/">サンプルリンク</a>
              </p>
              <br>
            </td>
          </tr>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" width="580px" style="margin-left:10px;margin-right:10px">
          <tr>
            <td bgcolor="#ffffff" width="49%">
              <p style="color:#ff0000;font-weight:bold;padding-left:5px">注目情報1</p>
              <img src="//mailmarketinglab.jp/word-dir/wordpress/wp-content/uploads/2014/05/478961853-660x330.jpg" width="270px" style="padding-left:10px;padding-right:10px">
              <br>
              <br>
              <p style="font-size:12px;padding-left:5px">注目情報その1です</p>
              <br>
            </td>
            <td bgcolor="#ffffff" width="49%">
              <p style="color:#ff0000;font-weight:bold;padding-left:5px">注目情報2</p>
              <img src="//mailmarketinglab.jp/word-dir/wordpress/wp-content/uploads/2014/04/152955834-660x330.jpg" width="270px" style="padding-left:10px;padding-right:10px">
              <br>
              <br>
              <p style="font-size:12px;padding-left:5px">注目情報その2です</p>
              <br>
            </td>
          </tr>
        </table>
      </td>
      </tr>
      <tr>
      <td bgcolor="#1757b9" align="right">
        <p style="font-size:11px;color:#ffffff;padding-right:5px">
          <br>
          メルラボ編集部<br>
          発行元住所<br>
          発行元電話番号<br>
          発行元メールアドレス<br>
          配信解除は<a href="//mailmarketinglab.jp/">こちら</a>から
          <br>
      </td>
      </tr>
      </table>
    </body>
</html>

今回は「まずはこれだけ!」と題して、HTMLメールの中身について最低限知っておきたい内容を解説いたしました。
冒頭でもお伝えした通り、細かな調整や問題発生時の対処のためにも、最低限の技術的な理解はしておきたいところです。
HTMLコード、となると拒絶反応を示してしまう方も多いかとは思いますが、必要最小限のレベルであれば思っている程「理解不能」なものでもありませんので、ぜひこの機会に理解を深めていただければと思います!(かくいう筆者も専門家ではありません)

関連記事:無料HTMLエディタ「BEE free」使ってみた《前編》

The following two tabs change content below.

田中 靖祥

Mail Marketing Lab.(メルラボ)のエディター兼ライター。エンジニア職を経て現在は法人向けクラウドサービスのマーケティングを担当。下世話な話が大好き。
  • このエントリーをはてなブックマークに追加

関連するおすすめ記事

お役立ち資料