サポートページ 
メールクライアントによってHTMLメールがうまく表示されないのはなぜですか？
メールクライアントによってHTMLメールがうまく表示されないのはなぜですか？
到達率
更新日 5月 23, 2021
メールクライアント（Gmail、YahooやOutlookなど）やブラウザは、Benchmark Emailからの配信メールのHTMLコードをそれぞれ異なった形で解読・表示します。
メールがどのように表示されるかは受信側のメールクライアントまたはブラウザによって異なり、コードに異常がある場合は、受信環境によっては正しく解読できないことがあります。
例えば、Gmailでは簡単に修正できる問題であっても、Outlookでは修正ができずにレイアウトが崩れることがあります。このような場合のメール表示トラブルはその特定の受信環境に限られることになります。
他の例として、一部のテキストがOutlook上では全て左寄りで表示されていたとしても、他のメールクライアントでは中央寄りに表示されることがあります。
このような問題が発生した場合、受信テスターをご利用頂き、さまざまなメールクライアントやブラウザでの表示を確認してから本配信を行うことをお勧め致します。詳細は以下のFAQをご覧ください。
FAQ：受信テスターの目的と作成方法について
なお、メールクライアントによってはESP（メールサービスプロバイダー）が回避できない制限がある場合がございます。以下、受信環境に関わらずメールを同じように表示するためのポイントをご紹介します。
受信環境に左右されないメールを作成するポイント
- ドラッグ＆ドロップエディタを使用する – ドラッグ＆ドロップエディタのメールテンプレートは全てモバイル（スマホ）対応となっております。こちらのエディタを使用することで受信環境に最適なメールが表示されるようになります。
- メール内にWebページ版リンクを設置する – 受信環境によってはメールが正しく表示されない場合があるため、Webページ版リンクを設置することにより同一の内容を閲覧して頂けます。設定はメール編集画面の「パーミッションリマインダーブロック」から可能です。Webページ版リンクの挿入方法についてはこちら
- 画像の背景色に気をつける – 画像の背景色はメールソフトが画像を表示できない場合にディスプレイされるため、メールが真っ白に表示されないように文章のフォントの色が目立つような背景色を選択しましょう。
- 画像の代替テキストを追加する – 画像の代替として表示されるテキスト「代替テキスト（Alt属性）」をメール本文に追加されることをお勧め致します。購読者によっては受信箱で画像をブロックまたは非表示設定している場合があるため、画像無しでもメールを読んで頂けるように代替テキストを追加しましょう。代替テキストを追加するには、画像をダブルクリックしボックスに入力するだけです。詳細はこちら
- 画像の配置 – 場合によって、画像が大きすぎてテキストを覆ってしまったり、圧縮されているように見えたりすることがあります。 画像の位置を調整し、サイズを縮小してフォーマットを綺麗にしてください。 ドラッグ＆ドロップエディタをお使いの場合は、この作業は自動で行われますのでご安心ください。
- テキストブロックに直接長いURLを挿入しない – スペースを含まない過度に長い文章（テキストブロックに直接追加した長いURLなど）は、文字列がメールの幅を超えてしまう可能性があります。途切れないようにするには、単語、文章または画像にリンクを挿入してください。ドラッグ＆ドロップエディタのメニューバーにあるBenchmark Emailのリンクツールをご利用ください。リンクの挿入に関するFAQはこちら
以上を踏まえた上でメールを作成後、ご自身または身近な人にテストメールを送ってみましょう。複数のデバイスでメールを開いてデザインがどのように表示されるかを確認しましょう。最後に、各メールクライアントで確認されている表示エラーの一覧表を記載しておりますので、こちらも併せてご参照くださいませ。
各メールクライアントでの表示エラーリスト
メールクライアント
|
HTML 対応
|
仕様
|
| AOL 4.0、5.0 |
未対応
|
|
| AOL 6.0、 7.0、8.0 |
対応
|
- スタンダードHTML
- フォーム認識不可
- 外部スタイルシートへのリンク入りメール受信不可
|
| AOL 9.0 |
一部対応
|
- HTML画像＆直リンク表示不可
- フォーム認識不可
- 長いメールはzipファイルになる
|
| AOL Webメール |
一部対応
|
- XHTMLフル対応無し
- <br />タグ認識不可
- アンカータグ対応無し
-アンカーリンクをクリックするとアンカー箇所に飛ばず新しいウィンドウで受信箱が開く |
| Apple Mail |
対応
|
-
- スタンダードHTML
- フォントタグ使用不可 – <span>タグを使用
- アンカーリンクはダブルクリックが必要
- El Capitan OSXではアンカーリンクが機能しない
|
| Compuserve |
未対応
|
|
| Comcast Smartzone |
対応
|
- スタンダードHTML
- 背景画像はブロックされる
- アンカータグ対応無し -アンカーリンクをクリックするとアンカー箇所に飛ばず新しいウィンドウで受信箱が開く
|
| Comcast XFinity |
一部対応
|
– ウェブページバージョンで閲覧するよう誘導するか、メールを短くする必要あり
- アンカーリンク、目次リンクをクリックするとアンカー箇所に飛ばず新しいウィンドウで受信箱が開く
|
| Entourage (Mac) |
対応
|
|
| Entourage 2008 (Mac) |
一部対応
|
- 背景画像がブロックされる場合がある
- フォーム、Flash、その他プラグイン、CSS float、CSSポジショニング、GIF対応
- 箇条点は画像に置き換えられる
|
| Earthlink |
一部対応
|
|
| Eudora 3.1 |
未対応
|
|
| Eudora 4.0、4.2、4.3、 5.0 |
未対応
|
- Internet Explorer使用の場合、スタンダードHTML仕様
- デフォルトのEudora HTMLビューアでは正常に表示されない場合がある
|
| Gmail |
一部対応
|
- ブックマークアンカーのサポート無し
- 長いメールは途中で切れる
– ウェブページバージョンで閲覧するよう誘導するか、メールを短くする必要あり
|
| Hotmail |
一部対応
|
- デフォルトで画像ブロック
- <head>, <title>, <meta>, <body> タグ使用不可 – インラインスタイルの使用が必要
- ホットリンクは4分後に無効になり、背景画像が削除される – メール認証設定をONにする必要あり
- CSS表示問題
- テキストに下線が表示される場合あり
- <p>タグで囲んだテキストの行間に余分なスペースが入る – ブロックのコードビューで<p>タグを<div>ダグに変更するか、新規ブロックを作成し、コピー＆貼り付けせずにテキストを入力する必要あり
|
| Juno 4.0、 5.0 |
対応
|
|
| Lotus Notes 4.6 |
未対応
|
|
| Lotus Notes 5.0 |
対応
|
|
| Novell GroupWise 5.5 |
対応
|
|
| Office 365 |
一部対応
|
- スタンダードHTML
- デフォルトで画像ブロック
- CSS表示問題
- アンカーリンク、目次は機能しない
- 画像はライブラリに保存されたオリジナルファイルのサイズで表示されるため、表示問題を防ぐため画像のリサイズが必須
|
| Outlook 97 |
一部対応
|
- フォント、リンクカラーが反映されない
- 段落揃え未対応
|
| Outlook 98、 2000 |
対応
|
|
| Outlook 98、 2001 (Mac) |
未対応
|
|
| Outlook 2003 |
一部対応
|
|
| Outlook 2007、2010 |
一部対応
|
- フォーム、Flash、その他プラグイン、CSS float、CSSポジショニング、GIF未対応
- 箇条点は画像に置き換えられる
- 長いメールにはページ区切りが挿入され空白が表示される場合あり
- 画像ボーダー表示未対応
- 1920px x 1080px 以上の高画質ではテキストフォーマット対応、画像は未対応
- 画像キャプションスタイルはOutlookスタイルに上書きされる
- 縦1728 px以上の画像は切れる
- 段落の間、テキストの間に余分な空白が入る
- パソコン表示設定では画像がうまく表示されない場合がある
注: Microsoft ではOutlook 2007でのHTML認証ツールを提供しています。 |
| Outlook 2007、2010 (Mac) |
一部対応
|
- アンカーリンク、目次は機能しない
- アニメGIF未対応
|
| Outlook 2013、2016 |
一部対応
|
- 長いメールにはページ区切りが挿入され空白が表示される場合あり
- ブロックの最後のテキストが行頭文字の場合、中央が空欄スタイルの行頭文字が追加される – 行間文字を最後に置かないようにするか、</ul>タグでクローズする前に <div style=”display:none;”> </div> を追加
- 1920 x 1080 px以上の高画質ディスプレイではテキストサイズは調整されるが、画像サイズは調整されない
- パソコン表示設定によっては画像が正常に表示されない場合がある
- アニメGIF未対応
|
| Outlook 2016 (Mac) |
一部対応
|
|
| Outlook 365 |
一部対応
|
- リンクに続くテキストのカラーを設定しない限りリンクはデフォルトで青になる – リンクは<span> タグで囲み、 <td> と <div>タグは異なるカラー設定が必要
- アンカーリンク、目次リンクをクリックすると正しい箇所に飛ばずブランクのWebページが開く
- テキストは左寄せに設定していても、デフォルトで両端揃えになる
- 画像周りのスペースは設定が反映されない
|
| Outlook Web Access |
一部対応
|
- スタンダードHTML
- 画像はデフォルトでブロックされる
- アンカーリンク、目次は機能しない
- 画像はライブラリに保存されたオリジナルファイルのサイズで表示されるため、表示問題を防ぐため画像のリサイズが必須
|
| Outlook Express- PC or Mac |
対応
|
|
| Pegasus Mail 3.1- Windows |
対応
|
- スタンダードHTML
- リンクのカラー設定は反映されない
|
| スマートフォン Android、 iPhone等 |
対応
|
- 電話番号がハイパーリンクとして表示される(クリックして電話が可能)
- メールフッターの住所を認識し、イベント日時をカレンダーに追加可能
|
| Verizon |
対応
|
- スタンダードHTML
- アンカーリンク、目次は機能しない
|
| Yahoo! |
対応
|
- スタンダードHTML
- アンカーリンク、目次が機能しないブラウザがある – 機能しないブラウザではメールが閉じ受信箱ページへ戻る動作となる
- 長いメールは途中で切れる
– ウェブページバージョンで閲覧するよう誘導するか、メールを短くする必要あり |
参照元: StudioCloud
ご不明な点はサポートまでご連絡ください。
＞＞「メール作成：設定管理」のまとめページに戻る
