メールマーケティング

レスポンシブHTMLメールとは?特徴や長所・短所を紹介

 ウェブのトレンドがスマートフォンに移行し、メルマガ配信もスマートフォン対策が欠かせなくなりました。こうしたスマホ対策の定番として『レスポンシブ・デザインを採用したHTMLメール』が挙げられます。今回は『レスポンシブ・デザインHTMLメール』の特徴、長所、短所や他のデザインとの比較について説明します。

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

 『レスポンシブ・デザインHTMLメール』とは『レスポンシブ・デザイン』に対応したHTMLメールです。まずはこの『レスポンシブ・デザイン』について説明します

2010年からレスポンシブ・デザインが徐々に主流へ

 『レスポンシブ・デザイン』とは様々なデバイスや画面サイズに応じて自動的に画像や文字などのサイズを調整するウェブデザインです。『レスポンシブ・デザイン』は、ひとつのデザインでどんな環境でも適切に表示されるため、ウェブのトラフィックがスマートフォン端末に移行し始めた2010年頃から採用され始めました。

 『レスポンシブ・デザイン』がウェブデザインへ適用されるとともに、HTMLメールにも適用され始め、『レスポンシブ・デザインHTMLメール』の浸透が始まります。

 しかし『レスポンシブ・デザイン』は、ウェブデザインの領域では急速に浸透したものの、メールにおいては大きな問題がありました。それはGmailがレスポンシブのCSSをサポートしていなかったことです。

レスポンシブ・デザインを構成するCSS要素とは

 『レスポンシブ・デザイン』は、『フルードグリッド(Fluid Grid)』『フルードイメージ(Fluid Image)』『メディアクエリ(Media Query)』という3つのCSS要素で構成されています。これらの技術によってサイズの異なる端末ごとにレイアウトを可変する動きが可能になります。GmailはこうしたCSSを無効化する仕様だったため正しく動作しませんでした。

 その後、Gmailは2016年9月にようやく正式に埋め込み型CSSのサポートを開始しました。これによりメールクライアントのシェア上位4サービスが正式に『レスポンシブ・デザイン HTMLメール』に対応した状況になりました。

世界のメールクライアントのシェアTOP4
1位:Apple iPhone 29%
2位:Gmail 27%
3位:Apple iPad 10%
4位:Apple Mail 8%
Email clients market share trends for th first half of 2018より引用

関連ブログ:HTMLメールはどうやって作成するの?まずは基本と特徴を徹底解説!

レスポンシブ化が必要な理由

 ご説明した通り、ウェブデザインの浸透から大幅に遅れをとりつつも『レスポンシブ・デザイン』はメールの領域でも浸透し始めています。様々なデバイスで閲覧可能という特徴とともに、なぜレスポンシブ化、つまりモバイル最適化が必要なのかについてさらに具体的な数値とともに説明していきます。

1. メールは6割以上がモバイル端末で開封されている

 Adestra社の調査によると、メールがモバイルで開封される割合は61%となり、他のデバイスと比べると圧倒的に高いことがわかっています。

2.消費者の40%はモバイルで最初にメールをチェックする

 米国のThe Relevancy Goup社が2018年に実施した調査によると、消費者の約半数(40%)がメールはモバイルで確認すると回答しています。 モバイルの優先度はここ数年で増加傾向にあるととともに、メルマガ確認のデバイスとしての位置付けにもなりつつあります。

3.レスポンシブ化するとクリック率が増加する

 Mailchimpは、レスポンシブ・メールとそうでないメールのクリック率の比較を行いました。この結果、レスポンシブ・メールのクリック率が2.7%から3.1%に増加した、つまり15%近く増加したことを報告しています。

 このように、皆さんのメルマガはモバイル端末で読まれている可能性が高く、その確率は年々増加しているのです。レスポンシブ化を行ってモバイルに焦点を当てたコミュニケーションをきちんととることによって、今よりも開封率を高め、クリック率を15%増加させる可能性があるのです。

関連ブログ:メルマガのクリック率はもっと上がる。10個のシンプルな改善方法

別デザインとの比較からみるレスポンシブ・デザインの長所・短所とは?

 モバイル最適化の手段として『レスポンシブ・デザイン』が主流ですが、もうひとつ『スケーラブル・デザイン』という手法・考え方も存在します。この項では両者の特徴や長所・短所を比較していきます。

もうひとつのスマホ対応『スケーラブル・デザイン』とは

 『スケーラブル・デザイン』とは、シンプルなひとつのデザインパターンのみを用意して、モバイル・デスクトップを問わず様々な閲覧環境でも見やすいデザインのことを指します。つまりメールのサイズは閲覧されるデバイスのサイズに単純に縮小されるだけです。そのため、あらゆるデバイスで読みやすくするためにあらかじめフォントやイメージを大きめに作成します。

 『スケーラブル・デザイン』の長所と短所をおおまかにまとめまると以下のようになります。

スケーラブル・デザインの長所

  • すべてのデバイスで動作する
  • すべてのデバイスで同じように表示される
  • 簡単に作成できる
  • 簡単に管理、テスト、編集ができる

スケーラブル・デザインの短所

  • 本当の意味でのモバイル最適化とは言い難い
  • 複雑なレイアウトには対応していない

 つまりこの『スケーラブル・デザイン』は、メールマーケティングを初めて行う場合、モバイル最適化に多くのリソースが割けない場合に優れているといえそうです。このデザインを最大限に活用するために覚えておくべき点はいくつかあります。

スケーラブル・デザイン作成の注意点

  • 1カラムレイアウトにする必要がある
  • メールが長くなりすぎるのを避けるため、クリック箇所を明確にし、ひとつだけにする
  • 同じくメールが長くなりすぎないように使用する画像の数をおさえる

『レスポンシブ・デザイン』の特徴

 『レスポンシブ・デザイン』は『スケーラブル・デザイン』より複雑なデザインやコードを必要とし、メール閲覧に使用されるプラットフォームや画面の大きさに応じてレイアウトの調整やフォントや画像を自動的に変更します。スタイルシート内の「メディアクエリ」が閲覧しているデバイスに応じてHTML要素の表示方法をそれぞれ定義してくれるのです。

『レスポンシブ・デザイン』の長所

  • 1カラムよりも多くのデザインパターン作成が可能
  • より優れたユーザーエクスペリエンスを読者に提供できる
  • 読者とのエンゲージメントを高めることができる

『レスポンシブ・デザイン』の短所

  • コーディングが複雑
  • 作成に時間がかかる

 以前は大きな短所として「Gmailがレスポンシブ・デザインに対応していない」という点がありましたが、2016年9月にその問題もなくなったため、『レスポンシブ・デザイン』は手間がかかる点が唯一のデメリットといえます。またコーディングが複雑なゆえに、レイアウトを絶えず編集している場合、HTMLが壊れてしまう可能性も高い点にも十分注意が必要です。

まとめ

 いかがでしたでしょうか。『レスポンシブ・デザイン』の特徴や必要性、長所と短所をおわかりいただければ幸いです。現在のメルマガ閲覧環境は、モバイルの割合が増えつつ複数のデバイスを併用している状態でもあります。どんな環境で閲覧しても最適な表示が可能な『レスポンシブ・デザイン』を採用しない手はありません。

手間のかかるレスポンシブ対応はクラウドで効率化が出来る

 Gmailがレスポンシブ・デザインをサポートできるようになったことに加え、当社の『WiLL Mail』のような、誰でも簡単に操作が出来るレスポンシブ対応のHTMLメール作成エディタを使えば、「手間がかかる」という唯一の短所も払拭できます。ご興味があれば無料のトライアルをぜひお試しください。

 最後までお読みいただきありがとうございました。

著者
WiLL Cloud マーケティングチーム

ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

WiLL Cloud無料トライアル