Outlook向けHTMLエディターでのメール本文作成時のベストプラクティス

Outlook向けHTMLエディターでのメール本文作成時のベストプラクティス

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Zoho Marketing Automationsのテンプレート編集画面で作成したメールの本文は、すべてのメールクライアントで適切に表示されます。HTMLとCSSを使用して内容をデザインした場合、一部のデスクトップクライアント、特にOutlookで表示上の問題が発生することがあります。新しいバージョンのOutlookでは、メールの表示にMicrosoft Wordが使用されるため、画像がブロックされたり、書式が大幅に崩れたりすることがあります。ただし、HTMLを記述する際に特定の点に注意することで、書式に関する問題の多くを回避できます。

HTML/CSSでメールを作成する際に、特に注意すべき点のリストはこちらです。
  1. <div>タグと<p>タグに指定した間隔と幅は、Outlookでは無視されます。代わりにテーブルを使用できます。
  2. <a>タグに指定した間隔は、Outlookでは無視されます。代わりにテーブルを作成し、すべての書式を適用してください。
  3. 画像に指定した間隔と余白は、Outlookでは無視されます。画像にはhspace属性とvspace属性を使用してください。
  4. classの使用は避け、すべてのプロパティをインラインで指定してください。
  5. 行間を指定してください。指定しない場合、Outlookの既定の高さが使用されます。
  6. HTML5とCSS3の使用は避けてください。
  7. Outlookでは背景画像が表示されません。
  8. OutlookではGIFが再生されず、最初のフレームのみが表示されます。GIFを含める場合は、最も重要なフレームが最初に再生されるように設定してください。これにより、Outlookでも情報が伝わり、その他のクライアントでは引き続きGIFが再生されます。
  9. <button>タグは、Outlookでは正常に機能しません。ボタンはテーブルを使用してデザインしてください。
  10. 画像の幅は、属性とスタイルの両方で指定してください。
  11. Outlookではpositionスタイルとfloatがサポートされません。2列の構造が必要な場合は、テーブルを使用してデザインしてください。