レスポンシブに対応したHTMLメールのつくり方
つみきのフロントエンドエンジニア、高松です。
最近、HTMLメール形式で配信するメールマガジンのフォーマットを作る機会があり、今回はその際に学んだレスポンシブなHTMLメールのつくり方を書いてみたいと思います。
HTMLメール作成時に注意しなければならないこと
ユーザーがメールを受信するために使うメーラーは多種多様で、各メーラーによってHTMLメールへの対応状況も大きく異なります。
そのため、HTMLメールを作成する際は下記の点に注意する必要があり、これはレスポンシブに対応する場合も変わりません。
- テーブルレイアウトでコーディングする。
- スタイルの記述はインラインで行う。
- 画像は絶対パスで指定する。
- 各メーラー独自の実装を吸収する。
メーラーごとの独自の実装を吸収するには
OutlookではCSSのfloatプロパティに対応していないため、tableタグでレイアウトを表現しなければなりません。
これは、テーブルコーディングに馴染みのない最近のコーダーにはつらいところです（自分もですが）。
また、高いシェアを持つGmailが、styleタグ内に記述したCSSの読み込みに対応していません（WEB版は一部のみ対応）。
そのため、スタイルは各要素のstyle属性にインラインで記述することになります。
さらに、各メーラー独自の仕様への対応も必要になります。
そもそもメーラーの数が多いうえに、各メーラー毎に独自の表示をすることがあるので、HTMLメール専門のノウハウを身につけなければなりません。
このあたり、慣れないと通常のweb制作におけるクロスブラウザ対応よりも大変かもしれません。
メーラー独自の実装を少しでも吸収するために、実際の制作時にはテンプレートを活用するのがおすすめです。
テンプレートを活用する
テンプレートですが、CSSフレームワークのFoundationで有名なZURBが公開している、Inkを使ってみます。
Inkには各メーラーの独自仕様を吸収するようなスタイルや、グリッド、パネル、ボタンなどのコンポーネントが定義されているので、これらを活用して、まずはPCのメーラーを想定したHTMLメールを作成します。
とはいえ、Inkデフォルトのコンポーネントをそのまま使うことはデザイン的に難しいかと思うので、元のコンポーネントを参考に独自で実装してもよいかと思います。
作成の際、CSSは外部ファイルやstyleタグへの埋め込み方式で記述してしまって構いません。
Inkにはstyleタグ内に記述したスタイルをインラインスタイルに変換するジェネレーターがあるので、最終的にこちらを使えば、インラインスタイルしか読み込まないメーラーにも簡単に対応できます。
また、各メーラーのCSS対応状況については下記が参考になります。
The Ultimate Guide to CSS
スマートフォン向けに最適化する
作成したPC向けのHTMLメールをベースに、スマートフォン向けの対応をしていきます。
所謂デスクトップファーストな手法です。
iOSの標準メーラーなどはstyleタグ内のCSS読み込みとMedia Queriesに対応しているので、通常のweb制作同様に@mediaルールを使ってスマートフォン向けのスタイルを記述します。
ただし、インラインスタイルでMedia Queriesを使うことはできません。
上記のジェネレーターを使用しても、@mediaルールを使ったスマートフォン向けのスタイルは、styleタグ内に記述されることになります。
CSSの詳細度の関係でインラインスタイルの方が優先されるので、styleタグ内に記述されるスマートフォン向けのスタイルは、プロパティに!importantを付与しておく必要があります。
また、スマートフォンのGmailアプリは実装が特殊で、PC向けサイズのHTMLメールをスマートフォン向けに自動で幅調整することがあります。
一見ありがたい機能ですが、アプリ側が勝手に判断して調整してしまうのでレイアウトが崩れてしまう可能性が高いうえ、どのように調整されるのか予想がつきにくいです。
こちらはトライアル&エラーで調整していくしかないかもしれません。
各環境での表示を確認する
作成が完了したら、実際にメールを送信して各メーラーで表示確認を行うことになります。
多くのメーラーの確認環境を用意するだけでも大変なので、オンラインサービスを使います。
Litmusを使うことで、主要なメーラーでの表示をブラウザ上で確認できます。
無料で使用できるのは7日間で、その後は有料になってしまいますが、スパムメールに判定されないかをチェックする機能などもあり、おすすめです。
特に細かい調整を重ねる際、各環境での表示をすぐに確認できるのはありがたいです。
Litmusで確認して問題がないようでしたら、実際の配信システムでテストを行ってみましょう。
実機で正しく表示されることが確認できたら、作成完了です！
モバイルファーストという選択肢
今回はデスクトップファーストで作成しましたが、モバイルファーストで作成するという選択肢もあります。
デスクトップファーストで作成した場合、Media Queriesに対応してないスマートフォンのメーラーでは、通常、PC用の表示になってしまいます。（Gmailアプリのように自動で調整するものもありますが）
デザインにもよりますが、PC向けのものをスマートフォンの画面で見ると、文字が小さくて読みにくいと感じてしまいがちです。
その点、モバイルファーストで作成したHTMLメールでは、ほとんどのスマートフォンのメーラーで最適な表示を実現できます。
ただしその代償として、Media Queriesに対応してない多くのPC用メーラーでスマートフォン用の表示になってしまい、文字が不自然に大きくなってしまうことになります。
つまり、PCユーザーとスマートフォンユーザーのすべてに最適な表示を提供することは現状難しく、どこかで割りきらなければなりません。
結局はコンテンツがターゲットにしているユーザー層がどこかという話になるかと思いますので、そのあたりを考慮してどちらの作成手法を選ぶか判断すれば、よりよい効果を得られるかと思います。