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

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

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

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

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

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

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

　長らくGmailは『レスポンシブ・デザイン』に対応していませんでしたが、2016年9月にようやく対応となり、晴れてメールクライアントのシェア上位4サービスが正式に『レスポンシブ・デザイン HTMLメール』に対応した状況になりました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

手間のかかるレスポンシブ対応はクラウドで効率化しよう

　当社の『WiLL Mail』のような、誰でもノーコードでレスポンシブ対応のHTMLメールが作成できる専用エディタを使えば、「手間がかかる」という唯一の短所も払拭できます。ご興味があれば無料のトライアルをぜひお試しください。

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