(公開日2023年08月17日)
企業の営業・マーケティング担当者・個人事業主の中には、オリジナルのHTMLメールを制作しようとしている方もいるかもしれません。でもHTMLメールの作り方は難しそうですよね。
この記事では、HTMLメールのコーディングの特徴、手順、注意点について解説します。これを読めば、HTMLメールのコーディングのやり方の概略が分るでしょう。そして読者の視覚に訴えて、効果的なメルマガを配信する準備を整えられます。
特徴➀ウェブサイトのHTMLとは全く違う
特徴②テーブルレイアウトで構成
特徴③埋め込み型・インライン形式のCSSを用いる
特徴④メールの容量は小さめにする
HTMLメールの制作には、ウェブデザインに使うような最新のHTML/CSSは役に立ちません。メールクライアントによってはHTML5に対応しておらず、HTML4かXHTML1,0で書くことが必要です。またテーブルレイアウトが必須で、かなり制限が多く、実装に手間がかかります。ウェブサイトのコーディングに慣れている方は戸惑うかもしれません。
CSSプロパティがメールクライアントによって違うため、表示が崩れないようにテーブルレイアウトで構成します。TABLEタグを用い、レイアウトをアレンジするため、TABLEを入れ子にして使うのが一般的です。
メールの幅は600px前後が多く、これ以上の幅にすると、スマホで見た時に横幅が縮小されてフォントが小さくなってしまいます。テーブルレイアウトで用いるHTMLタグは以下のとおりです。
<table></table>
表の作成に利用するタグで、枠線は消すことができます。
<tr></tr>
Table Rowの略で、表内の１行を表わします。
<td></td>
Table Dataの略で、<tr>で定義した行の中に表示するデータを表わします。
外部CSSやstyleタグを認識してくれないメールクライアントがあるため、埋め込み型・インライン形式のCSSを用います。埋め込み型CSSはhead内にCSSを記述、インラインCSSはHTMLタグの中にCSSを記述する形式です。これがメールクライアント間でのレンダリングの互換性を保証できる最善の方法です。ただし作成に手間がかかり、うまく機能しないことがあります。
スタイルを設定する時に使う属性を以下に示します。
TABLEタグ内で利用し、セル内の余白の広さを指定します。HTMLメールでは0と指定してください。
TABLEタグ内で利用し、セル同士の間隔を指定します。HTMLメールでは0と指定してください。
TABLEタグ内で利用し、枠線の太さを指定します。HTMLメールでは0と指定してください。
スタイルについての記述を行います。ただし対応してないメールクライアントがあるため、最小限の利用にしてください。
フォントの大きさを指定します。
フォントの太さを指定します。
フォントの色を指定します。
参考記事：HTMLメールの作成時に使用できるタグの種類について
Gmailの場合、102kb以上のメールはクリッピングしてしまうため、100kb以内の容量に抑えてください。容量が大きいと表示するのに時間がかかり、ユーザーが途中でメールを閉じてしまいます。
以下の手順に従ってコーディングを進めてください。
手順1：DOCTYPEを指定
手順2：lang属性で言語を指定
手順3：文字コード・文字エンコーディングの設定
手順4：viewportを設定
手順5：メディアクエリーの設定
手順6：CSSプロパティの設定
手順7：テーブルレイアウトの設置
手順8：大見出しの設置
手順9：テキストの追加
手順10：テスト送信してみる
手順11：画像の追加
HTML文章の型をブラウザ、メールクライアントに対して宣言します。多くのメールクライアントでは「HTML5」は対応していないため、XHTML 1.0あるいはHTML4を指定します。HTML4の文法の方が少しだけ簡単です。
「XHTML 1.0 Transitional」を宣言する場合
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
「HTML 4.01 Transitional」を宣言する場合
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTMLぺージが日本語で書かれていることを記述します。
<html lang=”ja”>
どのような文字コードを使い、どのような形式で表示するかを指定します。ほとんどのメールクライアントがUTF-8に対応可能です。
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<style>も用いるため、以下も記述してください。
<meta http-equiv=”content-style-type” content=”text/css”>
viewportとは、画面の表示領域つまりPCやスマートフォンで見えている部分のことです。PCの表示画面は広く、スマートフォンは狭いのが特徴です。スマートフォンでviewportが設定されていないと、パソコン用のHTMLメールがスマートフォンの画面に濃縮されたように表示されます。逆にviewportが小さすぎると、スマートフォンの画面からHTMLメールがはみ出します。
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,
user-scalable=no”/>
参考記事：スマホに最適化したHTMLメールとは？作り方のコツと注意点を解説
メディアタイプ（画面・プリンターなど）と、メディア特性（画面サイズ、ブラウザの横幅など）を組み合わせて作るCSSの仕様をhead内に埋め込みCSSとして記述します。
・メディアタイプ：screen（PCやスマートフォンなど画面を持つデバイス）
・メディア特性：width（ビューポートの幅）を指定
・その下にCSSを記述
@media only screen and (max-width:480px) {
｝
スマートフォン表示用のCSSプロパティを埋め込み型CSSで記述します。パソコン用HTMLメールで複数カラムの横並びレイアウトにしている場合、スマートフォンでは１カラムに変更して表示させましょう。
以下に実例を示します。
<table class=”design_area_result” width=”600”>
/* 画面サイズが480px以下の場合 */
<style type=”text/css”>
<!– /* ここからスタイルを見えなくする */
@media only screen and (max-width:480px) {
.design_area_result {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
}
/* ここまで見えなくなる */ –>
</style>
2022年3月現在に販売されているスマートフォンのCSSピクセルの横幅は320～480pxであり、これに合わせてメディア特性をmax-width 480pxに設定しています。480pxを境にスマートフォンとパソコン・タブレットでの表示を切り替える仕組みです。
メールクライアントのCSSに上書きされないように!important指定しています。また<style>に対応していないメールクライアントでは、styleのコンテンツがそのまま表示されるため、<!—->を使って見えなくしているのも工夫の一つです。
スマートフォンでは画像の横幅を100%に指定します。
@media only screen and (max-width:480px) {
.img {
width:100% !important;
height:auto !important
}
}
パソコン用のフォントサイズが小さめに設定されているときは、スマートフォンでは大きめのフォントサイズに変えます。
@media only screen and (max-width:480px) {
html {
font-size:16px !important;
line-height:1.6 !important;
}
}
参考記事：HTMLメールをレスポンシブ対応で表示させたい時の対処法教えます
テーブルレイアウトの実例としてHTMLを示します。
<table class=”design_area_result” align=”center” border=”0″ width=”600″ cellspacing=”0″cellpadding=”0″ style=”width:600;”>
<tr>
<td align=”left”>
コンテンツ
</td>
</tr>
</table>
tableにデフォルトでついているCSSをリセットしています。またHTMLメールの横幅は600px位が適切です。
大見出しの位置にテーブルを1つ追加します。
<table align=”center” width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ style=”width:600;”>
<tr>
<td valign=”top” align=”left”>
大見出しのサンプル
</td>
</tr>
</table>
コンテンツの部分にFONTタグを使ってテキストを追加します。フォントのサイズや色を設定してください。FONTタグが効かないケースに備えてCSSも記述します。
<font size=”2″ color=”#1d1b1b” style=”font-size:14px;color:#1d1b1b;”>コンテンツのサンプル、コンテンツのサンプル、コンテンツのサンプル、コンテンツのサンプル、コンテンツのサンプル、コンテンツのサンプル</font>
もう一つテーブルを追加して画像を埋め込みます。画像のsrcは絶対パスで指定してください。画像のもとの横幅サイズを800px位にしておくとよいでしょう。小さすぎるとスマホで見た時に引き延ばされてぼやけますし、大きすぎるとHTMLメールが重くなります。
また圧縮して軽くしてください。必ず画像のALT属性を設定しましょう。画像が表示されない場合に、ALTに設定したテキストが表示されます。
<table class=”design_area_result” align=”center” width=”600″ border=”0″ cellpadding=”0″cellspacing=”0″ style=”width:600;”>
<tr>
<td valign=”top” align=”center”>
<img src=”https://****** ” alt=”LOGO” style=”width:100%;”>
</td>
</tr>
</table>
実例として示したHTMLをブラウザで表示してみました。
この画面を丸ごとコピーして、Gmailの編集画面に貼り付けます。
そしてHTMLメールを送信し、Outlookで受信してみました。
ちゃんと受信できています。
参考記事：Gmailを使ったHTMLメールの作り方！カスタマイズ方法も紹介
注意1：凝ったデザインは難しい
注意2： デバイス・メールクライアントで表示が違う
注意3：使えないタグがある
注意4：フォントの一括プロパティは使えない
ウェブページと同じようなデザインは無理です。（例えば見出しが画像にかぶさっているなど）
疑似クラス・疑似要素は使えないため、ホバーアニメーション・矢印アイコンは無理です。
デバイス・メールクライアントによって表示が変わるため、コーディングに制限がかけられます。例えばOutlookで使えないCSSは以下のとおりです。
・border-radius
・aタグ・divタグにmargin・paddingが効かない
・背景画像・グラデーション
デバイスとメールクライアントの組み合わせは100万種類以上あり、全てに対応できるHTMLメールを作成するのは不可能です。ある程度妥協するしかありません。
参考記事：Outlookを使ったHTMLメールの作り方をカスタマイズしよう
h1, h2. h3などの見出しタグの標準的なサポートがないため使えません。見出しを独自のセルに配置して、インラインCSSを設定してください。段落を設定するDIVタグ、Pタグも効かないことがあります。段落はTABLEタグ、BRタグで表現しましょう。
サポートしているメールクライアントが少ないため、フォントの一括プロパティはつかえません。以下のようなstyleの使用は避けましょう。
style = “font：10px / 16px Arial、sans-serif;”
こちらもあわせてご覧ください。
関連記事：HTMLメール文字化けの原因と対処法は？android・iPhone・スマホやメーラー別に対処法を解説
HTMLメールのコーディングの特徴、手順、注意点について解説しました。これでやり方の概要は分かったと思います。ただしテーブルレイアウトを使うこと、埋め込み型あるいはインライン形式のCSSを用いること、いろいろな制限があることがデメリットです。
慣れていない方がHTMLメールのコーディングをすると、相当に手間がかかり、表示崩れのリスクも高くなります。企業の営業・マーケティング担当者・個人事業主の方が、本業の合間にHTMLメールを制作するのは難しいのではないでしょうか？それよりも専門の業者に依頼した方がよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
