最近、HTMLメールをいっぱい書く機会があったのですが、あまりウェブに良い情報がなかったので、メールを作る上でこれは知っておいた方が良いと思うことをまとめておきます。
メールの表示はブラウザとは異なる
大前提として、メールの表示はブラウザとは異なることが多いです。
なので、ちゃんとレイアウトを再現しようとすると、 ブラウザではなくメーラーで表示を確認する必要があります。
メールの表示はメーラーによってバラバラ
メールの表示はメーラーによってバラバラです。ブラウザとほぼ同じように解釈してくれるメーラーもあれば、全然違うレイアウトで表示してくるメーラーもあります。なんでそんなに変わるのかというと、主に以下のような要因があります。
- 各種CSSプロパティの解釈の有無
- ヘッドタグやスタイルタグの読み込みの有無
- メーラーによる独自の最適化（それっぽい感じで'読みやすく'しようとする）
CSS Support Guide for Email Clients | Campaign Monitorとか眺めてみると、どんな感じか掴めます。
実際にはこれに加えて画面サイズによっても当然見え方が変わってくるので、それも同時に考慮する必要がありますが、この記事ではそれについては触れません。これについては後で書きます。
代表的なメーラーとその特性
おおまかによく使われるメーラーとその特性を知っていおくと、どこまでどれくらいのコストをかけてやるか判断しやすくなります。
一般ユーザーがよく使うメーラーとしては、
- Gmail by Google
- メール by Apple
- Outlook by Microsoft
- Andorid標準メーラー by Google
などがあります。結構同じメーラーだとプラットフォーム（例：MacとiOS）が違っても同じ仕様であることが多いので、まずはざっくりメーラーごとに認識するのが良いと思います。
メール by Apple
ブラウザと同じデザインを再現するし、変な最適化もしない一番優秀なメーラー。メディアクエリも解釈するしレスポンシブデザインにも出来る。ただ逆に言うと、このメーラーで上手く表示できても他で崩れてる可能性があるので注意。
Gmail by Google
シェアがかなりある割に意外と重要な部分に対応してないメーラー。特に、<style>タグを一切解釈しないため、スタイルをstyle属性として書く必要がある。メディアクエリも使えない。アプリのInboxも基本的には同じ仕様。
あと、iOSのGmailは勝手に文字を読みやすい感じに大きくする仕様になっています。
Outlook by Microsoft
pタグ, divタグ, aタグではpaddingが無視される、float, max-widthに対応してないなど、なんとなくPCでコーディングしたときに一番見た目が変わりやすいメーラー。
経験的に、「メール」やGmailでちゃんと表示されれば、このメーラー以外だいたいちゃんと表示される。別の言い方をすると、このメーラーでも完璧にデザインを再現しようとするとかなり追加コストがかかるので、読めるレベルであればOKという割り切りもアリ。
Android標準メーラー
Appleの「メール」とGmailできちんと表示できるように進めていったら他は大体解決したので、このメーラーについてはあまり印象がないです。ただプレビューサービスを通して見る限り、辺なクセはない感じがします。
コーディング
ここは完全なリストじゃないけど、とりあえず知っておくと効果が大きそうなことを書きました。
- styleはインラインで書くか、インライン化ライブラリを使う（Railsならpremailer）
- 横並びするレイアウトになるときは float ではなく table タグを使う
- カラム数が段によって違うときは中で再度 table を作るのが安全
- padding, margin は全部ゼロリセットしておく（table は border-spacing も）
- Outlookでも手軽に余白を確保したいときはbrタグを使う（ただし細かい調整はできない）
- （大きなアプリケーションの場合、）コンポーネント化して難しいこと考えずに利用できるようにしておく
デバッグ
この節は一部Rails前提で書きます。
単純なものなら letter_opener 等でブラウザで確認して、そうでないものは基本的に送って確認するのが良いと思います。すぐ届くし、ウェブのメーラーで開けばインスペクタも使えるので。あと横幅を変えていってどんな感じになるかを確認するなら、Mac標準の「メール」が便利。
メールは送るためにサーバーが必要だけど自分はGmailのサーバーを使いました（予めGmailの設定を変えておく必要があります）。
Railsだと、ActionMailerの設定をこんな感じにすると実際に送れるようになります（Rubyだけでもmailという組み込みgemを使うとほぼ同じ感じで送れる）。
# # config/environments/development.rb
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
:address => 'smtp.gmail.com',
:domain => 'gmail.com',
:port => 587,
:user_name => 'nonono@example.com',
:password => ENV['GMAIL_PASSWORD'],
:authentication => :plain,
:enable_starttls_auto => true
}
config.action_mailer.default_url_options = { :host => 'localhost:3000' }
config.action_mailer.perform_deliveries = true
プレビューサービスを使う
世の中にはメールのプレビューサービスというのがあって、色んなメーラーでどんな感じになるか確認できます（有料）。LitmusとかEmail on Acidがメジャーな感じで、なんとなくデザインはLitmusの方が綺麗ですが、Acidの方が安いのと、7日間は無料で使えるという特典があります。
プレビューのフローは、もちろん文字列をブラウザから貼り付けることも可能ですが、サービス側が用意してくれるメールアドレスがあるので、何回もやるならそこに向けてどんどんローカルからメールを送るスタイルが良いです。
まとめ
HTMLメールをちゃんと作ろうとするときに特に知っておいた方がいいことを概観的に書きました。あまり細かくまとめてもどんどん変わっていくものなので、あとは作ってみて、実際に自分のサービスのユーザーが使っていそうなメーラーで確かめてみるのが良い気がします。
あと、いろいろ書きましたが、シンプルに上から下に向かって順番に要素を配置していく分には、アラインメントと間隔の取り方だけ把握すればそこまで変な見た目にはならないので、レイアウトに凝らないという選択肢も常に持っておきたいなと思います。