HTMLメールのトラブルシューティング
このページでは、HTMLメールエディターやテスト送信に関するよくある問題を解決します。Inbox Visionや到達性については、Inbox Visionおよびメール設定を参照してください。
まずはここから：症状を確認する
以下の表から該当する症状を見つけて、適切なセクションに移動してください。
| 症状 | 参照先 |
|---|---|
| テストメールのHTMLの表示がおかしい | テストメールでHTMLが正しくレンダリングされない |
| Chromeでエディターの動作がおかしい | 拡張機能の競合 |
| クライアントによってメールの表示が異なる | メールのレンダリング |
| Inbox Visionのプレビューが送信済みメールと一致しない | CSSインライン化 |
| テストメールで画像の後に余白や線が表示される | 画像下の余白 |
標準的な調査パス
HTMLメールのレンダリングやエディターの動作が期待どおりでない場合は、このワークフローを使用してください。ステップ1から始めます。
- エディターまたは外部バリデーターでHTMLマークアップを検証します。
- テストメールを送信し、どのメールクライアントやブラウザで問題が発生しているかを記録します。
- Inbox Visionでプレビューし、クライアント間のレンダリングを比較します。
- エディター自体の動作がおかしい場合は、ブラウザ拡張機能の競合を除外します。
- 問題が解決しない場合は、Inbox Visionのスクリーンショットと影響を受けたクライアントの情報を添えてサポートチケットを開いてください。
テストメールでHTMLが正しくレンダリングされない
症状：テストメールの表示がエディターでの見た目と一致しない。
まずHTMLの設定を確認し、次に拡張機能の競合、メールのレンダリング、CSSインライン化、画像下の余白を確認してください。
拡張機能の競合
特定のブラウザ拡張機能がメールエディターで問題を引き起こすことがあります。例えば、Google Chromeで使用するGrammarlyがその一例です。これらの拡張機能を使用している場合は、以下のいずれかを行ってください。
- Grammarlyがブラウザ拡張機能としてインストールされていないブラウザでBrazeメールを編集する
- Brazeアカウントマネージャーに連絡して、メールエディターをHTMLのみまたはプレーンテキストに切り替えるよう依頼する
プレーンテキストビューではWYSIWYG（見たままが得られる）エディターが削除されるため、このリクエストを行う前に、すべてのチームメンバーがHTMLに慣れていることを確認してください。
メールのレンダリング
メールはブラウザやメールクライアントによってレンダリングが異なるため、問題が発生しているブラウザやメールクライアントを記録しておいてください。
- Inbox Visionを使用してメールをプレビューし、さまざまなブラウザやメールクライアントでメールがどのように表示されるかを確認してください。
- 問題を引き起こしているブラウザやメールクライアントを特定したら、開発者チームにHTMLを修正し、それらのブラウザやメールクライアントに対応するための編集が必要であることを伝えてください。
CSSインライン化
Inbox Visionのプレビューが、Brazeで送信されたものと一致しない場合があります。これは、Brazeと他のツールで実行されるCSSインライン化の違いが原因である可能性があります。これが原因と思われる場合は、CSSインライン化をオフにしてください。
画像下の余白
症状：テストメールで画像の後に余白や線が表示される。
テストメールで画像の下に余白や線が表示される場合、これは通常、メールクライアントがインラインレベル要素をレンダリングする方法が原因です。画像はデフォルトでインラインレベルであり、ベースラインに揃えられます。これにより、ブラウザがディセンダー（「g」や「y」のようにベースラインより下に伸びる文字の部分）に対応できるようになりますが、余白として表示される小さな隙間が生じます。
これを修正するには、画像のCSSにdisplay: block;を追加します。
1
2
3
4
5
<style>
img {
display: block;
}
</style>
または、特定の画像にスタイルを直接適用することもできます。
1
<img src="https://example.com/image.jpg" style="display: block;" alt="Image description" />