レスポンシブHTMLメールの作り方とは?初心者向けに解説

 レスポンシブデザインとは、デバイスの画面サイズに応じて、最適なレイアウトでWebページを表示するHTML/CSSの制作手法です。

 本記事では、レスポンシブデザインに対応したHTMLメールの作成方法について、初心者向けに詳しく解説します。viewportやメディアクエリーなど、WebページとHTMLメールの設定の違いについても注目してみてください。

⇓ こちらの記事も参考になります

レスポンシブHTMLメールの作成手順

基本的な作成の流れ

 レスポンシブHTMLメールを作成する基本的な流れは以下の通りです。

1. PC用のHTMLメールを作成する

 まずは、PC用のHTMLメールから作成します。PCファーストで作成する理由は、HTMLメールはWebサイトと違い、HTMLとCSSに使えないタグ(メールクライアントが非サポート)が多く存在するため、PC用からモバイル用にレスポンシブ対応させる方が、制作がスムーズだからです。

 HTMLメールのコーディングで、特に気を付けるべきポイントは、以下の3点です。

ポイント1:テーブルレイアウトで作成する

 HTMLメールは、HTMLのTABLEタグを使用するテーブルレイアウトと呼ばれるコーディング方法で作成します。この方法はWebサイト作成では使用しない特殊な方法です。これは先述した通り、一部のHTMLやCSSのタグをサポートしていないメールクライアントが存在するためです。

TABLEタグを使用したレイアウトイメージ図

 レイアウトが崩れないHTMLメールを作るには、現状TABLEタグを使ったコーディングが最も確実だと言えます。Webサイトと同じ感覚で、最新のタグを使ってコーディングしてしまうと、思わぬ表示崩れを起こす場合があるので注意しましょう。

HTMLメール table、tr、td要素を使用したレイアウト
Webサイト header、div、footer要素 + CSSを使用したレイアウト

ポイント2:CSSの読み込みは、インライン形式・埋め込み形式で記述

 HTMLメールにCSSで装飾を加える場合は、基本はインライン形式でHTMLタグに直接CSSを記述します。

/* インライン形式のCSS記述例 */
<p style="font-size:16px;color:#333;">サンプルテキスト</p>

 また近年は、headタグ内へのCSS埋め込み形式をサポートするメールクライアントも増えて来ているため、インライン形式と埋め込み形式を上手く併用して設定すると良いでしょう。

/* 埋め込み形式のCSS記述例 */
<head>
<style>
p {font-size:16px;color:#333;}
</style>
</head>

 Webサイト作成で一般的に使われている外部読み込み形式のCSSは、メールクライアントによって読み込みがブロックされる場合があるため使用は避けましょう。

/* 外部読み込み形式のCSS記述例 */
<head>
<link rel=“stylesheet” href=“style.css”>
</head>

ポイント3:使用可能なCSSプロパティを把握しておく

 HTMLメールの作成では、多くのメールクライアントがサポートしているCSSプロパティのみ使用しなければなりません。

 Webサイト作成で当たり前に使われているCSSプロパティがHTMLメールでは使えないケースが多々あります。

 HTMLメールのコーディングを始める前に、使用可能なCSSプロパティと、使用を避けるべきCSSプロパティを一通り把握しておきましょう。

⇓ 使用可能なCSSプロパティは、以下の記事が参考になります。

2. viewport設定をする

 viewport(ビューポート)とは、画面の表示領域のことです。簡単に言うとPCやスマートフォンの画面の中で、Webコンテンツが見えている部分のことです。表示領域からはみ出した部分は、画面をスクロールして表示しています。

 PCの画面は表示領域が広く、スマートフォンの画面は表示領域が狭くなります。異なる表示領域のデバイスで同じWebページやHTMLメールを見やすく表示するためには、正しくviewportを設定する必要があります。

viewport(表示領域)の図説

viewportの記述場所

 viewportは、metaタグです。他のmetaタグと同じようにheadタグ内に、name属性として記述しましょう。

<head>
<meta name="description">
<meta name="keywords">
<meta name="viewport">
</head>

viewportの基本文法

 name属性に続けて、content属性を記述し、プロパティとその値を設定します。複数プロパティを設定する場合は、カンマ(,)区切りで記述します。

<meta name="viewport" content="プロパティ=値, プロパティ=値, プロパティ=値">

設定可能なプロパティ値

 content属性には、以下のプロパティ値を設定することができます。

プロパティ 説明/設定値
width 表示領域の横幅(pixel単位)/200〜10000(初期値:800、980)、device-width(デバイスの横幅に合わせる)
height 表示領域の高さ(pixel単位)/200〜10000(初期値:自動)、device-height(デバイスの縦幅に合わせる)
minimum-scale 最小の縮小倍率(ピンチインした時)/0〜10(初期値:0.25)
maximum-scale 最大の拡大倍率(ピンチアウトした時)/0〜10(初期値:1.6)
initial-scale ページ初期読み込み時の拡大率/minimum-scale~maximum-scaleの範囲
user-scalable ユーザーに拡大縮小を許可するかどうか/yes/no(初期値:yes)

 ここからは具体的なviewportの設定例として、「viewportが未設定の場合」「viewportの設定が間違っている場合」「viewportが正しく設定されている場合」の3つのケースを見ながら解説を進めて行きます。

 スマートフォン表示用のデモページもご用意しましたので、あわせてご覧いただくとより理解が深まると思います。

※デモページは、横幅600px、メディアクエリーは未設定です。

viewportが未設定の場合

<meta name="viewport" content="">
viewportが未設定の場合のイメージ

 viewportが未設定のページをスマートフォンで表示した場合、viewportのwidthは、OSの初期値(iOS:980px、Android:800px)に設定されます。

 上記のイメージの場合、横幅600pxで作成したページをiOS(widthの初期値980px)で表示したため、左右に190pxずつ余分なスペースが出来てしまっています。

viewportの設定に間違いがある場合

<meta name="viewport" content="width=600, initial-scale=1">
viewportの設定に間違いがある場合のイメージ

 左右の余分なスペースを無くすために、viewportにページの横幅と同じ600pxを固定値として設定しました。しかし、initial-scale=1 も一緒に設定しているため、狙い通りの表示にはなってくれませんでした。

 initial-scale=1(拡大率:等倍)とは、言い換えると「デバイスの横幅と等幅で表示しなさい」と言う変動値の設定です。これは、viewportに固定値と変動値を重複指定している失敗例です。結果的にviewportは、デバイスの横幅(320px/360px/375px/414pxなど)と等しくなるため、横幅600pxのページは見切れてしまう結果になります。

viewportが正しく設定されている場合

<meta name="viewport" content="width=600">
viewportが正しく設定されている場合のイメージ

 左右の余分なスペースが無くなって、デバイスの横幅いっぱいページが収まりました。

HTMLメール用のviewport設定

 それでは、HTMLメールの場合、どのようにviewportを設定すれば良いのでしょうか。定番の2つの設定をご紹介します。

レスポンシブデザイン対応型

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

 Webサイト作成でも定番の書き方ですが、HTMLメールをレスポンシブ対応させる場合にも、上記のviewport設定がお勧めです。

 表示領域をデバイスの横幅に合わせるプロパティ「width=device-width」とした上で、次章で解説するメディアクエリーを使って、ページの横幅もデバイス横幅に合わせて可変となるように設定して行きます。

※「width=device-width」と「initial-scale=1」は、どちらも同じ表示領域が得られる設定になりますが、一部のデバイスやOSで表示のバグがあるため、どちらも設定しておくのが慣例となっています。

非レスポンシブデザイン型

<meta name="viewport" content="width=800">

 これはPC用に作成したHTMLメールを、そのままのレイアウトでスマートフォンにも表示させたい場合の設定です。要するにレスポンシブ対応させない設定です。

 viewportのwidthには、PC用に作成したHTMLメールと同じ横幅(記述例の場合は800px)を設定します。こうすることで、PC用のレイアウトのままスマートフォンの横幅いっぱいにHTMLメールが表示されます。

viewportが正しく設定されている場合のイメージ

 このviewport設定は、シンプルな1カラムレイアウトのHTMLメールに向いています。上記のイメージのような2カラム以上の横幅の広いレイアウトの場合、文字が小さく読みづらくなるためあまりお勧めできません。

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

 メディアクエリーとは、対象とするメディアタイプ(画面、プリンターなど)に、メディア特性(画面サイズ、ブラウザーの横幅)を組み合わせて、様々な条件分岐を作成することができるCSSの仕様です。

 レスポンシブデザインを作成する場合は、このメディアクエリーを使って、PC、スマートフォン、タブレットなど、デバイスの画面サイズに応じて、適用するCSSを切り替えます。

メディアクエリーの記述場所

 HTMLメールのメディアクエリーは、必ずheadタグ内に埋め込み形式のCSSで記述します。

<head>
<style>
@media screen and (max-width:600px) {
img {
width:100%;
}
}
</style>
</head>

避けるべき記述方法

 Webサイト作成の場合、メディアクエリーは外部読み込みのCSSファイル内に記述するのが一般的ですが、先にも説明した通り、外部読み込み形式のCSSはメールクライアントによって読み込みがブロックされる場合があるため、使用は避けましょう。

 また、link要素内にmedia属性を記述して、画面サイズに応じてCSSを切り替える方法も、外部読み込み形式のCSSになりますので、使用は避けましょう。

<head>
<link rel="stylesheet" href="sp.css" media="(max-width:600px)">
<link rel="stylesheet" href="pc.css" media="(min-width:601px)">
</head>

メディアクエリーの基本文法

 デバイスの画面サイズに応じて条件分岐を作成するためには、メディアタイプにscreen(PCやスマートフォンなどの画面を持つデバイス)、and演算子で結んで、メディア特性にwidth(ビューポートの幅)を指定します。その下に{ }(波括弧)で囲んで、適用するCSSを記述します。

メディアクエリーの基本文法図説

※widthプロパティは、min-width、max-widthの指定が可能です。 ※and演算子は、メディアタイプとメディア特性、または複数のメディア特性を組み合わせる役割をします。

画面サイズによる条件分岐の記述例

/* 画面サイズが480px以下の場合 */
@media screen and (max-width:480px) {
p {...}
}

/* 画面サイズが481px以上の場合 */
@media screen and (min-width:481px) {
p {...}
}

/* 画面サイズが480pxから768pxの場合 */
@media screen and (min-width:480px) and (max-width:768px) {
p {...}
}

HTMLメール用のメディアクエリー設定

 それでは、HTMLメール用のメディアクエリー設定について考えてみましょう。CSSを切り替えるブレイクポイントの数値設定がポイントになります。設定する数値の基点となるのはスマートフォンの画面サイズ(横幅)です。

 ただし、「画面サイズ=ディスプレイ解像度」ではないので注意しましょう。近年発売されているスマートフォン端末のディスプレイ解像度(例:2,688 x 1,242ピクセル)はサイズが大きいため、そのままページを表示してしまうと、文字や画像が小さく表示されてしまい、とても読みづらくなってしまいます。

 そのため、iOS端末、Android端末ともに、ブラウザ上にピクセル比を変更した擬似的なピクセル数を作って、どんな端末でもだいたい同じサイズでページが表示されるようになっています。この擬似的なピクセル数のことを、iOS端末が「CSSピクセル」、Android端末が「dp解像度」と呼びます。

  2020年時点で発売されているiPhone端末のCSSピクセルの横幅は、320px/375px/414pxの3種類になります。

端末名 CSSピクセルの横幅
iPhone 5s/SE 320px
iPhone 6/6s/7/8 375px
iPhone 6/7/8 Plus 414px
iPhone X/XS 375px
iPhone XS Max 414px
iPhone 11 Pro 375px
iPhone 11 Pro Max 414px
iPhone 11 414px
iPhone SE 375px
iPhone XR 414px

※ブレイクポイントの設定に関係のある、横幅サイズのみを記載しています。

引用元:Mobile Viewports for Responsive Experiences

Android端末のdp解像度 Android端末については、発売機種が多いためdp解像度の一覧表は省略しますが、2020年時点で発売されている主なAndroid端末のdp解像度の横幅は、320dp/360dp/480dpの3種類と覚えておけば問題ありません。

 また、メディアクエリーに設定する値は、dpではなく、pxで設定します。

デバイス別解像度とHTMLメールの横幅比較の図

 それでは、上記のCSSピクセルとdp解像度のデータをもとに、HTMLメール用のブレイクポイントとして、適当だと考えられる設定を2つご紹介します。

スマートフォンのみ表示を切り替える設定

 単純に、スマートフォンとPCで表示を切り替えたい場合は、ブレイクポイントは「480px」に設定します。これは、先ほど示したCSSピクセルとdp解像度の中から、最も大きな画面サイズを持つ、Android端末のdp解像度(480dp)をPCとの境界線として考える方法です。

/* スマートフォン端末用のCSS */
@media screen and (max-width:480px) {
p {...}
}

 HTMLメールは、横幅600px前後で作成されることが多いため、Webサイトを作成する時のように、複数のブレイクポイント(例:480px/768px/1024px)を設定する必要はありません。

※480pxのブレイクポイントでカバーできるのは、スマートフォンのポートレート表示(端末を縦向きにした表示)です。ランドスケープ表示(端末を横向きにした表示)や、タブレット端末については、PCと同じレイアウトで表示されます。

PCメールクライアントの縮小表示にも対応する設定

 HTMLメールは、Webブラウザではなく、メールクライアント上でコンテンツを表示するという特徴があります。

 画面の大きなPCの場合、メールクライアントを全画面で開いているとは限らず、画面を縮小・分割してメールコンテンツを小さく表示していることも想定されます。ブレイクポイントの設定値によっては、コンテンツの右端が見切れて、横スクロールが出てしまう場合もあるでしょう。

メールクライアント縮小表示の図説

 こういった場合にもレスポンシブ対応させたい場合には、PC用に作成したHTMLメールの横幅(600px前後)をブレイクポイントに設定しておくと良いでしょう。これは、PC用のHTMLメール横幅を表示切り替えの境界線として考える方法です。

/* スマートフォン端末用のCSS */
@media screen and (max-width:600px) {
p {...}
}

 メールクライアントのコンテンツ表示エリアの横幅が、PC用のHTMLメール横幅を下回る場合(=コンテンツが見切れる場合)は、デバイスの種類に関係なく、すべてスマートフォン用のレスポンシブ表示に切り替わります。

メールクライアント縮小表示の図説(レスポンシブ対応)

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

 メディアクエリーで条件分岐を作成したら、スマートフォン表示用のCSSプロパティを設定していきます。

横並びレイアウトの調整

 PC用のHTMLメールで、2カラム、3カラム、4カラムで表示しているレイアウトを、スマートフォンでは1カラムで表示させるための調整をします。TDタグの横幅(width)を100%に指定します。必要に応じて余白の調整も行います。

@media screen and (max-width:600px) {
.responsive-td {
width:100% !important;
padding-left:5px !important;
padding-right:5px !important;
display: block !important;
box-sizing: border-box !important;
}
}
  • 上記のCSS設定については、該当箇所が多いため、headタグ内に埋め込み形式のCSSで一括指定します。
  • HTMLをコーディングする際に、すべてのTDタグに対してレスポンシブ用のclassを指定しておきましょう。
  • メールクライアント固有のCSS等にスタイルを上書きされない対策として、!important指定をしておくことをお勧めします。

画像の拡大縮小

 HTMLメールを表示するデバイスの画面サイズに応じて、画像サイズが拡大縮小するように調整します。imgタグの横幅(width)を100%に指定します。

@media screen and (max-width:600px) {
.responsive-img {
width:100% !important;
height:auto !important;
}
}
  • 上記のCSS設定については、該当箇所が多いため、headタグ内に埋め込み形式のCSSで一括指定します。
  • HTMLをコーディングする際に、すべてのimgタグに対してレスポンシブ用のclassを指定しておきましょう。
  • メールクライアント固有のCSS等にスタイルを上書きされない対策として、!important指定をしておくことをお勧めします。

フォントサイズの調整

必須の設定ではありませんが、PC用のHTMLメールのフォントサイズを小さめに設定している場合は、スマートフォンで読みやすい文字サイズや行間に調整します。

@media screen and (max-width:600px) {
html {
font-size:14px !important;
line-height:1.6 !important;
}
}
  • 上記のCSS設定については、該当箇所が多いため、headタグ内に埋め込み形式のCSSで一括指定します。
  • メールクライアント固有のCSS等にスタイルを上書きされない対策として、!important指定をしておくことをお勧めします。

スマートフォンではコンテンツを非表示にする

 HTMLメールのコンテンツの中で、「このエリアはスマートフォンでは表示したくない」という場合、displayプロパティを使って、コンテンツを非表示にすることができます。

 非表示にしたいTABLEやTD要素に対して、非表示用のclassを付与し、埋め込み形式のCSSでdisplayプロパティを記述します。

[HTML]
<table class="hide">
<tr>
<td>
<img src="img.png">
</td>
</tr>
</table>

[CSS]
@media screen and (max-width:600px) {
.hide {
display: none !important;
}
}
  • コンテンツの非表示設定により、HTMLメールのレイアウトが崩れていないか注意しましょう。
  • 一部のメールクライアントでは、displayプロパティがサポートされていない場合があります。コンテンツが非表示にならない場合もあることを考慮しておきましょう。

お勧めできない記述方法

 HTMLメールでは、PC用とスマートフォン用のコンテンツを両方記述し、メディアクエリーで表示・非表示を切り替える方法はおすすめできません。

 displayプロパティがサポートされていないメールクライアントの場合、PC用とスマートフォン用の両方のコンテンツが表示されてしまいます。

[HTML]
<table class="hide">
<tr>
<td class="pc">
<img src="img-pc.png" alt="PC用の表示画像">
</td>
<td class="sp">
<img src="img-sp.png" alt="スマホ用の表示画像">
</td>
</tr>
</table>

[CSS]
@media screen and (min-width:601px) {
.sp {
display: none !important;
}
}
@media screen and (max-width:600px) {
.pc {
display: none !important;
}
}

レスポンシブHTMLメールの表示確認方法

1. Google Chromeデベロッパーツールによる簡易確認

 HTMLメールを配信する前の制作段階では、PCとスマートフォンの表示確認の方法として、Google Chromeのデベロッパーツールを使うと便利です。ボタンひとつで、PC用とスマートフォン用の表示プレビューを切り替えて、確認を行うことができます。

 ただし、デベロッパーツールの表示プレビューは、あくまでもWebブラウザー上の簡易的な表示確認です。

Google Chromeデベロッパーツールの起動方法

Windowsの場合

 Google Chromeの右上のメニューから、[その他のツール] > [デベロッパーツール]

 ショートカットキー:Ctrl + Shift + I

Macの場合

 Google Chromeのツールバーメニューから、[表示] > [開発/管理] > [デベロッパーツール]

 ショートカットキー:command + option + I

 デベロッパーツールの詳しい使用方法については、また別の記事でご紹介したいと思います。

2. テスト配信・メールクライアントで表示確認を行う

 作成したHTMLメールの最終確認は、テストメールを配信し、PCやスマートフォン実機のメールクライアント上で行いましょう。

 テストメールの確認には、主要なメールクライアント、Webメール、スマートフォン端末(iOS、Android)など、複数の環境で検証するように心掛けましょう。

まとめ

 HTMLメールは、メールクライアントで閲覧するという特徴があり、Webサイトのレスポンシブデザインとは、考え方や作り方が少し異なることがお分かりいただけたかと思います。

 viewportやメディアクエリーについては、少し難しく感じる部分もあったと思いますが、一度しっかり設定してしまえば、次回のHTMLメールに使い回すことも可能です。

 最も重要なポイントは、レスポンシブHTMLメールの骨格となるPC用のHTMLメールがきちんと作られていることだと言えます。まずは、PC用のHTMLメールの作り方のポイントをしっかり抑えて、多くの環境で正しく表示されるHTMLメールの作成を目指しましょう!

⇓ PC用のHTMLメールの作り方は、こちらの記事が参考になります

著者
WiLL Cloudマーケティングチームのロゴ
WiLL Cloud マーケティングチーム ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

メルマガ登録 »