catch

HTMLメール作成の覚書

仕事でHTMLメールを作成する機会があったので、HTMLメールについて調べたことをまとめました。

HTMLメールとは

その名の通り、HTMLタグを使って作成されたメールです。テキストで作成されたメールと違って、テキストのサイズや色を変えたり、画像を配置させたりと、リッチな表現が可能となります。また解析タグも埋め込めるので開封率やトラッキングなどのデータ取得も可能です。
数年前までは海外のwebサービスのメールなどで目にすることが多かったですが、最近では国内のメールでもHTMLメールが使われるケースが増えてきました。

参考

HTMLメールの作成方法

メールを表示するメールクライアントの種類は多種多様であり、対応しているタグの種類もバラバラです。
Campaign MonitorやMail Chimpが主要なメールクライアントがサポートしているCSSを公開しています。

サイトを見てもらうと分かるように、利用できるタグはごく限られたもので、Webブラウザに比べて非常に少ないです。
Webサイトとはまた違った考え方で作成する必要がありそうです。
どのメールクライアントでも表示できることを優先にするのであれば、デザインや構成は無理をしないのが良いでしょう。

基本構成はテーブルレイアウト

上記のような理由もあり現在のところHTMLメールはテーブルレイアウトで組むのが一般的です。テーブルレイアウトはtableタグで構成を組み立てる古のレイアウト手法です。
またCSSは、外部CSS読み込みや<style>タグに対応していないメールクライアントが幾つかあるため、基本的にはインラインCSSで書きます。

文章型宣言

htmlはhtml4か(x)htmlで書きます。

XHTML 1.0 Transitonal

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		

HTML4.01 Transitional

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

文字コード

以前は日本語のテキストメールはiso-2022-jpが良いと言われてましたが、現在では殆どのメールクライアントがUTF-8に対応してます。

文字コードUTF-8

			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		

タイトル

titleタグの要素はメールの件名にはならないので空でも良さそうです。

画像

画像はサーバーにアップロードして絶対リンクで配置します。
非表示のケースに備えてaltもしっかり指定しておきます。
画像の表示に時間がかかると読んでもらえなくなる可能性があり、またメールの多くはスマホのような通信環境の良好でない環境で閲覧されることも考慮して、画像は極力軽く、多用しない方が良いでしょう。

フォント

書体はデバイスのデフォルト。文字サイズは16px、やや小さにするなら14px辺りにします。

レスポンシブ

webサイトと同じようにHTMLメールもデバイスに応じて最適化することができます。現在は殆どのモバイルのメールクライアントはメディアクエリに対応しています。なので、レスポンシブwebと同様にviewportの設定と、medeaqueryを使用したCSSの指定を組み合わせてデバイスの画面幅に応じたレイアウトを指定することが可能です。
メールの多くはスマホで閲覧されてますので、HTMLメールを作成するのであればレスポンシブは必須と言えるでしょう。

viewportの設定

レスポンシブwebデザインと同様に、viewportのcontent=“width=device-width”を指定しておきます。

			<meta name="viewport" content="width=device-width" />
		

サンプルHTMLソース

下記は非常にベーシックなHTMLメールです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
	img {
		max-width: 100%;
	}
	@media only screen and (max-width: 600px) {
	.wrapper {
		width: 100% !important;
	}
}
</style>
</head>
<body style="margin:0;">
	<table class="wrapper" width="600" cellpadding="0" cellspacing="0" align="center">
		<tr>
			<td class="container" style="background-color:#FFFFFF">
				<table width="100%" cellpadding="10" cellspacing="0">
					<tr>
						<td>
							<h1 style="font-size:20px;">Hello World</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
							<p><img src="http://placehold.it/600x300" /></p>
							<h1 style="font-size:20px;">Title Ipsum</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>
		

インラインCSS埋め込みサービス

実際にCSSをインラインで書くのは手間がかかります。
外部CSSやstyle部分に記載したcssをインラインに埋め込んでくれるサービスがあるのでそれらを利用すると良いでしょう。

テンプレートやフレームワーク

テンプレートやフレームワークを提供しているサイトもあります。それらは各種メールクライアントでの表示も考慮して作られています。作成のみならず検証時間も短縮できるので、それらを検証済であるのでそれらを利用するのも一つの手です。
(各テンプレートの使い方はドキュメントを参照してください)

Foundation for Emails | A Responsive Email Framework from ZURB

Foundation for Emails

Build a Free HTML email template in less than 60 seconds | Campaign Monitor

Campaign Monitor

検証

各種メールクライアントでの表示を確認するには、全ての環境を用意する必要もありますし、検証の時間もかかります。
Web上で各クライアントでのHTMLメールの表示を確認できるサービスがあるので活用すると良いでしょう。

Litmus

Litmusr

Email Testing and Rendering- Email on Acid

Email on Acid

デザイン参考サイト

webサイト同様にメールマガジンのデザインをまとめてくれているサイトがあります。

Add Comment

本文

コメントはまだありません。

PAGE TOP