float、ダメ、絶対。HTMLメールを作る前に押さえるべき基本事項。

こんにちは、Wantedly ユーザーグロースチームの竹野です。普段はウェブやAPIに絡めた改善を色々やっています。今日は、4月に行ったメールの改善施策で得た知見を共有します。

背景

メールはユーザーにリーチできる手段の一つです。

Wantedly でもメールを送っていますが、改善前のメールは比較的昔に作ったものが多く、大きく分けて3つの課題がありました。

1. テンプレートが横幅600px固定なのでモバイルで見ると縮小されてしまってそもそも読めない
2. メールの見た目に統一感がない（デザイン面での課題）
3. 可読性や再利用性が低く開発効率が良くない（エンジニアリング面での課題）

これを解決するために、まず現実的にメールでレスポンシブにする方法を調査した上で、既存のメールを洗い出し、デザイナーの方にデザインを依頼し、自分の方でコーディングを行いました。コーディングの際は、将来的なことも考慮して以下のことを行いました。

・見出し、副見出し・ボタンなどはスタイルを作ってクラスを付けて使えるようにしておく
・募集, 人, メッセージなどよく登場する要素をコンポーネント化して利用できるようにしておく

これは募集コンポーネントの例です。最近ではこれらのコンポーネントを利用してアプリエンジニアが施策としてメールを送ったりしています。

ここからは、これらの過程で得た知見を紹介し、それらを踏まえてメールでレスポンシブにするために採った方法を紹介します。

メールの表示はブラウザとは異なる

大前提として、メールの表示はブラウザとは異なることが多いです。

なので、ちゃんとレイアウトを再現しようとすると、 ブラウザではなくメーラーで表示を確認する必要があります。

メールの表示はメーラーによってバラバラ

メールの表示はメーラーによってバラバラです。ブラウザとほぼ同じように解釈してくれるメーラーもあれば、全然違うレイアウトで表示してくるメーラーもあります。なんでそんなに変わるのかというと、主に以下のような要因があります。

1. 各種CSSプロパティの解釈の有無
2. ヘッドタグやスタイルタグの読み込みの有無
3. メーラーによる独自の最適化（それっぽい感じで'読みやすく'しようとする）

CSS Support Guide for Email Clients | Campaign Monitor とか眺めてみると、どんな感じか掴めます。

実際にはこれに加えて画面サイズによっても当然見え方が変わってくるので、それも同時に考慮する必要があります。これについては最後に触れます。

代表的なメーラーとその特性

おおまかによく使われるメーラーとその特性を知っていおくと、どこまでどれくらいのコストをかけてやるか判断しやすくなります。

一般ユーザーがよく使うメーラーとしては、

• Gmail (Google)
• メール (Apple)
• Outlook (Microsoft)

などがあります。結構同じメーラーだとプラットフォーム（例：MacとiOS）が違っても同じ仕様であることが多いので、まずはざっくりメーラーごとに認識するのが良いと思います。

メール (Apple)

ブラウザと同じデザインを再現するし、変な最適化もしない一番優秀なメーラー。メディアクエリも解釈するしレスポンシブデザインにも出来る。ただ逆に言うと、このメーラーで上手く表示できても他で崩れてる可能性があるので注意。

Gmail (Google)

シェアがかなりある割に意外と重要な部分に対応してないメーラー。特に、`<style>` タグを一切解釈しないため、スタイルをstyle属性として書く必要がある。メディアクエリも使えない。アプリのInboxも基本的には同じ仕様。

あと、iOSのGmailは勝手に文字を読みやすい感じに大きくする仕様になっています。

Outlook (Microsoft)

pタグ, divタグ, aタグではpaddingが無視される、float, max-widthに対応してないなど、なんとなくPCでコーディングしたときに一番見た目が変わりやすいメーラー。

経験的に、「メール」やGmailでちゃんと表示されれば、このメーラー以外だいたいちゃんと表示される。別の言い方をすると、このメーラーでも完璧にデザインを再現しようとするとかなり追加コストがかかるので、読めるレベルであればOKという割り切りもアリ。

コーディング

完全なリストではないですが、まず知っておくべきだと思うことを書きました。

• style はインラインしか認識しないので、インライン化ライブラリを使う
• 横並びするレイアウトになるときは float ではなく table タグを使う
• • カラム数が段によって違うときは中で再度 table を作るのが安全
  • padding, margin は全部ゼロリセットしておく（table は border-spacing も）
• Outlook 含めて手軽に余白を確保したいときは br タグ

レスポンシブ

PCで見てもモバイルで見ても見やすいメールにするためにはどうすればいいでしょうか。ここに関しては、Airbnb, Pinterest, Uber など幾つかのサービスのメールを調査した上で、以下の方法が良いという結論になりました。

• max-width をだけを指定する（e.g. 600px）ことで、モバイルで見てもスケールが小さくならないようにしつつ、PCで見ても大きく間延びしないようにする
• フォントはPCでもメールでも読みやすいサイズを使用
• コンテンツのカバー画像等は、固定値ではなく親コンテナからの比率で設定

実際にこの方針でやると、PCとモバイルそれぞれで以下のような見え方になります。

なお、メディアクエリは使わない方が良いという判断をしました。max-width を使う方針で多くの場合は十分であること、上で述べたように Gmail という主要なクライアントが対応していないため、やっても効果が薄く、メンテナンスコストが増えるなどデメリットの方が大きいことが理由です。

デバッグ

基本的には実機で確認すると良いです。ウェブアプリケーションでも少し設定すればローカルからメールを送れます。

また、世の中にはメールのプレビューサービスというのがあって、色んなメーラーでどんな感じになるか確認できます。Litmus や Email on Acid がメジャーで、UIはLitmusの方がイケてますが、Acidの方が安いのと、最初7日間は無料で使えるというので今回はこちらを利用しました。

Email on Acid の Preview 画面の例 - https://www.onlyinfluencers.com/email-buying-guide/entry/unboxing-email-on-acid-1

これらのサービスはあるアドレスにメールを送るだけでプレビュー結果を生成してくれるので、大きくメールを変えるときは重宝します。

まとめ

HTMLメールをちゃんと作ろうとするときに特に知っておいた方がいいことを概観的に書きました。

大きくこの方針でやれば上手くいくというやり方を書きましたが、細かい罠みたいなのはやはりそれなりにあるので、作ってみて、実際に自分のサービスのユーザーが使っていそうなメーラーで確かめてみましょう :)

追記：Gmail がメディアクエリに対応するという発表がありました。普及すればメディアクエリも部分的に使っていく価値がありそうです。