【解説！】普通のWebと違う？！HTMLメールの世界

筆者のプロフィール

30代前半の独身男性。公務員として8年間勤務した後で、思い切ってWeb業界に飛び込んで3年のディレクター。業界一か所目の会社が「Webマーケ」を主眼とした会社で、とりわけ「HTMLメール」に注力しており、その中でHTMLメールのノウハウを学んだ。

1.レンダリングエンジン

ブラウザのレンダリングエンジンは、ChromeやEdgeであればChromium、SafariであればWebkitであるが、2023年までのOutlookでは、「Microsoft Word」なのである。これによって、floatはおろか、flex、gridは使うことができない状況だった。そのため、tableタグを使って表形式で細かく位置を指定してずれないようにする必要がある。直近のOutlookのアップデートでレンダリングエンジンがEdgeに交換されたことによって、直近のバージョンのOutlookを使っている利用者の環境では、先述のfloatやflexなどのモダンな機能が正しく動作するようになった。他方で、古いパッケージ版を使っている利用者は依然として古いレンダリングエンジンであるため、どの環境でも正しく閲覧できるように配慮すると、結局tableコーディングになるのである。

※rowspanやcolspanは崩れの元になるため使わない。見た目上結合しているように見せたいのであれば、borderの色を白にするなど工夫が必要。

2.文字コード

Webの王道は猫も杓子も「UTF-8」だが、メールの場合送信するシステムや、受信する環境（キャリアメールのアドレス等）によってUTF-8だと文字化けしてしまうケースがある。そのため、「Shift-JIS」を用いることがある。メールを製作する際には、Webサイト以上に、「ペルソナ」を意識してどの環境で開封する可能性が高いかよく検討が必要だ。

3.ミラー

HTMLメールの文頭に「このメールがうまく表示されない場合はこちらを開いてください」のような記述を見たことはないだろうか。これは、一般に「ミラー」と呼ばれるもので、文字化けが起こっている場合に「メールと瓜二つのWebサイト」へ誘導するものだ。 HTMLメールとの違いとして、差込タグ⁠（宛名や会員番号等）がない等の違いがる。話は少し変わるが、HTMLメールに画像を挿入する際、Webとは異なり「ルートパス」や「相対パス」は利用することができず、必ず「絶対パス」を用いる。この画像の参照先が「ミラー」のイメージフォルダになるのが一般的である。

4.マルチパートテキストとリッチテキスト

「マルチパートテキスト」という言葉をご存じだろうか。これは、受信者側がセキュリティーなどの理由から画像を含む添付ファイルを制限している場合に使用するものだ。利用する送信システムによるが、基本的にHTMLメールとセットで送信するもので、画像などの制限がある場合にメーラーが自動的にマルチパートテキストを表示するというものだ。送信システムを利用する際に特に気を付けたいのが、HTMLメール側は送信すべき内容になっていてもマルチパートテキストが過去の内容のままであると、特定の環境では古いメールがまた届いたというようなことがある。 定例で送るメールなどは十分にマルチパートテキストの部分もよく確認して送信する必要がある。マルチパートテキストとは異なり「リッチテキスト」としてフォントウェイトを付けたり文字に色を付けたようなメールも存在する。これは先述のHTMLと一緒に送信できるマルチパートテキストとは異なりリッチテキストはそれ単体で送るメールとなることも特徴である。

5.CSS（スタイルの記述方法について）

通常のWebだと、CSSのファイルを用意して、それを参照する形が一般的であり、そのほうがメンテナンス性が良いという利点がある。ところが、HTMLメールやリッチテキストでは、CSSファイルを参照することはできない。直接HTMLの文中に「style」タグで記述する形になる。

6.フォントの指定について

Webだと「font-family」にて多種多様なフォントが利用可能である。またWebフォントも加えるとその幅はとてつもないものだ。他方で、HTMLメールでは「serif」や「sans-serif」等代表的なものになりがちである。一応、各環境を想定して以下の様に記述する方法もある。

font-family:'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
★フォントについてはこちらの記事が分かりやすいので参照を推奨。

7.セレクタに制限がある

環境によって有効になったり無効になったりする不確実なものだからである。また、タグ名よりもclassやidで宣言するほうが崩れが少ない。

::before(after)やnth-child、nth-of-type等は利用できない

8.ポジション

ポジションのプロパティーは使えない前提でデザインを作る必要がある。重なっているようなデザイン等については画像で実現する形になる。

9.その他（ダークモードの対応）

@mediaクエリでのダークモード対応が効く場合と効かない場合があるため、要件の中で想定する場合はその点にも留意する必要がある。

★ダークモードの対応についてはこちらの記事が分かりやすいので参照を推奨。

まとめ

今回は、通常のWebとちょっと異なり、一癖も二癖もあるHTMLメールについてお送りしてきたがいかがだっただろうか。
どの環境でも崩れがないようにするためには様々な工夫や注意が必要なことはお判りいただけただろうか。メールの一番難しい点は端末やOSによって見え方が大きく異なることと、配信してしまえば修正が効かないことだと思う。Webサイトの制作と一緒にメールの配信やフォーマットの作成などをする際には十分に気お付けたい点だ

Webディレクター

ちもも

# iOS # Android # UI / UX # WEBディレクター心得 # フロントコーディング # SNS # CMS # OS # Linux # Windows # Mac # マーケティング # ブラウザ # Microsoft # Mail # Outlook

一覧に戻る