0%

Programmingプログラミングナレッジ

Posted:2020.01.08

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

毎年、クライアントさん向けに年賀状を送っているのですが、今年から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メールのコーディングについてポイントをまとめてみました。本格的に触る機会がこれまでなかったのですが、使い方によってはいろんな可能性を秘めているので、これをきっかけに積極的に使っていきたいと思いました。皆さんもぜひ試してみてください。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】