本コラムの前編は下記よりご覧いただけます。
【コラム】Eメールのスマートフォン対応してますか？（前編）
スマートフォンでHTMLメールはどのように見えているのか？
レスポンシブメールのサンプルをご紹介する前に、レスポンシブデザインにしていないHTMLメールが各デバイスやメーラーでどのように見えているのかをまとめておきます。
（表①）
赤枠で囲ったスマートフォン部分をご覧ください。
WEBメールをブラウザで見た場合とAndroid2.3以前のGmailアプリでは、PCサイズで表示されてしまうため、開封するとHTMLメールが一部しか見えない状態（横スクロールしないと全体が 見えない状態）になります。（例①）
※AndroidのGmailアプリは、2012年12月のv4.2.1にアップデートされた際に、横幅の自動調整が 可能となっていますが、Android4.0以上が対象となっているため、2.3以前の端末では依然として横スクロール問題が残っています。
その他のメーラーでは、PC版が縮小された状態で見えます。（例②）
同じHTMLメールですが、例①はiPhoneでhotmailのアドレスで受信したメールをOutlook.com（safari）で見たもの、例②は iPhoneでGmailのアドレスで受信したメールをGmail（safari）で 見たものです。
①では、PCサイズのままで表示されるため、横スクロールしないと全体が見えません。 また、②では、PC版が縮小されているため、本文や右カラムのテキストが小さく読みにくいですね。
このようにスマートフォンでのHTMLメールの閲覧には、「PC版が縮小されて表示されるためにテキストや画像が見にくい」「クリックしにくい」という課題と、そもそも全体が表示されないメーラーがある、という大きく２つの課題があります。
レスポンシブメールとは？
この課題をクリアするのがディレクタスのレスポンシブメールです。 実際のレスポンシブメールが各メーラーでどのように表示されるのか先ほど事例に使ったメールで見てみましょう。
通常のHTMLメールでは、一部しか表示されていなかったHTMLメールも、デバイスの幅に合わせて調整され、最適化されていますね。
レスポンシブメールは、シングルソースでデバイス/メーラーにより３種類の表示にわかれます。
1:PC版
2:スマホ版[フル]（デザイン対応可）
3:スマホ版[ライト]（横幅対応のみ）
各デバイス/メーラーで表示されるメールは以下のとおりです。
先ほどのキャプチャでは3種類の表示の違いがわかりにくいので、レスポンシブメールのサンプルで3種類のメールを比較してみましょう。
スマホ版[フル]（デザイン対応可）は、レイアウトが変わり、一部はテキストが表示されないなど、 スマートフォンに最適化されています。
スマホ版[ライト]（横幅対応のみ）は、横幅がデバイスの幅に合わせて調整されるので、画像が縮小され、テキストは横幅に合わせて改行されますが、レイアウトはPC版と同じです。
レスポンシブメールをデザインする際は、この3種類の表示を前提にデザインをします。
PC版とスマホ版[ライト]（横幅対応のみ）はレイアウトが同じなので、ある程度どちらのデバイスでの表示を優先してデザインするのかを決めておくと、スムーズです。
ディレクタスでは、ローソンHMVエンタテイメント様のご協力により、レスポンシブメールの効果検証を実施いたしました。この結果につきましては、あらためて弊社サイト上にてご紹介いたします。
