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

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

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

HTMLメールの作成方法

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

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

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

[box type=”shadow”]<html>
<head>
<title>メルラボ通信 </title>
</head>
<body>
</body>
</html>[/box]

↑こういうやつです

装飾を施す

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

[box type=”shadow”]body {
font-size: 12px;
color: #ff0000;
}[/box]

↑こういうやつです

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

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

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

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

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

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

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

cssを利用した装飾には、大きく分けて
[box type=”note”]

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

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

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

という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>
    <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>

[divider]

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

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

The following two tabs change content below.

田中 靖祥

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

関連するおすすめ記事

お役立ち資料