Webサイトでは当たり前になった、マルチデバイス対応。でも、HTMLメールの マルチデバイス対応は大丈夫ですか? このLessonでは、メールとWebの違いを押さえながら、レスポンシブなメールの作り方を学びます。

 

80% of people delete an email if it doesnʼt look good ontheir mobile device.
自分のモバイルデバイスできれいに表示されないメールがあったら80%の人が消してしまう

毎日のように手元に配信されてくるメールマガジンは、海外ではこのようにレポートされています。

日本でもスマートフォンやタブレットなどのスマートデバイスの普及が高まり、EコマースをはじめとしたWebサイトも、スマートデバイスでストレスなく表示する必要があるとされています。Webサイトをスマートフォンに最適化する、レスポンシブWebデザインの手法をとり入れるなど、多くのWebサイトはスマートフォン向けの施策がとられています。では、メールはどうでしょうか?

スマートフォンで見られないメール

スマートデバイスの表示領域はPCに比べると非常に小さいものです。単純なテキストメールなら、表示領域の問題は起こりにくいものです。しかし、 画像をふんだんに使ったマーケティングメールは、全体を画像で構成したものやWebページをそのまま貼り付けたようなものが多くあります。このようなメー ルは、スマートデバイスでは全体の内容が小さく表示され、文字が読みにくいだけでなく、表示に時間がかかる、画像が表示されないといったことすら起こるのです。

そんなメールを受け取った人は、どのように行動するでしょうか。スマートデバイスでうまく読めないメールを消すことはないにしても「とりあえず既読マークを付けて読んだことにする」 ということは十分にあり得ます。仕事に関係するものや大好きなブランドや製品、よほど興味のあるものならばともかく、PCで改めてメールを確認する人は 「全体の3%しかいない(The How-To Guide to Responsive Email Design)」ともいわれています。

とりあえず既読とされてしまうと、本当に読まれているか分からなくなる

とりあえず既読とされてしまうと、本当に読まれているか分からなくなる

スマホ・タブレット時代のHTMLメールの課題

HTMLメールは、メール配信サービスの専用ツールや時代遅れなテーブルレイアウトと呼ばれる手法で作られているため、さまざまな制約があります。「Webページを貼っているようなものだから、同じようなやり方でいいんでしょ」というのは大間違いです。

PCの多種多様なメールクライアントに対応するだけではなく、GmailのようなWebサービスもあります。そのうえ、スマートフォンやタブレッ トなどのスマートデバイスでもOSやアプリによって、HTMLメールの描画のされ方=見え方に違いがあるのです。スマートフォンに最適化されてないWeb サイトをスマートフォンのブラウザーで表示したようなもので、見づらいものです。

端末、OS、メーラー、アプリで見え方は異なる

端末、OS、メーラー、アプリで見え方は異なる

ほかにも閲覧デバイスの多様化による問題はあります。

  • 初期状態では画像表示が無効化される
  • デザインの実装に使うCSSのサポート状況がバラバラ
  • 同じサービスでもブラウザーとアプリでは見え方が異なる
  • デバイス幅で表示を変えることができない

これが、HTMLメールの世界なのです。

HTMLメールは、情報が欲しくて積極的にWebサイトを見るのとは異なり、一方的に送られてきたものを見るのです。よほどの動機がなければなんとかして読もうとは考えません。「メールはPCで読まれるものだ」という固定観念を捨て「受け手がスマートフォンであってもさほど労せず読めるようなHTMLメールを配信する」と意識することが先決です。

サイズが小さくなってしまうGmailアプリでも視認性は高い

サイズが小さくなってしまうGmailアプリでも視認性は高い

レスポンシブEメールデザインとは

「レスポンシブEメールデザイン」とは、さまざまな閲覧スタイルに適応しながら、効果の上がるモダンなHTMLメールのデザインのことです。PCだけでなくスマートフォンでも見やすいシンプルなレイアウトにしたり、PCとスマートフォンとでレイアウトを切り替えたりすることで、ユーザーに見てもらえるメールを目指します。

レスポンシブEメールデザインはレスポンシブWebデザインのようにデバイスや閲覧状況にあわせてコンテンツやレイアウトを完全に適応できるわけではありません。これまでの常識が通じない世界になりつつあることをしっかりと認識し、メールの配信側も時代にあわせて考え方を変えなければならないのです。

デバイスに合わせた読みやすいメールを目指すのがレスポンシブEメールデザイン

デバイスに合わせた読みやすいメールを目指すのがレスポンシブEメールデザイン

 

こもりまさあき

こもりまさあき

1972年生まれ。1990年代前半に都内のDTP系デザイン会社にて、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年会社を退職後フリーランス。案件ごとに業務内容などが異なるため、職域的な肩書きはなし。「プロとして恥ずかしくない 新・WEBデザインの大原則(MdN刊)」監修ほか、「レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方(KADOKAWA/アスキー・メディアワークス刊)」をはじめ執筆多数。
HTML5Experts(http://html5experts.jp/)エキスパートNo.20

このLESSONは、次の書籍を再構成したものです。
レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方 (こもりまさあき著、KADOKAWA刊)

書籍で読む

Loading...