お役立ちコラム

HTMLメールはレスポンシブ対応させよう！3つのメリットと注意点とは

スマホが普及した現代において、読まれるメルマガを配信するためにはレスポンシブデザインに対応したHTMLメールを駆使することが大切です。ここでは、読者に響くメール配信に効果的なレスポンシブデザインの基本をご紹介します。

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

以前からウェブデザインの世界ではレスポンシブデザインが広く使われていました。さらに、メールの世界でもHTMLメールが普及したことにより、レスポンシブ化が求められるようになっています。

ここでは、どうしてメールのレスポンシブ化が必要なのかをご紹介します。

モバイル端末でのメール開封率の高まり

現在ではスマートフォンやタブレットなどのモバイル端末の普及が進んでいます。実際に行われた調査では、メールがモバイル端末で開封される割合は60%以上であるという結果が出ました。つまり、PCなど他のデバイスよりも、遙かに高い割合でモバイル端末でメールは開封されているのです。

さらに、弊社が行った「メールマガジンに関する意識調査2021」では、アンケート回答者の5割がモバイル端末でメルマガを読むと回答しました。年々、モバイル端末でメルマガを読むユーザーは増えており、今後さらにその割合は高くなる見込みです。

このことから、モバイル端末でも読みやすくなるようなレスポンシブル化が求められているのです。

レスポンシブ化することによるクリック率の増加

モバイル端末での開封率が高まっていることは、クリック率にも影響します。具体的には、メールをレスポンシブル化することで、クリック率が15%近く増加したという調査結果もあります。
開封率のみでなくクリック率を増加させ、メールマーケティングの効果を高めるためにもレスポンシブ化は欠かせないといえるでしょう。

「モバイルファースト」という考え方

レスポンシブデザインについて考える前に「モバイルファースト」という考え方について、簡単に理解しておきましょう。
「モバイルファースト」とは、ユーザーがモバイル端末でコンテンツを閲覧した際に、適切に表示できるようにWEBサイトを構築するという「概念」を意味します。
モバイルで表示した際に、一画面に表示できるコンテンツの量には限りがありますので、「ユーザーに何を見せるべきか」をふるいにかけ、PC用に構築したデザインを再構築する必要があります。
メルマガを読んでいるユーザーの大半がスマホで閲覧している、という場合には、モバイルファーストの考え方を念頭に置いて配信内容やデザインを考えましょう。

メール配信におけるレスポンシブデザイン

1.レスポンシブデザインとは？

レスポンシブデザインとは、PC・スマホ・タブレットなど、閲覧する端末の画面サイズに合わせて表示を変えられるデザインのことです。WEBサイトやメルマガなど、様々な端末で閲覧されるコンテンツを作成する際に適用します。

2.HTMLメールでレスポンシブデザインを実現

メール配信にてレスポンシブデザインを適用するためには、「HTML」という言語を使用する必要があります。
HTMLを使用したメールは「HTMLメール」となりWEBサイトのようにデザイン性に優れた仕上がりを実現できます。装飾のないテキストメールに比べて情報にメリハリをつけられるため、訴求力が格段に向上します。
文字の色や大きさ、背景色を変更したり、画像や動画を挿入したりと、幅広い表現を活用して、WEBサイト訪問や資料請求、購入などのコンバージョンを増やしましょう。
またHTMLメールでは、読者がメールを開封したかどうかの追跡もできます。メールの内容はもちろん、配信時間や配信ターゲットなどの施策そのものを随時見直して改善していく上で、開封率を計測してどれくらいの読者に読まれているか把握することは重要です。
しかし、WEBサイトと同様に受け取る側の画面サイズによって、見え方が変わってしまい、見えづらくなってしまう可能性があります。そこでHTMLメールの作成には、レスポンシブ対応が必要不可欠といえます。それでは、HTMLメールにレスポンシブデザインを採用すると、具体的にどのようなメリットがあるのでしょうか。次の項目でレスポンシブ対応HTMLメールのメリットについて、より詳しく説明します。

レスポンシブ対応HTMLメール5つのメリット

1.画像や表を入れてもレイアウトが崩れない

画像や表をそのままで入れてしまうと、画面によってはレイアウトが崩れてしまいます。
しかし、レスポンシブ対応のHTMLメールでは、コンテンツのサイズや位置をそれぞれに最適な状態に変更して表示することが可能です。そのため、画面のサイズにかかわらず読みやすいデザインを作ることができます。

2.PC・スマホを選ばずに表示できるので、より視認性が高くなる

HTMLメールを開けないガラケーが主流だったころは、HTMLメールはPCに合わせたレイアウトが主流でした。
しかし、スマホやタブレットが普及した現在では、PC以外からのアクセスが増えています。特に商品やキャンペーンの紹介などの場合、普段持ち歩くスマホで受け取る方が多いため、さらにレスポンシブ対応が重要となっています。

3.HTMLを分ける必要がない

レスポンシブデザインでは、1つのHTMLを作るだけで複数の端末に対応できるというメリットがあります。つまりPCやスマホ、タブレットなどに合わせて別々のHTMLを作成する必要がありません。
配信時もPCとスマホで異なるメールを用意する手間がないため、一括で配信することができます。そのため、いちいち数パターン用意したり、受信者に合わせて何度も送ったりする手間がかかりません。

4.ユーザーの離脱率を下げられる

HTMLメールでは画像や動画など、テキスト以外のコンテンツも交えて自社の商品やサービスを紹介できます。しかし配信しても受信者側で正しく表示されなければ、HTMLメールの効果を十分に発揮することは難しいといえます。

ユーザーは、読めない部分があるメルマガには「最後まで目を通そう」と思いにくいため、離脱率は上昇するでしょう。レスポンシブ対応はメルマガの可読性を向上させ、離脱率を減少させる効果が期待できます。

5.顧客のメールへの反応の低下を抑えられる

インパクトのある件名や魅力あふれる商品画像を掲載しても、本文が正確に表示されないメルマガではURLのクリック率が低下しやすくなります。レイアウト崩れが何度も続くと、開く前から「このメルマガは開かなくてもいい」と思われてしまい、開封率までもが減少してしまうリスクもあるでしょう。

レスポンシブ対応を行うことによって、開封率やクリック率をはじめとしたコンバージョン率の低下を抑えられます。

レスポンシブ対応HTMLメールの注意点とは？

便利で使いやすいレスポンシブ対応HTMLメールですが、使い方のポイントを押さえていなければ、効果を引き出すことができません。ここでは、HTMLメールを作る際に、ぜひ注意してもらいたいポイントを紹介します。

1.文章量に注意する

レイアウトが崩れていなくても、文章量が多すぎると何度もスクロールする必要があり、読みづらくなってしまいます。これでは、せっかくの優れたデザインも活かすことができません。文章を短くまとめたり、段落ごとに区切ったりするなど、文章自体の読みやすさを工夫することも大切です。

2.スマホでも操作しやすいデザインにする

PCの場合は、マウスでクリックするため、小さなボタンや幅の狭いリンクであっても問題を感じないことが多いでしょう。しかし、スマホの画面では指でタップするため、リンクの間隔が狭かったり、ボタンが小さすぎたりすると、操作しづらくなってしまいます。また、逆に大きすぎても、誤タップを起こしてしまう原因になることでしょう。そのため、スマホ用とPC用ではリンクのサイズや配置にも気をつける必要があります。

3.自分でコードを開発する場合はコストがかかる

HTMLはコードの知識があれば、自由にレイアウトや機能を作成することができます。しかし、その分だけ開発に時間がかかってしまいますし、そもそもコードを知らない方が多いというのが一般的でしょう。そのため、レスポンシブに対応したHTMLを簡単に作成できるメール配信ツールを選ぶことが重要です。
こうしたツールでは、あらかじめ使いやすいテンプレートが用意されており、コードを入力しなくても、簡単にレスポンシブ対応メールが作成できます。

4.ガラケーなどの環境では表示できない

レスポンシブデザインは、HTMLメールが開ける環境だと活躍しますが、ガラケーなどの一部の端末では表示することができません。そのため、HTMLメールとテキストメールを同時に配信できる機能を持ったメール配信ツールを利用しましょう。また、HTMLメールでは、受信されたメールが開封されたかどうかを調べることもできます。これらの確認も簡単に行えるかどうか基準として、ツールを選ぶと良いでしょう。

レスポンシブ以外の選択肢1：リキッドデザイン

レスポンシブデザインだけが、読みやすいメール配信を実現する方法というわけではありません。その他にも、「リキッドデザイン」という方法があります。メリット、デメリットを把握し、最適なメールを作成するための参考にしましょう。

リキッドデザインとは

・特徴

リキッドデザインは、画面の幅に合わせてコンテンツのサイズを変更するデザインのことです。レスポンシブデザインと似ていますが、レスポンシブデザインは先に大きさを指定してそれに合わせている点で異なっています。レスポンシブデザインに次いで、よく使用されているデザインです。

・メリット

画面の幅が規格に合わない端末でも、レイアウトが崩れにくいことがメリットです。また、レスポンシブは、メディアクエリに対応したメーラーでなければ閲覧できません。ですが、リキッドデザインは、メディアクエリを使用しないため、これらの環境でも表示することができます。

・デメリット

幅を変えるだけなので、レスポンシブデザインに比べるとデザインの自由度が下がります。また、スマホではコンテンツが縦長になりやすいので、読みづらくなりやすいこともデメリットです。逆にPCでは横幅が伸びやすいため注意が必要となっています。

・リキッドデザインを使用するときの注意点

リキッドデザインを使用する場合、レイアウトは1カラムに限定されます。幅を変えてスマホに対応させるため、これは避けられません。また、スマホのディスプレイ形状に合わせるため、全体を縦に伸ばすことになります。結果として、情報量が多いとメールが長くなりすぎてしまう傾向にあります。そのため、クリックする個所を明確にするなど、使用する画像の数を抑えるというような工夫も必要です。

レスポンシブデザインとリキッドデザインとの違い

レスポンシブデザインとリキッドデザインには、どのような違いがあるのでしょうか。
レスポンシブデザインとリキッドデザインは「端末の画面幅に合わせて自動調整する」「1つのHTMLでどの端末にも対応する」など、共通のコンセプトを持っていますが、見た目に大きな違いがあります。
レスポンシブデザインで画面幅を小さくしていくと、左右に並んでいた画像が縦に並んだり、画像や見出しなどの要素が入れ替わったり、重要度の低い要素が省かれたりとレイアウトが変化します。
一方、リキッドデザインでは画面幅に合わせてすべての要素が一緒に拡大縮小していくため、レイアウトは変化しません。例えば、スマホ表示でも商品写真を大きくきれいに見せたい場合、写真の位置を調整して大きく表示できるレスポンシブデザインが適しています。

レスポンシブ以外の選択肢2：スケーラブルデザイン

レスポンシブデザインやリキッドデザイン以外に、スケーラブルデザインを採用するという選択肢もあります。第三の選択肢として覚えておくと、メルマガの表現の幅がさらに広がるでしょう。

スケーラブルデザインとは

スケーラブルデザインとは、すべての端末で1つのデザインを表示させるデザイン方法のことです。PCで表示させるデザインをスマホやタブレットでもそのまま縮小して表示させるため、すべての端末で読みやすいようにフォントや画像サイズを大きめに用意する必要があります。

スケーラブルデザインでは1つのデザインを用意するだけなので手軽であり、あらゆる端末で同じように表示できる点がメリットです。さらに、数パターンのHTMLを管理する必要がないため管理や編集が容易になります。
一方で、シンプルさが求められるため複雑なレイアウトは再現できないというデメリットも考えられるでしょう。

レスポンシブデザインで効果的なメール配信を行おう

メルマガのデザインは、どの端末でも見やすいレイアウトにすることが大切です。レスポンシブデザインに対応したHTMLメールを使えば、より読みやすく、訴求力の高いメールに仕上がります。
レスポンシブデザインを導入する際は、簡単な操作でHTMLメールが作成できるメルマガ配信ツールも選択肢に含めて検討してみてはいかがでしょうか。