レスポンシブ Eメール デザインで今何が提供できるのか

現在、メールはスマートフォンで開封する確率が高くなってきており、将来的に、配信しているHTMLメールのレスポンシブ化を視野に入れているかもしれません。しかし、多くの制約があるため作るのを躊躇しているのが実際の現状かと思います。

今回は制作面からレスポンシブ Eメール デザインの現実を踏まえつつ、今出来るフロントエンド、デザインについて解説し、最後に何が提供できるかご紹介させていただきます。

フロントエンドについて

主流なHTMLメールはテーブルレイアウトで構成されテーブル内に画像を配置して行く手法をとっています。レスポンシブ Eメール デザインでも同じくテーブルレイアウトで制作します。

それは各クライアントごとにCSSのサポートが違い、更に独自のCSSを読み込んでいるためです。レスポンシブ Eメール デザインに対応したフレームワークが登場しているので、そちらを参考にしながら制作するのが良いと思います。

HTMLメールのアクセシビリティ

ここでは、制作手法寄りのアクセシビリティに関してお話ししたいと思います。ほとんどのHTMLメールはテーブルレイアウトで制作されているため、文書構造が適切ではありません。スクリーンリーダーで聞いてみるとよりテーブルレイアウトによるアクセシビリティの欠如が体験できます。当社のコラム「情報が伝わるHTMLメールを目指しませんか？」でも紹介されておりますのでぜひご覧ください。

デザインの再現性を担保しつつ文書構造を適切に保つ方法の一つとしてWAI-ARIAが有効と言えます。table要素にrole="presentation"を付与することでtable要素としての意味合いを無くすことができます。レイアウト目的で使用するHTMLメールには必須と言えます。

また、googleはHTMLメールから顧客とのエンゲージメントを向上する機能を提供しています。 Inbox、Now CardsなどではHTMLメールから情報を読み取り顧客にとって重要だと判断されたHTMLメールはメール一覧上でハイライトされたり、Now Cardsに表示されたりします。 このような機能は現在は特殊な方法を使用しますが、将来的にはWebサイトのようにアクセシブルな文書構造からでも可能になると考えます。

HTMLメールではデザインの再現性を担保しつつ、適切な文書構造を提供するにはWAI-ARIAの存在が欠かせません。

デザインについて

メディアクエリーが使えない端末も考慮して、シンプルなレイアウトのHTMLメールにすることが大切です。ここでのシンプルとは何か。海外ではありますがレスポンシブ Eメール デザインのギャラリーサイトなどを見ると以下の特徴が上げられます。

シンプルなレイアウト

複雑なレイアウトよりスマートフォンでの可読性を担保してくことが大事と言えます。

• ワンカラムレイアウト
• レイアウトのバリエーションが少ない

シンプルなリンク

CSSのサポート状況が乏しい故に単色のCall To Action（以下「CTA」）ボタンになっています。また、リンクだと分かるように下線をつけるのもひとつの手段と言えます。

• CTAボタンは各セクションごとに設置し散らばらせない、一直線上にある
• フラットデザインのような単色のCTAボタン

シンプルな画像

画像はよりCTAを促進されるようなイメージを持たせる画像であって、画像が表示されなくても情報が読み取れると良いと言えます。

• 画像に文字を載せず、載せてもスマートフォンでの閲覧時に可読性が担保されるような大きめのフォントサイズ
• 装飾的なアイコンが少ない

まとめ

レスポンシブ Eメール デザインはべストプラクティスではありません。ほとんどの顧客がPCで閲覧しているようなら作る必要はないと言えます。

HTMLメールの特徴の一つが、効果測定が出来ることです。潜在的な顧客の発掘、提供しているコンテンツ、配信時間等を考慮してスマートフォンにも対応した方が顧客とよりよい関係を築けるならぜひ、作ってみる価値があると言えます。効果測定のスタートラインにも立てない状態では意味がありませんからね。

フロントエンド、デザインの視点からレスポンシブ Eメール デザインで作れるコンテンツとは本当に見て欲しい情報だけを掲載することです。具体的には以下が上げられます。

• トランザクショナルメール
• イベントの告知
• 単一の新サービス、商品の紹介

まだまだ、多くの要望に応えることができないレスポンシブ Eメール デザインですが、顧客との良好な関係性を築いていくためのPDCAサイクルを回す手段の一つとしてご検討ください。