レスポンシブHTMLメール制作で失敗しないためのポイントとは？
WEB制作業務の一つとしてHTMLメールの制作に長年携わってきましたが、ここ数年はPCやスマートフォンのどのデバイスにも対応したレスポンシブHTMLメールの制作を依頼されるが多くなってきました。
メールの構成は画像メインからテキストメインに
数年前までは画像のみを配置するタイプのHTMLメールが中心でした。その場合、データの重さに起因する読み込みの遅延が発生したり、メーラーによっては受信者が画像読み込みボタンをクリックして画像を表示させる必要があります。そのため画像中心のHTMLメールの配信を避けるようになり、現在では画像を極力少なく、テキストメインで構成し伝える工夫が求められます。
ワンソースによるHTMLメールが主流に
PCとスマートフォンで問題なく表示させるために、メール配信システムによっては、両者で全く違うダブルソースで作成する方法もありました。しかしその場合ちょっとした内容修正が発生した際に、一方のソースを修正し忘れるなど、制作サイドでミスも発生しやすく、現在ではワンソースでのレスポンシブ化したHTMLメールが主流となっています。
どのデバイスやメーラー（Webメール含む）で受信しても問題なく表示できることがベストとなりますが、受信者のOSや機種、メーラーの種類など対応条件が非常に多岐にわたるため、完全に対応するのは困難な状況です。
ターゲットに合わせて、対応デバイスやメーラーに優先順位をつけて絞り込む必要があります。例えばBtoB案件であればPCのGmailやOutlook、BtoC案件であればスマートフォンのGmailやiPhoneのメールソフト等はマストで対応し、それ以外の環境では対応範囲を検討する必要があります。
レスポンシブメールの注意点
レスポンシブHTMLメールの表示では、ブラウザ表示では全く問題にならないようなことが、メーラーではうまく表示できないことが多々あります。以下ではメーラーでの実現が難しい２つの表示方法について検証結果をご紹介します。
１. PCとスマートフォンでちがう画像を表示させる
通常のウェブサイトのレスポンシブコーディングでは、ページの見え方やレイアウトを考えて、訴求効果が高くメインで使いたい画像はPCとスマートフォンでは別のものを用意することが多々あります。その流れでHTMLメールも別の画像を用意したデザインのコーディングを希望される場合があります。
２. スマートフォン表示時にブロックの一部のカラムを「段落ち」させる
ウェブサイトのレスポンシブコーディングでは、スマートフォンでの「見やすさ」のために表示の一部を段落ちさせたいとの希望があります。PC表示時に横並びの表示を、スマートフォン表示時に縦並びに変化させる方法です。
身近なデバイスでの検証結果
| PCメーラー | スマホメーラー | |||||
| 機種 | Windows PC | iPhone | Android | |||
| Microsoft | Apple | Microsoft | ||||
| メーラー | Outlook | Gmail | メール | Gmailアプリ | Outlook | Gmailアプリ |
| PC､スマホ別画像 | × | × | 〇 | × | 〇 | × |
|---|---|---|---|---|---|---|
| スマホ段落ち表示 | – | – | 〇 | × | 〇 | × |
(1) PCとスマートフォンでちがう画像を表示させる
PCのOutlook、スマートフォンのGmailアプリは対応できません。（CSSでメディアクエリが効かない）
(2) スマートフォン表示時にカラムのブロックを一部段落ちさせる
GmailアプリではiPhone、Androidともにできません。（CSSでメディアクエリが効かない）
検証の結果から、メーラーではシェアの高いGmailがどちらも未対応なため、上記２つの見せ方はおススメできないという結果になりました。同一画像を使用して、PC、スマートフォンでレイアウトが変化しないスケーラブルなHTMLメールの制作をおススメします。
テキストだけでどこまでメールのデザインは可能なのか
先にも書きましたがメーラーの種類によっては受信者が一度クリックして、画像を読み込まないと内容が表示されないということもあり、広告配信しても受信者が開封して、なおかつ画像の読み込みのクリックアクションを起こさないと内容を見てももらえない状況となります。つまり画像を使わなくても内容が伝わるメールの方が良い、ということになります。
そこで、画像を使わずにどこまでテキストとstyle指定（css）だけでデザインが可能なのか？やってみました。
結果
CSSによるテキスト装飾のみで、それなりにデザインを高められることがわかりました。表示環境によって文字サイズが変化したり、「段落ち」できなかったり等、若干の課題はありますがデザインやコーディングの際の調整で解決できそうです。
BtoＣ案件の新商品紹介などには画像無しだと情報不足な感は否めません。画像は極力小さく、スケーラブルで閲覧でき、画像内には文字情報を配置せず、テキスト中心にデザインされたメールをおススメします。
まとめ
マルチデバイス対応が当たり前となった今、メールの表示環境は非常に多岐に渡ります。そういった状況の中で、全ての環境で統一されたデザインイメージでメール配信するためには、できる限りシンプルで環境に依存しないレイアウトを心がけることが大切です。レスポンシブHTMLメールにおいて、複雑なレイアウトは検証作業に多大な時間を必要とします。シンプルなレイアウトと表示環境の絞り込みについては、早い段階でお客様と情報を共有し、ご理解いただくことをおススメします。
WEBプログラマー ／ H.C
