5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTMLメールの話 ⛄️ 2017冬

Last updated at Posted at 2017-12-06

この記事は「みんなのウェディング 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の段階ぐらいでデザインチェックを受ける)
  1. ローカル環境でマークアップする
  • HTMLファイルを作り、Macであれば Safari などで確認する
  • 作ったファイルを erb にして、localhost で送ってみる
  • letter_opener を利用
  1. style要素をstyle属性に変換する
  1. 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メール作成も快適かも
5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?