すべてのクライアントで機能する HTML 電子メールを作成するには?

HTML メールを作成する際の主な考慮事項 Gmail や Outlook などのクライアント向けにメールをデザインする場合、Web 開発とは異なる独自の考慮事項を理解することが重要です。このガイドでは、次の点に留意する必要があります。

インライン CSS と タグ

Web 開発とは異なり、スタイルシート ( タグ) は電子メール クライアントで広くサポートされているわけではありません。したがって、互換性を確保するには、すべての CSS プロパティを HTML コードにインライン化することが重要です。

CSS サポート

電子メール クライアントには、さまざまなレベルの CSS サポートがあります。一貫してレンダリングされない可能性のある一般的な CSS プロパティには、角丸、ボックス シャドウ、ホバー効果などがあります。オンライン リソースで CSS サポート ガイドと「うまくいきますか?」を確認してください。特定の CSS ルールを使用する前に互換性を確認するツール。

レスポンシブ デザイン

メールではレスポンシブ デザインの重要性が高まっています。ただし、従来のメディア クエリ手法は、すべての電子メール クライアントで機能するとは限りません。流動的なレイアウトや動的に調整されるレイアウト ブロックなどの代替アプローチの使用を検討してください。

背景画像

背景画像はほとんどの電子メール クライアントでサポートされていますが、VML (ベクトル マークアップ言語) が必要です。 Outlook との互換性。 Campaign Monitor などのサービス プロバイダーが提供する VML ツールを使用して、背景画像のクライアント間互換性を作成します。

トラブルシューティング

コルスパンと行スパン: HTML電子メール クライアントはコルスパンと行スパンを異なる方法で処理する可能性があるため、クライアント間でのテストは困難です。必須。

条件付き CSS: Outlook は、特定の電子メール クライアントをターゲットにし、それに応じてスタイルを適用するために使用できる条件付き CSS をサポートしています。

青色のハイパーリンク: 一部の電子メール クライアントでは、青色のハイパーリンクが禁止されています。視認性を確保するために、別の色を使用するか、背景色を追加することを検討してください。

Web フォント: Web フォントは、電子メール クライアントで常に表示されるとは限りません。互換性のある Web フォントのオンライン リソースを確認し、実装する前に徹底的にテストしてください。

リソース

詳細なガイダンスについては、次のリソースを参照してください。

キャンペーンモニター Mailchimp サイトポイント Acid 上のメール HTML メール ボイラープレート