レスポンシブEメールの必要性
スマートフォンもずいぶんと普及し、ほぼ2人に1人は利用する時代になりました。 Eメールに関しても、PCだけではなくスマートフォンでも閲覧する人が増え、スマートフォンだけで閲覧する場合も少なくありません。
そのような状況の中、WEBサイトはスマートフォン最適化が当たり前になってきていますが、Eメールはどうでしょうか？
従来のPC画面サイズのEメールをスマートフォンで閲覧すると全体表示はされますが、文字や画像が小さく表示されてしまいます。当然、ユーザは文字も読みづらく、クリックもしづらく、大切なお知らせや情報はますます届きにくくなります。また、古いOSだと全体表示されず一部表示となりスマートフォンの画面をドラッグしたり、スクロールして見ることになります。
スマートフォンユーザにメールを読んでクリックしてもらうには、閲覧環境に合わせたユーザフレンドリーなデザインを提供することが必要です。 スマートフォンサイズに合わせたデザインとする方法もありますが、より高いユーザエクスペリエンス提供を目指すのであれば、WEBサイト同様、レスポンシブ対応させることが望ましいです。
Eメールにおけるレスポンシブとは
では、Eメールにおけるレスポンシブとは、どのようなものでしょうか？ WEBサイトと同じでしょうか？
レスポンシブという定義ではほぼ同じ意味合いで、閲覧する画面サイズに合わせて、レイアウトや画像、デザインを変えて表示します。ただ、メールの閲覧環境には様々な制約があり、実際に制作する上ではメール独自のノウハウや制限が存在します。WEBサイト同様のコーディングだけでは上手くいきません。
コーディングの仕方によって、最適化の深度は下記のように分けることができます。
1）画面サイズでレイアウト変更する方法
いわゆる リキッドデザイン と呼ばれる手法で、デバイスの画面サイズの縮小に合わせて、コンテンツのレイアウトが変化します。文字サイズなどはそのままでデザインもPC版のデザインが横に圧縮された感じになります。PCとスマートフォンで横幅が変化することを想定して、デザインを検討する必要があります。
ex) 横に2列のレイアウトが、横1列になる
2）メディアクエリを合わせて使う方法
「1)画面サイズでレイアウトを変更する方法」に加えて、メディアクエリを適用したcssを読み込ませることで、レイアウトだけでなく文字サイズや色、画像なども変えることができるのが「レスポンシブEメール」です。
スマートフォンに合わせたテキスト文字数やサイズ、画像を変更することもでき、スマートフォンにより適した表示にすることができます。
さらに、メールに動的な表示要素を加えるキネティックコンテンツを採用する場合もこの方法で制作します。
（※対応環境：iOS:標準メールアプリ Android：標準Eメールアプリ）
ex) スマートフォンで表示する際に、ボタンの色や画像を変更して表示する
よりスマートフォンに最適な表示を実現できるのは「 2）メディアクエリを合わせて使う方法 」です。
ただし、メディアクエリは、閲覧環境により非対応の場合も多く、活用できる環境が限定されます。
下記は HTMLメールの表示確認サービス「Litmus」が紹介しているスマートフォンOS別のメディアクエリ サポート状況です。
引用：Litmus
iOSは、標準メールアプリでメディアクエリの利用が可能です。メディアクエリで指定することで様々な要素を出し分けすることができます。（iPhone だけに表示させる画像を設定する、メール内の文字サイズをPCとスマートフォンで変更する、など）
一方で、Android はバージョン5 以上からは、標準メールアプリがGmailアプリに統合されています。
Gmailアプリではメディアクエリを利用できないため、バージョン5以上のAndroidをスマートフォン対応をさせる際は、 リキッドデザインで表示されるという前提でメールをデザインする必要があります。
注意しなければならないこと
メールのレスポンシブ対応を行う際、どのような事に注意しなければならないでしょうか？
■ デザイン
スマートフォン閲覧時の見え方を念頭においてデザインする ことが必要です。 文字の大きさやテキスト量、画像内の文字テキストのサイズなど、スマートフォンとPC環境でどのように見えるかということを考慮します。
具体的に考えてみましょう。仮に、スマートフォンは画面サイズの小さい表示サイズ幅 320px のものと想定します。
PC向けのメールを600～700pxだとした場合、PCで横幅いっぱいのバナー画像は、スマートフォンでおよそ半分～それ以下のサイズに縮小して表示されることになります。PCで20pxで見えていたバナー内の画像文字は、スマートフォンでは10pxで見えることになります。
同様にボタンのサイズも縮小されます。iOSの開発者向けガイドライン 「iOSヒューマンインターフェイスガイドライン」 によると、タップ可能領域の最小サイズは44×44ポイントとされています。スマートフォンで見てボタンが縮小されても、この大きさを保持できるよう、PC向けのデザインを考えないといけません。
テキスト要素についても、PCでは2行で納まっていたテキストが、4行のテキストになるのです。PC向けメールの感覚で原稿を準備すると、どうしても情報が多い印象を与えます。
こうした課題を解決するためには、
・画像内のテキストは、スマートフォンで見てもつぶれないサイズに
・テキストは行数が多くなっても読みやすい量や行間を意識して準備する
などの複合的条件を考えてデザインしていくことが必要です。
伝えたい情報が端的に伝わることが重要なので、モバイルファーストを念頭に 装飾的な文言・画像を省いたシンプルな原稿を使う ことも有効です。
■ 閲覧環境
閲覧環境の設定は非常に重要です。もちろん様々な想定されるデバイスで検証することは必要ですが、スマートフォンデバイスの種類は限りなくあります。あらかじめ、ユーザの閲覧環境調査などをし、対象とする検証環境の範囲や方針を決めて、制作するようにしましょう。
■ コーディング
閲覧するモニターによって画面サイズが変わるので、それに対応できるようコーディングする必要があります。
widthをパーセンテージで設定することは用意に思いつきますが、それだけだと表示が崩れてしまうPCクライアントもあります。
そうした、 閲覧環境ごとの特徴やクセを確認しながら、コーディングしていくことが大事 です。
スマートフォンは比較的新しいコーディングスキルが活用でき、メディアクエリを使ってスタイル変更することで、より高いレベルでのスマートフォン最適化を目指すこともできます。
一方、PC向けのメールの閲覧環境は、まだまだテーブルレイアウトが主流です。CSS3が使えるクライアントも少ない状況です。
閲覧環境ごとの対応状況の違いから 「PCにあわせるとスマートフォンで問題が起きる」「スマートフォンにあわせるとPCで問題が起きる」 という事態が起こりやすく、レスポンシブメールのコーディング作業は、こうした多くの矛盾をひとつずつクリアにしていく作業とも言えます。
なかなか骨の折れるコーディング作業を効率化していく上では、 閲覧環境ごとの特性や表示崩れの回避方法を予め知っておく ことがとても重要です。
検証の際、表示崩れが起こりやすい環境について、代表的なものを以下の記事で紹介しているので、参考にしてください。
■ データサイズ
レスポンシブメールの場合、PC用・スマートフォン用 双方のソースコードを1つのファイルに含むため、通常のPCメールに比べてHTMLファイルの容量が大きくなります。そのため、配信システムに設定されている容量制限には注意が必要です。制作に入る前段階で、配信システムの容量制限を確認しておくことをおすすめします。
また、 スマートフォンは高解像度のため、スマートフォンでもキレイに見せようとすると画像のサイズも大きくなります。 サイズの大きな画像は、読み込みに時間がかかる、端末のデータ通信量にも影響する等、メール受信時の負荷に直結します。 ユーザーにメール自体を嫌われてしまわないためにも、画像は、画質とデータサイズのバランスを見て最適化を行うのが好ましいです。
最後に
メールをレスポンシブ対応させる際には、掲載されるコンテンツ内容が違えば、最適なデザイン・方法も違ってきます。適時、状況に合わせて、 デザインや方法、コンテンツを含めた最適化を意識していくことが必要です。
従来のメールに比べ制作作業自体が複雑になるので、メールのテンプレート化や運用ルールの改善など、作業そのものの効率化を図っていくことも大切になります。
