HTMLメールの作成は制限も多く、ちょっとしたことでつまずきがちです。HTMLメールのデザインから構築までに役立ちそうな情報やツールなどをまとめました。
（ニタバル）
メールクライアントのシェア
こちらはLitmusが計測・公開しているメールクライアントのシェア（2021年2月時点）
シェアは地域や受信するユーザー層によっても変わってくると思います。弊社が利用している配信サービスでの解析では、Thunderbirdも10番目ぐらいに含まれていました。
メール作成において厄介なのは、デバイスやツールの組み合わせによってメール閲覧環境のパターンが非常に多くあることです。Gmailひとつとっても、iOSのGmailアプリで閲覧する場合、AndroidのGmailアプリで閲覧する場合、デスクトップの各種ブラウザで閲覧する場合など、様々な利用方法が想定されます。
さらに、HTML・CSSなどのサポート状況がメールクライアントごとに異なるため、HTMLメールはWebサイトと同じようには作成できません。制約が多いため、HTMLメールはtableタグによるレイアウトが原則です。
レイアウトパターン
できるだけ多くの閲覧環境に限られたコードで対応するために、HTMLメールの作り方にはいろいろなアプローチがあります。以下、代表的なものをまとめました。
スケーラブルデザイン
デスクトップでもスマホでも同じデザインで表示するレイアウト。デバイスごとの調整を必要としないので、技術的には一番簡単に実装できるレイアウトです。
多くのスマホでは縮小表示されるため、デザインする上ではスマホでも視認しやすいようにテキストやボタンのサイズを大きくします。全体的な横幅は広くしすぎないよう、550pxぐらいを目安にすることが多いようです。
レイアウトもシンプルにまとめる必要があり、1カラムでのレイアウトが基本です。そのため、デスクトップなど大きな画面ではやや見づらくなります。
フルードデザイン
Webサイトデザインでいうところのリキッドレイアウトに近いイメージです。横幅を可変にすることで、デスクトップでもモバイルでも基本的なレイアウトは変えずに表示します。
横に広くなりすぎないよう、max-widthで表示幅を制限しますが、max-widthに対応していないOutlookのために条件付きコメントなどでの対応が必要です。
複雑なレイアウトには向きませんが、シンプルで実装しやすいレイアウトです。
レスポンシブデザイン
メディアクエリを使用して、レイアウトを調整します。デスクトップでは複数カラムにして、スマホでは1カラムにする、といったコントロールがしやすくなります。
より高度なCSSの知識が必要になりますが、Webサイトなどの構築でメディアクエリに慣れていればそこまで難しくはないです。ただ、必ずしも全てのメールクライアントがメディアクエリに対応している訳ではないので、そういったクライアントでの表示も考慮しながら構築する必要があります。
ここまでに紹介したスケーラブル、フルード、レスポンシブデザインの詳細についてはこちらの記事が参考になります。
Scalable, Fluid or Responsive: Understanding Mobile Email Approaches
レスポンシブデザインの作成方法は以下のような記事が参考になります。
Creating Responsive Email Design: Email Coding and Optimization Techniques
HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
ハイブリッドデザイン
メディアクエリを使わずにデバイスに合わせた可変レイアウトを実装する手法です。フルードデザインとレスポンシブデザインの掛け合わせのようなレイアウトです。
メディアクエリを使用しないので、より幅広いメールクライアントに対応できるのが最大の利点。
繰り返しになりますが、必ずしも全てのメールクライアントがメディアクエリに対応している訳ではありません。Gmailですら2016年までメディアクエリに対応していませんでした（モバイル版ブラウザ版のGmailなど、今でもメディアクエリに対応していないケースもあります）。そういった背景もあって考え出されたレイアウトのようです。
レスポンシブデザインほど複雑にはできませんが、複数カラムの構成も作ることができます。コーディングに少しコツが要るので、CSSをしっかり理解していないと難しいかもしれません。
レスポンシブとハイブリッドの違いについては、こちらの記事がわかりやすいです。
Understanding Responsive and Hybrid Email Design
ハイブリッドデザインの作り方はこちらが具体的で参考になります。
Creating a Future-Proof Responsive Email Without Media Queries
多くのデバイスやクライアントに対応しようとすると、その分だけ制作コストがかかります。それぞれ作れるレイアウトも異なるので、メールの目的や制作時のスキルなどを考慮しながら判断する必要があります。また、1つの作り方にとらわれずに、それぞれの利点を組み合わせることもできます。
作成するにあたって
以下、基本的なことばかりですが、自分自身のおさらいも兼ねて作成時に気をつけている点など。
デザイン編
横幅は600px前後
前述の実装方法を考慮しながら、600px前後の横幅でデザインします。600pxという値は、メディアクエリやmax-widthなどに対応していない環境（Outlookなど）での表示を考慮した数値です。
スケーラブルで作成する場合は、縮小されることを想定してもっと狭く（550px前後）しておく必要があります。
画像の取り扱い
画像が多くなるとメールの容量も増えるので、デザイン時にバランスを考えながら作成するようにします。
また、解像度の高いデバイスでの表示を考慮して、表示が荒くなりやすい画像は大きめのサイズで書き出します。あまり大きくすると容量も重くなるので、実際に表示されるサイズの2倍ぐらいで十分でしょう。
容量を削減するために画像の圧縮もしておきます。
コーディング編
HTMLメール用のテンプレートを使う
HTMLメールの構築は意外と手間がかかるので、無料で配布されているテンプレートなどを活用すると時間の節約にもなります。
こちらは無料で利用できるテンプレートです（MIT License）
フルードデザイン、レスポンシブデザイン、ハイブリッドデザインの３パターンが揃っています。htmlファイル内には要所要所にどういう意図のコードなのか説明が入っているので、カスタマイズもしやすいです。
ただし、英語ベースのテンプレートなので、日本語のメールを作成する場合は、文字コードやフォントなどを日本語向けに変更して使用する必要があります。
メールクライアントごとの対応状況
CSSで表現したいデザインは、クライアントごとの対応状況を確認するようにします。以下のようなサイトが参考になります。
CSS Support Guide for Email Clients [+Checklist] (Campaign Monitor)
Email Client CSS Support (Mailchimp)
Gmailのサポート状況については公式のドキュメントもあります。
Gmail Sender Resources
Gmail Supported CSS Properties & Media Queries
文字コード
日本語のメールでは多くの場合、文字コードはiso-2022-jpを使用します。ただ、現在ではほとんどのメールクライアントがUTF-8に対応しているので、最近ではUTF-8を使うケースも増えているようです。
エディタ自体がiso-2022-jpに対応していない、といったケースもあるので、コーディングのしやすさも踏まえるとUTF-8を使ってもよいかもしれません。
画像ファイルは絶対パスで配置
コーディングする際は、画像ファイルは絶対パスで配置します。
HTMLメールはソースコードのみを送信するので、相対パスではメールクライアント上で表示されません。
関連サービスなど
ツール編
New Email Test
作成したメールをとりあえずテスト配信したい時に便利なツールです。テキストメールを含めたマルチパート形式で送信できます。
最初だけ配信先のメールアドレスにメールを送信してもいいか確認メールが届くので、メール内の「Yes, I’m happy to accept email drafts」をクリックして送信を許可します。
Litmus Scope
ブックマークレット形式の表示確認ツール。ブラウザ上のGmailでHTMLメールを開いた状態でこのブックマークレットを実行すると、メールのデザイン、ソース、テキストメールを確認できます。
最近はテキストメールへの表示切替ができないクライアントも多いので、テキストメールを表示できるのは助かります。
HTML to Text Email Converter
HTMLメールからテキスト部分を抜き出してくれるツール。ソースを貼り付けてコンバートボタンを押すだけです。
Litmus
様々なメールクライアントでの表示をシミュレーションで確認できるサービス。こちらは有料です。
作成したメールは実機で表示確認するのが最善ですが、そのための環境を揃えるのはなかなか大変です。予算に余裕があればこのようなサービスを活用したいところ。
ナレッジ編
Email Design Reference
Mailchimpによるメール作成のためのレファレンス。公開されてからけっこう経つので情報が古い部分もありますが、基礎を知るには今でも十分参考になります。
Litmus Blog
Litmusによるブログ。メールマーケティングの最新の動向をチェックしたい時などに。
