お役立ちコラム

スマホでも読みやすいレスポンシブデザインを活用したHTMLメールでメール配信！

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

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

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

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

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

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

さらに、2018年に行われた別の調査では、消費者の40%がメールはモバイル端末で確認すると回答しました。さらにモバイル端末の優先度は高まり続けており、今後さらにその割合は高くなる見込みです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.文章量に注意する

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

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

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

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

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

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

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

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

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

リキッドデザインとは

・特徴

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

・メリット

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

・デメリット

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

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

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

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

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

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

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