メールマーケティング

HTMLメールはどうやって作成するの?基本と特徴を徹底解説!【保存版】

 メルマガは、顧客の受信ボックスに直接訴求できるため、2018年においてもあらゆるマーケティング施策の中で、最も高いROI(投資対効果)を誇っています。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。

※今すぐHTMLメール作成が可能なソリューションをお探しの場合、WiLL MailのHTMLメールエディタをご利用ください。スマホ・マルチデバイス対応のHTMLメールを簡単に作成できる様々な機能を備えています。
くわしくはこちら

HTMLメールの特徴

 作成方法の説明の前に、あらかじめ知っておくべきHTMLメールの構造上の大きな特徴をいくつかご紹介します。

“標準的なHTMLメール”は存在しない

 世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが(※)、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。

 ※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。

HTMLメールを受け取る環境の組み合わせは100万以上存在する

 スマートフォンが浸透したことにより、あらゆる環境でHTMLメールを閲覧することが可能になりました。その結果、様々なメールクライアントとデバイス、それらのバージョンの掛け合わせでの閲覧が想定されるようになりました。その組み合わせのパターンは、100万種類以上あると言われています。つまりどんな環境でも間違いなく閲覧できるHTMLメールを作ることは不可能と言っても良いでしょう。

ウェブのHTMLとは全く違う

 通常のウェブ開発のような挙動をHTMLメールに期待することは避けた方が良いでしょう。既に記載したとおり標準的なサポートも存在しませんし、100万種類以上の閲覧環境が存在するうえ、divを使えないケースがあったり、マージンが完全にサポートされていないメールクライアント(主にOutlook)があったりするからです。一般的なHTMLや最新のCSSの仕様があまり役立たないということを認識しておくことも重要です。こうした細かい点を次の章からご紹介していきます。

HTMLメールの構造を理解しよう

 HTMLメールがウェブとは異なる特別な仕様であることはご理解いただけたでしょうか。ここからは作成方法と主な注意点についてご紹介します。シンプルなHTMLメールを想定してご紹介します。

1.DOCTYPEを指定する

 HTMLメール作成は、DOCTYPE宣言(文書型宣言)から始まります。DOCTYPE宣言とは、この文書がHTMLであることや、どのHTMLのバージョンか、HTMLタグとHTMLとCSSがどのルールに従った記述かをプログラムに知らせるコードです。

 文書間の不具合や不一致が一般的に少なくなると言われている点を考慮し、ここではXHTML 1.0 Transitionalを使用した記述をご紹介します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WiLL Mailで効率的にメルマガ配信する10のヒント</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

 続けて『head要素』について説明します。「title」タグは件名にあたります。またブラウザでメールを表示した際のタイトルにもなります。

 「Content-Type」タグは、テキストと特殊文字の処理方法をレンダリングエンジンに伝えるためのものです。

 「viewport」タグは、コンテンツの表示可能領域をデバイスの横幅に、また、初期拡大率を「等倍」に設定します。これを指定することで、スマートフォンなどのデバイスで閲覧した際にテキストと画像が画面の端に収まるようになります。

2.基本的にテーブルレイアウトで構成する

 HTMLメールは、基本的にtable要素で作成します。article要素やsection要素などは使用しない前提で作成する必要があります。なぜなら繰り返しになりますが、デスクトップ、モバイルなどあらゆる環境での閲覧を考慮するとテーブルレイアウトがベターな選択肢といえるからです。また、tableタグを組むときにcolspanやrowspan、どちらも適切にサポートされていないため、これらを使わずに組み立てる必要があります。

3.文章入力にも一般的なタグは使用しない方が良い

 h1,h2,h3などの見出しタグの使用もあまりお勧めできません。やはり標準的なサポートがないことがその理由です。従って文章を入力する際は、テキストブロックを独自のセルに配置し、そのセルにインライン方式を適用することが最善の策の一つと言えます。

4.CSSは埋め込み形式が一般的になりつつある

 リッチなHTMLメールには、CSS(カスケーディングスタイルシート)が含まれています。HTMLはメールのコンテンツとレイアウトを構成する役割を担い、CSSはコンテンツのスタイルや書式設定(リンクの色や見出しのフォントなど)をする役割を担います。

 このCSSを用いる場合、外部読み込み形式、埋め込み形式、インライン形式のいずれか3つの方法がありますが、2018年時点では埋め込み形式が最も一般的であり推奨される方法といえます。

埋め込み形式がなぜ最適なのか

 埋め込み形式とは、CSSをHTMLドキュメントのheadに配置する形式です。近年スマートフォンが浸透してレスポンシブ・デザイン需要が増えたことで人気が高まっている形式なのです。

 一部の電子メールクライアントは、タグ内の埋め込まれたCSSの大半を取り除いてしまいます。特にGmailが長い間この問題を抱えていましたが、2016年の秋にようやくサポートに対応しました。これにより、埋め込み形式が最適な状況がようやく整いました。

インライン形式とは

 インライン形式とは、HTMLに直接記述する形式です。このインライン形式が様々なメールクライアント間でのレンダリングの互換性を保証する最も安全な方法です。しかしインライン形式は、作成に時間がかかり、管理するのが難しい場合があるのが難点です。うまく機能せずコンテンツが表示されないといった問題も抱えています。

 なお、外部読み込み形式は、メールデザインの場合、多くのWebメールクライアントが外部スタイルシートへのリンクをブロックしてしまうため、採用するケースはあまり見受けられません。

5.マージン(行間)が正しく動作しないこともある

 マージンタグは、文章の行間を指定する機能を担っており、HTMLメールのレイアウト作成において大きな役割を果たします。ところが『Hotmail』や『Outlook』は2013年頃よりこのマージンタグのサポートを打ち切っています(もともと正しく動作していたわけでもないですが)。

 「Outlookで閲覧したメールの行間は、他のメールクライアントよりも広くなる」と割り切ったレイアウトも考慮することがこの問題への最適な解決方法のひとつともいえます。

6.フォントの一括指定プロパティなどは使えない

 サポートしているメールクライアントが少ないため、フォントサイズの一括指定プロパティ(例:style = “font:8px / 14px Arial、sans-serif;”など)の使用は避けた方が良いでしょう。

7.容量を大きくしすぎないように注意しよう

 HTMLメールはなるべく小さいサイズで送るようにしましょう。100kb(キロバイト)以内に収めるのが理想的です。Gmailの場合、102kb以上の大きさのメールを勝手にクリッピングしてしまいます。つまりそれ以上の大きさに該当するコンテンツを勝手に隠してしまうのです。

 また、容量が100kbを越えると到達率に悪影響があるとも言われていますので、詰め込みすぎず簡潔にわかりやすいコンテンツにするように心がけましょう。

関連ブログ:メルマガの到達率とは? 改善するための6つのポイント

HTMLメールの作成手順

 ここからはHTMLとCSSを使ってHTMLメールを作成する手順をご紹介します。エディタやテンプレートを使ってHTMLメールを作成する上でも、最低限の知識や構造は把握しておくと良いでしょう。

今回作成するHTMLメールの完成イメージ

 今回は、シンプルな1カラム(1列)レイアウトのHTMLメールを作成します。また、スマートフォンでの表示を考慮して、レスポンシブデザインにも対応させます。

完成イメージ画像

関連記事:レスポンシブHTMLメールとは?特徴や長所・短所を紹介

ベースとなるHTMLを記述する

 まずは、HTMLメールの大枠となるHTMLを記述します。コンテンツの幅は650ピクセル(table width=”650″)とします。

【ベースHTML】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title></title>
	<style type="text/css">
	
		<!-- ここに埋め込み形式のCSSタグを記述して行きます -->

	</style>
</head>
<body>
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"  class="base">
    <tr>
      <td>

          <!-- ここにコンテンツをHTMLタグで記述して行きます -->

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

 上記のHTMLをベースにして、中身のコンテンツ部分をHTMLとCSSを使って作成して行きます。

共通設定するCSSを記述する

 フォント、テーブル、画像など、HTMLメール内で共通設定したいCSSスタイルを<head>タグ内に埋め込み形式で記述します。

【設定するCSS】

/* フォントの設定 */
body {
	font-family: sans-serif;
	font-color: #333;
	text-align: center;
}
/* テーブルの設定 */
table, td {
	border-collapse: collapse;
	mso-table-lspace: 0;
	mso-table-rspace: 0;
}
/* 画像の設定 */
img {
  outline: none;
  border: none;
  text-decoration: none;
}
/* リンク画像の枠線を消す設定 */
a img {
  border: none;
}

 上記のCSSを先ほどのHTMLの<head>内に埋め込みます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title></title>
	<style type="text/css">
		body {font-family: sans-serif;font-color: #333;text-align: center;} /* フォントの設定 */
		table, td {border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;} /* テーブルの設定 */
		img {outline: none;border: none;text-decoration: none;} /* 画像の設定 */
		a img {border: none;} /* リンク画像の枠線を消す設定 */
	</style>
</head>
<body>
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"  class="base">
    <tr>
      <td>

          <!-- ここにコンテンツをHTMLタグで記述して行きます -->

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

スマートフォン表示用のCSSを記述する

 HTMLメールをスマートフォンで閲覧した時に、表示崩れを起こさないようにレスポンシブデザインに対応させます。CSSのメディアクエリという機能を使用して、PCとスマートフォンの表示を切り替えます。

【スマートフォン表示用CSS】

@media only screen and (max-width: 480px) {
        .base { 
        	width: 100% !important;
        	min-width: 100% !important;
        }
        td.responsive {
        	width: 100% !important;
        	padding-left: 10px !important;
        	padding-right: 10px !important;
        	box-sizing: border-box !important;
        	display: block !important;
        }
        img {
        	width: 100% !important;
        	max-width: 100% !important;
        }
}

 上記のCSSを先ほどのHTMLに追記します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title></title>
	<style type="text/css">
		body {font-family: sans-serif;font-color: #333;text-align: center;} /* フォントの設定 */
		table, td {border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;} /* テーブルの設定 */
		img {outline: none;border: none;text-decoration: none;} /* 画像の設定 */
		a img {border: none;} /* リンク画像の枠線を消す設定 */
		@media only screen and (max-width: 480px) {
      	.base {width: 100% !important;min-width: 100% !important;}
       	td.responsive {width: 100% !important;padding-left: 10px !important;padding-right: 10px !important;box-sizing: border-box !important;display: block !important;}
        img {width: 100% !important;max-width: 100% !important;}
		} /* スマートフォン表示の設定 */
	</style>
</head>
<body>
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"  class="base">
    <tr>
      <td>

          <!-- ここにコンテンツをHTMLタグで記述して行きます -->

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

 以上で基本的なCSSの設定は完了です。文字のサイズや色の設定は、インライン形式でタグに直接CSSを記述して行きます。

コンテンツ部分をHTMLで記述する

 次にテキストや画像などのコンテンツ部分をHTMLで記述して行きます。

コンテンツ作成用にコンポーネントを作成する

 [大見出し]、[中見出し]、[本文]、[画像]など、HTMLメールを構成する要素は、コンテンツ内に何度も登場します。あらかじめ各要素のHTMLタグをコンポーネント化しておくと、作業効率がアップするほか、デザインに統一感が生まれます。

※前述したとおり、h1,h2,h3などの見出しタグは機能しない場合があります。見出しや本文テキストのスタイルについては、<font>タグ内にインライン形式のCSSを記述して調整します。また、CSS非対応のメーラーやデバイス対策として、<font>タグによるスタイル指定も併せて追加しておきます。

 以下のように、HTMLタグをコンポーネント単位にまとめて行きます。

【大見出し】

<!-- 大見出し -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><font size="5" color="#faae0a" style="font-size: 24px;line-height: 160%;color: #faae0a;font-weight: bold;"><b>大見出し</b></font></td>
		</tr>
	</tbody>
</table>
<!-- /大見出し -->

【中見出し】

<!-- 中見出し -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><font size="4" color="#333333" style="font-size: 20px;line-height: 160%;color: #333333;font-weight: bold;"><b>中見出し</b></font></td>
		</tr>
	</tbody>
</table>
<!-- /中見出し -->

【本文テキスト】

<!-- 本文テキスト -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">本文テキスト</font></td>
		</tr>
	</tbody>
</table>
<!-- /本文テキスト -->

【リンクテキスト】

<!-- リンクテキスト -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><font size="3" style="font-size: 16px;line-height: 200%;color: #333333;"><a href="リンク先URL" style="text-decoration: underline;color: #0090ff;">リンクテキスト</a></font></td>
		</tr>
	</tbody>
</table>
<!-- /リンクテキスト -->

【画像】

<!-- 画像 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><img src="画像URL"  alt="代替テキスト" /></td>
		</tr>
	</tbody>
</table>
<!-- /画像 -->

【リンク画像】

<!-- リンク画像 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><a href="リンク先URL"><img src="画像URL" alt="代替テキスト" /></a></td>
		</tr>
	</tbody>
</table>
<!-- /リンク画像 -->

 コンポーネントはベースのHTMLにコピー&ペーストして利用します。テキストやURLを任意の内容に編集し、コンポーネントをブロック状に積み上げることでHTMLメールを作成して行きます。

【コンポーネントを使ってコンテンツ部分を追加したHTML】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title></title>
	<style type="text/css">
		body {font-family: sans-serif;font-color: #333;text-align: center;} /* フォントの設定 */
		table, td {border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;} /* テーブルの設定 */
		img {outline: none;border: none;text-decoration: none;} /* 画像の設定 */
		a img {border: none;} /* リンク画像の枠線を消す設定 */
		@media only screen and (max-width: 480px) {
      	.base {width: 100% !important;min-width: 100% !important;}
       	td.responsive {width: 100% !important;padding-left: 10px !important;padding-right: 10px !important;box-sizing: border-box !important;display: block !important;}
        img {width: 100% !important;max-width: 100% !important;}
		} /* スマートフォン表示の設定 */
	</style>
</head>
<body>
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"  class="base">
    <tr>
      <td>
        <!-- リンク画像 -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><a href="http://www.sapana.co.jp/"><img src="https://willcloud.jp/img/mail-logo.png" alt="Sapana Homes" /></a></td>
                </tr>
            </tbody>
        </table>
        <!-- /リンク画像 -->
        <!-- 画像 -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><img src="https://willcloud.jp/img/mail-yymmdd-01.png"  alt="" /></td>
                </tr>
            </tbody>
        </table>
        <!-- /画像 -->
        <!-- 大見出し -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="5" color="#faae0a" style="font-size: 24px;line-height: 160%;color: #faae0a;font-weight: bold;"><b>新築&リフォーム相談会<br />「建築家とつくるこだわりの家」</b></font></td>
                </tr>
            </tbody>
        </table>
        <!-- /大見出し -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">建築家に気軽に相談できる「無料相談会」を開催します。<br />場所:サパナフォーラム9F<br />日時:12月1日(土)2日(日)13時〜18時</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->
        <!-- リンク画像 -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><a href="http://www.sapana.co.jp/entry.html"><img src="https://willcloud.jp/img/mail-yymmdd-02.png" alt="お申し込みはこちら" /></a></td>
                </tr>
            </tbody>
        </table>
        <!-- /リンク画像 -->
        <!-- 中見出し -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="4" color="#333333" style="font-size: 20px;line-height: 160%;color: #333333;font-weight: bold;"><b>[建築家のご紹介]</b></font></td>
                </tr>
            </tbody>
        </table>
        <!-- /中見出し -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">・山田太郎/山田一級建築士事務所<br />・鈴木花子/鈴木一級建築士事務所 他10名</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">本メールは、会員登録されたお客様にお送りしております。<br />配信停止をご希望の方は、以下のリンクからお手続きください。</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->
        <!-- リンクテキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" style="font-size: 16px;line-height: 200%;color: #333333;"><a href="http://www.sapana.co.jp/mail-stop.html" style="text-decoration: underline;color: #0090ff;">メルマガの配信停止はこちら>></a></font></td>
                </tr>
            </tbody>
        </table>
        <!-- /リンクテキスト -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">Copyright (c) SAPANA CO., LTD. All Rights Reserved.</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->        
      </td>
    </tr>
  </table>
</body>
</html>

【ここまで作成したHTMLのプレビュー】

完成イメージ画像

ヘッダー・フッターエリアのHTMLを調整する

 最後に、ヘッダーエリア(ロゴ部分)とフッターエリア(Copyright部分)に紺色の背景色(#000659)をつけて、デザインを整えて行きます。

 背景色を変えたいヘッダーとフッターの<td>内に、インライン形式のCSS<style=”background-color: #000659;”>を埋め込みます。また、CSS非対応のメーラーやデバイス対策として、<table>タグ内にも<bgcolor=”#000659″>を併せて追加しておきます。

【ヘッダーエリアのHTML】

<!-- リンク画像 -->
<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#000659">
	<tbody>
		<tr>
			<td class="responsive" valign="top" style="background-color: #000659;"><a href="http://www.sapana.co.jp/"><img src="https://willcloud.jp/img/mail-logo.png" alt="Sapana Homes" /></a></td>
		</tr>
	</tbody>
</table>
<!-- /リンク画像 -->

【フッターエリアのHTML】

<!-- 本文テキスト -->
<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#000659">
	<tbody>
		<tr>
			<td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;background-color: #000659;">Copyright (c) SAPANA CO., LTD. All Rights Reserved.</td>
		</tr>
	</tbody>
</table>
<!-- /本文テキスト -->      

 背景色の変更にともない、文字色を黒から白(#ffffff)に変更します。

 文字色を変えたいフッターの<td>内に、インライン形式のCSS<style=”color: #ffffff;”>と、<font>タグにも<color=”#ffffff”>を追加します。

【文字色を白に変更したフッターエリアのHTML】

<!-- 本文テキスト -->
<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#000659">
	<tbody>
		<tr>
			<td class="responsive" valign="top" style="background-color: #000659;"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color:#ffffff;"><font size="3" color="#ffffff">Copyright (c) SAPANA CO., LTD. All Rights Reserved.</font></td>
		</tr>
	</tbody>
</table>
<!-- /本文テキスト -->       

 以上で、HTMLメールが完成しました。ブラウザでの表示確認と、テストメールを送信してメールソフトでの表示確認を行いましょう。

【完成したHTMLメールのソースコード】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title></title>
	<style type="text/css">
		body {font-family: sans-serif;font-color: #333;text-align: center;} /* フォントの設定 */
		table, td {border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;} /* テーブルの設定 */
		img {outline: none;border: none;text-decoration: none;} /* 画像の設定 */
		a img {border: none;} /* リンク画像の枠線を消す設定 */
		@media only screen and (max-width: 480px) {
      	.base {width: 100% !important;min-width: 100% !important;}
       	td.responsive {width: 100% !important;padding-left: 10px !important;padding-right: 10px !important;box-sizing: border-box !important;display: block !important;}
        img {width: 100% !important;max-width: 100% !important;}
		} /* スマートフォン表示の設定 */
	</style>
</head>
<body>
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"  class="base">
    <tr>
      <td>
        <!-- リンク画像 -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#000659">
            <tbody>
                <tr>
                    <td class="responsive" valign="top" style="background-color: #000659;"><a href="http://www.sapana.co.jp/"><img src="https://willcloud.jp/img/mail-logo.png" alt="Sapana Homes" /></a></td>
                </tr>
            </tbody>
        </table>
        <!-- /リンク画像 -->
        <!-- 画像 -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><img src="https://willcloud.jp/img/mail-yymmdd-01.png"  alt="" /></td>
                </tr>
            </tbody>
        </table>
        <!-- /画像 -->
        <!-- 大見出し -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="5" color="#faae0a" style="font-size: 24px;line-height: 160%;color: #faae0a;font-weight: bold;"><b>新築&リフォーム相談会<br />「建築家とつくるこだわりの家」</b></font></td>
                </tr>
            </tbody>
        </table>
        <!-- /大見出し -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">建築家に気軽に相談できる「無料相談会」を開催します。<br />場所:サパナフォーラム9F<br />日時:12月1日(土)2日(日)13時〜18時</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->
        <!-- リンク画像 -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><a href="http://www.sapana.co.jp/entry.html"><img src="https://willcloud.jp/img/mail-yymmdd-02.png" alt="お申し込みはこちら" /></a></td>
                </tr>
            </tbody>
        </table>
        <!-- /リンク画像 -->
        <!-- 中見出し -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="4" color="#333333" style="font-size: 20px;line-height: 160%;color: #333333;font-weight: bold;"><b>[建築家のご紹介]</b></font></td>
                </tr>
            </tbody>
        </table>
        <!-- /中見出し -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">・山田太郎/山田一級建築士事務所<br />・鈴木花子/鈴木一級建築士事務所 他10名</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color: #333333;">本メールは、会員登録されたお客様にお送りしております。<br />配信停止をご希望の方は、以下のリンクからお手続きください。</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->
        <!-- リンクテキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0">
            <tbody>
                <tr>
                    <td class="responsive" valign="top"><font size="3" style="font-size: 16px;line-height: 200%;color: #333333;"><a href="http://www.sapana.co.jp/mail-stop.html" style="text-decoration: underline;color: #0090ff;">メルマガの配信停止はこちら>></a></font></td>
                </tr>
            </tbody>
        </table>
        <!-- /リンクテキスト -->
        <!-- 本文テキスト -->
        <table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#000659">
            <tbody>
                <tr>
                    <td class="responsive" valign="top" style="background-color: #000659;"><font size="3" color="#333333" style="font-size: 16px;line-height: 200%;color:#ffffff;"><font size="3" color="#ffffff">Copyright (c) SAPANA CO., LTD. All Rights Reserved.</font></td>
                </tr>
            </tbody>
        </table>
        <!-- /本文テキスト -->       
      </td>
    </tr>
  </table>
</body>
</html>    

【完成したHTMLメールのイメージ】

完成イメージ画像

まとめ

 いかがでしたでしょうか。主な特徴と作成時の注意点をざっとご紹介しました。色々とややこしく、標準的なウェブデザインで学んだことが使えないのがHTMLメールデザインなのだということをご理解いただけたと思います。またご覧の様に『レスポンシブ・デザイン』対応を行うと、より複雑な構造になります。

 しかし皆さんの本来の目的はクセのあるHTMLメールデザインをゼロから学ぶことではなく、効果的なHTMLメールを配信することのはずです。手間の掛かる作業はクラウドサービスでどんどん効率化していきましょう。

 当社のメール配信システムも「誰でも簡単に」をコンセプトに開発されたHTMLメールエディタを搭載しています。ご興味がありましたらぜひお問い合わせくださいね。

 最後までお読みいただきありがとうございました。

著者
WiLL Cloud マーケティングチーム

ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

メルマガ登録 »