スクリーンショット 2013-08-05 20.05.20

メールマガジンなどに使われる、HTMLメール。日本ではグリーティングカード、リッチなメールを贈り合う文化があんまりなかったりともあって、公開されている制作ノウハウが少なかったりします。

スマートフォン端末が普及して、端末の解像度が高くなり、通信速度が早くなった今でこそ、改めてHTMLメールの制作過程を見直したいななんて思います。結論、従来の制作フローとはあまり変わらずに、注意点が増えた。という印象です。

制作ポイントは3つ

・キャリアアドレスに注意。

・なつかしいテーブルレイアウトが基本。

・メーラーが解釈しやすいように、インラインCSSで装飾。

キャリアアドレスに注意。

スクリーンショット 2013-08-05 20.43.12

HTMLメールを作っていくにあたって、日本において注意しなければならないのはキャリアメール(SMS)の存在です。Androidに多いですが、キャリアアドレスでもデフォルトメーラで送受信するケースもあるのでこの住み分けがメールアドレスで判断できないのが非常に面倒です。

*@softbank.ne.jp, *@ezweb.ne.jp

なのでiPhoneが含まれるこの2つのキャリアアドレスはHTMLメールではなくテキストで作成→送信するのがベターだとおもいます。HTMLとテキストメールの文章要素をなるべく共通化したい、という方はマガジンの文脈を意識してマークアップすることが大前提となります。

参考 » HTMLメールのスマートフォン対応はどうするべきか? | Webnoborder

 

なつかしいテーブルレイアウトが基本。

スクリーンショット 2013-08-05 20.42.16

今も昔も記述方法は変わらず、<table>タグによるテーブルレイアウトが基本です。htmlメール内で利用する画像は絶対パスにするとかはさておき、メーラによって表示が違って困るというかた、主要メーラのhtml表示バグがあるみたいでそれを解決する HTML EMAIL BOILERPLATE をベースに使うといいです。これは、HTMLメールにおけるreset.cssみたいなものです。あと、メディアクエリという選択もありますね。

参考 主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate | コリス

メーラーが解釈しやすいように、インラインCSSで装飾。

スクリーンショット 2013-08-05 20.42.38

一般的なCSSを分けて書く記述では、メーラーによってhead内のCSSが解釈されない場合があり、CSSをタグ要素の中に、style属性としてガシガシ記述していかなければなりません。そこで便利なのが、inlinestyler.torchboxapps.com というサービスで、これはhtmlファイルの中に、記述したCSSをbody内のタグにインラインCSSとして反映してくれる優れ物です。使い方はこちらを参考に、HTMLメール用にインラインCSSを生成してくれる『HTML email inline styler』 | IDEA*IDEA

 

余談

Responsive Email Templates – ZURB Playground – ZURB.com

スクリーンショット 2013-08-05 20.57.51

クールなメールテンプレート見つけた。けどこれは、インライン化されてないので、最近のメーラでも表示できないメーラがある可能性が高いです。惜しい。