b→dashにおけるメーラーの推奨環境
b→dashにおいて、メーラーの推奨環境はパソコン(PC)とスマートフォン(SP)の場合で異なります。推奨しているメーラー以外でも配信コンテンツを送信/表示することは可能ですが、b→dashでの動作保証は行っておりません。b→dashにおける推奨環境については、以下をご参照ください。
| デバイス | 推奨メーラー |
| パソコン（PC） | ブラウザ版 Gmail |
| ブラウザ版 Yahoo!メール | |
| スマートフォン（SP） | アプリ版 Gmail |
※今後、動作保証の対象は拡大していく予定です
環境によるHTMLメールの表示の違いとは
HTMLメールは、ユーザーが利用しているOS/デバイス/メーラーの組み合わせに応じて、テキストや画像の表示が異なり、場合によっては表示が崩れてしまうケースがあります。
HTMLメールを作成するにあたり、表示崩れを防ぐコードを記載したとしても、OS/デバイス/メーラーの仕様を理由に、表示が崩れてしまうケースもありますので、本記事ではユーザーが使用している組み合わせに応じて、表示のされ方がどのように異なるのかを説明いたします。
テストメールの送信方法については、こちらの記事をご覧ください。
PC環境の場合
ユーザーがPC環境でHTMLメールを受信する場合、以下表のようにユーザーが利用しているPCのOSやメーラーによって、以下のような表示崩れが起きるケースがあります。
※使用しているOS/メーラーのバージョン、メールデザインによって表示崩れのケースは異なります。以下で紹介しているケースは一例です
| OS | メーラー | 発生する可能性があるHTML表示崩れ |
| Windows | Gmail | (A) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない |
| Yahoo!メール |
(A) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない
(B) テキスト要素の背景画像が表示されない |
|
| Microsoft Outlook |
(B) テキスト要素の背景画像が表示されない
(C) 角丸が適用されない (D) テキスト要素の幅が変更されてしまう (E) データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまう (F) URLやメールアドレスの前後にある文字列も自動でリンクに変換されてしまう |
|
| Thunderbird | (B) テキスト要素の背景画像が表示されない | |
| Mac | Gmail | (A) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない |
| Yahoo!メール |
(A) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない
(B) テキスト要素の背景画像が表示されない |
|
| Microsoft Outlook |
(D) テキスト要素の幅が変更されてしまう
(E) データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまう |
|
| Thunderbird | - | |
| Mac Mail |
(A) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない
(G) 画像の横幅を600px未満に設定すると、画像の横幅が広がってしまう |
(A) ダークモードでメールが表示されない
ダークモードでメールが表示されず、メール本文がライトモードとして表示されるケースがあります。
(B) テキスト要素の背景画像が表示されない
(C) 角丸が適用されない
(D) テキスト要素の幅が変更されてしまう
(E) 画像サイズが変更されてしまう
データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまうケースがあります。
(F) URLやメールアドレスの前後にある文字列も自動でリンクに変換されてしまう
「Microsoft Outlook」の機能により、URLやメールアドレスの前後にある文字列もまとめてリンクに変換されてしまうケースがあります。
(G) 画像の横幅が広がってしまう
画像の横幅を600px未満に設定すると、画像の横幅が広がってしまうケースがあります。
スマートフォン環境の場合
ユーザーがスマートフォン環境でHTMLメールを受信する場合、以下表のようにユーザーが利用しているデバイスやOS、メーラーアプリによって、以下のような表示崩れが起きるケースがあります。また、ブラウザアプリからメーラーを利用し、メールコンテンツを閲覧した場合も表示崩れが生じます。
※使用しているOS/メーラーのバージョン、メールデザインによって表示崩れのケースは異なります。以下で紹介しているケースは一例です
| OS | メーラー（スマホアプリ） | 発生する可能性があるHTML表示崩れ |
| Android | Gmail | (G) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない |
| Yahoo！メール | ||
| Microsoft Outlook |
(H) テキストの行間設定が強制的に「1.5」で設定されてしまう
(I) データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまう |
|
|
ドコモメール
（ドコモ提供のメールアプリ） |
(J) Androidの「ドコモメール」アプリは、HTMLメールの表示に対応していないため大幅にレイアウトが崩れてしまう | |
| iOS | Gmail | (G) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない |
| Yahoo！メール | ||
| Microsoft Outlook |
(H) テキストの行間設定が強制的に「1.5」で設定されてしまう
(I) データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまう |
|
|
Mail
（iOS標準メーラーアプリ） |
(G) ユーザーがダークモードでHTMLメールを開いても、ダークモードでメールが表示されない
(K) 画像の縦横比が崩れてしまう |
(G) ダークモードでメールが表示されない
ダークモードでメールが表示されず、メールデザインの背景色が白色の箇所にグレーになるケースがあります。
(H) 行間が強制的に「1.5」で設定されてしまう
(I) 画像サイズが変更されてしまう
データ/レコメンド挿入した画像を設定すると、画像サイズが変更されてしまうケースがあります。
(J) Androidの「ドコモメール」アプリで閲覧した際、HTMLメールの表示が大幅に崩れてしまう
(K) 画像の縦横比が崩れてしまう
ユーザーがiOS15以上のiOS端末で「メールプライバシー保護」を有効にし、iOS標準メーラーアプリを使用した場合、画像が表示されません。画像を表示するには、ユーザーが「コンテンツを読み込む」をクリックする必要があります。
【参照：「メールプライバシー保護」を有効にされたメール】
PC/スマートフォン環境共通
以下では、PC/スマートフォン環境に共通してみられている、閲覧に利用するメーラーの違いなどでHTMLメールの表示が異なるケースについて紹介していきます。
PCやスマートフォンでダークモードを使用して、HTMLメールを閲覧することは非推奨です。b→dashでは、どのメーラーにおいてもダークモードでHTMLメールを閲覧することについて動作保証を行っていません。
b→dashのメールアプリのGUI機能で作成するメールコンテンツはレスポンシブ対応であるため、閲覧するデバイス/メーラーによって「メールコンテンツの横幅」「余白」などの表示が異なります。
閲覧する環境によって「メールコンテンツの横幅」「余白」などの表示を変更させたくない場合は、HTML編集モードを利用してサイズ(px)の指定を行ってください。
ユーザーがPC/スマートフォン環境のGmailを使用してメールを開封した際、メールの本文が長い場合などに「メッセージ全体を表示」と省略して表示されることがあります。省略されたメールの本文は、以下画像の様な「メッセージ全体を表示」を押すと展開されますので、b→dashから配信されるメールコンテンツに問題はありません。
【参照：「メッセージ全体を表示」と省略されたメール】
ユーザーがPC/スマートフォン環境のGmailを使用してメールを開封した際、半角不等号「<」「>」で挟まれているテキストは表示されません。半角不等号「<」「>」に挟まれたテキストがコードとして認識されるために表示されないGmailの仕様となっています。
テキストを強調する際の囲み文字として、半角不等号「<」「>」を利用しないようご注意ください。
ユーザーがPC/スマートフォン環境のGmailを使用してメールを開封した際、過去に配信されたメールとの共通のテキスト部分が紫色に表示されることがあります。Gmailが共通テキスト部分を「引用」として識別することでカラーリングされる現象であり、b→dashから配信されるメールコンテンツに問題はありません