その他メモ

【ポイントまとめ】HTMLメール作成について

HTMLメール作成にあたってのまとめ記事です。

HTMLメールは、通常のWebサイトのようにコーディングが出来るわけではなく、
さまざまな制限の中作成する必要があります。
今回は、レイアウト崩れをなるべくおこさない、HTMLメール作成のポイントをまとめていきます。

HTMLメール作成のポイント

meta関連

  • HTML 4.01を使用する。
  • 文字コードはメーラーで使用されている「iso-2022-jp」を使用する。
  • CSSは<style>タグ内またはインラインで記述する。
  • viewportに「initial-scale=1」を基本入れない。(Androidでバグの可能性あり)
  • body要素に「-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;」を指定しておく。
  • colorの指定の際、#fffなど省略記法を使用しない。#ffffffと6桁で書く。(outlookでバグの可能性あり)

レイアウト関連

  • 基本的にtableタグでレイアウトを組む。
  • レイアウトの構成に関してもtableを入れ子にする。
  • paddingやmarginは使用しない。(outlookでバグの可能性あり)
  • paddingを使用する場合は上下のみにしておく。
  • 左右の余白はtdにwidthを指定する。
  • 上下の余白もtdにheight指定で作る。
  • rowspan、colspanは使わない。
  • 全体のサイズは基本600pxで作る。

画像

  • 画像の拡張子はgifまたはjpgを使用する(pngはサイズが重くなる場合、基本NG)
  • pngが使えないわけではない。
  • 画像のパス指定は絶対パスで指定する。
  • 画像にはサイズを記載する。
  • 画像の圧縮は必須。
  • 画像容量が重い場合、スパム判定になる。
  • 画像の繰り返し使用はNG(スペーサー等)。(gmailで2回目以降表示されない可能性あり)
  • 背景画像は使用しない。
  • 画像にheight=”*”は使用しない。 (IE/Edgeのoutlookで画像が表示されない可能性あり)
  • メーラーはキャッシュが根強いので配信後の修正は画像にバージョン付与かファイル名を変える。

meta関連について

DOCTYPE宣言

HTML 4.01を使用する。テーブルレイアウトが許容されるバージョンにするため。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

metaタグ

メーラーで使用されている文字コード「iso-2022-jp」を使用する。
開発時は「UTF-8」でレイアウトを確認しつつ、最後に変換するといいかも。

「Content-Type」タグは、テキストと特殊文字の処理方法をレンダリングエンジンに伝えるために必要。

表示用HTMLと配信用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="robots" content="noindex">
<!-- /表示用 -->

titleタグ

titleタグは空白に。
※Android 4のメーラーで件名にtitleタグが入るバグがでる可能性あり

<title></title>

レスポンシブ対応

レスポンシブに対応したい箇所に「.resp-td」「.resp-img」のようなクラスを入れておく。インラインcssを打ち消すため、「important」の指定も必要。

@media only screen and (max-width: 600px) {
	table {
		width:100% !important;
		min-width:100%;
	}
	.resp-td {
		width:100% !important; 
		display: block !important;
		box-sizing: border-box !important;
	}
	.resp-img {
		width:100% !important; 
		height:auto !important;
	}
}

mediaクエリに対応していないメーラーもあるので注意が必要です。

以下のサイトでCSSの対応状況を確認できます。

https://www.campaignmonitor.com/css/media-queries/media/

ダークモード対応

mac、iPhoneのダークモード設定時

以下のメディアクエリでCSSを設定可能。

@media (prefers-color-scheme: dark) {}

iPhone gmailアプリ

「prefers-color-scheme: dark」は適用されない。
白背景は黒に、黒は白に強制的に反転される。

背景に「#000000」を指定する場合は要注意

フッターなどで濃い背景色を使う時は要注意です。「#000000」を使うとダークモードで反転した時、「#ffffff」の真っ白になってしまいます。

SNSアイコンなど真っ白な画像がある場合、全く見えなくなります。
そのため、「#222222」など少しでも薄めに背景色を設定することをお勧めします。

アニメーションさせたいときは

gifアニメーションで作成が良さそう。(Uber EatsのHTMLメール等利用されてる)
メーラーに依存せず作成できる。

メーラーごとの注意点

Gmail

  • position:absoluteとネガティブマージンが使えない。
  • line-heightを指定しても行間がつまることがある。
  • アプリ版のダークモードは制御できない。
  • styleタグは使用できるようになった。(mediaクエリも使える。)

outlook

outlook用にリセットCSSをかける場合は以下を使用する。
HTMLメール用のリセットCSSは以下から。
HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css

    <!--[if (gte mso 9)|(IE)]>
        <link href="outlook.css" rel="stylesheet">
    <![endif]-->

IE11で見た時、colorを#fffとかで省略していると反映されない。

windows 10標準メーラー

img要素にはstyleだけでなく「width=”100%”」などをかけないと反映されない。

<img class="w100" width="100%" src="" alt="">
  • paddingが効かない
  • text-decorationが効かない

paddingが効かない

a、p、divタグで検証したが、paddingは効かない。marginはblock要素であれば適用できる。

displayが効かない

aタグに「display;block;」等かけても効かない。ボタンは画像で作成するのが良いかも。

border-radiusが効かない

極力border-radiusを使用するデザインは避けたほうが良い。
「outlook」や「windows 10 mail」が適用外。
https://www.campaignmonitor.com/css/box-model/border-radius/

ボタン等丸みのあるデザインにしたい場合、画像を使用する。
jpg画像だとgmailアプリのダークモードで背景色が反転して角がわかってしまうため、極力避けたいが圧縮したpngを使用する。

mediaクエリはが効かない

mediaクエリは効きません。

表示確認&検証

Gulpでメール送信用タスクを組むか以下の無料ツールを使用する。

PutsMail

https://putsmail.com/

gulpでHTMLメール作成環境を構築

以下を参考にする。

CSSの自動インラインとメールを送れるHTMLメールの作成ツールをgulpで作った
HTMLメール作成で調べたことまとめ
gulpタスクに.envで定義した環境変数を渡すならgulp-envでなくnode-env-fileを使う
Gulpでコマンド実行時に引数を与えて処理を分岐させる方法

お役立ちサービス&ツール

各メーラーのCSS対応状況確認

The Ultimate Guide to CSS

仮画像配置

https://picsum.photos/

HTMLメール用のリセットCSS

HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css

参考サイト

デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識
HTMLメールはどうやって作成するの?基本と特徴を徹底解説!【保存版】
くずれないないHTMLメール
HTMLメール作成で調べたことまとめ
HTMLメール作成のコツ・注意点
CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点

プログラミング言語の人気オンラインコース