このページ： E メールデザイナーでメールコンテンツをデザインする方法、ゼロから作成する場合や、コードを使用する場合や、インポートした HTML を使用する場合の主な手順、様々なクライアントで適切にメールをレンダリングするベストプラクティスについて説明します。
E メールデザイナーにアクセスしてメールコンテンツのデザインを開始するには、まずジャーニーまたはキャンペーンでメールを作成する必要があります。
その後、Journey Optimizer メールデザイン機能を使用して既存のコンテンツを読み込んだり、レスポンシブなメールをゼロから作成したりできます。 詳細情報
また、E メールデザイナーでは、次の操作も実行できます。
➡️ この機能をビデオで確認
メールコンテンツ作成の主な手順 key-steps
メールを作成したら、メールコンテンツのデザインを開始できます。
-
ジャーニーまたはキャンペーンの設定画面から、コンテンツを編集画面に進み、E メールデザイナーにアクセスします。 詳細情報
-
E メールデザイナーのホームページで、次のオプションからメールのデザイン方法を選択します。
-
E メールデザイナーのインターフェイスで メールをゼロから設計 し、Adobe Experience Manager Assets の画像を活用します。 メールコンテンツのデザイン方法については、この節を参照してください。
-
E メールデザイナーで直接 Raw HTML をコーディングまたは貼り付けます。 独自のコンテンツのコーディング方法については、この節を参照してください。
note NOTE キャンペーンでは、コンテンツを編集画面から「コードエディター」ボタンを選択することもできます。 詳細情報 -
ファイルまたは .zip フォルダーから 既存の HTML コンテンツを読み込み ます。 メールコンテンツの読み込み方法については、この節を参照してください。
-
AI を活用した画像から HTML へのコンバーターを使用して、画像デザインを HTML テンプレートに変換します。 静的画像を編集可能なメールテンプレートに変換する方法について詳しくは、この節を参照してください。
-
ビルトインまたはカスタムテンプレートのリストから既存のコンテンツを選択します。 メールテンプレートの操作方法については、この節を参照してください。
-
-
メールコンテンツを定義してパーソナライズした後は、自動コンテンツチェックを使用してメールコンテンツを検証できます。これにより、サポートされていないタグ、空の div、サイズ制限の違反など、HTML や CSS に関する問題を検出し、送信前にオーサリングパネルで直接確認できます。 詳細情報
note NOTE また、デザイン中にも主要な設定を確認し、警告（レコメンデーションとベストプラクティス）やエラー（テストやアクティブ化を防ぐブロックの問題）に関するアラートを表示します。 メールアラートの詳細情報 
-
また、コンテンツ品質を検証して、読みやすさ、コンテンツのまとまり、有効性に関する潜在的な問題を特定することもできます。 コンテンツ品質の検証の詳細情報
-
最終的には、コンテンツをエクスポートして、検証したり、後で使用したりできます。 「HTML をエクスポート」をクリックして、コンピュータに HTML とアセットを含む zip ファイルを保存します。
メールデザインのベストプラクティス best-practices
メールを送信する際は、受信者がメールを転送する可能性があることを考慮することが重要です。これにより、メールのレンダリングで問題が発生する可能性があります。 これは、転送に使用されるメールプロバイダーでサポートされていない可能性がある CSS クラスを使用する場合に特に当てはまります。例えば、モバイルデバイスで画像を非表示にするのに「is-desktop-hidden」CSS クラスを使用している場合などです。
こうしたレンダリングの問題を最小限にするために、メールのデザイン構造をできるだけ簡単に保つことをお勧めします。 デスクトップデバイスとモバイルデバイスの両方で適切に機能する単一のデザインを使用し、複雑な CSS クラスや、すべてのメールクライアントで完全にはサポートされない他のデザイン要素を使用しないようにします。
これらのベストプラクティスに従うと、受信者による表示や転送の方法に関係なく、一貫して正しくメールをレンダリングできます。
メールデザインのベストプラクティスについては、以下の表を参照してください。
- 構造用の静的なテーブルベースのレイアウト
- レイアウトの一貫性を保つための HTML テーブルとネストされたテーブル
- テンプレートの幅は 600～800 ピクセル
- スタイル設定用のシンプルなインライン CSS
- ユニバーサル互換性のための web セーフフォント
- 背景画像は、特定のメールプラットフォームでは表示されない場合があります。
- カスタム web フォントにはユニバーサルサポートがありません。
- ワイドレイアウトは、小さな画面では適切に表示されない場合があります。
- 画像マップの機能は限定的です。
- 埋め込み CSS は、メール配信中に削除される場合があります。
- JavaScript は、通常、メール環境ではサポートされていません。
<iframe>タグは、ほとんどのプラットフォームでブロックされています。- Flash は旧式で、サポートされなくなりました。
- 埋め込みオーディオは、多くの場合、再生できません。
- 埋め込みビデオは、多くのメールプラットフォームと互換性がありません。
- Forms は、メール内では機能しません。
<div>レイヤ化はレンダリングの問題を引き起こす可能性があります。
具体的なガードレールと制限事項 email-guardrails
適切に構造化されたメールでも、開封されるクライアントや環境に応じてレンダリングが異なる場合があります。 以下の節では、メールをデザインする際に留意すべき、既知の制限事項とクライアント固有の動作について説明します。
モバイル web ブラウザーの制限 mobile-web-limitations
受信者がネイティブモバイルアプリやデスクトップクライアントを使用するのではなく、モバイル web ブラウザー（スマートフォンの Chrome など）経由で Gmail または Outlook を開いた場合、メールのレンダリングが異なることがあります。 これは、モバイル web メール環境の既知の制限であり、Journey Optimizer に固有のものではありません。
このレンダリングの違いは、モバイルブラウザー内での web メールクライアントの動作に起因しています。 ブラウザーは、デスクトップの web メール全体の UI を最初にレンダリングし、メールを 2 階層下に配置します。そのため、レスポンシブ CSS やメディアクエリが適用されません。 Gmail web では、CSS の <style> ブロックが削除され、メールコンテンツが独自の <div> でラップされます。これにより、スタイルが上書きされ、配置の競合が発生する可能性があります。
典型的な症状としては、テキストの配置ずれ（左揃えのテキストが中央に表示される）、コンテンツセクション間の余分な白い区切り線の表示、テンプレートのデザインと全体的なレイアウトが異なるなどがあります。
これらの問題は、モバイルブラウザーから Gmail web および Outlook web にアクセスした場合にのみ発生します。 Outlook および Gmail ネイティブモバイルアプリ、およびすべてのデスクトップクライアントは影響を受けません。
-
完全にインライン化された CSS で、シンプルなテーブルベースのレイアウトを使用します。
-
テキストの配置などの重要なレイアウトプロパティに、メディアクエリや
<style>ブロックを使用しないようにしてください。
Outlook レンダリングの考慮事項 outlook-tips
Outlook には、デザイン中に考慮しないとメールのレイアウトに影響を及ぼす可能性のある、レンダリング上の特有の挙動がいくつかあります。 Outlook でメールが正しくレンダリングされるようにするには、次のベストプラクティスに従ってください。
- パディング、フォントサイズ、幅には偶数を使用する。 Outlook はピクセルを内部ポイントに変換します。これにより、奇数を使用すると、間隔のずれや意図しない白い線が生じることがあります。
- 表の幅をパーセンテージではなくピクセル単位で設定する。 パーセンテージによる幅指定は、Outlook のレイアウトが崩れる可能性があります。 各表のスタイル属性に幅の値を直接指定してください。
- 常に
width属性を使用して画像の幅を設定する。 HTML 属性が存在しない場合、Outlook は画像の CSSwidthおよびheightプロパティを無視し、ファイルのネイティブサイズを使用します。 - すべての画像に代替テキストを含める。 これにより、画像がブロックされた場合でも、表示やセキュリティの問題を防ぐことができます。
- 境界線はテーブル要素自体ではなく、テーブルのセルに適用する。 境界線が期待どおりにレンダリングされない場合は、
<table>から<td>に移動してください。 - 角を丸くしないでください。 CSS
border-radiusは、Outlook では確実にサポートされているわけではないため、安全なデフォルト設定として角を四角くすることをお勧めします。
メディアクエリや Outlook.com 固有の画像スワップ技術の使用方法など、ダークモードデザインに関する考慮事項について詳しくは、このページを参照してください。
チュートリアルビデオ video
メッセージエディターでメールコンテンツを作成する方法を説明します。
A/B テストを行うようにコンテンツ実験を設定し、ビジネス目標を最大限に推進するメールコンテンツを探索する方法を説明します。
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to design email content in the Email Designer — building from scratch, code, or imported HTML — verify it with automated content checks and content quality validation, export it, and follow rendering best practices and client-specific limitations.
Intents:
- Choose how to design an email: from scratch, code/paste raw HTML, import existing HTML, convert image designs to HTML, or select an existing content template
- Verify email content with automated content checks before sending
- Validate content quality for readability, cohesiveness, and effectiveness
- Export email content as a zip file containing HTML and assets
- Apply email design best practices to keep emails rendering well across clients
- Account for mobile web browser and Outlook rendering limitations
Glossary:
- Email Designer: The Journey Optimizer interface used to import content or build responsive emails from scratch, code, or imported HTML (product-specific)
- Automated content checks: A check that catches HTML and CSS issues — such as unsupported tags, empty divs, and size limit violations — directly in the authoring panel, before sending (product-specific)
- Content quality validation: A validation that identifies potential issues with readability, content cohesiveness, and effectiveness (product-specific)
- Image to HTML converter: An AI-powered converter that transforms static image designs into editable email templates (product-specific)
- Export HTML: An action that saves a zip file to your computer including your HTML and assets (product-specific)
Guardrails:
- Recommended template widths are between 600px and 800px (recommended).
- Recommended practices: static, table-based layouts; HTML tables and nested tables; simple, inline CSS; web-safe fonts.
- Use with care (may not render everywhere): background images, custom web fonts, wide layouts, image maps, and embedded CSS (embedded CSS is sometimes removed during email delivery).
- Not recommended (generally unsupported in email): JavaScript,
<iframe>tags, Flash, embedded audio, embedded video, forms, and<div>layering. - Alerts distinguish warnings (recommendations and best practices) from errors (blocking issues that prevent testing or activation).
- Mobile web rendering differences occur only in Gmail Web and Outlook Web when accessed via a mobile browser; Gmail/Outlook native mobile apps and all desktop clients are not affected.
- Outlook rendering: use even numbers for padding, font sizes, and widths; set table widths in pixels not percentages; set image widths using the
widthattribute; include Alt text on all images; apply borders to<td>not<table>; avoidborder-radius(rounded corners).
Terminology:
- Canonical name: Email Designer — Acronym: n/a — variants: message editor, email design capabilities
- Synonyms: “automated content checks” = “content check”
- Do not confuse: “automated content checks” (HTML/CSS issue detection) ≠ “content quality validation” (readability, cohesiveness, effectiveness)
- Do not confuse: “warnings” (recommendations and best practices) ≠ “errors” (blocking issues that prevent testing or activation)
FAQ:
- Q: What options are available for designing an email? — Design from scratch, code or paste raw HTML, import existing HTML from a file or .zip, convert image designs to HTML templates, or select an existing built-in or custom template.
- Q: How can I catch HTML and CSS issues before sending? — Use automated content checks, which flag unsupported tags, empty divs, and size limit violations in the authoring panel.
- Q: What template width is recommended? — Between 600px and 800px.
- Q: Why does my email look different in Gmail or Outlook on a phone browser? — This is a known limitation of Gmail Web and Outlook Web via a mobile browser; use simple table-based layouts with fully inlined CSS and avoid relying on media queries or
<style>blocks for critical layout. - Q: How do I export my content? — Click Export HTML to save a zip file containing your HTML and assets to your computer.