Outlook での HTML エディターを使用してメールのコンテンツを作成する際のベストプラクティス

Outlook での HTML エディターを使用してメールのコンテンツを作成する際のベストプラクティス

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

Zoho Marketing Automationsのテンプレートエディタで作成されたメールコンテンツは、すべてのメールクライアントで正しく表示されます。HTMLとCSSでコンテンツをデザインする場合、一部のデスクトップクライアント、特にOutlookで表示の問題が発生することがあります。Outlookの新しいバージョンでは、メールの表示にMicrosoft Wordが使用されるため、画像がブロックされたり、大きな書式エラーが発生することがあります。ただし、特定の領域に重点を置いてHTMLを記述することで、ほとんどの書式設定の問題を回避することができます。

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