みなさん、HTMLメールを作成したことはありますか？
テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。
華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょうか。

しかし、HTMLメールにはかなり制限が多く、実装には非常に手間がかかります。
そこで今回は、HTMLメールを作成するにあたって注意したい点を、実際にデザイン～コーディング、テスト送信まで行ってご説明していきたいと思います。

大前提！まずはこれを守ろう

制限の多いHTMLメールの中でも、特にコーディングの際に必須で対応すべきものを挙げました。
こちらを守っていれば、たいていのメーラーで致命的に崩れることはないと思います。

01HTML4.01で書く

メーラーによってHTML5に対応していないことがあります。
そのため、HTMLメールはHTML4.01かXHTML1.0で書くのが主流のようです。
今回デモ用に作成したHTMLメールではHTML4.01を使用しました。

02テーブルレイアウトで組む

CSSプロパティの対応状況はメーラーによってまちまちです。
そのため、どのメーラーで見ても崩れないようにするために、テーブルレイアウトで組むというのが基本です。

03rowspanやcolspanは使わない

メーラーによってはrowspanやcolspanを使用すると崩れる場合があります。
結合セルは使用せず、tableをどんどん入れ子にしていくことで思い通りのレイアウトを実現することになります。
tableの入れ子については、コーディング時に気を付けることで詳しくご説明します。

04CSSはインラインスタイルで

外部CSSやstyleタグを認識してくれないメーラーがあります。
どのメーラーで見てもCSSが当たるように、CSSはすべてインラインスタイルで設定します。

05画像を入れるときは絶対パスで

画像を読み込むときは、あらかじめサーバーにアップしたものをhttp://～、またはhttps://～から書いて呼び出します。

デザイン時に気を付けること

Webページと同じようなレベルでデザインを凝ろうとするのは無謀です。
せっかくだからかっこいいデザインにしたいところですが、あとから「こんなデザインのHTMLメールは作れなかった……」なんてことが起こる可能性大です！
デザイン作成の段階から、「このデザインは再現できるか」を調査しながら進めると良いでしょう。

基本設定

HTMLメールは、スマホや受信トレイの横幅が狭いメーラーに配慮されてか、基本的に横幅600px程度で作られているようです。
また、スマホで見たときに文字が小さすぎないように、本文のフォントサイズは15～18pxくらいが多いようです。
拡大しなくても見やすいHTMLメールにしましょう！

参考：知らないと損!?HTMLメールを作るときに知っておくべきデザインやサイズ、フォントについて

こんなデザインは難しい

それでは、具体的にデザイン時に気を付けるべきポイントをご紹介いたします。

はみ出し厳禁

このように見出しがコンテンツ幅から飛び出ていたり、画像にかぶっているなどのはみ出しデザインは、position: absolute; や ネガティブマージンが効かないメーラーがあるため、避けましょう。

疑似クラス・疑似要素が使えない

大前提でも挙げた通り、基本的にCSSはインラインスタイルで書くのですが、その場合:hover や ::before などの疑似クラス・疑似要素が使えません。
よってホバーアニメーションなどは実装できませんので注意しましょう。
矢印アイコンなどもabsoluteや疑似要素で指定せず、テキスト（「＞」など）で代用するのが良いでしょう。

画像に気を付ける

HTMLメールの大きな特徴の一つが「画像を使えること」だと思いますが、画像にも気を付けなくてはいけません。
メールがあまりに重いとスパム扱いを受けてしまうようですので、圧縮などをして画像をできるだけ軽くするといった工夫が必要です。

また、画像のキャッシュが強く（特にGmail）、画像差し替え後にテスト送信してみてもなかなか変わってくれません。画像を更新する際にはGETパラメータを付与する（例：○○○.jpg?20200131）かファイルをリネームすると良いです。

メーラーやブラウザでの違い

前項「こんなデザインは難しい」で、CSSの制限が多いと書きましたが、これはメーラーによって変わります。
思った通りに表示してくれるメーラーもあれば、他では問題なく表示されているのに崩れてしまうメーラーもあります。

メーラーにはたくさんの種類があります。
Gmail、Outlook、yahooメール、thunderbird、iPhoneのメール、Androidのメール、Macのメールetc…
その中でも、アプリ版／ブラウザ版Outlook、iPhoneアプリ／AndroidアプリのGmailなどなど、同じメーラーでもアプリとブラウザ、PCとSPで表示が変わってきます。
すべてのメーラーで綺麗に見られるのが一番ですが、数が多すぎて難しいので、利用者の多い主要なメーラーをピックアップして検証対象としておきましょう。

問題児Outlook

Outlookはシェア率が高く、使用している方も多いのではないでしょうか。
ですが、Outlookでは適用されないCSSが多く、検証時に困ってしまうことがあります。
以下にOutlookで適用されないものを挙げます。

• border-radiusは効かない。
• aタグ、divタグなどはmargin、paddingが効かない。
• 背景画像、グラデーションが使えない。

しかし、Outlookのためだけに上記すべてをデザインに使わないのはもったいないですよね。
そのため多少のデザインの違いは許容とするか、問題のある部分は画像にするという方針で対応するのがよさそうです。

実際にデザインしてみた

これまでの注意点をふまえて、実際にHTMLメールをデザインしてみました。

かなりシンプルなデザインですね。今回は横幅を600pxとしました。
Outlookではボタンのpaddingとborder-radiusが取れてbgだけになりますが、今回はそれで許容とします。
マーカーもOutlookではグラデーションが効かないので消えてしまいますが、致命的なものではないのでこちらも許容とします。

コーディングについては後ほど「実際にコーディングしてみた」で実践します！

コーディング時に気を付けること

最初に「大前提！まずはこれを守ろう」で上げた注意事項のほかに、気を付けるべき点を上げていきます。

tableにリセットCSS

tableにデフォルトでついているCSSを取って、コンテンツ幅を横いっぱいに広げるために、tableに以下のインラインスタイルを記述します。

全てのtableに指定しておくと安心です。

2カラム・3カラムレイアウト

通常のWebサイトのコーディングでは、inline-blockやfloat、flexを使って横並びにすると思いますが、それらのプロパティが効かないことがありますので、tableの中にtableを入れ子して横並びのレイアウトにします。

構造が複雑になり、この要素がどこのtableなのかわからない……とわかりづらくなってしまうので、要素ごとにコメントを残しておくとあとから編集しやすいかと思います！

メーラーやブラウザでの表示の違い

以前HTMLメールを作成したときに、Chrome版Gmailでは綺麗に見えているのに、Edge版Gmailでは余白が消えていた……なんてことがありました。
Edge版のGmailではpaddingが効かないようです。
ですので、Edge版Gmailで余白の表示がおかしいときは、paddingではなくmarginとwidthを設定して余白を作るといいです。

フリーのテンプレートを活用しよう

HTMLメールは、フリーのテンプレートが多く配布されています。
いろいろなレイアウトのテンプレートがありますので、目的に合ったテンプレートを見つけて画像やテキストを入れ込んでそのまま使ってもよいでしょうし、テンプレートをカスタマイズして使用するのも表示崩れが起きにくくおすすめです。

こちらの記事でさまざまなメールテンプレートが紹介されていますので、参考にご覧ください。
HTMLのメールテンプレート紹介

本記事では特におすすめのサイトを2つご紹介いたします。

Dyspatchの視覚的にレイアウトできる「Free Open Source HTML Email Templates」

Free Open Source HTML Email Templates
このサイトでは、なんとブラウザ上でドラッグアンドドロップするだけでHTMLメールを作ることができます。
画像やテキストもブラウザ上で書き換えることができますので、とてもお手軽です。
デザインも複数用意されているので、きっと目的に合ったものを見つけられると思います。
※作成したHTMLメールのエクスポートには会員登録が必要です。

2カラム、3カラムにも対応した「Antwort」

Antwort
Githubで配布されているテンプレートです。
最初からレスポンシブに対応しています。テンプレートをテスト送信してみて横幅を縮めていってみると、横スクロールバーが出るのではなく、文字が落ちていくのでとても見やすいですね（レスポンシブに対応していないメーラーもあります）。
また、2カラム・3カラムのテンプレートも配布されていますので、カスタマイズしていくと思い通りのデザインのHTMLメールを作成できると思います。

実際にコーディングしてみた

これまでの注意点をふまえ、「実際にデザインしてみた」のデザインを使用して、実際にHTMLメールをコーディングしてみました。
今回は前項で紹介した「Antwort」で配布されているテンプレートを元にコーディングしました（レスポンシブには対応していません）。

デモページ

HTMLをダウンロード

ソースを見てみると、何重にもなったtableの入れ子があったり、変な位置にmarginが指定してあったりします。
メーラーによって余白などの表示のされ方が異なる場合があるので、テスト送信を繰り返しながらうまくいく指定方法・場所を探っていった結果、最終的にこのような構造になりました。

テスト送信してみよう

それでは、作成したHTMLメールを実際に各デバイスにテスト送信して検証を行いましょう。
やり方については下の「テスト送信の仕方」をご覧ください。

今回は以下の5つを検証対象としました。

• ブラウザ版Gmail（windows10、Chrome、Firefox、Edge、IE）
• Outlook（2019）
• thunderbird（68.4.1、64ビット）
• アプリ版Gmail（iPhoneX・iOS12.4.1、Android8）
• Mac（標準メールアプリ）

今回はシンプルなデザインを心がけたからか、初回のテスト送信でもそれほどレイアウト崩れを起こしませんでした。
初回テスト送信時に問題があったメーラーは、OutlookとGmailの2つです。

Outlook

実際にデザインしてみたでも書きましたが、Outlookではaタグにはpaddingが効きません。やはりpaddingが取れて、ボタンが窮屈になってしまっています。
また、グラデーションも効かないので、見出しに引かれていたマーカーが消えています。
なくても問題ない部分は許容範囲とするか、その要素を丸ごと画像にしてしまいましょう。
この程度なら問題ないかなと思い、今回はこのままです。

テスト送信段階でも、やはりOutlookが一番思い通りになりませんでした。
marginを認識してくれず、画像とテキストの余白が潰れてくっついてしまいました。
2カラムになっている部分にmargin-bottomをつけようとしていたのですが、それだとどうしても余白がついてくれませんでしたので、その下の黒いバナーにmargin-topを指定しました。
たいてい、大枠のtableではなく要素を囲っている中身のtableにmarginを指定してあげると、上手くいくようです。

また、Outlookのために、上下の余白を改行タグで付けることもあるようです。どうしても上手くいかない……というときの最終手段として覚えておくと、いざというときに役立つかもしれません。

Gmail

今回はimgにほんの少し余白が付いていました。hspaceやvspaceを0に、親要素のline-heightやfont-sizeを0にすることで余白を消すことができました。

テスト送信の仕方

HTMLメールの送信方法はメーラーによって違います。
thunderbirdがテストしやすくておすすめですので、本記事ではthunderbirdでのHTMLメールのテスト送信の方法をご紹介します。

その他のメーラーについては以下の記事が参考になると思います。
HTMLメール送信の注意点は？各メーラーでのテスト方法を紹介

thunderbird

ツールバーの挿入からHTMLを選択すると、HTMLを挿入という小窓が表示されます。
その中に送信したいHTMLを貼り付けます。
送信前にプレビューもできますので、崩れを確認することもできます。

もしツールバー⇒挿入にHTMLが表示されていない場合には、メーラー上部のツールからアカウント設定を開きます。
編集とアドレス入力の「HTML形式でメッセージを編集する」にチェックを付けましょう。

GmailでもHTMLメールを送信できると思ったのですが、Gmailでできるのはその場でテキストの色を変更したり、画像を挿入したりすることだけのようです。
タグを貼り付けても文字列として表示されてしまいます。

プレビューサービスを利用してみる

HTMLメールを各メーラーでの見え方をプレビューできるサービスがいくつかあります。
いちいちブラウザやアプリを開いたり、複数のデバイスを用意する手間が省けるのでとても便利です。
有料サービスですが、もし複数のデバイスを用意するのが難しい場合などには、利用を検討してみるのも良いのではないでしょうか。

メールプレビューサービスを紹介する記事を2つ見つけましたので、参考にしてください。

「Litmus」を使って、送信前の表示確認テストを楽にしよう
MailChimpを使用してHTMLメールのテストを行う

最後に

以上、HTMLメールをデザイン・コーディングするときの注意点でした。

先日HTMLメールを作成した際に苦労したこともあり、覚書として記事にまとめてみました。
制限が多くコーディングが大変で、検証も面倒ですが、作っているうちにだんだん要領がつかめてくると思います。
これからHTMLメールを作ろうと思っている方に、少しでも役立てていただければ幸いです。