HTMLメールの制作方法
HTMLメールでは使用できるコードに制限があり、環境によっては見れない、崩れることが多いのでここにメモしていることが全てではない。
（よく使われるメールでは見れるようにしたつもり）
1.HTMLメールについて
はじめにで書いたように、使用できるコードに制限があるので、基本的にはテーブルレイアウトでコーディングを行う。（使用できるコードはThe Ultimate Guide to CSSで確認を行う、他にも制限があるので次の見出しで書いておく。）
また、幅も600px～700pxとなっています。（元々埋め込み形式のcssが効かないことになっていたため、どの画面でも安定して見れるように大体このサイズになっている。）
メールマガジンを配信する際は、HTMLメール+テキストメール+WEB表示用HTMLの3つのデータが必要になります。（配信に使用するソフトによってここら辺は変わってくると思う。）
2.コーディングについて
最新の宣言は使えないのでXHTML 1.0 TransitonalかHTML4.01 Transitionalを使う。（どっちがいいかの説明ができないので多分どっちでもいい）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">次に文字コードを書く
UTF-8でよい（場合によってiso-2022-jpに変える）
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">あとはビューポートやstyleなどを書いて基本形が↓になる
改行やインデントはない方がいいが、見えにくいので入れてる
<meta name="robots" content="noindex">はWEB表示用のHTMLにだけ書く、検索に表示させないようにするため
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta name="robots" content="noindex"> -->
<title>タイトル</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>styleの指定を行う、対応しているメーラーでレスポンシブさせるため
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
body {
width: 100% !important;
height: 100%;
}
@media screen and (max-width: 639px) {
.sp-table {
width: 95% !important;
margin: 0 auto;
}
.sp-res {
width: 100% !important;
}
}styleについて、メールは外部cssが使えず、styleタグに書いたものも使えないメーラーがあるので、基本的にインラインで行う。
それぞれの指定を追加していく
まずはbody
<body style="width:100% !important; background-color: #F2F2F2; font-family: ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, Osaka, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’,verdana, Arial, Helvetica, sans-serif; font-size:13px; margin:0; padding:0;">次に基本のtable要素を
それぞれパーツに分けてコーディングを行う。
<table class="sp-table" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="max-width:640px; margin: auto;">
<tr>
<td>
//ここに書いていく
</td>
</tr>
<tr>
<td>
//ここに書いていく
</td>
</tr>
<tr>
<td>
//ここに書いていく
</td>
</tr>
</table>そしてプリヘッダーの設定
プリヘッダーとはメールをプレビューするときに件名の後に続くテキストのこと、開いた際には表示させないので見えないようなスタイルを入れる。
<table class="sp-table" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:640px;">
<tr>
<td style="width:0; font-size:0;">
<span style="font-size:0; line-height:0; color:#F2F2F2;">プリヘッダー</span>
</td>
</tr>
</table>次にお客様名とうまく表示されないときにリンクさせる文字の設定
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="max-width:640px;">
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:12px;">配信ツールのお客様名コード 様</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;">
<a href="#" target="_blank" style="font-size:12px;">画像が表示されない場合はこちら</a>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
</table>こうなる↓
次に本文のコードを書いていく
marginとpaddingが効かないので横と縦はすべてtd要素の幅でとっていく
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px; background-color: #fff;">
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="15"></td>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td><a href="#" target="_blank">
<img src="https://placehold.jp/610x305.png" width="100%" height="auto" style="display: block;"
alt="">
</a></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:24px; font-weight: bold;">タイトル</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:16px;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;">
<a href="#" target="_blank">もっと読む</a>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;" alt="">
</td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="15"></td>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td width="49%">
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td><img src="https://placehold.jp/300x150.png" width="100%" height="auto"
style="display: block;" alt=""></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:24px; font-weight: bold;">タイトル</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:16px;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;">
<a href="#" target="_blank">もっと読む</a>
</td>
</tr>
</table>
</td>
<td width="2%"></td>
<td width="49%">
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td><img src="https://placehold.jp/300x150.png" width="100%" height="auto"
style="display: block;" alt=""></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:24px; font-weight: bold;">タイトル</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:16px;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;" style="font-size:13px;">
<a href="#" target="_blank">もっと読む</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;" alt="">
</td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>こうなる↓
次に本文ではない部分のコードを書いていく
(SNSやお問い合わせやコピーライトの部分)
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px; background-color: #F5F7FA;">
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="15"></td>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td></td>
<td width="40">
<a href="#" target="_blank">
<img src="https://placehold.jp/40x40.png" width="40" height="auto" style="display: block;"
alt="">
</a>
</td>
<td width="10"></td>
<td width="40">
<a href="#" target="_blank">
<img src="https://placehold.jp/40x40.png" width="40" height="auto" style="display: block;"
alt="">
</a>
</td>
<td width="10"></td>
<td width="40">
<a href="#" target="_blank">
<img src="https://placehold.jp/40x40.png" width="40" height="auto" style="display: block;"
alt="">
</a>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td><img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;"
alt=""></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr style="text-align: center;">
<td width="49%">
<a href="#" target="_blank" style="font-size:12px; text-decoration: none; color: #666;">お問い合わせ</a>
</td>
<td width="2%"></td>
<td width="49%">
<a href="#" target="_blank" style="font-size:12px; text-decoration: none; color: #666;">配信停止のお手続き</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td><img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;"
alt=""></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<p style="font-size:12px; color: #6c7378;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:12px; color: #6c7378;">会社名</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:11px; color: #6c7378;">コピーライト</p>
</td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>こうなる↓
コード全体でみると
2カラムや3カラムにする場合はtd要素の中にtable要素を作って分割していくのが良いと思う。みてわかるように構造が多くなりわかりにくいのでコメント文で分けたり自分なりのルールを作るしかない
コードの全体と画像↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta name="robots" content="noindex"> -->
<title>タイトル</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
body {
width: 100% !important;
height: 100%;
}
@media screen and (max-width: 639px) {
.sp-table {
width: 95% !important;
margin: 0 auto;
}
.sp-res {
width: 100% !important;
}
}
</style>
</head>
<body
style="width:100% !important; background-color: #F2F2F2; font-family: ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, Osaka, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’,verdana, Arial, Helvetica, sans-serif; font-size:13px; margin:0; padding:0;">
<table class="sp-table" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px; width:640px; margin: auto;">
<tr>
<td>
<table class="sp-table" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:640px;">
<tr>
<td style="width:0; font-size:0;"><span style="font-size:0; line-height:0; color:#F2F2F2;">プリヘッダー</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:12px;">配信ツールのお客様名コード 様</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;">
<a href="#" target="_blank" style="font-size:12px;">画像が表示されない場合はこちら</a>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px; background-color: #fff;">
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="15"></td>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td><a href="#" target="_blank">
<img src="https://placehold.jp/610x305.png" width="100%" height="auto" style="display: block;"
alt="">
</a></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:24px; font-weight: bold;">タイトル</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:16px;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;">
<a href="#" target="_blank">もっと読む</a>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;" alt="">
</td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="15"></td>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td width="49%">
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td><img src="https://placehold.jp/300x150.png" width="100%" height="auto"
style="display: block;" alt=""></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:24px; font-weight: bold;">タイトル</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:16px;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;">
<a href="#" target="_blank">もっと読む</a>
</td>
</tr>
</table>
</td>
<td width="2%"></td>
<td width="49%">
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td><img src="https://placehold.jp/300x150.png" width="100%" height="auto"
style="display: block;" alt=""></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:24px; font-weight: bold;">タイトル</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<p style="font-size:16px;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="text-align: right;" style="font-size:13px;">
<a href="#" target="_blank">もっと読む</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;" alt="">
</td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px; background-color: #F5F7FA;">
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="15"></td>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr>
<td></td>
<td width="40">
<a href="#" target="_blank">
<img src="https://placehold.jp/40x40.png" width="40" height="auto" style="display: block;"
alt="">
</a>
</td>
<td width="10"></td>
<td width="40">
<a href="#" target="_blank">
<img src="https://placehold.jp/40x40.png" width="40" height="auto" style="display: block;"
alt="">
</a>
</td>
<td width="10"></td>
<td width="40">
<a href="#" target="_blank">
<img src="https://placehold.jp/40x40.png" width="40" height="auto" style="display: block;"
alt="">
</a>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td><img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;"
alt=""></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table class="sp-res" border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
style="max-width:640px;">
<tr style="text-align: center;">
<td width="49%">
<a href="#" target="_blank" style="font-size:12px; text-decoration: none; color: #666;">お問い合わせ</a>
</td>
<td width="2%"></td>
<td width="49%">
<a href="#" target="_blank" style="font-size:12px; text-decoration: none; color: #666;">配信停止のお手続き</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td><img src="https://placehold.jp/610x1.png" width="100%" height="auto" style="display: block;"
alt=""></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<p style="font-size:12px; color: #6c7378;">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:12px; color: #6c7378;">会社名</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<p style="font-size:11px; color: #6c7378;">コピーライト</p>
</td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
最後に
基本的に文字で説明できた方がいいが、うまく表示されない場合が多いので画像を縦に並べるだけにして画像表示されない場合はリンクをさせた方が効率がよいと思います。
画像部分はすべてリンクさせても良いかもしれない。
全てにおいて環境が変わっていくので内容は変えていく必要があるが、基本的な構成方法はこれで良いと思う。
この記事が気に入ったらサポートをしてみませんか？