Web制作にはないHTMLメール特有の制約について

はじめに

HTMLメールは、Webサイト制作には無い制約が多く、
知見がないままコーディングに臨むと苦労します。

それらの制約がゆえに、
派手なデザインをCSSで再現することは、ほぼ不可能です。
PC/SPで異なるデザインも、HTMLメールにおいてはおすすめできません。

どのメーラー、デバイスでも崩れない見た目を優先したいのであれば、
配信先ごとに内容を出し分けることがない、静的コンテンツの場合は
画像をtable,tr,tdを使って1カラムで積み上げる実装が安全な場合が多いです。

とはいえ、もちろんHTMLとCSSでコーディングが必要な場面もあります。
HTMLメールの基本やtableレイアウトコーディングについては
既に他の個人、企業による解説記事があるため、
この記事では、Web制作にはないHTMLメール特有の制約について焦点を絞って一部紹介してみます。

筆者について

フロントエンドエンジニアとしてWeb制作に携わる中で
2年半ほどHTMLメールの案件を継続して担当したことがあり、
その経験を他の単発のHTMLメール案件や社内のナレッジシェアに活かしてます。
今回は社内でナレッジシェアした内容から一部抜粋して記事にまとめました。

参考・出典

HTMLメール(tableレイアウト)で使えるCSSプロパティのチェックができる
超重要&便利な必須サイト。
OS, メーラーごとに対応有無を確認できます

• campaignmonitor.com
• caniemail.com

メディアクエリ(media)

なんとメディアクエリが使えないため、レスポンシブ対応が難しいです。
正確には部分的に効いたり、条件付きで効いたり、と
注釈付きの項目となってます。
PC/SPで異なるレイアウトのデザインを避けて、
1カラムで構成いただくよう関係者間で最初に認識合わせするのが重要です。

使用できないメーラー、OS

• Gmail
  • iOS
  • Android
• Outlook
  • iOS
  • Android
• Yahoo!メール
  • iOS
  • Android

flex

かなりガッカリですが、flexboxが使えません。
横並びにしたい場合も、中央寄せしたい場合もflexが使えないため、
面倒ですが、tableレイアウトでtr内に複数のtdを並べて横並べを実装します。

このとき注意点としては、tr内のtdの個数が異なる場合です。
colspanやrowspanを使うと煩雑な実装になるため極力避けましょう。
内包するtdの個数が異なる場合はtrを積み上げるのではなく
別々のtableタグ内に格納するのが良いです。

使用できないメーラー、OS

• Gmail
  • iOS
  • Android
• Outlook
  • Windows
• Yahoo!メール
  • iOS
  • Android

width

Windows Outlookではstyle属性内のwidthが効かない場合があるため、
width属性に単位なしの数値を当てたものを併記します。

例

<td width="120" style="width: 120px;">

注意

• Outlook
  • Windows
    • imgタグにおけるwidthの%指定は親要素のwidthに基づかない
    • body, span, div, pのタグはサポート対象外

max-width

以下の注意点にあるように、メーラーによって
tableタグで効く場合、効かない場合があるので
使用は避けるべきです。

注意

• Outlook
  • Windows
    • tableタグでのみ効く
• Yahoo!メール
  • iOS
    • tableタグで効かない

border-radius

Gmailでは問題ないのですが、
CVボタンなどでよく使う角丸の実装が一部メーラーでできません。
方針として、一部メーラーで直角になってしまうことを許容するか
ボタンを画像として配置するかの2択です。

使用できないメーラー、OS

• Outlook
  • Windows

注意

• Yahoo!メール
  • 各OS部分的にはサポートされている
  • スラッシュを用いたショートハンド記法がサポート対象外なので注意

box-shadow

これまたCVボタンなどでよく使う影の実装ですが
こちらはほぼ全てのメーラーで効かないです。

使用できないメーラー、OS

• Gmail
  • iOS
    • 部分的サポート
  • Android
    • 部分的サポート
• Outlook
  • macOS以外
• Yahoo!メール
  • iOS
  • Android

margin

余白周りも厄介でメーラーやHTMLタグによって挙動が異なるので
margin, paddingは可能な限り使うのを避けています。
代表的な例として中央寄せでよく使うmargin: 0 auto;は
Windows Outlookでは使えません。

注意

• Outlook
  • Windows
    • auto がサポート対象外

video

videoタグは基本的にサポートされてないです。
HTMLメールでは動画の埋め込みは基本的にできないと考えたほうが良いです。

使用できないメーラー、OS

• Gmail
  • iOS
  • Android
• Outlook
  • macOS以外
• Yahoo!メール
  • iOS
  • Android

gifファイル

gifファイルのアニメーションはWindows Outlookのみサポート対象外です。
アニメーションとしては動かず、静止画として表示されます。

他のメーラーでは基本的に動くはずなので
この点を許容できるのであれば、使ってみても良さそうですし、
実際に私が制作に携わっていたプロジェクトでも使用していました。

使用できないメーラー、OS

• Outlook
  • Windows

Gmailの102KB制限

まずは こちらをご覧ください。
HTMLメールをGmailで閲覧した際、省略が起きたケースのスクショです。
見ての通り、メールの内容が途中で途切れてしまっており「メッセージ全体を表示」という動線が表示されています。ユーザーによっては全体を表示することなく離脱してしまう原因になります。
また、場合によってはHTMLの記述も表出してしまうこともあり見栄えも悪いです。

実はGmailはメールのソースコードが
102KBを超えた場合、省略する仕様です。

HTMLメールはHTMLタグのstyle属性内にCSSをインライン記述するため
見た目のテキスト分量よりもはるかに大きな容量になりがちです。
例えば、ユーザーごとに複数の商品をレコメンドするメールの場合、
10件までは問題なかった表示が、11件以上だとGmailで省略表示になることがあります。
これは商品数分、同じHTMLタグ、CSSの記述が繰り返されることで記述量が増えるためです。

画像の容量について

ちなみに、画像の容量をできるだけ小さくしたほうが良いのは
表示速度の観点で、Web制作もHTMLメールも同じですが、
Gmailの102KB制限の観点では、原因にはなりません。

画像はあくまで絶対パスで記述されたURLの文字数分だけ容量にカウントされるので
使用している画像が102KBを超えていても関係ないため別問題です。

ちょっとした対策

Visual Studio Codeのwhite space: trimの設定をONにしておくことをおすすめします。
空行や末尾の余計な空白をファイル保存時に都度トリミングすることで、
少しでも不要な容量を削減することに繋がります。
先ほど例に挙げたレコメンドメールのように、繰り返し登場する記述の中に
こうした不要な空行・空白があると容量が膨らみやすいので注意しましょう。

Yahoo!メールで画像が表示されない場合

Chromeのアップデートによって、SSL化されていないhttpのURLで記述された
画像は非表示になってしまいます。
HTMLメールではサーバーにアップロードされた画像を絶対パスで読み込むことで表示しますが
その際httpsで表示される画像かどうか要確認です。

出典

Yahoo!メールでは安全のため、SSL（Secure Sockets Layer）によって通信内容を暗号化しています。
HTMLメールを確認する際、画像をSSL通信外のページから読み込んでいると、警告メッセージが出て画像が表示されない場合があります。

Yahoo!メールヘルプ: HTMLメールの画像が表示されない

まとめ

この記事では、筆者がHTMLメールを複数の案件でコーディングしてきた経験と
caniemail.com をもとにHTMLメール特有の制約について紹介しました。
横並べや角丸のCSSの実装ができなかったり、Gmailでメールが途中で省略されてしまったり、
Webサイトをコーディングする知見だけで実装するとぶつかる壁がいくつもあるので、
HTMLメールを作成する方の参考になれば幸いです。