レスポンシブ対応したHTMLメールの作り方

レスポンシブ対応をしたHTMLメールでの配信は、効果的にメールマガジンを配信するために有効な手法です。

メールマガジンの配信を始めたばかりであれば、以下のような疑問が生じると思います。

『レスポンシブ対応のHTMLメールとは何？』
『なぜレスポンシブ対応が必要なの？』

今回のコラム記事では、メールマガジンの配信を始めたばかり、これから始めようとしているメルマガ担当者様に向けて、レスポンシブ対応のHTMLメールのメリットだけでなく、作り方に関しても解説をしていきます。

レスポンシブ対応のHTMLメールとは

レスポンシブ対応とは、一般的にWebページを表示する際にスマートフォン、タブレット、パソコンなど、ことなる画面サイズにあわせてデザインやレイアウトを最適に表示させることを指します。

スマートフォンやタブレットの普及に伴い、メールマガジンもパソコンでの閲覧だけでなく、スマートフォンのような画面の小さな端末で閲覧されることも増えてきました。

そのため、どの端末でも見やすい状態で表示できるように、画面サイズに応じてメールのデザインを変更する、レスポンシブ対応のHTMLメールが用いられるようになりました。

レスポンシブ対応のHTMLメールであれば、文字の大きさ、ボタンの幅や位置、カラム数が画面の横幅に応じて自動的に調整されるため、スマートフォンでもメールが適切に表示されます。

HTMLメールをレスポンシブ対応する理由

HTMLメールをレスポンシブ対応する理由は、主に2つあげられます。

• ユーザーの離脱を防止
• クリック率やコンバージョン率の向上

くわしく説明していきます。

ユーザーの離脱を防止

パソコン向けにデザインされた、3カラムで文字の小さいHTMLメールをスマートフォンで受信した経験はないでしょうか。

パソコンで見やすいデザインと、スマートフォンで見やすいデザインはことなります。

そのため、メールを受信する端末の画面サイズにあわせてデザインを調整しなければ、メールを受信した読者は見づらいと感じてしまい、メールを閉じてしまいます。

メールの受信者がどの端末でメールを閲覧するのかは、メール配信側ではコントロールできません。

また、GmailのようなWebメールを使用している場合は、パソコンでもスマートフォンでも閲覧できるため、どの端末でも適切に表示されるHTMLメールを送る必要があります。

ユーザーにとって見にくいデザインのHTMLメールを送ることは、ユーザーの離脱につながるため、レスポンシブ対応のHTMLメールを送ることをおすすめします。

クリック率やコンバージョン率の向上

パソコン向けにデザインされたHTMLメールをスマートフォンで開いた場合、文字が小さく表示されるだけでなく、CTAボタンも小さく表示されてしまいます。

そのため、件名でユーザーの興味を引いて開封を促すことに成功したとしても、クリック率やコンバージョン率に悪い影響を与えることは明白です。

一方、レスポンシブ対応のHTMLメールでは、文字やCTAボタンの大きさは端末のサイズにあわせて調整できるため、クリック率やコンバージョン率の向上が期待できます。

レスポンシブ対応したHTMLメールの作り方

レスポンシブ対応のHTMLメールは、以下の手順に沿って作成します。

1. パソコン用のHTMLメールを作成する
2. viewport設定をする
3. メディアクエリを設定する
4. CSSプロパティを設定する
5. 表示・配信テストを行う

1.パソコン用のHTMLメールを作成する

最初にパソコン用のHTMLメールを作成し、そのあとにレスポンシブ化を行います。

メールソフトによってCSSの対応状況がことなるため、The Ultimate Guide to CSSからサポート状況を確認して、HTMLメールの作成を行いましょう。

HTMLメールには、CSSでfloastを指定しても効かない、レイアウトが崩れるといった問題があるため、基本的にtableタグを用いてメールを作成していきます。

なお、HTMLメールを作成する際は、CSSは別ファイルではなくHTMLファイルに直接記述するインライン方式でコーディングを行いましょう。

一般的なWebページの作成のように、CSSを外部ファイル化した場合は、メールソフトによってはCSSの読み込みがブロックされ、HTMLメールに反映されない可能性があります。

HTMLメールを作成する際には、CSSの外部ファイル化を避けて、HTMLファイルにCSSを直接記述するインライン方式にしましょう。

2.viewport設定をする

viewport（ビューポート）とは、パソコンやスマートフォンでコンテンツが表示される領域を示します。

Webページであっても、HTMLメールであっても、viewportで設定した表示領域からはみ出した場合は、横に画面をスクロールすることで、見えなかった部分を表示できます。

パソコンの場合は、ディスプレイサイズが大きいためviewportが広く、スマートフォンの場合はディスプレイサイズが小さいためviewportは狭くなるので、適切にviewportを設定することが重要です。

viewportの設定状態により、スマートフォンでどのようにHTMLメールが表示されるのか以下の表にまとめました。

▼スマホの場合は横にスクロールしてご覧ください

レスポンシブ対応のHTMLメールを作成する場合は、viewportは以下のように設定しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

メディアクエリとは、プリンタや画面といったコンテンツを表示する端末の種類、画面の解像度、viewportの幅といった特性に応じて、表示内容を変更する際に使用します。

Webページのレスポンシブデザインでメディアクエリが用いられますが、レスポンシブ対応のHTMLメールでもメディアクエリが使われます。

メディアクエリを用いることにより、パソコン、スマートフォン、タブレットなどの画面サイズに応じて適用するCSSを切り替え、端末に応じて表示内容の調整ができます。

スマートフォンの横幅であれば480pxで収まるため、メディアクエリを記述する際は、以下のように設定するとよいでしょう。

@media screen and (max-width:480px)

4.CSSプロパティを設定する

メディアクエリで設定した条件分岐に対して、適用するCSSプロパティを設定します。

パソコン用のHTMLメールを2カラムまたは3カラムで作成した場合、スマートフォンだと1カラムに表示されるように設定します。

@media only screen and (max-width:480px) { 
.responsive-td {
display: block !important;
width:100% !important; 
height:auto !important;
　} 
}

CSSプロパティを設定する際には、以下の点に注意してください。

• headタグ内にインライン形式のCSSを記述すること
• メールソフトによるデザインの崩れを防ぐために「!important」の指定をする
• tdタグに忘れずにレスポンシブ用のクラス指定を行う

以上のステップで、レスポンシブ対応のHTMLメールを作成できます。

5.表示・配信テストを行う

レスポンシブ対応のHTMLメールが作成できたら、表示と配信テストを行います。

まずは、作成したHTMLファイルをGoogle Chromeで開きましょう。
次に、デベロッパーツールを起動してパソコン、タブレット、スマートフォンなど、各画面サイズで表示確認を行います。

また、ブラウザの横幅をドラッグして狭めることにより、どのようにレスポンシブ対応のHTMLメールのデザインが変わるのか確認できます。

ブラウザで問題なく表示されることが確認できたら、メールのテスト配信を行い、問題なくメールが表示されるかを確認します。

パソコンだけでなく、iPhone、Androidスマートフォンの主要なメールソフトで問題なく表示されるか、忘れずに検証を行いましょう。

まとめ

今回は、HTMLメールをレスポンシブ対応させるメリットだけでなく、作り方についても説明しました。

レスポンシブ対応のHTMLメールに関して覚えておくべき点は、以下のとおりです。

• レスポンシブ対応のHTMLメールであれば、どの端末でもメール受信者にとって見やすいメールを配信できる
• ユーザーの離脱防止、クリック率・コンバージョン率の向上といた効果が期待できる
• レスポンシブ対応のHTMLメールを作成した場合は、さまざまな端末で表示確認を行う

レスポンシブ対応のHTMLメールを配信し、メールマガジンの配信効果を最大化できるように努めましょう。

なお、当サイト『ビスサイ』では、ホームページ制作サービス（サブスクリプション）を提供しております。

ビズサイでは、ホームページの用途に合わせて3種類のプランをご用意しており、お申込みから公開まで最短5営業日の期間でホームページ制作ができます。

ドメインからメールアドレスを作成できるので、メルマガ配信と同時にホームページを新規で立ち上げたい、ホームページのリニューアルをしたい方は当サイトがぴったりです（くわしいサービスはこちら）。