98

 

今年、大注目のキーワード「レスポンシブwebデザイン」をご存知の方は多いだろう。多様なデバイスが使用されるようになった今、どのデバイスでも最適にサイト表示させることは、EC運営において必須作業と言える。

 

だが、最適化すべきなのはwebサイトだけではない。メールにおいてもレスポンシブ対応は必要だ。各デバイスに最適化されていないメールは、多くの顧客を失うことになる。ここでは、より良いレスポンシブメール作りのためのデザインにおける7つのポイントをご紹介していこう。

 

レスポンシブメールとは?

 

レスポンシブメールとは、デバイスのスクリーンやディスプレイのサイズに適したレイアウトを自動的に表示するメールのことをいう。どのような画面サイズでも最適な形でメールを表示させるには、実は、コードから作成することが必要だと言われている。

 

だが、現状では、多くのユーザーに使用されているGmailやOutlookが、CSSシートをサポートしていない。そのため、今の段階ではHTMLのテンプレートを使い、レスポンシブメールを作成することがベストである。次に、優れたレスポンシブメールを作るための7つのポイントを見てみよう。

 

1.モバイルに適した表示を最優先する

 

レスポンシブメールを作る際、モバイルとPCのデザインやコンテンツを全く同じにしなければならないという決まりはない。大事なのは、モバイルに最も適した表示にするための項目を最優先することである。従って、デバイスごとに、内容やデザインが異なっても良い。

 

2.ナビゲーションをシンプルにする

 

ナビゲーションにおいても、PCとモバイルで違っていても構わない。デバイスごとに、利用しやすいシンプルなナビゲーションを設計することが肝要だ。

 

3.読みやすいフォントを使用する

 

デバイスごとに文字の読みやすさは異なる。そのため、様々なデバイスで、文字の大きさや色を確認し、読みにくいフォントは採用しない。

 

例えば、iPhoneでは、最低でも13ピクセルは必要だ。また、背景と同系色の文字色を避け、高いコントラストを確保しよう。さらに、文字はテキストだけでなく、画像や動画の中まで確認する必要がある。

 

4.画像にはテキストを入れる

 

メールでの画像表示を、オフにしているユーザーは意外と多い。画像が表示されなくても内容を理解してもらえるよう、画像にはテキストの説明文を入れておこう。

  

5.各デバイスに適した画像に編集する

 

デバイスによっては、画像が大きすぎる場合がある。そのため、デバイスごとに画像の大きさを最適なサイズに変更しておくことが必要だ。だが、モバイル版では単に小さな画像にすればいい訳ではない。タッチスクリーンのユーザーを想定した、タッチしやすい画像の大きさを保たなければならない。iPhoneの場合は、最低でも44×44ピクセルが必要だと言われている。

 

また、PC版でアニメーションを使用している場合は、モバイル版では画像に切り替えることも忘れないでほしい。

 

6.リンク表示には必ず下線を引く

 

モダンなデザインばかりを気にしてリンク先の表示が分かりにくくなっているメールが多い。リンク先には必ず下線を引き、ユーザーが直感的にリンクだと分かるように配慮することが重要である。

 

7.モバイルに最適化されたページへのリンクを貼る

 

メールからサイトへ誘導したにもかかわらず、モバイルに最適化されたランディングページでなければ、顧客を誘導した意味がない。リンク先は必ず各デバイスに最適化されたランディングページに設定しよう。

 

まとめ

 

海外では、AntwortZurb Email templatesといった、レスポンシブメールのテンプレートを配布する便利なサイトがある。これらのサービスを利用しながら、ぜひメールのレスポンシブル対応にもチャレンジしてほしい。

メールだけでなく、運営において様々な施策も行っていきたい所。