レスポンシブHTMLメールとは？作り方や配信メリット・注意点を解説！

メール配信システムのサービス一覧

• デザイン性の高いHTMLメールをかんたん作成
• セグメントを絞って特定のターゲットのみに配信可能
• 毎時470万通配信できる業界トップクラスのスピード

メール配信システムの
サービスを一括ダウンロード(無料)

レスポンシブHTMLメールとは？

レスポンシブHTMLメールとは、レスポンシブ・デザインに対応したメールのことです。レスポンシブ・デザインとは、デバイスの画面サイズに応じて、適切に文字や画像の大きさ、レイアウトを変更させる表示方法です。

スマートフォンの普及にともない、最近ではスマートフォンからメールを閲覧する人が増えてきました。そのため、メルマガなどを配信する際は、スマートフォンで読まれることを考慮する必要があります。

スマートフォンでメールをチェックする際、「画像が大きすぎて見づらい」「文字が小さすぎて読めない」といった経験はないでしょうか。これは、パソコンでの閲覧を想定してデザインされたメールであるため、スマートフォン用に最適化されていないことが原因です。

きれいにデザインしたメールでも、レイアウトが崩れるとまともに読んでもらえないため、注意が必要です。レスポンシブHTMLメールであれば、どのようなデバイスに対しても最適な形で本文を表示できます。

(1)スケーラブル・デザインとの違い

レスポンシブ・デザインと似たものに、スケーラブル・デザインがあります。

スケーラブル・デザインは、どのデバイスにも対応したデザインパターンを1つだけ用意する方法です。あらゆる環境で同じように閲覧できる、作成する手間が少ない、というメリットがあります。

ただし、スケーラブル・デザインは、すべてのデバイスで閲覧できる最大公約数的なものであり、デバイスごとに最適化されたものではありません。そのため、閲覧デバイスによっては、中途半端な見栄えになってしまう可能性があります。

対してレスポンシブ・デザインは、デバイスに合わせて文字や画像、レイアウトを変化させます。さまざまなパターンのデザインを考える必要があるため、作業負担は大きいものの、デバイスに応じた最適なデザインを実現できるのです。

(2)モバイル最適化を目指すならレスポンシブHTMLメールが必須

スマートフォンにはさまざまな種類のものがあり、画面の大きさや解像度はバラバラです。そのため、すべてのデバイスにマッチしたデザインは存在しません。

どのデバイスにも最適なメールを配信するには、デバイスに応じてデザインが変化する仕組みが必要です。それを実現してくれるのが、レスポンシブHTMLメールです。スマートフォンの利用が当たり前となった現代において、レスポンシブHTMLメールはメールマーケティングに欠かせない配信方法になっています。

レスポンシブHTMLを配信するメリット

ここでは、レスポンシブHTMLを配信する主なメリットを3つチェックしていきましょう。

(1)開封率が上がる

レスポンシブHTMLでメールを配信することで、開封率の向上が期待できます。レスポンシブ・デザインのメールは、すべてのデバイスに最適化されているのが特徴です。そのため、どのデバイスでも読者にとって読みやすいものになります。

レスポンシブ・デザインのメールを配信し続ければ、読者は「このメールなら読みやすい」と認知してくれるようになるため、メールの開封率アップが期待できるのです。

(2)クリック率が増加する

メール配信プラットフォームのMailchimpの調査によると、レスポンシブ・デザインのメールは、そうでないメールに比べ、リンクをクリックするユーザーが2.7%から3.1%多い結果でした。

これは、レスポンシブ・デザインが読者に強い訴求力を与えている証拠といえます。

[出典:Rocket Science Group「Impact of Mobile Use on Email Engagement」]

(3)表示崩れしなくなる

パソコンでの閲覧を想定したデザインのメールは、スマートフォンで見ると画像も文字も崩れており、見づらいものになってしまいます。そのようなメールでは、最後まで閲覧しようと考える読者は少ないでしょう。

レスポンシブ・デザインであれば、すべてのデバイスに最適化されるため、表示崩れを起こしません。

レスポンシブHTMLを配信するデメリット

レスポンシブHTMLはメールマーケティングで高い効果を発揮しますが、デメリットにも注意しておかなければなりません。ここでは、主なデメリットを2つみていきましょう。

(1)複数端末でテストが必要

レスポンシブ・デザインは、すべてのデバイスで閲覧できるように作成しなければなりません。そのため、さまざまなスマートフォン端末やパソコンでテストする必要があります。何パターンも確認しなければならないため、作業負荷が大きくなる点がデメリットのひとつです。

(2)読み込みが遅くなる可能性がある

レスポンシブ・メールは、CSSというプログラミング言語を利用して作成します。CSSで記述した設定によっては、読み込み速度が遅くなる可能性がある点に注意が必要です。

特に、使用する画像や動画のサイズが適切でない場合は、読み込みに時間がかかり、読むのがストレスになってしまいます。レスポンシブHTMLを採用する場合は、読み込み速度が適切かどうかを事前にテストしたうえで配信するよう心がけましょう。

レスポンシブHTMLでメルマガ配信する際の注意点

ここからは、レスポンシブHTMLでメルマガ配信するうえで、覚えておきたい注意点を紹介します。

(1)文章は極力少なくする

文章量が多すぎてしまうと、スマートフォン上からの読みにくさが増します。そのため、スマートフォンで読まれることを想定し、文字数を極力少なくする工夫が大切です。

たとえば、同じ内容であっても短い文となる表現を選ぶ、文字ではなく画像を使用する、といったテクニックが効果的です。また、段落など文章のかたまりを少なくしてみると、読みやすさが向上します。

(2)一部機種では表示できない

レスポンシブ・デザインは、ガラケーのようなHTML非対応の端末では表示できません。

そのようなユーザーにもメールを配信したい場合は、マルチパートメールがおすすめです。マルチパートメールとは、HTMLパートとテキストパートで構成されたメールを指します。

HTMLに対応している端末にはHTMLパート、対応していない端末にはテキストパートが優先して表示されるため、ガラケーユーザーにも最適化された画面表示を提供可能です。

マルチパートメールをメールソフトで作るのは難易度が高いため、必要な場合はメール配信ツールの利用を検討してみるとよいでしょう。

(3)スマホを意識してデザインする

パソコンでレスポンシブ・デザインのメールを作成していると、気づかないことが数多くあります。たとえば、短い間隔でリンクを置くと、指でタップしたときにリンクを押し間違えやすくなるため、スマートフォンから読む人にとって望ましくありません。

このようなことは、テストではなかなか気づけません。デザインの段階からスマートフォンを意識したデザインを心がけるのが大切です。

レスポンシブHTMLメールの作り方

それでは、実際にレスポンシブHTMLメールを作る手順を確認していきましょう。

(1)PC用のHTMLメールを作る

はじめに、PC用のHTMLメールを作ります。HTMLやCSSの中には、メールクライアントに対応していないタグがあります。そのため、先にPC用のHTMLメールを作成し、調整してモバイル用にするのが一般的です。

また、CSSは、HTMLタグに直接記述するようにしましょう。Webサイトで一般的なCSSファイルを読み込む方式では、メールクライアントがCSSファイルをブロックする可能性があるからです。

(2)viewportを設定する

viewportは、デバイス上でコンテンツが表示される領域のことです。viewportから外れた領域は、スクロールして確認できます。一般的に、パソコンモニターのようなサイズが大きいものはviewportが広く、スマートフォンのように小さいものはviewportが狭くなります。

メールを見やすくするためには、viewportを正しく設定しなければなりません。viewportが未設定だと、メールは圧縮されたような小さい表示になってしまいます。また、viewport設定が誤っていると、ページが見切れてしまう可能性があるため、ご注意ください。

(3)メディアクエリを設定する

メディアクエリとは、画面、プリンタなどのメディアタイプと、画面サイズ、ブラウザの横幅などのメディア特性に応じて表示内容を変更させる機能のことです。レスポンシブ・デザインでは、メディアクエリを使用してCSSを切り替えます。メディアクエリは、最初に読み込まれるheadタグ内に記述するようにしましょう。

注意点は、画面サイズは解像度では判断できない、ということです。同じ解像度であっても、実際の大きさが2倍以上違うケースもあります。そのため、文字の大きさを画面の解像度に応じて決めると、Retinaディスプレイのような高解像度で小さい端末では、表示が小さくなってしまいます。

このような事態を避けるために使われるのが、擬似的なピクセル数(=viewportサイズ)です。この擬似的なピクセルを、iOS端末では「CSSピクセル」、Android端末では「dp解像度」と呼びます。

(4)CSSを設定する

最後に、CSSを設定します。

パソコン用に2カラムや3カラムで表示させているものは、スマートフォン用に1カラムで表示するようにしましょう。また、スマートフォンに表示させたくない部分は、displayプロパティなどで表示を隠しておきます。

そのほかに、画像サイズ、フォントサイズなど、スマートフォン表示に適したCSSプロパティを設定すれば作業完了です。

簡単にレスポンシブHTMLでメルマガ配信できるツール

レスポンシブHTMLメールは、メールマーケティングにおいて高い効果を発揮する配信方法です。しかし、作成に手間がかかるため、自力での作業は効率的ではありません。

そこでおすすめなのが、メルマガ配信ツールです。メルマガ配信ツールを利用すれば、HTMLやCSSがよくわからない人でも、本格的なレスポンシブHTMLメールを作成できます。

ここでは、おすすめのメルマガ配信ツールを5つチェックしていきましょう。

(1)配配メール

配配メールは、株式会社ラクスが提供するメールマーケティングサービスです。

顧客情報に準じたグループ配信、セグメント配信や、特定の日を起点として一定間隔でメールを送るステップメール機能などが用意されています。また、メールの効果測定や、エラー記録、開封率・クリック率測定などで、メールの有効性を測ることが可能です。

ほかにも、HTMLメールエディタを使って簡単にHTMLメールが作れる点も、配配メールの魅力のひとつといえます。また、ドラッグアンドドロップで画像をテキストスペースに設置できるため、プログラミング知識がなくても安心です。

(2)MailChimp

MailChimpは、The Rocket Science Groupが提供するメールマーケティングツールです。

3つの有料プランが用意されているものの、無料版でもメルマガ登録フォーム、メールの作成・分析、2,000件の宛先登録などの充実した機能を利用できます。

有料プランでは、宛先件数の上限増加、A/Bテストの実施、カスタマージャーニーの自動化機能などが利用できるようになります。

(3)Benchmark Email

Benchmark Emailは、世界50万社が利用してきたメールマーケティングツールです。直感的なHTMLメールエディターと、500種類以上のメールテンプレートが利用できる点が特長です。

無料トライアルは月に250通までの制限がありますが、メールエディター、セグメント配信、レポート機能といった基本的な機能が利用できます。

(4)WiLL Mail

WiLL Mailは、株式会社サバナが提供するメールマーケティングツールです。メール作成・配信、分析といったメールマーケティングに必要な機能が搭載されています。配信数に応じて料金プランを適時変更できるのがWiLL Mailの特長です。

月ごとのメール配信にばらつきがある場合は、いつでも契約プランを変更可能なWiLL Mailを利用してみるとよいでしょう。

(5)TOPOL.io

TOPOL.ioは、HTMLメールを簡単に作成できるWebサービスです。登録不要で、メールの作成やテンプレートをダウンロードできます。また、チームでメールを作成する人たちに向けて、有料版も用意されています。

Web上で気軽に配信用メールを作成できるため、メルマガ配信を素早くスタートさせたい人は利用を検討してみるとよいでしょう。

レスポンシブデザインのメルマガ配信を実現しよう

パソコンやスマートフォンなど、さまざまなデバイスでコンテンツが見られるようになった昨今、メルマガ配信における端末ごとの表示最適化は欠かせません。

どの端末にも最適化されるレスポンシブHTMLメールを配信することで、開封率アップやクリック率の増加が期待できます。また、レイアウトの表示が崩れないため、読者にとって読みやすいメール配信が実現可能です。

レスポンシブHTMLメールを導入し、モバイルユーザーにも最適化されたメルマガを配信していきましょう。