(公開日2023年08月09日)
企業でHTMLメールを使っている営業・マーケティング担当の方、フリーランスの個人事業主の方のために記事を書いています。HTMLメールを作成する際、いろいろなデバイスに対応するためにレスポンシブデザインが必要です。しかしこれは相当に難しい課題ですよね。
この記事では、レスポンシブHTMLメールの作成手順、表示確認方法について解説します。これを読めば、HTMLメールをレスポンシブ対応で表示させる方法が分かるでしょう。そしていろいろなデバイスを使い、読者の視覚に訴えて、効果的なメルマガを配信できるようになります。
まずレスポンシブHTMLメールの特徴を解説します。
・いろいろなデバイスに対応できるメール
・メルマガの購読を促すメール
・クリック率を向上させるメール
レスポンシブHTMLメールは、PC・タブレット・スマートフォンなどに対応できます。画面サイズに応じてレイアウト・画像サイズを最適化できるのが最大の特徴です。ただしウェブサイトのレスポンシブとは多少異なります。
お客様が媒体を選ばず、快適に購読でき、ユーザーの離脱を防ぐことができます。レスポンシブになっていないと、表示が崩れたり、文字が小さすぎて読めなくなり、受信者はすぐにメールを閉じてしまうでしょう。
HTMLメールの強みは、文字だけでなく画像や動画を使い、視覚に訴えて商品・サービスをアピールできることです。HTMLメールを使ったメルマガの購読も促せます。レスポンシブ化すれば、いろいろな媒体でHTMLメールの効果を発揮できるでしょう。
もしレスポンシブ化していなければ、表示が崩れてメールのコンテンツが正しく伝わりません。受信者はメールの意味が分からず、メルマガもすぐに閉じてしまうでしょう。それではせっかく作成したHTMLメールも台無しです。
レスポンシブ化していないと、スマートフォンの画面ではCTAボタンが小さすぎて押せません。受信者が興味を持っても無視されてしまいます。レスポンシブ化すれば、CTAボタンの大きさはデバイスに合わせて調節が可能です。
レスポンシブ化によって、CTAボタンが押しやすくなり、ランディングページへの誘導リンクのクリック率が上がるでしょう。ひいてはコンバージョン率の向上にもつながります。
関連記事：htmlメールとは？デザイン・制作のプロが分かりやすく解説
レスポンシブHTMLメールの作り方を解説します。
手順1：PC用のHTMLメールを作成
手順2：viewportを設定
手順3：メディアクエリーを設定
手順4：CSSプロパティを設定
HTMLメールにはtableタグを用いることと、使えないタグがあることから、最初にPC用のHTMLメールを作成したほうがよいでしょう。その後、モバイル用にアレンジします。いきなりモバイル用をコーディングするのは難しいです。
HTMLメールはtableタグを使ってテーブルレイアウトでコーディングすると表示の崩れを防げます。また多くのメールクライアントは外部読み込み形式のCSSに対応していません。スタイルを設定するために、インライン形式あるいは埋め込み型のCSSを使います。インライン形式はHTMLタグ内にCSSを記述し、埋め込み型はhead内にCSSを記述する形式です。
2022年3月現在に販売されているスマートフォンのCSSピクセルの横幅は320〜480px、タブレットの横幅は768〜1024pxですから、HTMLメールの横幅は500〜700pxの範囲で、600px前後に設定するとよいでしょう。
viewportとは、画面の表示領域、つまりPCやスマートフォンで見えている部分のことです。PCの表示画面は広く、スマートフォンは狭くなります。viewportはhead内に、以下のようなmetaタグとして記述してください。
<meta name=”viewport” content=”プロパティ=値”, “プロパティ=値”, “プロパティ=値”>
設定できるプロパティを示します。
・width：表示領域の横幅、200～10,000pixel
・height：表示領域の高さ、200～10,000pixel
・minimum-scale：最小の縮小倍率、0～10
・maximum-scale：最大の拡大倍率、0～10
・initial-scale：ぺージの読み込み時の拡大率、minimum-scale～maximum-scaleの範囲
・user-scalable：ユーザーに拡大縮小を許可するかどうか
記述の仕方の実例を示します。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>
スマートフォンでviewportが設定されていないと、パソコン用のHTMLメールがスマートフォンの画面に濃縮されたように表示されてしまいます。またviewportが小さすぎると、スマートフォンの画面からHTMLメールがはみ出します。正しいviewportを設定しましょう。
メディアタイプ（画面・プリンターなど）と、メディア特性（画面サイズ、ブラウザの横幅など）を組み合わせて作るCSSの仕様です。head内に埋め込み形式のCSSを記述します。メディアタイプとしてscreen（PCやスマートフォンなど画面を持つデバイス）を、メディア特性としてwidth（ビューポートの幅）を指定し、その下にCSSを記述してください。
以下に実例を示します。
/* 画面サイズが480px以下の場合 */
<style>
@media only screen and (max-width:480px) {
img {
width:100%;
}
}
</style>
HTMLメールの横幅は600px位で、2022年3月現在に販売されているスマートフォンのCSSピクセルの横幅は320〜480pxです。これに合わせて、メディア特性をmax-width 480pxに設定しています。480pxを境にしてスマートフォンとPCで表示を切り替える設定です。
続いてスマートフォン表示用のCSSプロパティ（構文）を設定します。
➀横並びレイアウトの調節
②画像の拡大・縮小
③フォントサイズ
④スマートフォンでコンテンツを非表示にする
PC用HTMLメールで複数カラムの横並びレイアウトにしている場合、スマートフォンでは１カラムで表示するように変換します。具体的には、テーブルレイアウトのTDタグの横幅を100%に指定するとよいでしょう。以下に実例を示します。
@media only screen and (max-width:480px) {
.responsive-td {
width:100% !important;
display: block !important;
box-sizing: border-box !important;
}
}
メールクライアントのCSSに上書きされないように!important指定にしています。また該当箇所が多いため、headに埋め込み型CSSで記述してください。
スマートフォンでは画像の横幅を100%に指定するとよいでしょう。以下に実例を挙げます。
@media only screen and (max-width:480px) {
.responsive-img {
width:100% !important;
height:auto !important
}
}
PC用のフォントサイズが小さめに設定されているとき、スマートフォンではフォントサイズを適切なサイズに変えてください。
@media only screen and (max-width:480px) {
html {
font-size:14px !important;
line-height:1.6 !important;
}
}
一部のエリアをスマートフォンでは表示したくない場合、displayプロパティを使って、コンテンツを消すことができます。
HTML
<table class=”hide”>
<tr>
<td>
<img src=”img.jpg”>
</td>
</tr>
</table>
CSS
@media only screen and (max-width:480px) {
.hide {
display:none !important;
}
}
ただしdisplayプロパティが効かないメールクライアントがあるので、注意してください。
参考記事：メルマガ用・htmlメールのコーディングの基本徹底解説
レスポンシブHTMLメールがちゃんと表示されるかどうかを確認する方法を解説します。
方法1：GoogleChromeのデベロッパーツールを利用
方法2：テスト配信する
デベロッパーツールは、Google Chromeに標準搭載されている開発者用の検証ツールです。これを使えば、レスポンシブ表示がうまくできているかどうかが分かります。使い方は以下のとおりです。
Windowsの場合
Google Chromeの右上メニュー>その他のツール>デベロッパーツールを選択
Macの場合
Google Chromeのツールバーメニュー>表示 > 開発/管理 > デベロッパーツールを選択
上部にデバイスの種類が表示されますので、表示確認するデバイスを選んでください。適用した表示画面に変わります。デバイスの向きも変更が可能です。ただし実際の表示と異なることがありますから、あくまでも参考としてください。
作成したHTMLメールをテスト配信して、表示を確認するのが確実です。主なメールクライアントとデバイスを組み合わせ、複数の環境を使って検証してください。
・@au.com × iPhone
・@ezweb.ne.jp × Android
・@softbank.ne.jp × iPhoneなど
ただしこれは手間がかかるため、表示確認をするオンラインツールを用いるとよいでしょう。
・Email on Acid
・Litmus
・MailChimp
HTMLメールをレスポンシブ対応させる際には、以下の点に注意してください。
注意1：対応できないメールクライアントがある
注意2：読み込みが遅くなることがある
注意3：スマートフォンに合わせたデザインが必要
デバイスとメールクライアントの組み合わせによっては、HTMLメールがちゃんと見られません。まったく受信できない、画像が表示されない、文字化けするなどのトラブルが生じます。例えばiPhoneの@softbank.ne.jpを使ったメールクライアントではHTMLメールが見られません。
全てのケースに正しく対応できるHTMLメールはなく、代わりにマルチパート配信がおすすめです。これを使えば、HTMLメールが見られないときにテキストメールが表示されます.。さらにHTMLメールと同じコンテンツのウェブサイトへリンクしておけばよいでしょう。
HTMLメールに含まれる画像・動画のサイズが大きすぎると読み込み速度が遅くなります。
ユーザーはメールを読むのにストレスがかかるため、すぐにメールを閉じてしまうかもしれません。HTMLメールの容量は100kbを超えないようにしてください。
スマートフォンは画面が小さいため、それに合わせたデザインが必要です。例えばスマートフォンで文章を読む場合、一文が長かったり、文章量が多かったりすると読みにくくなります。短文にして、一つの段落を小さくするとよいでしょう。
また短い間隔でリンクを置くと、タップしにくく、押し間違えます。文の間隔を開けたり、リンクさせる文字を大きくしたりしてください。
レスポンシブHTMLメールは、いろいろなデバイスに対応でき、読者の視覚に訴えて、効果的なメルマガを配信できるツールです。この記事では、レスポンシブHTMLメールの作成手順、表示の確認方法について解説しました。
HTMLメールは、コーディングが難しい、対応できないメールクライアントがあるなどのデメリットをもち、作成するのが大変です。企業の営業の方、個人事業主の方が本業の合間に手がけるには手間がかかり過ぎるでしょう。
うまく作成しないと文字化けしたり、表示が崩れたりするリスクがあり、専門家に依頼して作成してもらった方がよいかもしれません。株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
