仕事でHTMLメールを作る機会があったんですが、メーラーは種類が多く、各メーラーによって実装状況にかなり差があるので、多くのユーザー環境で正しく表示されるHTMLメールを作ろうと思うとなかなか面倒でした。
しかもレスポンシブとなると、通常のwebページでいうクロスブラウザ対応の比ではないほど気を使うことに。。
なので、やったことをここにメモしておきます。
後々、会社のブログで記事にするつもりだけど。
基本的なつくりかた
レスポンシブという言葉の響きで、なんかモダンな作りができそうだなーと思ってしまうけど、結局は下記のような昔ながらの作り方をしなくちゃいけないです。
- tableレイアウトでコーディング。
これでやらないとOutlookでまともに表示できない。 - インラインスタイルでCSSを記述。
<style>タグに対応していないメーラーが多いため。
また、前述のとおり各メーラーで動作に差異があるので、それらを吸収するようなノウハウも必要です。
ただ、HTMLメールを作成する機会は年に一回あるかどうかといった感じなので（自分の場合）、この辺りの知見がなかなか溜まりにくい。
ここは素直に先人の知恵を借りるべく、既にあるテンプレートを使います。
今回使ったのはFoundationで有名なZURBが公開しているInk（教えてもらった）。
特に海外ではHTMLメールが普通に使われているようで、探せばこの手のテンプレートが結構見つかります。
Inkには各メーラーの差異を吸収するリセットCSS的なスタイルや、パネルやボタンなどのコンポーネント、グリッドレイアウト用のスタイルなどが定義されていますが、デザイン的にこれをそのまま使うのは難しい場合もあるかと思います。
なので、リセットCSS部分だけを拝借して、コンポーネントなんかは参考程度にして自前で作ってしまうのがよいかなと。
各メーラーのCSS対応状況なんかは下記を参考にするとよいです。
The Ultimate Guide to CSS
インラインスタイルでCSSを記述すると書きましたが、コーディング時は普通にwebブラウザで確認するので、CSSを外部ファイルに分けたり、<style>タグ内に書いてしまって問題ないです。後々変換するので。
最初からインラインでスタイルを書くと、心が擦り減っていくこと間違いなしですからね！
レスポンシブ対応
インラインスタイルじゃないと読み込めないメーラーがあると書きましたが、最近のスマホのメールアプリは<style>内のCSSも読み込んでくれます。
また、media queryにも対応しています。
なので、<style>内にmedia queryを使ってスマホ用のスタイルを定義していきます。
所謂デスクトップファーストな書き方ですね。
ただ、当然インラインスタイルが優先されることになるので、!importantが必須です。
公開に向けて
インラインスタイルへ変換
コーディングが終わったら、メーラーで表示させるための変更を加えます。
前述のとおり、インラインスタイルにしか対応していないメーラーがあるので、頑張って書いたCSS達をstyle属性に移します。
と言っても、Inkにはインラインスタイルに変換してくれるジェネレーターがあるので、これを使って変換するだけです。
書いたCSSを<style>タグ内に移してジェネレーターにコード一式をコピペすると、CSSのセレクタを見て、対象となる要素のstyle属性に埋め込んでくれます。
楽ですね。
※ Gulpを使ってインラインスタイル化する方法を別記事に書きました。もっと楽したい方はこちらもご参考ください。
検証
完成したら各メーラーで動作チェックを行います。
各種メーラーを用意するのは大変なので、Litmusのようなオンラインサービスを活用するとさらに楽ができます。
無料期間が7日間だけなのがつらいですが。。
完成！だけど問題が…
HTMLメール独特の作り方が多くて疲れますが、これでなんとか完成。
めでたしめでたし。
と思いたいところだったんですが、問題が。
実はGmailが<style>内のCSSを読み込んでくれず、インラインスタイルにしか対応していないんですよね。
つまり、前述のレスポンシブ対応が有効にならないんです。
今回のやり方はデスクトップファーストで作っているのでPC版は特に問題にならないんですが、スマホのGmailアプリで見た時にもPC版の表示になってしまいます。
PC版が表示されるならいいじゃないかと思うかもしれませんが、これ、文字が小さくなってしまって結構見づらいです。
これじゃ、わざわざHTMLでメールを送っても十分な効果を得られそうにありません。
それならモバイルファーストで作ればいいかというとそうでもなく、モバイルファーストで作ると、今度はOutlookで表示が崩れてしまう。。
完全に詰んでるんですよね、これ。
現実的な選択肢
現実的には、下記のいずれかの手法で作成することになるかと思います。
最近はスマホでメールチェックする人が多いので、スマホでの表示を考慮する前提で。
- レスポンシブはやめて、PCとスマホで完全に共通のデザインにする。
- GmailはPC表示になってしまうことを割りきって、デスクトップファーストで作る。
- Outlookで多少崩れてしまうことを割りきって、モバイルファーストでつくる。
1ですが、コーディングだけを見るとこれが一番簡単に作成できます。
普通のHTMLメールなので。
ただ、デザイン的に無理があるというか、写真メインのHTMLメールとかじゃない限りは、どうしてもPCで見ると文字が大きく、スマホで見ると文字が小さく感じてしまいます。
PCとスマホ、どちらで見てもそれなりには見えるという感じですね。
2と3は、PCとスマホのどちらかのユーザーをより重視して作るやり方です。
やっぱり、各デバイスに最適化された表示の方が読みやすいんですよね。
どちらを選ぶかですが、結局はそのコンテンツが誰をターゲットにしているのかという話なので、コンテンツ次第で使い分けるのがよいかなと思います。
今回上に書いた作り方は2に該当しますが、モバイルファーストで作る場合も、どちらのデバイス向けのスタイルをベースにするのかというだけで、今回書いた作り方と基本的に変わりません。
Gmailがレスポンシブに対応してくれれば、もっと満足のいく作り方ができるんですが。