-
レスポンシブHTMLメールの作り方とは？【初心者向け】
-
レスポンシブHTMLメールとは、PCやスマートフォンなどのデバイスの画面サイズに応じて、自動的にレイアウトや画像サイズを最適化して表示するHTMLメールのことです。1つのソースで様々なデバイス表示に対応することができます。
しかしながら、HTMLメールのレスポンシブ化の方法や手順は、Webサイトのレスポンシブ化とは少し異なる点があります。既にレスポンシブデザインを理解しているWebサイト制作者の方でも、HTMLメール用のレスポンシブ化について学んでおく必要があるでしょう。
本記事では、多くのメールクライアントで正しく表示される、シンプルなレスポンシブHTMLメールの作成方法を具体的なコーディング方法も交えながら、初心者の方にもわかりやすく解説します。
レスポンシブ対応のHTMLメールが
ノーコードでかんたん作成！⇓ こちらの記事も参考になります
【目次】
レスポンシブHTMLメールの作成手順
基本的な作成の流れ
レスポンシブHTMLメールを作成する基本的な流れは以下の通りです。
1. PC用のHTMLメールを作成する
まずは、PC用のHTMLメールから作成します。HTMLメールは、Webサイトと違い、tableタグを多用したコーディングになる点や、HTMLとCSSに使えないタグ（メールクライアントが非サポート）が多く存在するため、PC用を先に作成し、モバイル用の表示に対応させる方が制作がスムーズです。
時代の流れとして、Webページはモバイルファーストで作成することが望ましいとされていますが、HTMLメールをモバイルファーストでコーディングするためには、高いコーディングスキルと経験やコツが必要になります。HTMLメールの作成に慣れて来たら、モバイルファーストで作成する方法も試してみると良いでしょう。
HTMLメールのコーディングで、特に気を付けるべきポイントは、以下の3点です。
ポイント1：テーブルレイアウトで作成する
HTMLメールは、HTMLのTABLEタグを使用するテーブルレイアウトと呼ばれるコーディング方法で作成します。この方法はWebサイト作成では使用しない特殊な方法になります。これは前述した通り、一部のHTMLやCSSのタグをサポートしていないメールクライアントが存在するためです。
多くのメールクライアントでレイアウトが崩れないHTMLメールを作成するためには、現状TABLEタグを使ったコーディング方法が最も確実です。Webサイト制作で当たり前に使われているタグが使えないケースが多数ありますので注意してください。思わぬ表示崩れを起こす場合があるので注意しましょう。
特に使用するCSSプロパティの種類には注意が必要です。Web制作で良く使われるCSSプロパティと、主要メールクライアントのサポート状況について、以下の記事で詳しく解説しています。HTMLメールの制作に取り掛かる前に、必ずチェックしておきましょう。
HTMLメール table、tr、td要素を使用したレイアウト Webサイト Webサイト header、section、article、nav、aside、footer、div要素など + CSSを使用したレイアウト ポイント2：CSSの読み込みは、インライン形式・埋め込み形式で記述
HTMLメールにCSSで装飾を加える場合は、基本はインライン形式でHTMLタグに直接CSSを記述します。
/* インライン形式のCSS記述例 */ <p style="font-size:16px;color:#333;">サンプルテキスト</p>
また近年は、headタグ内へのCSS埋め込み形式をサポートするメールクライアントも増えて来ているため、インライン形式での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メールでは使えないケースが多くあります。
以下の記事で、良く使われるCSSプロパティと、主要メールクライアント（デスクトップ、モバイル、Webメール）のサポート状況を一覧表で掲載しています。HTMLメールの制作に取り掛かる前に、必ずチェックしておきましょう。
2. viewport設定をする
viewport（ビューポート）とは、画面の表示領域のことです。簡単に言うとPCやスマートフォンの画面の中で、Webコンテンツが見えている部分のことです。表示領域からはみ出した部分は、画面をスクロールして表示しています。
PCの画面は表示領域が広く、スマートフォンの画面は表示領域が狭くなります。異なる表示領域のデバイスで同じWebページやHTMLメールを見やすく表示するためには、正しく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のwidthは、OSの初期値（iOS：980px、Android：800px）に設定されます。
上記のイメージの場合、横幅600pxで作成したページをiOS（widthの初期値980px）で表示したため、左右に190pxずつ余分なスペースが出来てしまっています。
viewportの設定に間違いがある場合
<meta name="viewport" content="width=600, initial-scale=1">
左右の余分なスペースを無くすために、viewportにページの横幅と同じ600pxを固定値として設定しました。しかし、initial-scale=1 も一緒に設定しているため、狙い通りの表示にはなってくれませんでした。
initial-scale=1（拡大率：等倍）とは、「デバイスの横幅と等幅で表示する」という指定です。viewportに600pxという固定値と変動値を重複指定しているため上手く機能しません。結果的にviewportは、デバイスの横幅（320px/360px/375px/414pxなど）と等しくなるため、横幅600pxのページは見切れてしまう結果になります。
viewportが正しく設定されている場合
<meta name="viewport" content="width=600">
左右の余分なスペースが無くなって、デバイスの横幅いっぱいページが収まりました。
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設定です。要するにレスポンシブデザインにしない設定です。スケーラブルデザインという、もうひとつのスマホ対応の方法を取りたい場合はこの設定を使用します。
viewportのwidthには、PC用に作成したHTMLメールと同じ横幅（記述例の場合は800px）を設定します。こうすることで、PC用のレイアウトのままスマートフォンの横幅いっぱいにHTMLメールが表示されます。
このviewport設定は、シンプルな1カラムレイアウトのHTMLメールに向いています。上記のイメージのような2カラム以上の横幅の広いレイアウトの場合、文字が小さく読みづらくなるためあまりお勧めできません。スケーラブルデザインについては、以下の記事で詳しく解説しています。
レスポンシブ対応のHTMLメールが
ノーコードでかんたん作成！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端末ともに、ブラウザ上にピクセル比を変更した擬似的なピクセル数を作って、どんな端末でもだいたい同じサイズでページが表示されるようになっています。この擬似的なピクセル数（viewportサイズ）のことを、iOS端末が「CSSピクセル」、Android端末が「dp解像度」と呼びます。
※2023年5月時点で発売されているiPhone端末のCSSピクセルの横幅は、320px/375px/390px/414px/428px/430pxの6種類になります。
端末名 CSSピクセルのサイズ（横幅ピクセル x 縦幅ピクセル） iPhone14 Pro Max 430 x 932 iPhone14 Plus 428 x 926 iPhone14 390 x 844 iPhone 13 Pro Max 428 x 926 iPhone 13 Pro 390 x 844 iPhone 13 mini 375 x 812 iPhone 13 390 x 844 iPhone 12 Pro Max 428 x 926 iPhone 12 Pro 390 x 844 iPhone 12 mini 375 x 812 iPhone 12 390 x 844 iPhone SE 2020 375 x 667 iPhone 11 Pro Max 414 x 896 iPhone 11 Pro 375 x 812 iPhone 11 414 x 896 iPhone XR 414 x 896 iPhone XS Max 414 x 896 iPhone XS 375 x 812 iPhone X 375 x 812 iPhone 8 Plus 414 x 736 iPhone 8 375 x 667 iPhone 7 Plus 414 x 736 iPhone 7 375 x 667 iPhone SE 320 x 568 ※縦幅のサイズは、ブラウザによって多少前後します。
Android端末のdp解像度 Android端末については、発売機種が多いためdp解像度の一覧表は省略しますが、2022年時点で発売されている主なAndroid端末のdp解像度の横幅は、320dp/360dp/412dp/480dpの4種類になります。
また、メディアクエリーに設定する値は、dpではなく、pxで設定します。
それでは、上記のCSSピクセルとdp解像度のデータをもとに、HTMLメール用のブレイクポイントとして、適当だと考えられる設定を２つご紹介します。
スマートフォンのみ表示を切り替える設定
単純に、スマートフォンと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メール横幅を下回る場合（＝コンテンツが見切れる場合）は、デバイスの種類に関係なく、すべてスマートフォン用のレスポンシブ表示に切り替わります。
テキストリンクをボタンリンクに切り替える方法
メディアクエリーを上手く使えば、レスポンシブHTMLメールで、PC表示時はテキストリンクで表示していたものを、スマートフォン表示時はボタンリンクに変更することができます。メディアクエリーとCSSを以下ように記述します。
/* テキストリンクに、.text-linkクラスを付与 */ @media screen and (max-width: 600px) { .text-link { display: block; padding: 8px; border-radius: 6px; background-color: #0d6efd; text-decoration: none !important; font-weight: bold; color: #ffffff; text-align: center; } }このメディアクエリーでは、画面の横幅サイズが600px以下の場合に、テキストリンクがボタンリンクに切り替わります。
スマートフォンの小さな画面では、テキストリンクはタップし難いため、このような工夫を施しておくことで、クリック率の改善が期待できます。
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指定をしておくことをお勧めします。
HTMLメールの画像の横幅サイズについて
スマートフォン画面の横幅サイズに合わせて、画像の横幅も100%で表示にした場合、画像が引き伸ばされてぼやけて表示される場合があります。PC用に作成した元画像が480pxを下回るような小さいサイズの場合は注意が必要です。
また、Webサイト制作では、AppleのRetinaディスプレイのような高解像度ディスプレイへの対応として、画像サイズを通常の2倍のサイズで作成して、画像を綺麗に見せる方法があります。
しかし、HTMLメールの場合は、メール全体のファイル容量をなるべく小さく抑える必要があるため、Retina対応の大きな画像は向いていません。通常は、等倍（1倍）サイズの画像で問題ありません。
フォントサイズの調整
必須の設定ではありませんが、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メールの作成を目指しましょう！
以下の記事では、より実践的なレスポンシブHTMLメールの作成方法をご紹介しています。簡単なHTMLメールテンプレートのソースコードも掲載しています。ぜひチェックしてみてください。
レスポンシブ対応のHTMLメールが
ノーコードでかんたん作成！
Category：
