43%のEメールがモバイルから読まれている
メール・ニュースレターテンプレートのサービスを行っているEmail Monksの調査によると、2013年現在、43%のemailがモバイル経由で読まれており、年末には50%を超えるだろうという予想がなされている。
引用元）Smart Insights : Responsive Email Design [Infographic]
上記の調査は日本で行われたものではないため、国内の数字がどうなのか興味深いが、昨今のスマートフォン普及率を考えるとメールをスマートデバイスで受け取るユーザは多い事が想像できる。
私が受け取るダイレクトメールやメールマガジンの類の中にはリッチな表現のHTMLメールで作成されたものもある。私宛に届くメールはすべてiPhoneで読める設定にしており、まず届いたメールはiPhoneのメーラーで閲覧し、長文の返信が必要なときにPCのメーラーを起動するといった使い分けをしている。
また、スマートフォンユーザの場合、下記のようなリンクから電話をかけるこのも可能である点も注目すべきポイントであろう。
|
1 |
<a href="tel:00-0000-0000">00-0000-0000</a> |
レスポンシブWebデザイン
昨年頃からよく耳にするようになったフレーズの１つである「レスポンシブWebデザイン」とは、単一のHTMLで画面サイズが異なるPC・スマートデバイス等に対応できるWeb制作方法である。
今から遡ること約３年、フィーチャーフォン全盛時代のWebでは、PCはhttp://www.example.jp/モバイルはhttp://www.example.jp/i/などとpathを分けて制作するといったことが盛んに行われていた。HTML5に対応した高機能なブラウザを搭載したスマートデバイスの普及に伴い、ウェブサイトはPCからだけでなくスマートフォンやタブレットからも閲覧されるようになった。
また、フィーチャーフォンの時代においては、利用できるHTMLタグ、JavaScript、CSS等に制限があり、フィーチャーフォンに向けたサイトの最適化が必要とされていた。レスポンシブWebデザインは、スマートフォンに搭載されているsafariやchromeといったブラウザは、PCサイトをありのままのデザインで閲覧することが可能にした。
参考）Responsive Design jp
レスポンシブemailデザイン
「レスポンシブemailデザイン」とは、単一のHTMLで画面サイズが異なるPC・スマートデバイス等に対応できるHTML mailの事である。
フィーチャーフォン全盛の時代には、PC向けのメールを送信するアドレス、携帯向けのメールを送信するためのアドレスを分けて管理したこともあった。約半数のメールがスマートデバイスによって読まれている事、携帯のキャリアメールだけでなくgmail, yahoo mailなどのフリーメールアドレスがごく一般的にスマートフォンから使われている事等から考えるに、メールマーケティングにおいてもレスポンシブなemailデザインを考慮する必要があろう。
レスポンシブemailデザインのTips
24 Tips for Responsive Email Designによると、まず初めに”iPhoneの画面幅である480pxにターゲットを合わせたレスポンシブデザインが必要である”と述べている。また、注意すべき点として、GmailやOutlook等のメールクライアントではCSSがうまくサポートされていないという問題が挙げられている。（※メールクライアントのCSSサポートについては Responsive email support に良いまとめがある。）
上記サイトには２４ものTipsが挙げられているが、重要な指摘を抜粋すると
- ”モバイルファースト”：一般的にモバイルを先に考えPC向けに展開することは、PC向けのデザインをモバイル向けに編集し直すより簡単
- ”カテゴリメニューを廃したシンプルなナビゲーション”：ユーザはWebとメールを違うものとして捉えていて、コンテンツを上から閲覧し、クリックする価値があるものを探しだそうとする。emailアナリティクスツールを導入しているなら、カテゴリメニューと商品ゾーンのCTRを比較してみればよい。
- “画像の高さを均一に“：画像を縮小させることよりも、高さ480pxに統一し大きな画面サイズの場合横に配置できるようにする。２−３カラムレイアウトであったものが、小さい画面サイズの場合には１列に揃えることができる。
- ”読みやすいフォント（サイズ）”：iPhoneの最小フォントサイズである13pixel以上に。
- “画像Offの場合に備えたデザイン”：画像Offのとき、画像が抜けた真っ白な表示にならないような対策が必要。（GetElastic: Make Email Look Good In Gmail – 8 Design Tips for Images-Off が詳しい）
- “画像サイズの最適化”：Webの場合でもページのロード時間は重要事項だが、3G回線接続時のことを考えるとモバイルデバイスの場合は更に重要。
- “アニメーションGIFを置き換える”：モバイルの場合うまく動作しない。
- ”タップする対象を大きく”：リンクやボタンはApple社のガイドラインで推奨されている44 x 44 pixel以上にする。
- ”余白をとる”：リンク同士が近すぎて誤タップしないよう、適度な余白をとる。
- “LPの対応”：LPがスマートデバイス等画面サイズが小さくFlashが動かないデバイスで閲覧されることを考慮にいれる。
レスポンシブemailデザインのためのツール
実際にレスポンシブemailデザインを行う際に参考になるツールを３サイト紹介する。
1. ZURB : Responsive Email Templates
検証済みの対応ブラウザが多い HTML Mailのテンプレート
2. github : Responsive email template
3. HTML EMAIL BOILERPLATE
HTML Email用のCSS