こんにちは。仕事でHTMLメールと格闘することもあるUIデザイナー、タカムラです。
HTMLメールを作るようになってから、自分が日頃受け取っているメールを意識するようになったのですが、PC向けに作られたHTMLメールってスマホだと読む気しないですよね。
今回はモバイルフレンドリーなHTMLメールの作成方法を4種類ご紹介し、どんなケースでどの方法を採用すべきかまとめます。
Eメールを取り巻く環境
- 50% 以上モバイルで開封されている - emailmonday “The ultimate mobile email statistics overview"
- Gmail のアクティブユーザー9億人のうち、75% がモバイルで利用 -techcrunch “Gmail Now Has 900M Active Users, 75% On Mobile"
このような時代の要請に応えるべく、ユーザーの閲覧環境に最適化したメールデザインを提供するための手法がいくつか生みだされました。それぞれ、どんな特徴があるのか見てみましょう。
Scalable Design
まず最初に紹介するのは「スケーラブルデザイン」と呼ばれる手法です。
これは、デスクトップでもモバイルでも見やすい1パターンのデザインを用意することで、環境を問わず見やすいHTMLメールを実現しようという考え方です。（例：Evernote）こうしたコンセプトは「モバイルフレンドリー」や「モバイルファースト」などといった呼び方でお馴染みかもしれません。
プラットフォームに応じたテーブルや画像、文字等のリサイズは行いませんし、メディアクエリも使用しません。コードではなくデザイン側で対応するので、実装がシンプルなのが良いところです。
デザインの際は、モバイルでの体験を損なわないために下記のポイントに留意すると良い感じです。
- 全体の横幅は 550px 程度までに抑える
- 文字サイズは大きめに（目安は 16px 以上）
- シンプルにレイアウトする（1カラムがお勧め）
- CTA ボタンはタップしやすいように大きくする（縦幅 44px 以上）
作成が簡単なので、モバイルフレンドリーなHTMLの第一歩として良いでしょう。
Fluid Design
次に、「フルードデザイン」と呼ばれるものをご紹介します。
table タグや img タグに対して「100%」のように横幅をパーセント指定することにより、閲覧環境に応じた横幅にフィットさせる手法です。（例：Basecamp）
Web 界隈の方には「リキッドデザイン」や「リキッドレイアウト」と言った方がイメージしやすいかもしれません。
メールクライアントの横幅に応じて伸び縮みするため、テキストが多めのコンテンツの場合に有用です。ただ、際限なく横幅が広がると、一行あたりの文字数が多すぎて逆に読みづらくなります。なので、「max-width」を指定するなど最大幅を設定するのが現実的です。max-width がサポートされていない outlook にも対応するには、メディアクエリを使ったり、条件付きコメントを使ったりする必要があります。
最近では、このテクニックを単独で用いるケースは少なくなってきています。レスポンシブと組み合わせて使用されることが多いです。
Responsive Design
「レスポンシブデザイン」はメディアクエリを使って、設定したブレークポイントを境にスタイルを切り替えます。Webページのレイアウト最適化でもよく使われる手法ですね。
横幅に応じてカラム数を変更したり、表示／非表示を切り替えたりと、かなりパワフルにレイアウトやスタイルの最適化を行うことができます。（例：Quirky）
そのポテンシャルは非常に魅力的ではあるのですが、二つ問題を抱えています。
- 実装＆検証に手間がかかること
- メディアクエリ に対応していないメールクライアントの存在
前者については、有償・無償で提供されているテンプレートを利用することでクリアすることもできますが、後者が大きなネックです。特に、それなりのシェアを持つ Gmail 系のメールクライアント（Inbox 含む）がメディアクエリに対応していないため、恩恵を受けられるユーザーが限られてしまうのが残念なところです。
それなりに使われている方法ですが、後述の「ハイブリッドデザイン」の登場により、立ち位置が微妙になりつつあります。（デザイン＆実装の手間の割に、対応できる環境が限られるので）
Hybrid Design
メディアクエリを使わずに、レスポンシブデザインのような柔軟なカラムレイアウトを実現するのが「ハイブリッドデザイン」です。海外では「Spongy Design」と呼ばれてたりもします。Gmail 系含め、ほとんどのメールクライアントに対応できるのが強みです。
詳しい実装方法については、この素晴らしいチュートリアルが参考になります。
実装の肝は以下の3点です。
- フルードデザインをベースとする
- デスクトップでの最大幅を縛るため max-width を使う
- max-width に対応しない Outlook 用に条件付きコメントを駆使する
レスポンシブに輪をかけて実装が複雑なのが難点ですが、多くのメーラーで意図通りのカラムレイアウトを実現するには、現状この手法がベストでしょう。
どれを採用すべきか？
では、この4つの中からどの手法を採用すればよいのでしょうか？
コンテンツ、メールを閲覧しているユーザーの環境、あなたの持つノウハウやリソースなど、考慮すべき点はいくつかありますが、大まかに次のような基準で判断するとよいと思います。
Scalable Design
- とりあえずモバイルフレンドリーなメールを試してみたい
- コンテンツのボリュームが控えめである
- メール作成に割ける時間が限られている
Fluid Design
- シンプルなレイアウトで充分である
- コンテンツがほとんどテキストだ
- メール作成に割ける時間が限られている
Responsive Design
- レイアウトをがっちり制御したい
- モバイルでの閲覧割合が高い
- Gmail 系のメーラーには対応しなくてもいい
- メディアクエリや基本的なHTMLメール作成の知識がある
Hybrid Design
- レイアウトをがっちり制御したい
- モバイルでの閲覧割合が高い
- できる限り全てのメーラーに対応したい
- 基本的なHTMLメール作成の知識があり、技法習得のための時間をかけられる
最後に
今からスマホに最適化したHTMLメールを始めたい、というのであれば
- まずは手軽なスケーラブルデザインから始めてみる
- スマホでの閲覧が多いようであれば、ハイブリッドデザインを導入する
というのが現時点でのお勧めです。
また、各手法は排他的なものではありません。フルードデザインベースで文字サイズだけレスポンシブ（メディアクエリ）のような合わせ技もよく見られる方法です。プログレッシブ・エンハンスメントとして、一部のメーラーだけでもより見やすくするという対応も全然ありだと思います。メール閲覧者の体験向上に役立つテクニックはどんどん取り入れていきましょう。
一から自分で実装するのはちょっと無理かも……という方は、Litmus が無料で提供しているテンプレートをダウンロードしてみてください。テンプレートごとに、ハイブリッド、レスポンシブ、フルードのHTMLがセットになっているので参考になるはずです。
