HTMLメールの話 ⛄️ 2017冬

この記事は「[みんなのウェディング Advent Calendar 2017](https://qiita.com/advent-calendar/2017/mwed)」の7日目の記事です。

----

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

# 3行でまとめると...

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

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


# HTMLメールについて

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

## 利用状況

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

## 他社事例

Google | Cookpad | note
----- | ----- | -----
<img width="451" alt="スクリーンショット 2017-12-07 9.44.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/21321/7236545c-0642-a982-077d-d4782ffe7ba4.png"> | <img width="485" alt="スクリーンショット 2017-12-07 9.45.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/21321/d588c445-e245-6489-bd21-5184799287e6.png"> | <img width="627" alt="スクリーンショット 2017-12-07 9.45.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/21321/ded78d96-8867-c84b-174e-54a8167b4a2e.png">




# HTMLメールの作り方

## 順番

自分なりの作り方

1. デザインを考える
  - 決まっている時もある
  - 決まっていない時は他のメールと合わせて作る（2の段階ぐらいでデザインチェックを受ける）
2. ローカル環境でマークアップする
  - HTMLファイルを作り、Macであれば Safari などで確認する
  - 作ったファイルを erb にして、localhost で送ってみる
  - [letter_opener](https://github.com/ryanb/letter_opener) を利用
3. style要素をstyle属性に変換する
  - https://inlinestyler.torchbox.com/ などを利用する
  - gem などもあるのでそれでもいいかもしれない
4. erb を haml に変換する
  - erb2haml

## Tips

### Rails での「検証環境」

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21321/18de6422-db87-8d85-c67f-7cf68cf660f8.png)

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

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

```html
<!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](https://litmus.com/blog/email-design-podcast-35-windows-10-mail-rendering-gmail-rollout-updates-and-image-blocking-in-email) 

## 各メール

### iPhone のメール

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21321/8ab73224-09a2-5ce9-efa3-0d79d03d198a.png)

### Outlook.com

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

# 検証対象

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21321/2df8c6cf-4456-13a1-9884-77c961dfa576.png)

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

# 効果検証

## Google Analytics

- メールからのリンクはパラメーター生成ツールを使う
- メールからアクセスがあることが記録可能
  - [URL 生成ツール - アナリティクス ヘルプ](https://support.google.com/analytics/answer/1033867?hl=ja)

- 開封数もわかるらしい（試せていない）
  - [メール トラッキング - Measurement Protocol ](https://developers.google.com/analytics/devguides/collection/protocol/v1/email?hl=ja)

# まとめ

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