(公開日2023年07月11日)
「HTMLメールのデザイン性の幅を広げたい」
「カスタマイズできる方法を知りたい」
このように、社内営業担当で配信ツールのテンプレートを使って配信しているけれど、HTMLメールのデザインに納得できない人は少なくないと思います。HTMLメールを自分でカスタマイズすることはできないでしょうか？
この記事では、HTMLメールのコーディングの基本、作成のコツ、HTMLメールのが見られないとき（うまく表示できないとき）の対策を解説します。
HTML（hyper text markup language）を使って作られたメールのことです。文字のフォント・色・大きさを装飾したり、画像・動画を埋め込んだりすることで、ウェブサイトのようなデザイン性の高いメールを作成できます。メルマガを中心としたマーケティングでよく用いられるアイテムです。
関連記事：HTMLメールとは？デザイン・制作のプロが分かりやすく解説
HTMLメールのメリットは、視覚に訴えて商品をアピールでき、ブランド性をデザインに込められることです。読者がメールの内容を理解しやすくなり、読まれる確率が高まります。また開封率、URLのクリック率を測定できるため、メールの効果を判定する際に便利です。
一方、デメリットは、作成するために専門的な知識が必要なこと、メールの容量が大きく送信・受信に時間がかかる場合があることです。また受信者側の環境で、表示が崩れることがあります。さらに迷惑メールに振り分けられたり、キャリアメールで見られないこともあります。
以下の7つについて解説します。
1．HTMLメールをGmailで作成する方法
2．HTMLメールをOutlookで作成する方法
3．HTMLメールのコーディングの基本
4．HTMLメールの作成時に使用できるタグの種類と一覧
5．スマホ向けにHTMLメール作成する方法
6．HTMLメールのレスポンシブ対応の仕方
7．HTMLメールに画像を埋め込む方法
Gmailには「プレーンテキストモード」と「リッチテキストモード」の2種類があります。標準設定はリッチテキストモードです。リッチテキストモードでメッセージを記述するとHTMLメールを作成できます。GmailでHTMLメールを作成する際の手順は、以下のとおりです。
1．編集画面を開く
2．本文を作成
3．テキストカラー・サイズなどを変える
4．画像を挿入
5．HTMLメールを送信
操作方法は簡単で、一般的なエディターを使う要領でHTMLメールを作成できます。ただし編集機能が限定されており、カスタマイズには対応していません。HTMLコードを直接記述することも不可能です。デザイン性を高めるためには、独自にHTMLメールを作成して、Gmailにコピペして送信するとよいでしょう。詳しいやり方は以下のページをご覧ください。
関連記事：Gmailを使ったHTMLメールの作り方！カスタマイズ方法も紹介
最新のOutlookには「HTML」と「プレーンテキスト」といった２種類のメッセージ形式が含まれます。HTMLで記述するとHTMLメールを作成できます。Outlookを使ったHTMLメールの基本的な作り方は以下のとおりです。
1．既定の書式を変更する
・作成と返信：フォントのスタイル・大きさを設定
・楽しいアニメーション機能を利用：Happy Birthdayのような言葉が含まれると、自動的にアニメーションを表示する機能
・スマート候補を利用：メッセージの中に含まれるキーワードが自動的に強調され、おすすめ情報が表示される機能
2．新規メール作成ウインドウを開きメールを作成
3．送信
ただし編集機能が限定されており、カスタマイズには対応していません。よりデザイン性の高いHTMLメールを作成したい場合は、以下のリンクページで詳細の手順をご確認ください。
関連記事：Outlookを使ったHTMLメールの作り方をカスタマイズしよう
基本的なポイントと注意点は以下のとおりです。
HTMLメールの制作には、ウェブデザインに使うような最新のHTML/CSSは役に立ちません。メールクライアントによってはHTML5に対応しておらず、HTML4かXHTML1,0で書くことが必要です。
いろいろな受信環境に対応するためには、table要素で作成するのが最適です。
埋め込み型CSSは<head>の中にCSSを埋め込んでスタイル・書式を設定します。インラインCSSはHTMLタグの中にCSSを記述します。
容量は100kb以内に納めましょう。Gmailでは102kb以上のメールはクリッピングされてしまいます。
Outlookではマージンタグのサポートをしておらず、メールの行間が広くなります。
サポートしているクライアントが少ないからです。
関連記事：HTMLメールのコーディングのやり方！特徴・手順・注意点を解説
最低限は知っておきたいHTMLタグをご紹介します。
表の作成に利用するタグです。<table></table>
Table Rowの略で、表内の１行を表わします。<tr></tr>
Table Dataの略で、<tr>で定義した行の中に表示するデータを表わします。<td></td>
Paragraphの略で、一つの段落を表します。<p></p>
このタグはメールクライアントによっては表示崩れするため、用いないほうがよいでしょう。
imageの略で、画像を表示する際に用います。<img>
Breakの略で、改行を意味します。<br>
以下はスタイルを設定する時に使う属性です。
TABLEタグ内で利用し、セル内の余白の広さを指定します。HTMLメールでは0と指定してください。
TABLEタグ内で利用し、セル同士の間隔を指定します。HTMLメールでは0と指定してください。
TABLEタグ内で利用し、枠線の太さを指定します。HTMLメールでは0と指定してください。
スタイルについての記述を行います。
フォントの大きさを指定します。
フォントの太さを指定します。
フォントの色を指定します。
関連記事：HTMLメールの作成時に使用できるタグの種類について
次の手順に従ってスマートフォンに対応したHTMLメールを作成してください。
HTMLメールはTABLEタグを使ってテーブルレイアウトでコーディングするため、広い画面の方が表示崩れを防げます。そのため、最初にパソコン用のHTMLメールから作成することをお勧めします。外部読み込み形式のCSSは使えず、インライン形式もしくは埋め込み型CSSを用います。
viewportはスマートフォンやパソコンで見えている画面の表示領域であり、スマートフォンは狭いのが特徴です。viewportはhead内に以下の形式で記述します。
<meta name=”viewport” content=”プロパティ=値”, “プロパティ=値”, “プロパティ=値”>
メディアタイプとメディア特性を組み合わせて作るCSSの仕様で、head内に埋め込み形式のCSSを記述します。メディアタイプとしてscreen（PCやスマートフォンなど画面を持つデバイス）を、メディア特性としてwidth（ビューポートの幅）を指定し、その下にCSSを記述してください。
実例として、パソコン用のHTMLメールが横並びレイアウトのとき、スマートフォンではテーブルの幅を100％に変えて1カラムに切り替えた場合を示します。
/* 画面サイズが480px以下の場合 */
<style>
@media only screen and (max-width:480px) {
img {
width:100%;
}
}
</style>
関連記事：スマホに最適化したHTMLメールとは？作り方のコツと注意点を解説
HTMLメールをレスポンシブ対応にする手順は以下のとおりです。
PC用HTMLメールで複数カラムの横並びレイアウトにしている場合、スマートフォンでは１カラムで表示するように変換します。具体的には、テーブルレイアウトのTDタグの横幅を100%に指定するとよいでしょう。以下に実例を示します。
@media only screen and (max-width:480px) {
.responsive-td {
width:100% !important;
display: block !important;
box-sizing: border-box !important;
}
}
スマートフォンでは画像の横幅を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;
}
}
関連記事：HTMLメールをレスポンシブ対応で表示させたい時の対処法教えます
画像を埋め込む場合は、以下の５つの条件を満たすように設定してください。
画像のパスは絶対パス（https:// などから始まるアドレス）で指定してください。
モバイルファーストを基本として、横幅を100%に設定します。
画像が表示されない場合は、代替テキストとしてaltに設定したテキストが表示されます。代替テキストがないと、エラー表示されてしまうので注意してください。
メールで画像を使うときは、JPEG・JPG・PNG・GIFのどれかを用いましょう。
スマートフォンでは横幅が600px、PCでは850pxが最適とされています。スマートフォンを優先して600pxを選び、レスポンシブ対応にするとよいでしょう。
HTMLメールがスマートフォンやPCのメーラーで見られないことがあります。その原因は以下のとおりです。
キャリアメールやMMSは、種類によってはHTMLメールに対応していません。この場合に、HTMLメールを表示させることは不可能です。対処法は以下のとおりです。
・キャリアメールにはテキストメールを配信する
・ウェブブラウザへ誘導する
・マルチパート配信をする
HTMLメールが迷惑メールに振り分けられてしまい、見られないことがあります。対処法は、送信ドメイン認証を受ける、オリジナルの差出人メールアドレスを使うなどです。ただし個人で設定‣管理するのは大変であり、迷惑メール対策機能を備えたメール配信システムを利用するとよいでしょう。
データ量が大きすぎる場合は、クリップピングされてしまい正しく表示されません。この対処法は、動画の代わりにGIFを用いるなどして、HTMLメールのデータ量を抑えてください。
文字化けしてしまう原因は以下の２つがあります。
送信されてくるメールの文字コードは「シフトJIS」などいろいろなタイプがあります。そしてiPhoneについているMMSやキャリアメールでメールを受信する際に「ISO-2022-JP」へ変換されて読み込まれる仕組みです。文字コードの判別・変換は自動なのですが、うまくいかないことがあります。これが文字化けの原因です。
対策としては、マルチパート配信にして、HTMLメールが見られない時には、テキストメールを表示させるようにすることです。
HTMLメールに環境依存文字が使われていると一部文字化けしてしまいます。WindowsやMacでは、それぞれに独自の記号・絵文字が使われているのですが、送信側と受信側で環境が違うと文字化けします。
送信する側の注意点は、HTMLメールを作成する際に環境依存文字を使わないことです。特に絵文字は気をつけてください。
関連記事：HTMLメールが文字化けしてしまうときの原因と対処法は？
株式会社B.A.Dで制作したHTMLメールのデザインテンプレートを特別に公開します。以下のリンクページをご覧ください。
HTMLメールのコーディングの基本、作成手順のコツを解説しました。HTMLメールの作り方は、おおむね理解できたと思います。自分でHTMLメールをカスタマイズしてみようと思っておいでの方もいらっしゃるでしょう。
しかしHTMLメールをコーディングする方法は非常に複雑です。うまくやらないと、受信した人がメールを見られなかったり、文字化けしたりします。本業の合間にHTMLメールを制作するには、手間がかかり過ぎるのではないでしょうか？
HTMLメールの制作は、専門としている業者に依頼するのも方法の一つです。株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
