b→dashにおけるメーラーの推奨環境

b→dashにおいて、メーラーの推奨環境はパソコン(PC)とスマートフォン(SP)の場合で異なります。推奨しているメーラー以外でも配信コンテンツを送信/表示することは可能ですが、b→dashでの動作保証は行っておりません。b→dashにおける推奨環境については、以下をご参照ください。

※今後、動作保証の対象は拡大していく予定です

環境によるHTMLメールの表示の違いとは

HTMLメールは、ユーザーが利用しているOS/デバイス/メーラーの組み合わせに応じて、テキストや画像の表示が異なり、場合によっては表示が崩れてしまうケースがあります。
HTMLメールを作成するにあたり、表示崩れを防ぐコードを記載したとしても、OS/デバイス/メーラーの仕様を理由に、表示が崩れてしまうケースもありますので、本記事ではユーザーが使用している組み合わせに応じて、表示のされ方がどのように異なるのかを説明いたします。

PC環境の場合

ユーザーがPC環境でHTMLメールを受信する場合、以下表のようにユーザーが利用しているPCのOSやメーラーによって、以下のような表示崩れが起きるケースがあります。

※使用しているOS/メーラーのバージョン、メールデザインによって表示崩れのケースは異なります。以下で紹介しているケースは一例です

(A) ダークモードでメールが表示されない

ダークモードでメールが表示されず、メール本文がライトモードとして表示されるケースがあります。

(B) テキスト要素の背景画像が表示されない

(C) 角丸が適用されない

(D) テキスト要素の幅が変更されてしまう

(E) 画像サイズが変更されてしまう

データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまうケースがあります。

(F) URLやメールアドレスの前後にある文字列も自動でリンクに変換されてしまう

「Microsoft Outlook」の機能により、URLやメールアドレスの前後にある文字列もまとめてリンクに変換されてしまうケースがあります。

(G) 画像の横幅が広がってしまう

画像の横幅を600px未満に設定すると、画像の横幅が広がってしまうケースがあります。

スマートフォン環境の場合

ユーザーがスマートフォン環境でHTMLメールを受信する場合、以下表のようにユーザーが利用しているデバイスやOS、メーラーアプリによって、以下のような表示崩れが起きるケースがあります。また、ブラウザアプリからメーラーを利用し、メールコンテンツを閲覧した場合も表示崩れが生じます。

※使用しているOS/メーラーのバージョン、メールデザインによって表示崩れのケースは異なります。以下で紹介しているケースは一例です

(G) ダークモードでメールが表示されない

ダークモードでメールが表示されず、メールデザインの背景色が白色の箇所にグレーになるケースがあります。

(H) 行間が強制的に「1.5」で設定されてしまう

(I) 画像サイズが変更されてしまう

データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまうケースがあります。

(J) Androidの「ドコモメール」アプリで閲覧した際、HTMLメールの表示が大幅に崩れてしまう

(K) 画像の縦横比が崩れてしまう

PC/スマートフォン環境共通

以下では、PC/スマートフォン環境に共通してみられている、閲覧に利用するメーラーの違いなどでHTMLメールの表示が異なるケースについて紹介していきます。