お役立ちコラム

スマホ時代の“読まれる”メール配信！レスポンシブなHTMLメールとは

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

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

レスポンシブデザインについて考える前に「モバイルファースト」という考え方について、簡単に理解しておきましょう。
「モバイルファースト」とは、ユーザーがモバイル端末でコンテンツを閲覧した際に、適切に表示できるように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つのHTMLでどの端末にも対応する」など、共通のコンセプトを持っていますが、見た目に大きな違いがあります。
レスポンシブデザインで画面幅を小さくしていくと、左右に並んでいた画像が縦に並んだり、画像や見出しなどの要素が入れ替わったり、重要度の低い要素が省かれたりとレイアウトが変化します。
一方、リキッドデザインでは画面幅に合わせて全ての要素が一緒に拡大縮小していくため、レイアウトは変化しません。例えば、スマホ表示でも商品写真を大きくきれいに見せたい場合、写真の位置を調整して大きく表示できるレスポンシブデザインが適しています。

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

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