Help us understand the problem. What is going on with this article?

いまどきHTMLメールを作るにはどうするの?

More than 5 years have passed since last update.

はじめに

HTMLメールの良いところは何か、と聞かれれば「表現力が豊かなこと」と答えるでしょう。
高い表現力があれば、情報を伝達するだけにとどまらず、ブランドを認知させる役割も担えます。
そういうわけでHTMLメールを使うことには価値がある!

この記事では以下の点についてまとめています。

  • 制約について知る
  • 実装方法を知る
  • 確認方法を知る

制約について知る: 制約の数々

1. メールクライアントごとの挙動の違い

クロスブラウザ対応以上に厄介です。
「どうせ古いoutlookが厄介なんでしょ?」って思うでしょう。
確かに古いやつは厄介です。もうそんなやつは捨てろ。

モダンなものの話をしましょう。
最近のメールクライアントで一番厄介なのは、意外なことにgmailです。
逆にoutlook.comは優秀で、こと表示に関してはgmailの方がレガシー感あります。

gmail outlook.com Mail.app
linkタグ 使えない 使える 使える
styleタグ 使えない 使える 使える
  • linkタグが使える -> WEbフォントが使える
  • styleタグが使える -> メディアクエリが使える

そうは言っても上記の対応は比較的新しいものです。
大半はgmailと同程度と考えて臨むべきでしょう。

2. テーブルレイアウト

「HTMLメールの作り方についてテーブルレイアウトの記事が見つかったけど、古い情報なんでしょ?」って思うことでしょう。
残念ながら、2015年もテーブルレイアウトです。
そしてたぶん、来年もテーブルレイアウトです。

諦めましょう。

3. スタイル属性からのCSS指定

linkタグもstyleタグも使えなかったらこういうことになります。

諦めましょう。

実装方法を知る

どこからかBoilerplateを引っ張ってくる

一から組むとか大変面倒くさいです。
なのでボイラープレートを引っ張ってきましょう。

A. Faundation for Emails

http://foundation.zurb.com/emails.html
CSSフレームワークのFaundation製のHTMLメールボイラープレートです。

B. SendGridなどからインスパイアする

メール配信サービスの中にはマーケティングメールを送信できる機能があります。
中にはHTMLメールを直接編集できるものもあり、そこからコードをインスパイアして構築する手もあります。

タスクランナーで作業を効率化する

自分の場合はgulpで構築しました。
以下の記事がとても参考にしました。
http://qiita.com/k-takam/items/1a58551868a453631bb9

特にCSSコードを自動でスタイル属性にマッピングしてくれる gulp-inline-css が役に立ちました。こいつがいなかったら仕事してなかったな〜。

確認方法を知る: PutsMailでメールの配信テスト

作ったコードはメールクライアントで読まなきゃ検証できません。
litmusが提供しているPutsMailという無料の送信サービスがありますので、そちらを利用しましょう。
https://putsmail.com/

お金に余裕のある人はlitmusの有料サービスを使うといいんじゃないでしょうか。

まとめ

  • テーブルレイアウトは現役
  • レスポンシブというよりリキッドデザインを主眼に置きましょう
  • 新しいoutlookは意外と良い
nantekkotai
意識の低いフロントエンドエンジニア。主にJSを嗜みます。
http://nantekkotai.hatenablog.com/
diggle
予実管理のためのB2B SaaSを提供しています。
https://diggle.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away