この記事は「みんなのウェディング Advent Calendar 2017」の7日目の記事です。

業務でHTML メールを出すことがあります。例えば、キャンペーン告知や、口コミ掲載連絡などです。そして、作るたびにハマって...「ああ...もう」という気持ちになるので書きためたメモです。

3行でまとめると...

Gmail も、Yahoo! メールも Outlook もアプリがあり利用者も多い。さらに iOS / Android では挙動が異なる
効果検証はやってる？Google Analytics を使うと便利
デザインガイドラインを作ると捗る（が作っていない）

以上です。ハマりどころは、iOS の「メール」です。

HTMLメールについて

テキストだけでなく、装飾（文字の太さ、色など）、画像などをレイアウトして送る事ができます。

利用状況

アメリカなどでは人気があるらしい
- 自分調べ。Google などで調べるとそんな気がする
業務での使用例
- キャンペーンの申込、口コミ掲載報告などなど
最近のウェブサービスだとHTMLメールが標準なのでは？
- テキストメールだと冷たい感じがする

他社事例

Google	Cookpad	note

HTMLメールの作り方

順番

自分なりの作り方

デザインを考える

決まっている時もある
決まっていない時は他のメールと合わせて作る（2の段階ぐらいでデザインチェックを受ける）

ローカル環境でマークアップする

HTMLファイルを作り、Macであれば Safari などで確認する
作ったファイルを erb にして、localhost で送ってみる
letter_opener を利用

style要素をstyle属性に変換する

https://inlinestyler.torchbox.com/ などを利用する
gem などもあるのでそれでもいいかもしれない

erb を haml に変換する

erb2haml

Tips

Rails での「検証環境」

Railsでは「letter_opener_web」という gem を利用
- https://github.com/fgrehm/letter_opener_web

スマートフォンを忘れない

viewport を設定します
文字コードは、UTF8です（大切）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>HTML mail</title>
</head>

URLのこと

画像はどこからでも、誰でもアクセスできる配信をする
localhostや、社内の開発環境からでは見られない（トラブルの元）
- Rails では、 *_path ではなく、 *_url を使う
- http/https から始めないとダメ（忘れがち）

レイアウトのこと

レスポンシブは避ける
- ノウハウ、テンプレートは出回っているが大変そう
- http://foundation.zurb.com/emails.html
tableが基本だが、CSSでもある程度はいける
- IE9 だと flex が使えないので、floatを使うとか。でも、IE11以上の対応でいいよね、という気持ち
- table要素とCSSの組み合わせでハマることもある

CSSのこと

Style（スタイル）要素は、Gmail、Yahoo!メール、Outlookは使える
ただし、各要素にstyle属性を書く（インラインスタイル）が基本
- メーラーによっては使えないのもある可能性があるため
- Gmail もスタイル要素が使えるようになった
- 2016年9月ぐらいから？
- Email Design Podcast #35: Windows 10 Mail Rendering, Gmail Rollout Updates, and Image Blocking in Email – Litmus Software, Inc

各メール

iPhone のメール

崩れることが多いので、Mac の Safari で「このページをメールで送信」を使いプレビュー
Mac の Mail.app = iPhone のメールアプリと近い

Outlook.com

ウェブサービス。hotmail は outlook.comに統合
- （社内で、hotmail って何ですか？と聞かれた）
できないことが多め
- （PCで）グラデーションが使えない
- インライン要素（例えば、a要素）に display:block; としても、ブロック要素にならない
- 背景画像が使えない

検証対象

受信の70%が、ウェブメール、モバイル（iOS/Android）らしい
- http://www.experian.co.jp/assets/form/cd369.pdf
- もう少しデータが欲しい...

検証対象多いので、時間がかかる
- テスト配信
- 閲覧してキャプチャーとる

効果検証

Google Analytics

メールからのリンクはパラメーター生成ツールを使う
メールからアクセスがあることが記録可能
- URL 生成ツール - アナリティクスヘルプ
開封数もわかるらしい（試せていない）
- メールトラッキング - Measurement Protocol

まとめ

制作/検証には時間がかかる
少しづつHTMLメールも変わっている
全部の端末/メーラーでは、再現できないデザインもあるので、デザイナーと相談すること
HTMLメール用のデザインガイドラインがあると、HTMLメール作成も快適かも