HTMLメール

HTMLメールの話 ⛄️ 2017冬

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


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


3行でまとめると...


  • Gmail も、Yahoo! メール も Outlook もアプリがあり利用者も多い。さらに iOS / Android では挙動が異なる

  • 効果検証はやってる?Google Analytics を使うと便利

  • デザインガイドラインを作ると捗る(が作っていない)

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


HTMLメールについて

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


利用状況


  • アメリカなどでは人気があるらしい


    • 自分調べ。Google などで調べるとそんな気がする



  • 業務での使用例


    • キャンペーンの申込、口コミ掲載報告などなど



  • 最近のウェブサービスだとHTMLメールが標準なのでは?


    • テキストメールだと冷たい感じがする




他社事例

Google
Cookpad
note

スクリーンショット 2017-12-07 9.44.04.png
スクリーンショット 2017-12-07 9.45.38.png
スクリーンショット 2017-12-07 9.45.10.png


HTMLメールの作り方


順番

自分なりの作り方


  1. デザインを考える


    • 決まっている時もある

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



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


    • HTMLファイルを作り、Macであれば Safari などで確認する

    • 作ったファイルを erb にして、localhost で送ってみる


    • letter_opener を利用



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



  4. erb を haml に変換する


    • erb2haml




Tips


Rails での「検証環境」

image.png


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


  • 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 から始めないとダメ(忘れがち)




レイアウトのこと


  • レスポンシブは避ける



  • tableが基本だが、CSSでもある程度はいける


    • IE9 だと flex が使えないので、floatを使うとか。でも、IE11以上の対応でいいよね、という気持ち

    • table要素とCSSの組み合わせでハマることもある




CSSのこと


各メール


iPhone のメール


  • 崩れることが多いので、Mac の Safari で「このページをメールで送信」を使いプレビュー

  • Mac の Mail.app = iPhone のメールアプリと近い

image.png


Outlook.com


  • ウェブサービス。hotmail は outlook.comに統合


    • (社内で、hotmail って何ですか?と聞かれた)



  • できないことが多め


    • (PCで)グラデーションが使えない

    • インライン要素(例えば、a要素)に display:block; としても、ブロック要素にならない

    • 背景画像が使えない




検証対象

image.png


  • 検証対象多いので、時間がかかる


    • テスト配信

    • 閲覧してキャプチャーとる




効果検証


Google Analytics


まとめ


  • 制作/検証には時間がかかる

  • 少しづつHTMLメールも変わっている

  • 全部の端末/メーラーでは、再現できないデザインもあるので、デザイナーと相談すること

  • HTMLメール用のデザインガイドラインがあると、HTMLメール作成も快適かも