最近のHTMLメールのコーディング事情（2023年版）

2023年 9月13日　Posted　碓井(フロントエンドエンジニア)

昨今、SNSなどが台頭してくる中でもマーケティングや宣伝のために使用されるHTMLメール。HTMLメールはApple Mailなどが積極的にCSSサポートをしてきた反面、MicrosoftのWindowsのOutlookをはじめとした、一部メーラーでは積極的なCSSサポートが行われず、現在でも、「テーブルコーディング」というかなり古いコーディング手法が使用されています。

2009年には「Email Standards Project」という団体がMicrosoftに対して、HTMLレンダリングを改善するよう求めたTwitterデモなどを起こしたこともありました。

そして、時がたち十数年……、ようやく新しいOutlookでは、レンダリングエンジンがMicrosoftのWordから、Edgeに変更となります。

そもそもHTMLメールにおけるテーブルコーディングのデメリットとは

基本的にテーブルコーディングはtableの中にtableを入れる大量の入れ子となって存在しており、閲覧者側のメーラーのクラッシュリスクが増加する可能性があります。

またGmailにおいては、メールサイズの容量に上限が設定されており、102kbを超えた箇所から
「クリップしたメッセージ」というテキストと表示され、メールの残りの部分はリンクを押下することで表示されるようになります。

tableの大量の入れ子によって無駄なタグ記述が増えることにより、前述したような表示になることで購読率、コンバージョン率の低下リスクが高くなる可能性があります。

Outlookが新しくなることでできるようになること

etc……

通常のWebサイトと同等の制作が行えるか

Outlookの対応によって、CSSの使える幅が広がったことは間違いありませんが、残念ながら
一般的なWebサイト制作と同じような制作を行うのはまだまだ難しいといえます。

例えば、上記の使用可能プロパティで、flexが使えると書きましたが、Yahoo!メールにおいては
「display:flex」をサポートしていても「flex-wrap: wrap」や「flex-direction:column」、「justify-content」といった記述がサポートされていないため、flexの力を存分に発揮することができません。

また、疑似クラスでは「:first-child」や「:last-child」といった記述はYahoo!メールでは使用可能ですが、Gmailではサポートがされていません。このように、メーラーによって対応が難しいプロパティもまだまだ多く存在しています。

各メーラーの対応状況については「Can I Email」のサイトで詳しく調べることができます。

テーブルコーディングはもうしなくていい？

Outlookの対応によってテーブルコーディングにこだわる必要はなくなったといえます。ただし、昨今のHTMLタグはほとんどのメーラーでサポートされていないため、使用するHTMLタグについては注意が必要です。

サポートされていないHTMLタグ例

上記のタグについてはdivなどに置き換えて対応することが望ましいです。

CSSのインライン記述はもうしなくていい？

Outlookが新しくなることで、筆者はHTMLにインラインでスタイルを記述しなくてよくなると
考えていましたが、下記の理由からインラインでの対応はまだ必要になりそうです。

最後に

HTMLメールの制作環境はまだまだ各メーラーのCSSサポートは十分に至っていない状況ですが、
Outlookのレンダリングエンジンの変更によってテーブルコーディングにこだわる理由がなくなった点は、テーブルコーディングを知らない世代が増えてきている中で制作者にとっても大きなメリットといえるのではないでしょうか。

ぜひ、この機会にHTMLメールのコーディングについて見直してみてはいかがでしょうか。