崩れないHTMLメールを作ろう

崩れない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内にコードを記述する際に必要な要素はこれくらいです。

See the Pen
gVvBOR
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

<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> で横一列の行をたくさん作っていきます。

See the Pen
MNQPYZ
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

ざっというとこの <tr> の中に各要素を入れていく認識です。

見出し画像を指定する&下に余白を持たせる作り方

ヘッダー部分を準備します。今回は画像のみなので <tr></tr> の中に画像を入れるという簡単なコーディングになります。

See the Pen
QeQZjB
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

<th> に横幅を指定と 背景・border・余白などを指定します。

画像がHTMLメールの枠横幅いっぱいになるように width: 100%; を指定します。

width =” 100%”style=” width:100%;” の両方記述する理由としては、styleを解釈してくれないメーラーがある&また、その逆もあるためです。

こうすることによって、 スマホで見た際にも横幅がそのデバイスにフィットするようになります。

次に画像の下に余白を取りたいと思います。
outlookだと margin を認識してくれないため、<td></td> に高さを設定して余白を見せます。今回は15pxの余白をとります。

See the Pen
aeqRdb
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

heightで余白を作る
このようなイメージになります。

見出しテキストを用意する&両サイドに余白を持たせる作り方

見出し画像が準備できたので、次は、その下に記述している見出しのテキストを準備したいと思います。(赤枠の部分になります。)

見出しのテキストをセンター寄せにする

先ほど書いた通り、outlook対策でmarginの指定ができないため、
テーブルを一つ作成し、余白を縦に指定をしてテキストをセンター寄せにします。

センター寄せのテーブルレイアウトのイメージ
このようなイメージをして貰えるとイイと思います。

コードにするとこのような感じになります。

See the Pen
ZgrqQP
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

レイアウトパターン1 テキストと画像を横並びにさせる

レイアウトパターン1のイメージ

今度は左に画像があり、右にテキストを入れるという 枠を作りたいと思います。
作り方は 前回と同じように <tr></tr> の中に <table></table> を記述します。

今回は背景をつけてみました。
<td></td>background-color:#ccc を記述して、さらに その配下に入れた <table><td> に別の背景を指定します。
ちなみに tableに背景などを指定しないかというと、 <table> で指定してもstyleが効かないものもあるため、極力近いところでstyleの指定をしています。

コードでは下記の様に作成します。

See the Pen
qexJZO
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

レイアウトパターン2 縦3列のレイアウトを作る

最後に 縦3列のレイアウトを作りたいと思います。

縦3列のレイアウトのイメージ

このような骨組みを作りたいと思います。

See the Pen
MNQPjx
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

縦3列のレイアウトに画像とテキストを入れたイメージ

あとはフッターテキストなんかを入れて、テンプレートが出来上がりです!

お!それっぽい!! いけるんじゃないか!
この頃、ビールのご褒美の事を忘れ、コードを書き上げた自分にテンションが上がってたと思います。

全体のコードサンプルはこちら

See the Pen
KOQGNr
by chiharu.tanaka (@gmom-chiharu-tanaka)
on CodePen.

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

fuundation-zurbのイメージ

mailchimpで実際に配信をして検証してみよう!

さて、このテンプレートができたのですが実際に配信してみないとわからないですよね。
どのように配信テストをすればいいか…と悩みました。

色々調べると Litmus がいいと記事をたくさん見ますが、いかんせん有料で1週間限定無料なので、無料でやりたいですよねぇ…

ということでオススメなのが
mailchimp
https://mailchimp.com/

mailchimpのイメージ

配信数や件数は制限されますが、テストで見るくらいならこれで十分です。※全文英語です。

ちなみにですが、テスト配信をする際は 配下の <table></table> をコピーをしてください。

code というのを選んで、コードを貼り付けることができます。
プレビュー機能もついているのでとても見やすいですね!

mailchimpで配信テストをしているイメージ1

さて、一旦保存をしてテスト配信をします
作ったメールの一覧から対象のメールタイトルをクリックすると
mailchimpで配信テストをしているイメージ2

このような画面になります。
そこから send test email で自分自身に配信ができます。

mailchimpで配信をテストしているイメージ3

さて実際に配信をしてみました。

Gmail PC(WEB)
配信テストのイメージ GmailのPC

Gmail SP(スマートフォン アプリ)
配信テストのイメージ Gmail SP

デフォルトメーラー at iOS
配信テストのイメージ デフォルトメーラー iOS

おお!そこそこいけますね!
こんな感じでいろんなメールアドレスに配信をしてみてチェックをしてみてください。

事前にクライアントにHTMLメールの状況を共有するのがオススメ

補足ですが、私のように友人から「サクッと作ってよ」と言われた場合
クライアントにある程度HTMLメールについて認識をしておいてもらう事をおすすめします。

① HTMLメールには決められたルール(標準的なHTMLメール)がない
② 受け取る環境が100万通りあるため、全ての環境で綺麗に表示されるHTMLのテンプレートは今の所ない&不可能
③ なので、見てもらうことが多いデバイス・ブラウザをターゲットにし、HTMLメールを作成する。

最後に…

スマホに特化したレスポンシブメールの作り方など他にもあるので、
続編が出来たらまた記事書こうかな…と思います。(望まれれば)

超長くなってしまった…でもこの記事を見て少しでも参考になってくれたら嬉しいです。
素敵なHTMLメールを作って配信をした人に見てもらえますように!
届け!この思い!

補足:ビールはいまだに奢ってもらってません。

GMOメディアでは仲間を募集しております

当社は、「For your Smile,with Internet.」という企業理念のもと、多くの笑顔と感動を生み出していくべく、インターネットメディア媒体を多ブランドでサービス展開しています。
募集内容について詳しくはコチラをご覧ください