崩れないHTMLメールを作ろう
はじめまして。サービスデザイン部のたなかです。
今だに仕事後のビールは最高のご褒美だと信じている中堅あたりのデザイナーです。
現在は ゲソてん などゲームプラットフォームを中心にデザイン業務をしております。
以前、友人(HTMLの知識ゼロ)に「ビール1杯おごるから、 HTMLメール配信用のテンプレート作ってよ」と言われました。
「正直、HTMLメールなんて簡単だろう。」
「このご時世 技術もデバイスも進化しているから、普段のコーディングでできるだろう。」なんて思ってナメてかかりました。
ところがどっこい、HTMLメールは…ビール1杯じゃ足りないほどの頭を悩ますモンスターだったのです。
今回は同じような悩みにぶつかった方にも参考にしてもらえるように、私がやった手順をまとめました。
それでは、しばらくの間お付き合い頂ければ幸いです。
標準的なHTMLメールとは
まず最初に、「標準的なHTMLメールとはなにか」を調べました。
色々調べたのですが、ブラウザやアプリ共通の標準的なHTMLメールというものが無く、Outlook（マイクロソフト）は「Microsoft Word」で作成を推奨をしています。
ただ、これは「Outlook」だけなので、Gmailなどは残念ですが正しく機能しない・見られないなどが起こる可能性があります。
個々にフリーダムで作っている様ですね。
HTMLメール の基本ルールをまとめてみた
ないなら作るしかないという事で、Tipsををまとめてみました。
結論を申し上げますとこの通りになります。
その1 : 基本テーブルコーディングで作成する
その2 : レイアウトの構成に関しては基本 table の入れ子にする
その3 : CSSはインラインで記述をする
その4 : 画像の拡張子は gifやjpg (pngはダメ)を使用する
その5 : 容量が大きい(画像容量が重い)場合はGmailがスパム判定をしてしまうので容量には気をつけるここまでは 昔からある内容ですね。
さてその先は スマートフォンが普及してからの注意事項になります。
その6 : viewportに initial-scale=1 を入れない。 Androidでの表示が崩れてしまうため。
その7 : bodyに size-adjust を指定。 none ではなく 100% を指定する。以上でも正直 ビール1杯じゃ済まなくなってきたと、若干後悔をしはじめた頃です。
このTipsを元にコーディングをして行きたいと思います。
まずはHTMLメールを配信するための骨組みを作って行こうと思います。
HTMLメールのテンプレートを作ろう
今回はこのようなレイアウトのHTMLメールを作成していきたいと思います。
HTMLメールの要素について
DOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0を指定されていらっしゃる所もありますが、 HTML 4.01 で問題ないと思います。
meta タグについて
meta タグに必要な情報を記入します。特に気をつけないといけないのが文字コードになります。
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">iso-2022-jp はメーラーで使われている文字コードです。
なので、メール配信する直前に指定しておいて、お好みの文字コードで作業し、メール配信の直前に iso-2022-jp に変更しましょう。そちらのほうが作業しやすいです。
私の場合は普段 UTF-8を使用しているので、下記のようにコメントアウトで残しておいて作業をしています。
<!-- 配信前に コメントアウトを外す
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />HTMLメールのbody内を記述する
さて、body内にコードを記述する際に必要な要素はこれくらいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="ja" />
<!-- htmlメール用
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" width=device-width" />
<title>サンプルサンプル</title>
</head>
<body style="-webkit-text-size-adjust:100%">
<!-- htmlメール本体ここから -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; border:none; margin:0 auto; max-width: 600px;">
</table>
<!-- htmlメール本体ここから -->
</body>
</html><table> 要素に 余白など指定を入れないように、骨組みだけ準備したいという気持ちを込めて全てを無にする以下のようなおまじないを指定します。
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; border:none; margin:0 auto; max-width: 600px;">また、htmlメールの最大幅は 600pxというのが通説の様で、最大幅をあらかじめ指定しておくといいと思います。
そのため、max-width: 600px; を指定しています。
それ以外に関してはどの媒体でも同じ様に見られる様に 横幅は%で指定しています。
今度は要素を入れるテーブルを準備します。
先ほど作ったテーブルの中にテーブルを入れる考え方は変わりません。
まずは <tr></tr> で横一列の行をたくさん作っていきます。
<!-- htmlメール本体ここから -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; border:none; margin:0 auto; max-width: 600px;">
<tr></tr>
<tr></tr>
<tr></tr>
</table>
<!-- htmlメール本体ここから -->ざっというとこの <tr> の中に各要素を入れていく認識です。
見出し画像を指定する＆下に余白を持たせる作り方
ヘッダー部分を準備します。今回は画像のみなので <tr></tr> の中に画像を入れるという簡単なコーディングになります。
<tr>
<th width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; background:#fff; border:none; margin:0;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/head.jpg" alt="見出し画像" style="width: 100%">
</th>
</tr><th> に横幅を指定と 背景・border・余白などを指定します。
画像がHTMLメールの枠横幅いっぱいになるように width: 100%; を指定します。
width =” 100%” と style=” width:100%;” の両方記述する理由としては、styleを解釈してくれないメーラーがある＆また、その逆もあるためです。
こうすることによって、 スマホで見た際にも横幅がそのデバイスにフィットするようになります。
次に画像の下に余白を取りたいと思います。
outlookだと margin を認識してくれないため、<td></td> に高さを設定して余白を見せます。今回は15pxの余白をとります。
<tr>
<td width="100%" height="15" border="0" cellpadding="0" cellspacing="0" style="width:100%; height:15px; border:none; margin:0;"><!-- 余白 --></td>
</tr>
このようなイメージになります。
見出しテキストを用意する＆両サイドに余白を持たせる作り方
見出し画像が準備できたので、次は、その下に記述している見出しのテキストを準備したいと思います。(赤枠の部分になります。)
先ほど書いた通り、outlook対策でmarginの指定ができないため、
テーブルを一つ作成し、余白を縦に指定をしてテキストをセンター寄せにします。
このようなイメージをして貰えるとイイと思います。
コードにするとこのような感じになります。
<tr>
<table>
<td width="10%" border="0" cellpadding="0" cellspacing="0" height="auto" style="width:10%; background:#fff; border:none; margin:0;">
</td>
<td width="80%" border="0" cellpadding="0" cellspacing="0" style="width:80%; background:#fff; border:none; margin:0; text-align: center;">
<!-- 見出しテキスト -->
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
</td>
<td width="10%" border="0" cellpadding="0" cellspacing="0" style="width:10%; background:#fff; border:none; margin:0;">
</td>
</table>
</tr>レイアウトパターン１ テキストと画像を横並びにさせる
今度は左に画像があり、右にテキストを入れるという 枠を作りたいと思います。
作り方は 前回と同じように <tr></tr> の中に <table></table> を記述します。
今回は背景をつけてみました。 <td></td> に background-color:#ccc を記述して、さらに その配下に入れた <table>の <td> に別の背景を指定します。
ちなみに tableに背景などを指定しないかというと、 <table> で指定してもstyleが効かないものもあるため、極力近いところでstyleの指定をしています。
コードでは下記の様に作成します。
<tr>
<td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#ccc;border:none;margin:0;">
<table>
<tr>
<td width="50%" bgcolor="#fafafa" border="0" cellpadding="0" cellspacing="0" style="width:50%;background:#fafafa;border:none;margin:0;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像右" width="100%" height="*" style="width:100%;">
</td>
<td width="50%" bgcolor="#fafafa" border="0" cellpadding="0" cellspacing="0" style="width:50%;background:#fafafa;border:none;margin:0;font-size: 14px;">
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
</td>
</tr>
</table>
</td>
</tr>レイアウトパターン2 縦3列のレイアウトを作る
最後に 縦3列のレイアウトを作りたいと思います。
このような骨組みを作りたいと思います。
<tr>
<td width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#fff;border:none;margin:0;">
<table>
<tr>
<td width="4%" border="0" cellpadding="0" cellspacing="0" height="auto" style="width:4%; background:#fff; border:none; margin:0;">
</td>
<td width="28%" border="0" cellpadding="0" cellspacing="0" style="width:24%; background:#fff; border:none; margin:0; text-align: center;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像" width="100%" height="*" style="width:100%;">
<!-- 見出しテキスト -->
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</td>
<td width="4%" border="0" cellpadding="0" cellspacing="0" style="width:4%; background:#fff; border:none; margin:0;">
</td>
<td width="28%" border="0" cellpadding="0" cellspacing="0" style="width:24%; background:#fff; border:none; margin:0; text-align: center;">
<!-- 見出しテキスト -->
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像" width="100%" height="*" style="width:100%;">
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</td>
<td width="4%" border="0" cellpadding="0" cellspacing="0" style="width:4%; background:#fff; border:none; margin:0;">
</td>
<td width="28%" border="0" cellpadding="0" cellspacing="0" style="width:24%; background:#fff; border:none; margin:0; text-align: center;">
<!-- 見出しテキスト -->
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像" width="100%" height="*" style="width:100%;">
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</td>
<td width="4%" border="0" cellpadding="0" cellspacing="0" style="width:4%; background:#fff; border:none; margin:0;">
</td>
</tr>
</table>
</td>
</tr>
あとはフッターテキストなんかを入れて、テンプレートが出来上がりです！
お！それっぽい！！ いけるんじゃないか！
この頃、ビールのご褒美の事を忘れ、コードを書き上げた自分にテンションが上がってたと思います。
全体のコードサンプルはこちら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="ja" />
<!-- htmlメール用
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" width=device-width" />
<title>サンプルサンプル</title>
</head>
<body style="-webkit-text-size-adjust:100%">
<!-- htmlメール本体ここから -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; border:none; margin:0 auto; max-width: 600px;">
<tbody>
<tr>
<td width="100%" height="15" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:15px;border:none;margin:0;"><!-- 余白 --></td>
</tr>
<tr>
<td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" style="width:100%;border:none;margin:0;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/head.jpg
" alt="ヘッダー画像" width="100%" height="*" style="width:100%;">
</td>
</tr>
<tr>
<td width="100%" height="15" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:15px;border:none;margin:0;"><!-- 余白 --></td>
</tr>
<tr>
<td width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#ccc;border:none;margin:0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; border:none; margin:0 auto; max-width: 600px;">
<td width="10%" border="0" cellpadding="0" cellspacing="0" height="auto" style="width:10%; background:#fff; border:none; margin:0;">
</td>
<td width="80%" border="0" cellpadding="0" cellspacing="0" style="width:80%; background:#fff; border:none; margin:0; text-align: center; line-height: 160%; font-size: 14px;">
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
</td>
<td width="10%" border="0" cellpadding="0" cellspacing="0" style="width:10%; background:#fff; border:none; margin:0;">
</td>
</table>
</td>
</tr>
<tr>
<td width="100%" height="30" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:30px;border:none;margin:0;"><!-- 余白 --></td>
</tr>
<tr>
<td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#ccc;border:none;margin:0;">
<table>
<tr>
<td width="50%" bgcolor="#fafafa" border="0" cellpadding="0" cellspacing="0" style="width:50%;background:#fafafa;border:none;margin:0;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像左" width="100%" height="*" style="width:100%;">
</td>
<td width="50%" bgcolor="#fafafa" border="0" cellpadding="0" cellspacing="0" style="width:50%;background:#fafafa;border:none;margin:0;font-size: 14px;">
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" height="30" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:30px;border:none;margin:0;"><!-- 余白 --></td>
</tr>
<tr>
<td width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#fff;border:none;margin:0;">
<table>
<tr>
<td width="4%" border="0" cellpadding="0" cellspacing="0" height="auto" style="width:4%; background:#fff; border:none; margin:0;">
</td>
<td width="28%" border="0" cellpadding="0" cellspacing="0" style="width:24%; background:#fff; border:none; margin:0; text-align: center;">
<a href="#" style="text-decoration: none; color: #333;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像" width="100%" height="*" style="width:100%;">
<!-- 見出しテキスト -->
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</a>
</td>
<td width="4%" border="0" cellpadding="0" cellspacing="0" style="width:4%; background:#fff; border:none; margin:0;">
</td>
<td width="28%" border="0" cellpadding="0" cellspacing="0" style="width:24%; background:#fff; border:none; margin:0; text-align: center;">
<a href="#" style="text-decoration: none; color: #333;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像" width="100%" height="*" style="width:100%;">
<!-- 見出しテキスト -->
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</a>
</td>
<td width="4%" border="0" cellpadding="0" cellspacing="0" style="width:4%; background:#fff; border:none; margin:0;">
</td>
<td width="28%" border="0" cellpadding="0" cellspacing="0" style="width:24%; background:#fff; border:none; margin:0; text-align: center;">
<a href="#" style="text-decoration: none; color: #333;">
<img src="https://blog.gmo.media/wp-content/uploads/2019/08/caption.jpg" alt="画像" width="100%" height="*" style="width:100%;">
<!-- 見出しテキスト -->
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</a>
</td>
<td width="4%" border="0" cellpadding="0" cellspacing="0" style="width:4%; background:#fff; border:none; margin:0;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" height="30" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:30px;border:none;margin:0;"><!-- 余白 --></td>
</tr>
<tr>
<td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#ccc;border:none;margin:0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%; border:none; margin:0 auto; max-width: 600px;">
<td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" height="50" style="width:100%; height: 50px; background:#ccc; border:none; margin:0; text-align: center; line-height: 160%; font-size: 14px;">
フッターテキスト
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!-- htmlメール本体ここまで -->
</body>
</html>HTMLメールを作る上でのお役立ちサイト
HTMLメールで可能なstyleが知りたい時
ここまでテンプレートを作りましたが、きっといろんな styleを当てたいという思いも出てくると思います。 そこでおすすめなのが
Campaign Monitor
https://www.campaignmonitor.com/css/
何のstyleが可能か、どのブラウザ・OSが対応しているかなどを一覧化してくれています。
ただ、余りにも情報量が多いため検索するのも一苦労です。
インラインでstyleを記述するのが面倒なら これ！
インラインでちまちまstyleを書いていくのが面倒な方はこちら html と styleをインライン化してくれます。
Foundation for Emails | Responsive Email CSS Inliner
https://foundation.zurb.com/emails/inliner-v2.html
mailchimpで実際に配信をして検証してみよう！
さて、このテンプレートができたのですが実際に配信してみないとわからないですよね。
どのように配信テストをすればいいか...と悩みました。
色々調べると Litmus がいいと記事をたくさん見ますが、いかんせん有料で1週間限定無料なので、無料でやりたいですよねぇ...
ということでオススメなのが
mailchimp
https://mailchimp.com/
配信数や件数は制限されますが、テストで見るくらいならこれで十分です。※全文英語です。
ちなみにですが、テスト配信をする際は 配下の <table></table> をコピーをしてください。 code というのを選んで、コードを貼り付けることができます。
プレビュー機能もついているのでとても見やすいですね！
さて、一旦保存をしてテスト配信をします
作ったメールの一覧から対象のメールタイトルをクリックすると
このような画面になります。
そこから send test email で自分自身に配信ができます。
さて実際に配信をしてみました。
Gmail PC（WEB）
Gmail SP（スマートフォン アプリ）
デフォルトメーラー at iOS
おお！そこそこいけますね！
こんな感じでいろんなメールアドレスに配信をしてみてチェックをしてみてください。
事前にクライアントにHTMLメールの状況を共有するのがオススメ
補足ですが、私のように友人から「サクッと作ってよ」と言われた場合
クライアントにある程度HTMLメールについて認識をしておいてもらう事をおすすめします。
① HTMLメールには決められたルール(標準的なHTMLメール)がない
② 受け取る環境が100万通りあるため、全ての環境で綺麗に表示されるHTMLのテンプレートは今の所ない＆不可能
③ なので、見てもらうことが多いデバイス・ブラウザをターゲットにし、HTMLメールを作成する。最後に...
スマホに特化したレスポンシブメールの作り方など他にもあるので、
続編が出来たらまた記事書こうかな...と思います。(望まれれば)
超長くなってしまった...でもこの記事を見て少しでも参考になってくれたら嬉しいです。
素敵なHTMLメールを作って配信をした人に見てもらえますように！
届け！この思い！
補足：ビールはいまだに奢ってもらってません。
