HTMLメールでメルマガの配信などをしている企業が増えています。
視覚的な訴求力が強いHTMLメールは、BtoCの企業やECサイトによるメールマーケティングの主流と言っても良い存在かもしれません。
HTMLメールが浸透するにつれて、必須となってきたのが「HTMLメールのレスポンシブ化」です。
媒体を選ばずに最適化されたデザインを表示してくれるレスポンシブデザインは、HTMLメールの訴求力を発揮するためには欠かせません。
この記事では、HTMLメールをレスポンシブ化する方法についてご紹介します。
技術的に難しい部分もあるかもしれませんが、最後にご紹介する「ある方法」を使えば、どなたでも簡単にレスポンシブ化したHTMLメールを作ることができます。
また、混同されやすいスケーラブル・デザインについても解説しています。
二つの違いをよく理解し、自社のメルマガ配信に役立ててください。
目次
HTMLメールのレスポンシブ化とは
HTMLメールのレスポンシブ化とは、HTMLメールを、受信画面サイズに合わせて最適化されるレイアウトを組むことです。
PC・スマホ・タブレットなど、受信される媒体が多様化した現在は、HTMLやホームページのレスポンシブ化は当たり前のものになっています。
レスポンシブデザインを施すことで、同じHTMLメールでもスマホで見た場合と、PCで見た場合では違うレイアウトが表示されることになります。
違うデザインと言っても、全く違ったものになるわけではなく、画面幅ごとにデザインが最適化されます。
これにより、文字の見やすさやボタンの幅や位置などが各媒体で調整されるので、結果として、お客様が快適に購読できるHTMLメールが作成できるでしょう。
なぜ、HTMLメールのレスポンシブ化が必要なのか
ここからはHTMLメールをレスポンシブ化することでどんなメリットがあるのかをご紹介していきたいと思います。
ユーザーの離脱を防止できる
文字だけでなく、画像や動画を使い、お客様が自社のサービス・商品を利用している姿をイメージさせられるのがHTMLメールの強みです。
しかしせっかくHTMLメールを作成しても、レスポンシブ化がされていなければ、適切に表示されないデバイスで購読をしている方の心には広告が響きません。
結果、HTMLメールの持つ視覚的な訴求力を損なうだけでなく、メルマガそのものの価値も低くなってしまうので、購読者の離反が増える可能性があります。
クリック率・コンバージョン率の低下が防げる
いくら魅力的な商品イメージやタイトルを用意しても、レイアウトが崩れてしまうと、受信したお客様へ与える印象は決して良くありません。
レスポンシブデザインを採用することで、HTMLメールの開封率だけでなく、広告しているサービスや商品のリンクへのクリック率も高まります。
HTMLメールをレスポンシブ化してみよう
ここからは、実際にHTMLメールをレスポンシブ化する方法について、段階的にご説明したいと思います。
HTMLメールをレスポンシブ化するにはHTMLメールのCSS（カスケーディング・スタイルシート）を書き換えていく必要があります。
専門的な内容にもなるので、IT関係の知識がない方にとってはハードルが高い作業かもしれません。
もっと手っ取り早くHTMLメールをレスポンシブ化したい方に関しては、後ほど紹介する方法を参考に作業をしてみてください。
PCのメーラーに対応したレスポンシブデザイン
まずはPCの「一般的なメーラー」で受信されたときに最適化されるように、CSSを記述しましょう。
この際に注意していただきたいのは、メーラーによってCSSのサポート状況が異なっているという点です。
そのため、CSSはタグに直接、属性としてスタイルを記述していく「インライン記述」という方法でレスポンシブ化をするのが通例です。
メーラー毎のCSSサポートは下記のサイトでまとめられているので、ご参考ください。
DOCTYPEはHTML4.01を使用すれば、問題なく作成ができると思います。
HTMLメールそのものの作成方法に関しては、以下の記事でわかりやすく紹介していますので、こちらをご覧ください。
HTMLメールの作り方を5分で解説！最も簡単に作成する方法もこっそり教えます
基本的にHTMLメールの最大幅は600pxに設定されるので、そのようにHTMLメールのbody内に記述しましょう。
<body style="-webkit-text-size-adjust:100%"> <!-- htmlメール本体ここから --> <table width=”100%” border=”0” cellpadding=”0” cellspacing=”0” style=width:100%; border:none; margin:0 auto; max-width: 600px”> </table> <!-- htmlメール本文ここから --> </boby>
横幅は％で記述することで、どの媒体でも同じように表示されるようになります。
画面幅が狭くなったときのレイアウトを記述
画面幅が狭くなった時にレイアウト変更をするには、変更したい要素にクラス名を付けた上で、「Media Queries」を使ってスマートフォンのレイアウトCSSを記述する方法もあります。
その場合は、headタグの中に、
＠media screen and（max-width: 480）
{
table[class=”変更したいクラス名”]{
width:320px !important;}
}
と記述することで、media screenに記述したレイアウトが適応されるようになります。
「スケーラブル・デザイン」でもスマホに対応できる
スマホに対応をすることがHTMLメールを使ったマーケティングの成果を上げる要因であることは先述の通りですが、「スケーラブル・デザイン」という方法でもスマホ表示に対応することができます。
HTMLメールを受信する媒体に合わせて、CSSを使い表示を切り替えるレスポンシブデザインとは違い、どの媒体で表示されても大丈夫な1つのデザインを作成するのがスケーラブル・デザインの考え方です。
スケーラブル・デザインの特徴
受信される媒体に関わらず、1つのデザインでレイアウトする、スケーラブル・デザインは、CSSの記入がレスポンシブデザインと比較して簡単なのが魅力です。
一方で、HTMLメールの持つ視覚的な訴求効果が充分に発揮できるかというと疑問が残ります。
どのデバイスでも最適に表示されるデザインを作るには、文字・画像の大きさやカラムなどに制限がかかります。
HTMLメールをレスポンシブ化することにリソースを割くことができない場合の対処法として使う程度でしょう。
最も簡単にHTMLメールをレスポンシブ化する方法
HTMLメールのCSSをレスポンシブ化する方法について解説しましたが、自力でCSSを使いレスポンシブ化するにはIT関係の知識が不可欠になります。
そこで、最も簡単にHTMLメールをレスポンシブ化する方法を皆さんに公開したいと思います。
その方法とは、レスポンシブデザインに対応したメール配信サービスの利用です。
メール配信サービスとは、大人数へ向けたメール配信を円滑化・簡略化するサービスで、メルマガの配信などをしている企業で多く取り入れられています。
たくさんのメール配信サービスがありますが、中にはレスポンシブデザインに対応したHTMLメールの作成ができない場合もあるので注意しましょう。
メール配信サービスの『ブラストメール』では、HTMLメールを直感的に作成できる「HTMLエディタ」が備えてあり、このエディタを通して作成したHTMLメールはレスポンシブデザインに対応しています。
HTMLメールを外注せずに簡単に作成できる上に、HTMLメールを使ったマーケティングの基本であるレスポンシブ化までを誰でも簡単に行えるようになります。
その他にも、メールマーケティングに便利な機能をたくさん兼ね備えているので、是非確認してみてください。
まとめ
企業の広告はテキストメールからHTMLメールの時代へと変化しました。
また、受信される媒体が多様化したことから、作成したHTMLメールをどの媒体でも最適に表示させるレスポンシブデザインへの対応も標準化してきています。
CSSを使いHTMLメールをレスポンシブ化することはできますが、専門的な知識が必要になるので、決して簡単にできるとは言い切れません。
しかし、メール配信サービスを使うことで、誰でも簡単にHTMLメールを作成しレスポンシブ化させることが可能になります。
また、メール配信サービスはレスポンシブ化の手間を省くだけでなく、メルマガなどを運営しお客様にセールスを行う際に便利な機能が揃っています。
HTMLメールの持つ強みを最大限に発揮させ、自社のサービス・商品を積極的にお客様に配信する為のツールとして活用してみてはいかがでしょうか。
キーワード検索
