Eメールマーケティングはお金になります。多くの企業が知名度を上げる為に、Twitterのフォロワー数やFacebookの「いいね」の数を増やす方法を模索する中、殆どの企業がEメールマーケティングに戻ってきます。VivaLaEmailによると、Eメールマーケティングは43対1のROI（投下資本利益率）を誇るチャネル（経路）です。この数字はさほどマーケティング予算を押さえられない会社にも魅力的なのではないでしょうか。
もし過去にHTML Eメールをコーディングした経験をお持ちでしたら、そんな簡単なものではないことをご存知かと思います。今回のチュートリアルでは、問題児であるOutlook2007と2010の対処法を含め、主要なメールクライアントできちんとレンダリングされるニュースレター（メルマガ）の書き方をご紹介します。
この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
始める前に・・・
入れ子式テーブルや旧式の背景色宣言等1999年時代のコーディングに取り組む前に、HTML Eメールに関して覚えておいていただきたい点を幾つか挙げておきますね。
- CSSサポートの制限：複数のWEBブラウザにまたがる何十種類ものメールクライアント用にデザインする為、CSSに関することはシンプルにとどめる必要があります。
- インラインスタイル限定：全てのCSSはインラインスタイルでなければなりません。これが何を意味するかと言うと、似たようなコードを何度も繰り返し記述しなければなりません。ラッキーにもPremailer等、タグの中からスタイルを拾いインラインで書き直してくれるサービスがあります。これで単純作業から解放されますね。
- 背景色やイメージのムラ：background-imageや background-position、そもそもbackgroundのCSSプロパティ自体が全てのメールクライアントでうまく表示されるわけではありません。うまく行く方法もあるけれど、頭痛の種を減らす為にテーブルやセルをどのように使うか注意を払った方がいいと思いますよ。
- 画像は絶対パス指定：このチュートリアルでは私のコンピュータ上で作業しているので相対パスを使用しておりますが、実際メールをテストしたり送信したりする時にはうまく行きません。全ての画像はサーバー上に保存し、絶対パスで指定しなければなりません。
- セルパディング（cellpadding）とセルスペーシング（cellspacing）：今回のチュートリアルでは何層にも亘ってテーブルを構成します。その個々のテーブルで、メインのテーブルタグのセルパディングやセルスペーシングを０に設定する必要があります。そうしなければ目障りでイライラしてくる水平線や垂直線が入ってしまいます。沢山コードを書かなければなりませんが、最初にきちんと記述しておけば後が楽になりますよ。
枠組みの構築
コチラから今回作成するEメールのサンプルをダウンロードしていただけます。
極めてシンプルな2列のデザインで、メインの記事1つとサポート記事が2つで構成されています。ではどこから始めましょうか。まずはEメールの枠組みから作っていきましょう。
始めるにあたり、最終的にEメールとなる基本的なHTMLから書いていきましょう。
<html>
<head>
<title>SimpleNewsletter Volume 12 - Episode 47</title>
</head>
<body>
</body>
</html>
Step 1 － コンテナ用テーブルの作成
HTMLテーブルの書き方はバッチリですか？今回はテーブルがとても重要な役割を果たします。テーブルはHTMLの最も基本的な構造であり、HTML Eメールの枠組みとなります。
最初に作成するテーブルは、９９％の幅設定をしたコンテナ用テーブルです。幅や高さ、背景色を設定する時は、width=""やheight=""やbgcolor=""と書いてくださいね。
<html>
<head>
<title>SimpleNewsletter Volume 12 - Episode 47</title>
</head>
<body>
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
<tr>
<td align="center"></td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
タグにbackground-colorと書いても背景色はレンダリングされない為、コンテナ用テーブルでは単色の背景色のみ有効です。９９％の幅設定は、GmailやYahoo! Mailと言ったWEBベースのメールクライアントで必須となるパディング対策で、残りのEメールはこの１つのテーブルセルの中に中央寄せの状態で入れ子式に収納されます。
Step 2 － Eメール ラッピングテーブル
次に取り掛かるのは、実際にEメールを納めるコンテナとなるラッピングテーブルです。最大幅は600ピクセルに収めましょう。今回のEメールでは600ピクセル幅の白い箱の下に、うっすらと影が落ちています。なので、ラッピングテーブルの幅は640ピクセルにし、中の要素の為のパディングは20ピクセルに設定したいと思います。
<html>
<head>
<title>SimpleNewsletter Volume 12 - Episode 47</title>
</head>
<body>
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
<tr>
<td align="center">
<!-- Email Wrapper Table -->
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td></td>
</tr>
</table>
<!-- End Email Wrapper Table -->
</td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
ここまで大丈夫でしょうか。ちょっとテーブルの部分がややこしいですよね。なので、行を畳んでシンプルに分かり易くしてくれるテキストエディター等を使うと便利かと思いますよ。コメントもシンプル正確にまとめて後から分かり易くしておいた方がいいと思いますよ。
ヘッダーの作成
私がHTML Eメールをコーディングする時は、大抵枠組みを作成してから細かいデザイン等に移り、パズルの様に組み立てていく方法を取っています。今回のデザインでは、WEBバージョンのリンクとメディアリンクを含むヘッダーを作る番です。
Step 3 － 一番上の行
さて、今回のEメールの一行目は、青色の背景色に白い文字でWEBバージョンのリンクが入っています。HTML Eメールを作成する際、このリンクを加えることはとても重要です。Eメールのクライアントは、画像を表示したりしなかったりパディングの処理方法も異なったりと個々に対応がまちまちだからです。
ここからは最初に作成したコンテナ用テーブルの部分は省略しますね。今後作成していくコードは全て、最初のテーブルセルに入れ子式に収納されていることを忘れないでくださいね。今後はCSSもスタイルシートに加えていきましょう。
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td valign="bottom" height="30" align="right" class="footer">
Having trouble viewing this email? Click here to view the web version.
</td>
</tr>
<tr>
<td>
<img src="email_images/top_fade.jpg" width="640" height="20" border="0" />
</td>
</tr>
</table>
ここでちょっとCSSタイムです。これは最終的にはインラインスタイルに変換されます。（ここで「footer」としたのは、フッターと目的も同じでスタイルも同じだからです。）
/* Fonts and Typography */
.footer {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #fff;
padding-right: 20px;
}
ここまでのコードでこの様に表示されるかと思います。
Step 4 － ロゴとソーシャルメディアアイコン
さて次にロゴマークとソーシャルメディアアイコンを表示させる為に、メインのテーブルにもう一行増やしたいと思います。
ここではシンプルに一行増やして、セルも１つ増やします。その中に行が１つで、セルが５つのテーブルを作成します。言葉だと分かり難いかと思いますので、下記のコードを見てみてください。繰り返しになりますが、ここでは画像を相対パスで記述しておりますが、実際メールを送信する際にはサーバにアップされている必要があります。
それから残りのEメールのメイン部分を網羅する「email_background」というクラスも追加しています。この背景画像はOutlook 2007と2010では表示されません。チュートリアルの最後に修正するので少しお待ちくださいね。
<tr>
<td align="center" class="email_background">
<!-- Email Header -->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td><img src="email_images/logo.jpg" width="246" height="41" border="0" style="padding-left:20px; padding-top: 20px;" /></td>
<td><img src="email_images/facebook.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
<td><img src="email_images/twitter.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
<td><img src="email_images/linkedin.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
<td><img src="email_images/youtube.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
</tr>
</table>
</td>
</tr>
そしてCSS部分では、Eメールのコンテンツ部分に背景画像と、背景画像用のスタイル２つを追加しています。
/* Backgrounds */
.email_background {
width: 640px;
background: url('email_images/email_bg.jpg') repeat-y;
}
/* Images */
img {
display: block;
border: none;
}
これらのソーシャルメディアアイコンはそれぞれ別々のセルの中に収納されているので、他のセルに影響を与えません。従ってどのソーシャルメディアアカウントを持っているかにより、簡単に追加や削除が行えます。ここまでのコーディングでこの様なものが完成しているかと思います。
コンテントの挿入
さてそれではEメールの中核となる部分に進んでいきましょう。コンテンツは簡単にざっと流し読みが出来るくらい、簡潔で親しみのあるものである方が良いです。2010年には一日あたり2940億通のEメールが送信されました。登録されている18.8億のEメールユーザーは、一人あたり平均156通のメールを一日に送受信している計算になります。これだけ沢山のメールを送受信しているのですから、あなたのEメールを魅力的にする必要があります。
Step 5 － 注目画像の追加
Eメールに注目画像（今回のデザインでは560ピクセル×250ピクセル）を追加する事から始めましょう。画像の下方にうっすら影が入っているかと思いますが、これは後で変更し易いように別々に記述しています。早速コードを見てみましょうか。
<tr>
<td colspan="5"><img src="email_images/featured_image.jpg" width="560" height="250" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>
<tr>
<td colspan="5"><img src="email_images/featured_shadow.jpg" width="560" height="18" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>
コードの詳細を説明すると、注目画像用に新しい行を追加し、幅を560ピクセルに設定し左右にパディングを20ピクセルずつ加えています。影の部分も同様に行を追加し、幅を560ピクセルにして両幅に20ピクセルのパディングを加えています。こうすることにより画像の差し替えや影の調整が手軽になります。
Step 6 － 見出しとコンテンツの追加
次は注目画像の見出しと記事部分です。ここではクラスを使って文章をスタイリングします。そして後程Premailerを使ってインラインスタイルに変換させます。
まず何をするかと言うと、オレンジ色で見栄えの良いフォントを使って見出し用に「H1」タグを作成します。それから「P」タグを使ってコンテンツを挿入しますが、パラグラフの分割は「BR」タグで行ってください。多くのメールクライアントは「P」タグの多用を好みません。行を追加したりパラグラフを増やす場合は、「BR」タグを直接記述してください。最後に、注目記事の後ろでテーブルを閉じているのがお分かりいただけるかと思いますが、この後で２つのサポート記事用に二段組みのレイアウトに移行するためです。
<tr>
<td colspan="5" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px;">
<h1>This is your featured story</h1>
</td>
</tr>
<tr>
<td colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px;">
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br /><br />
<img src="email_images/readmore.jpg" border="0" align="right" width="114" height="27" />
</p>
</td>
</tr>
</table>
</td>
</tr>
では予告通り、CSSのコーディングもしましょう。
h1 {
color: #e95f03;
font-family: Futura, Verdana, Sans-Serif;
padding: 0;
margin: 0;
font-size: 24px;
font-weight: normal;
}
.content {
padding: 0;
margin: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
}
Step 7 － ２つ目のコンテンツ
ここから二段組みのレイアウトに切り替えるため新規でテーブルを作成しますが、きっとコードをご覧いただく方が速いですよね。パディング部分に注目していただきたいのですが、Outlookでは「P」タグのパディングをレンダリングしてくれないので、「P」タグではなくテーブルデータのセルに直接適用させています。
<tr>
<td align="center" class="email_background">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<img src="email_images/secondary1.jpg" width="271" height="150" border="0" style="padding-left: 20px;" />
</td>
<td>
<img src="email_images/secondary2.jpg" width="271" height="150" border="0" style="padding-left: 10px;" />
</td>
</tr>
<tr>
<td>
<img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 20px;" />
</td>
<td>
<img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 10px;" />
</td>
</tr>
<tr>
<td style="padding-left: 20px;">
<h2>This is a secondary headline</h2>
</td>
<td style="padding-left: 10px;">
<h2>This is a secondary headline</h2>
</td>
</tr>
<tr>
<td style="padding-left: 20px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br /><br />
<img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
</p>
</td>
<td style="padding-left: 10px; padding-right: 10px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br /><br />
<img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
</p>
</td>
</tr>
</table>
</td>
</tr>
コードは長いのですが、ここではH2タグにのみ追加でスタイル設定を行います。
h2 {
color: #e95f03;
font-family: Futura, Verdana, Sans-Serif;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: normal;
}
Step 8 － Eメールのクロージング
もう少しでEメールが完成しますが、次に行うことはEメールのメイン部分を「TD」タグでクローズすることです。この「TD」タグは初めに640ピクセル幅を設定したテーブルのセルで、ここに下部の影用の画像を挿入します。
<tr>
<td>
<img src="email_images/bottom_fade.jpg" width="640" border="0" height="28" />
</td>
</tr>
Step 9 － フッターの追加
HTML Eメールを作成する際に、決して忘れてはならないことの１つが購読解除用リンクの設置です。そうですね、購読者の数は減らしたくありませんよね。けれど、購読解除を簡単に行えるようにしておかないと（購読者の印象を悪くし）、顧客を失うことにつながります。これは購読者を失うよりも大きな打撃ですよね。なので、簡単に見易くしておく必要があります。殆どのEメールではフッター部分に単独で分かり易く設定されています。
<tr>
<td valign="top" height="80" align="right" class="footer">
Simple Newsletter<br />
55 Onextrapixel Lane<br />
New York, NY 22222<br />
<br />
Want to Unsubscribe? Click here.
</td>
</table>
<!-- End Actual Email Content -->
</td>
</tr>
</table>
<!-- End Email Wrapper Table -->
</td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
テスト！テスト！テスト！
市場には非常に多くのメールクライアントが出回っているので、デザイナーやコーディング担当者はHTMLのデューディリジェンス（適正性評価手続き）を行う必要があります。個人的に私は仕事でテスト用にLitmusを使っています。Lotus NotesやOutlookからWEBベースのクライアントまで、29もの異なるメールクライアントのプレビューとフルビューのスクリーンショットを、しかも殆どのメジャーブラウザで表示してくれます。
テスト送信してみた場合、完璧に全てレンダリングされてないと気付くはずです。大抵Outlookの2007と2010だとデザインが壊れてしまっているはずです。これは何故かと言うと、Outlook 2007と2010はHTML EメールをレンダリングするのにMicrosoft Wordを使用しているからです。（その前はInternet Explorerをレンダリングエンジンとして使用していたんですよね。どちらがマシかは・・・お任せします。）
Outlook 2007と2010でも背景画像が表示される方法を、ステップバイステップで細かく説明しようと思っていますが、これをするにはEメールの幅を固定して、一枚の大きな画像を背景として設定するようになります。もし購読客の多くがOutlookユーザーならば、グラデーションやドロップシャドウ、ボックスシャドウを使うよりも、シンプルに単色背景色をお使いになることをお勧めします。（Outlookだけでなく、CSS3でもうまくいきませんしね。）
終わりに・・・
どんなに新しいメディアが出てきたとしても、HTML Eメールはデジタルマーケティングの中核に居続けると思います。Eメールは徐々に現代のスタンダードとして適用し、Eメールの中にビデオを埋め込んだり、CSSのフルサポートや、最終的にはテーブルレイアウトが不要となったり、まだまだ進化し続けるのではないでしょうか。
