Menu

CRMのプロが書くマーケティングBLOG

HTMLメールの作り方＜ベース編＞

神原愛

弊社ではSynergy!を使って、HTMLメールの配信代行を行っています。お客様および外部の制作会社様がお作りになられたHTMLメールを送ったら、特定のメーラーで表示が崩れるというご相談をよくいただきます。
HTMLメールはWebサイトと異なり、CSSが効かないメーラーや解釈が少し異なるメーラーが多く、一昔前のテーブルコーディングとなります。そのため、直すにはどうしたらいいのかネット上で調べても、HTMLメールの作り方って載ってないんですよね。頭を抱えることが度々ありました。
また、無料で配布されている海外のテンプレートは特定のメーラーを切り捨てていることが多いです。直すにもどこを直せばいいのかわからない。多くのコーダーやフロントエンドがぶつかった壁だと思います。

今回はわたしが普段どのようにHTMLメールを作っているか載せていきます。（これを載せるとわたしの仕事が減ってしまうかもしれませんが笑）
一度に全部は書けそうにないので、ベース編、基礎編、応用編という形で展開していく予定です。小出しですみませんがお付き合いくださいませ。

ベース編（2018年8月末検証時の情報です）

今回作るものは1カラムの縦積みにするシンプルなメールです。（2カラムは応用編で書けたら書きます）
普段はテンプレートを作成することが多く、お客様で運用しやすいシンプルなソースを書くよう心掛けています。
今はスマホ対応が求められるので、PC・スマホどちらで見ても見やすい最適化されたものを作りたいと思います。

headタグ内・bodyタグに記載するものを上から順に解説していきます。

ドキュメントタイプ・metaタグ・titleタグ

<!doctype html>
<html lang="ja">
<head>
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="copyright" content="(C) Synergy Marketing, Inc.">
<title>メールのタイトルが入ります。</title>

・ドキュメントタイプ

必ず入れてください。HTML5でもXHTMLでもHTML4でもなんでもいいです。入っていないとiPhoneのメールアプリで最適化されません。

・metaタグ　format-detection

スマホでマークアップしないように入れていますが、iPhoneのメールアプリで有効にならないOSがあるので、CSSを設定する必要があります。下部にある「 styleタグ 」を参照してください。

・metaタグ　viewport

レスポンシブさせるために必要です。

・metaタグ　copyright

Web上に表示されない方向けのページを置くなら入れることを推奨します。（省略も可）

・titleタグ

titleタグはHTML5以前は必須タグなので入れておきましょう。

styleタグ

<style type="text/css"><!--
body {
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  -webkit-font-smoothing: antialiased;
  word-break: break-all;
}
img { border: 0; line-height: 0; }
a { color: #333333; text-decoration: none; }
/* スマホ */
@media screen and (max-width: 480px) {
.space { display: none; }
}
/* PC */
@media screen and (min-width: 481px) {
.space { display: block; }
}
--></style>

さて、ここからCSSです。
headタグ内に書いたものがまったく効かないメーラーもありますので、最低限のものしか書きません。基本的にテーブルコーディングなのでCSSはほとんど使いません。CSSを多用すると表示崩れが起きやすくなります。Webサイトのコーディング方法を一旦忘れるぐらいで作って欲しいと思います。
タグに直接書くstyleについては、基礎編に書かせていただきます。

・styleタグ　body { }

margin: 0; padding: 0;　メールの周りに余白ができないようにするため指定してください。
font-family: （省略）;　デバイスフォントで良ければ指定しなくていいです。ただ、指定しておいた方がデバイスに入ってるフォントが適用されますので多少は綺麗です。
-webkit-font-smoothing: antialiased;　スマホでメールを見た時に文字が綺麗に見えるので指定しています。
word-break: break-all;　URLなど長い文字列を強制的に改行させるために指定しています。ただし、Yahoo!メール、Macメールでは効きません。

・styleタグ　img { }

border: 0; line-height: 0;　画像の周りに罫線や余白が入らないようにしています。

・styleタグ　a { }

color: #333333; text-decoration: none;　「 metaタグ　format-detection 」に記載したとおり、スマホでマークアップされた箇所が目立たないように、本文と同じ色、下線がつかないように指定しています。colorは適宜変更してください。

・styleタグ　.space { }

余白の調整用にclassを設けています。PC用の余白では高さがありすぎて、スマホで見た時にスクロールが増えてしまうので、高さを縮められるようにスマホでは　.space { display: none; }、PCでは　.space { display: block; }　を指定しています。
実際どのように使っているのかは基礎編に記載いたします。

bodyタグ

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f3f3f3" style="background:#f3f3f3;font-family: 'ヒラギノ角ゴ Pro W3', Hiragino Kaku Gothic Pro, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', MS PGothic, sans-serif;">
<div style="background:#f3f3f3;">
<!-- ここにHTML本文が入ります。 -->
</div>
</body>
</html>

bodyタグとdivタグについてですが、今回はコンテンツ全体に背景色がつけられる状態にしています。背景色を指定しない場合は、divタグは不要です。

・headの閉じタグ

bodyタグを書く前に、headタグの閉じタグを忘れないようにしてください。

・bodyタグ

leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″　styleタグ内のCSSが効かないメーラー用に余白が入らないように指定しています。Outlook2010・2013では効きません。
bgcolor=”#f3f3f3″　CSSが効かないメーラー用に背景色を指定しています。ただし、GmailとYahoo!メールは効きません。
background:#f3f3f3;　bgcolorが効かないメーラー用にstyleで背景色を指定しています。
font-family:（略）;　styleタグ内のCSSが効かないメーラー用に指定しています。どちらも指定した方が確実なので二重になりますが両方指定しておいてください。デバイスフォントで良ければ指定しなくていいです。

・divタグ

bodyタグに指定した背景色は、どちらもYahoo!メールでは効きません。そのため、divタグにstyleで背景色を指定しています。

・htmlの閉じタグ

最後にhtmlタグの閉じタグを忘れないようにしてください。

ベース編は以上となりますが、Yahoo!メール・Yahoo!メールアプリでの表示について、少しだけ補足です！
背景色ですが、2018年3月の段階ではstyleタグ内のbodyに background:#f3f3f3; を指定したら、Yahoo!メールでも背景色はついていましたが、今回記事を書くにあたって再度検証してみたら背景色がつかなくなっていました。この期間にYahoo!メールの仕様が変わってしまったようです。divタグに背景色を指定することで解決はしましたが、他のメーラーでの表示を確認してもあまり良い解決方法とは思えません。
また、CSSのmedia screenでの幅指定はYahoo!メールアプリでは効きません。後に記述されたものが上書きされ有効になりますのでご留意ください。

メーラーの仕様は日々変わるものですので、シンプルなデザインで制作することを意識し、あまり複雑なことはしないように心がけています。

なお、弊社の検証メーラーは下記のとおりです。

PC：Outlook2010、Outlook2013、Thunderbird、Mac Mail
ブラウザ：Gmail、Yahoo!メール
iPhone：メールアプリ
Android：Gmailアプリ

他のメーラーはオプション対応としています。Outlook2016、Outlook.com、Yahoo!メールアプリは個人的にこっそりチェックしていたり。Androidのデフォルトメーラーはキャリアによって表示がまちまちなため、対象外としています。スマホ向けHTMLメールにつきましては下記の記事も参考にしてください。

「送れる＝表示される」ではない！スマートフォン向けHTMLメール配信の落とし穴

関連情報

※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。

PageTop
PageTop