HTMLメールを作成するときに使えるコードのテンプレート例

HTML2020.1.8

毎年、クライアントさん向けに年賀状を送っているのですが、今年からHTMLメールでのご挨拶させていただくことになりました。以前でも仕事でHTMLメールは少しだけ扱った経験があるのですが、今回本格的に1から作成することになったのでその時のポイントなどをまとめておきたいと思います。 HTMLメールはその名の通り、メール本文がHTMLで構成されているメールのことで、画像をレイアウトしたりスタイルなどを指定することでリッチな見た目にすることができ、マーケティングなどに活用することができます。ただし、ブラウザではなくメーラーでHTMLを見ることになるので、ウェブページを作成する場合と少し勝手が異なってきます。HTMLメールに適した仕様で作成しないと、正しく表示されなかったり、レイアウトが崩れることがあるので注意が必要です。

HTMLメール作成で気をつけるポイント

HTMLメールを作成するにあたり注意するべきポイントはいくつかありますが、特に重要となるのは下記の項目になるのではないでしょうか。 ・DOCTYPE宣言で「HTML4 Transitional」もしくは「XHTML 1.0 Transitional」を指定 ・「tableタグ」を使ったテーブルレイアウトで構築 ・スタイルは基本的にタグが持つ属性で指定し、合わせて可能な限りインライン形式でも指定 ・テキストの装飾には「fontタグ」を使用 ・文字エンコーディングは「ISO-2022-JP」を指定 ・レスポンシブでスマホでの表示に耐えれるよう設計 ・webページとして同じ内容のものをサーバー上に用意 まず大きく上げられる特徴としては、最新の技術が使えないため、レガシーな書き方でコーディングする必要があるということです。そして、レスポンシブに対応させることと、メーラーで見れない場合に回避策としてwebページへの導線を残してあげる点になります。 HTMLメールに使えるコードサンプルでは実際にHTMLメールを作成する時のコード例を見ていきます。基本的には先ほどのポイントに合わせた仕様になるようコーディングを行なっていきます。【HTML】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-2022-jp" />
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="content-language" content="ja" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
   @media only screen and (max-width: 600px) {
    table {
     width: 100% !important;
    }
    img {
     max-width: 100%;
     height: auto;
    }
   }
  </style>
 </head>
 <body style="margin: 0; padding: 0; width: 100%; height: 100%;">
  <!-- ラッパー要素となるtable -->
  <table
   bgcolor="red"
   width="100%"
   border="0"
   valign="top"
   cellpadding="0"
   cellspacing="0"
   style="width: 100%; background-color: red; border-spacing: 0; border-collapse: collapse;"
  >
   <tr>
    <td
     align="right"
     bgcolor="white"
     style="text-align: right; background-color: white;"
    >
     正しく表示されない場合は<a href="https://example.com/mail.html" target="_blank">こちらをクリック</a>してください
    </td>
   </tr>
   <tr>
    <td>
     <!-- コンテンツ要素となるtable -->
     <table
      bgcolor="white"
      width="600"
      border="0"
      valign="top"
      cellpadding="0"
      cellspacing="0"
      style="width: 600px; background-color: white; border-spacing: 0; border-collapse: collapse; margin: 0 auto;"
     >
      <tr>
       <td align="center" style="padding: 0; text-align: center;">
        <!-- レイアウトを構成するtable -->
        <table
         width="100%"
         border="0"
         valign="top"
         cellpadding="0"
         cellspacing="0"
         style="width: 100%; border-spacing: 0; border-collapse: collapse;"
        >

         〜 ここにHTMLメールのコンテンツが入ります 〜

        </table>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </body>
</html>

10年以上前はこのようなtableタグを使ったレイアウトが主流だったので、とても懐かしいですよね。現代的なコーディングに慣れているとかなり違和感を感じますが、、ここでポイントとなるのはtableタグを3つ入れ子になる構成にすることです。一番外側のテーブルをラッパー要素として、2番目のテーブルをコンテンツ要素として中央寄せになるように、もっとも内側のテーブルをコンテンツのレイアウトに使うようにしています。そして2番目の真ん中にあるテーブル幅は600pxに指定しておくと、各種メーラーの環境やモバイル対応やバランスがいいのではないでしょうか。一番内側のテーブルはそのままコンテンツのレイアウトを構成していく形になります。ここでもいくつか注意するべきポイントがあるのでまずはコードを見ていきます。【HTML】※一部省略

<tr>
 <td
  align="center"
  style="text-align: center;"
 >
  <font
   size="2"
   color="blue"
   face="MS Pゴシック"
   style="font-size: 18px; color: blue; font-family: MS Pゴシック;"
  >
   HTMLメールのテキストです
  </font>
  <br />
  <br />
  <img
   src="https://example.com/img/sample.jpg"
   alt="イメージ画像" 
   width="100%"
   style="width: 100%; height: auto;"
  />
 </td>
</tr>

スタイルについてはできるだけ属性値で指定しておき、合わせてスタイル属性でCSSを追記しておきます。またテキストの装飾に関しては「span」「div」「p」タグなどは用いず、「font」タグを使います。このfontタグでは、文字サイズ、文字色、書体が属性で指定できます。余白などは、「margin」「padding」で指定するわけではなく、「br」タグで調整するようにしておきます。そして画像もアップロード先サーバーの絶対指定でURLを入れておきます。

正しく表示されない場合にWebページを用意

メーラーはかなりの種類が存在し、それぞれHTMLの解釈も異なる場合があるため、どうしてもカバーできないところもあるかと思います。そんな場合を想定して、ウェブページとしてブラウザでも閲覧できるようしておくとユーザービリティ的にも親切になります。上記のサンプルでは、指定のHTMLにアクセスできるリンクを設置しており、HTMLメール側の対応としてはこのような形になります。そして、ウェブページ側のHTMLは基本的に表示されればOKですので、同じレイアウトになるようモダンなコーディングで作成するのですが、メールのHTMLと異なり、グーグルの検索エンジンにインデックスされないようにするのと、タイトルタグを入れておくと良いですね。【HTML】※一部省略

<head>
 .......
 <meta name="robots" content="noindex, nofollow" />
 <title>HTMLメールのタイトル</title>
 .......
</head>

ちなみに、今回紹介しているテンプレートでは、「outlook office2019」「thunderbird」「gmail（ブラウザ・モバイルアプリ）」「iOS mail.app」の環境下にて問題なく表示されているのが確認できましたが、古いメーラーではうまく表示されないケースもありますので注意が必要です。また、画像などでファイルサイズが大きくなりすぎると送信できなかったりするので、圧縮するなどの対応もしておくと良いですね。もちろんalt属性に代替テキストを指定しておくことも必須です。

今回はHTMLメールのコーディングについてポイントをまとめてみました。本格的に触る機会がこれまでなかったのですが、使い方によってはいろんな可能性を秘めているので、これをきっかけに積極的に使っていきたいと思いました。皆さんもぜひ試してみてください。