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