[限定提供]{class="badge informative"}

メールコンテンツへのテーマの追加 apply-email-themes

このページ: E メールデザイナーでテーマを作成、適用、再利用し、ブランドに一貫性があるスタイルをメールのコンテンツやフラグメントの上部に追加する方法について説明します。

AVAILABILITY
この機能は、限定提供です。 アクセス権を取得するには、アドビ担当者にお問い合わせください。

テーマを使用すると、技術ユーザー以外でも、標準テンプレートの上にカスタムスタイルを追加することで、特定のブランドやデザイン言語に適合する再利用可能なコンテンツを作成できます

この機能により、マーケターは、一意のデザインニーズに合わせた高度なカスタマイズオプションを提供しながら、視覚的に魅力的でブランドの一貫性のあるメールをより迅速かつ少ない労力で活用できます。

ガードレールと制限 themes-guardrails

  • メールをゼロから作成する際に、ブランドやデザインに合った特定のスタイルをすばやく適用するには、テーマを使用してコンテンツの作成の開始を選択します。

    手動スタイルモードを選択した場合は、メールをリセットしない限り、テーマを適用できません。

  • フラグメントには、テーマを使用モードと手動スタイルモード間で相互互換性がありません。

    • テーマが設定されたフラグメントは、テーマを使用せずに作成されたメールコンテンツでは使用できません。

    • テーマが設定されたコンテンツでフラグメントを活用するには、このフラグメント自体がテーマを使用して作成されている必要があります。 詳細情報

    • メールコンテンツでフラグメントを使用する際は、このフラグメント用に定義したテーマを適用してください。 テーマを適用しないと、特に Outlook 2021 以前のバージョンで、表示の問題が発生する場合があります。 詳細情報

  • HTML で作成されたコンテンツを使用する場合は、互換性モードになり、このコンテンツにテーマを直接適用できません。

    • テーマを適用するには、まずインポートしたコンテンツを新しいテンプレートとして保存し、次にこのテンプレートをテーマと互換性のあるコンテンツに変換する必要があります。 その後、このテンプレートを使用して、メールコンテンツを作成できます。 手動スタイル設定で作成したテンプレートを変換する方法について詳しくは、この節を参照してください。

    • また、インポートした HTML コンテンツを引き続き変換することもできます。 詳細情報

  • テーマでカスタム web フォント(Google フォントを含む)を使用する場合は、多くのメールクライアントが対応していないことに注意してください。 あらゆるメールクライアントで読みやすさを確保するために、テーマには必ず適切なフォールバックフォントを定義してください。

    • Gmail と Yahoo! HTML/CSS で指定したフォントファミリーに関係なく、外部の web フォントを読み込まず、システムフォントにフォールバックします。
    • Gmail でサポートされている Google フォントは、Roboto と Google Sans のみです。
    • Web フォントを​ サポート ​しているメールクライアントには、Apple Mail、iOS Mail、Android Mail、Thunderbird、Outlook for macOS などがあります。

テーマの作成 create-and-edit-themes

今後のメールコンテンツで活用できるテーマを定義するには、次の手順に従います。

  1. まず、新しいコンテンツテンプレートを作成します。

  2. テーマを作成または編集」オプションを選択します。

  3. Adobe テーマを選択します。 この例では、デフォルトのテーマ​を選択し、「作成」をクリックします。

  4. また、「マイテーマ」タブからカスタムテンプレートを選択し、「編集」をクリックして更新することもできます。

  5. 一般設定」タブで、ブランドに適した特定の名前を付けてテーマの定義を開始します。 デフォルトのメールのビューポート幅を調整したり、現在のテーマをエクスポートしてサンドボックス間で共有したりすることもできます。

  6. 右側のパネルを使用して、様々なタブを移動し、デザイン設定を更新します。

  7. カラー」タブから、次の操作を行います。

    • 編集」ボタンを使用して、ブランドのデフォルトカラーを含む​ カラーパレット ​を設定します。 「プリセット」を選択して、素早くカラースキームを作成するか、テーマの各色を個別に調整します。 また、両方の組み合わせを使用することもできます。

    • バリアントを追加」をクリックして、ライトモードやダークモードなど、複数のカラーバリアントを作成します。テーマの各バリアントには、独自のカラーパレットとニュアンスコントロールがあります。

    • バリアントごとに、編集​アイコンをクリックして、個々の要素を編集します。 作成したデフォルトのパレットや、任意のカスタムカラーを使用できます。

  8. テキスト設定​では、テーマ全体に使用するグローバルフォントを設定できます。 より精度の高い制御を行うには、各見出しと段落のタイプを編集して、フォント、サイズ、スタイルなどを調整することもできます。

    note
    NOTE
    カスタム web フォントを選択する場合、Gmail や Yahoo! などの多くのメールクライアントでは、 外部 web フォントはサポートしておらず、システムフォントにフォールバックします。 あらゆるメールクライアントでコンテンツが正しく表示されるように、フォールバックフォントを含めることを検討してください。 詳細情報
  9. 間隔」タブで、リストから個々の要素を選択して、異なるコンポーネント間で適切に間隔を空けます。

  10. 右側の他のタブを使用すると、このテーマの各ボタン要素、ディバイダー、追加の画像書式設定、グリッドレイアウト間隔を個別に管理できます。

  11. 保存」をクリックして、今後の使用のためにこのテーマを保存します。 これで、「マイテーマ」タブに表示されます。

メールコンテンツへのテーマの追加 apply-themes-email

コンテンツテンプレートやメールにデフォルトまたはカスタムのスタイルテーマを適用するには、次の手順に従います。

  1. Journey Optimizer で、ジャーニーまたはキャンペーンにメールアクションを追加するか、メールコンテンツテンプレートを作成し、メール本文を編集します。

  2. 次のいずれかのアクションを選択できます。

    • ビルトインのメールテンプレートを選択して、E メールデザイナーを開きます。 各テンプレートに固有のデフォルトのテーマが自動的に適用されます。

    • 新しいコンテンツをゼロからデザインし、「テーマを使用」を選択して、定義済みのスタイルテーマから開始します。

      note caution
      CAUTION
      手動スタイルモードを選択した場合は、デザインをリセットしない限り、テーマを適用できません。
      テーマが設定されたコンテンツでフラグメントを活用するには、このフラグメント自体がテーマを使用して作成されている必要があります。 詳細情報
  3. E メールデザイナーに移動したら、右側のパネルにある「テーマ」ボタンをクリックします。 デフォルトのテーマまたはテンプレートのテーマが表示されます。 このテーマでは、2 つのカラーバリアントを切り替えることができます。

  4. 現在使用しているテーマの横にある矢印をクリックします。 使用可能なカスタムテーマとアドビテーマのリストが表示されます。

  5. マイテーマ」をクリックし、作成したテーマを選択します。

  6. ドロップダウンリストの外側をクリックします。 新しく選択したカスタムテーマのスタイルは、すべてのメールコンポーネントに自動的に適用されます。 カラーバリアントがある場合は、切り替えることができます。

  7. コンテンツテンプレートでテーマを選択すると、「テーマを編集」ボタンをクリックして更新できます。 詳細情報

    {width="40%"}

    note
    NOTE
    このオプションは、メールコンテンツでテーマを使用する際は使用できません。
  8. 複数のカラーバリアントを使用するテーマを活用すると、特定の構造コンポーネントに対して特定のバリアントを選択できます。 これにより、コンテンツ全体のカラーバリアントを定義し、1 つの特定の構造に対してのみ異なるバリアントを使用できます。

    note
    NOTE
    このアクションは、コンテンツコンポーネントに対して実行できません。

    これを行うには、構造コンポーネントを選択し、右側の「スタイル」タブから「特定のテーマのバリアントを使用」オプションをクリックして、目的のバリアントをこの構造に適用します。

    この例では、現在のテーマの最初のカラーバリアントがメールコンテンツ全体に適用されますが、3 番目のカラーバリアントは選択した構造に適用されます。 この特定の構造の本文とビューポートの背景色が、コンテンツの残りの部分と異なることがわかります。

テーマはいつでも切り替えることができます。 メールコンテンツは変更されませんが、スタイルは新しいテーマを反映して更新されます。

スタイルのロック解除 unlocking-styles

コンポーネントを選択した場合、「スタイル」タブの専用アイコンを使用してこのスタイルをロック解除できます。

{width="90%"}

選択したテーマは、引き続きこのコンポーネントに適用されますが、スタイル要素を上書きできます。 テーマを変更すると、新しいテーマは上書きされなかったスタイル要素にのみ適用されます。

例えば、テキストコンポーネントをロック解除すると、フォントカラーを黒から赤に変更できます。

{align="center" width="80%" modal="regular"}

テーマを変更すると、このコンポーネントのフォントカラーは赤のままですが、このコンポーネントの背景色は新しいテーマに合わせて変更されます。

{width="80%"}

フラグメントでのテーマの活用 leverage-themes-fragment

テーマが適用されたテンプレートまたはメールでフラグメントを活用するには、このフラグメント自体がテーマを使用して作成されている必要があります。 そうしないと、テーマが設定されたコンテンツでこのフラグメントを使用できなくなります。

テーマと互換性のあるフラグメントを作成するには、次の手順に従います。

  1. Journey Optimizer で、ビジュアルフラグメントを作成し、「作成」をクリックして、フラグメントのコンテンツをデザインします。 方法についてはこちらを参照

  2. テーマを使用」を選択して、定義済みのスタイルテーマから開始します。

    {width="100%"}

    note caution
    CAUTION
    手動スタイルモードを選択した場合は、フラグメントデザインをリセットしない限り、テーマを適用できません。
  3. E メールデザイナーでは、フラグメントの作成を開始できます。

  4. 右側のパネルにある「テーマ」ボタンをクリックします。 デフォルトのテーマが表示されます。 このテーマでは、様々なカラーバリアントを切り替えることができます。

    {align="center" width="100%" modal="regular"}

  5. 他のテーマを選択して、フラグメントコンテンツをプレビューできます。 これを行うには、デフォルトのテーマの横にある矢印を選択し、「テーマを選択」をクリックします。

    {width="40%"}

  6. Adobe テーマ」タブと「マイテーマ」タブ間を移動して、フラグメントに互換性のあるテーマを(両方のタブから)最大 5 つ選択できます。

    note
    NOTE
    この制限は、互換性とパフォーマンス上の理由に対して適用されます。 Adobe デフォルトのテーマ​は削除できないので、追加で最大 4 つのカスタムテーマを選択できます。

    {width="70%"}

    note caution
    CAUTION
    メールコンテンツでこのフラグメントを使用する場合、メールテーマは、フラグメントに関連付けられたテーマのいずれかにする必要があります。 テーマが一致しない場合、フラグメントの挿入はブロックされます。
  7. 閉じる」をクリックします。

  8. デフォルトのテーマ​の横にある矢印をもう一度選択します。 これで、選択した様々なテーマを切り替えて、各スタイルのレンダリングをプレビューできるようになりました。

    {width="90%"}

  9. テーマを選択」をもう一度クリックして、テーマを追加するか、選択を変更します。

テーマと互換性のあるテンプレートの作成 theme-convertor

Journey Optimizer を使用すると、手動スタイル設定を使用して作成したテンプレートをテーマ互換のコンテンツに変換できます。 これは、テーマが Journey Optimizer に導入される前にコンテンツテンプレートを作成した場合や、外部コンテンツをインポートしている場合に特に役立ちます。

NOTE
テーマと互換性があるように変換できるのは、メールテンプレート​のみです。 個々のメールは変換できません。まず、コンテンツをテンプレートとして保存する必要があります。
  1. メールコンテンツテンプレートを開き、E メールデザイナーを使用してこのコンテンツを編集します。

  2. 右側のパネルにある「テーマ」アイコンを選択し、「コンテンツからテーマを生成」ボタンをクリックします。

    {width="100%"}

  3. テーマを作成​ウィンドウが開きます。 Journey Optimizer は、スタイル要素を自動的に検出し、新しいテーマに統合します。

    {width="90%"}

  4. テーマの名前を入力します。

  5. カラーバリアントの追加やフォントの編集など、ゼロからテーマを作成する場合と同じように、必要に応じて独自の調整を行います。詳細情報

    {width="90%"}

  6. 保存」をクリックして、再利用のためにこの新しいテーマを保存します。 これで、このテーマを他のテーマなどのコンテンツに適用できるようになりました。 詳細情報

AI Knowledge Reference

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 create, apply, and reuse themes in the Email Designer to add brand-consistent styling on top of email content and fragments, including converting manual-styling templates into theme-compatible content.

Intents:

  • Create a theme with a color palette, variants, text settings, spacing, buttons, dividers, and grid layout
  • Apply a default or custom theme to an email or content template
  • Switch themes and apply a specific color variant to an individual structure component
  • Unlock a component’s style to override individual styling elements
  • Create fragments compatible with themes and associate up to five themes with a fragment
  • Convert a manual-styling email template into theme-compatible content using Generate theme from content

Glossary:

  • Theme: Reusable custom styling added on top of standard templates to fit a specific brand and design language (product-specific)
  • Use Themes mode: The mode selected when creating content from scratch to start with a predefined styling theme (product-specific)
  • Manual Styling mode: The alternative mode; if chosen, themes cannot be applied unless you reset your email/design/fragment (product-specific)
  • Compatibility mode: The mode you are in when using content created in HTML, where themes cannot be applied directly (product-specific)
  • Color variant: A distinct color palette and nuance control set within a theme, such as light and dark mode (product-specific)
  • Generate theme from content: A Themes action that automatically detects styling elements in a template and consolidates them into a new theme (product-specific)

Guardrails:

  • This capability is in Limited Availability; contact your Adobe representative to gain access.
  • If you choose Manual Styling mode, you cannot apply themes unless you reset your email, design, or fragment.
  • Fragments are not cross-compatible between the Use Themes and Manual Styling modes; a fragment used in themed content must itself have been created using themes.
  • When using a fragment in email content, the email theme must be one of the themes associated with the fragment; if the theme does not match, the fragment insertion is blocked.
  • A fragment can have up to five compatible themes selected (from both the Adobe themes and My themes tabs); this limit is enforced for compatibility and performance reasons. The Adobe default theme cannot be removed, so you can select up to four additional custom themes.
  • Content created in HTML is in compatibility mode; to apply themes you must first save it as a new template, then convert the template into theme-compatible content.
  • Only email templates can be converted to be theme-compatible; individual emails cannot be converted—you must save content as a template first.
  • Gmail and Yahoo! do not load external web fonts and fall back to system fonts; the only Google fonts supported by Gmail are Roboto and Google Sans. Always define fallback fonts.
  • Mismatched fragment themes may cause display issues, especially in Outlook 2021 and previous versions.
  • The Edit theme button (available in a content template) is not available when using themes in email contents; the specific-variant option cannot be applied to content components (only structure components).

Terminology:

  • Canonical name: Theme — Acronym: n/a — variants: email theme, Adobe theme, custom theme
  • Synonyms: “Use Themes mode” = “Use Themes”
  • Do not confuse: “Use Themes mode” (themes can be applied) ≠ “Manual Styling mode” (themes cannot be applied unless reset)
  • Do not confuse: “Adobe themes” (built-in themes) ≠ “My themes” (themes you created)

FAQ:

  • Q: Is the themes capability generally available? — No, it is in Limited Availability; contact your Adobe representative to gain access.
  • Q: Can I use any fragment in themed content? — Only if the fragment was itself created using themes and the email theme matches one of the themes associated with the fragment; otherwise fragment insertion is blocked.
  • Q: How many themes can I associate with a fragment? — Up to five compatible themes across the Adobe themes and My themes tabs; the Adobe default theme cannot be removed, leaving up to four additional custom themes.
  • Q: Can I convert an existing manually styled asset to use themes? — Only email templates can be converted (via Generate theme from content); individual emails cannot, so save your content as a template first.
  • Q: What happens to my content when I switch themes? — The email content remains unchanged, but the styles update to reflect the new theme; overridden (unlocked) styling elements are not changed by the new theme.
  • Q: Why might web fonts not render? — Gmail and Yahoo! do not load external web fonts and fall back to system fonts; only Roboto and Google Sans are supported by Gmail, so define fallback fonts.
recommendation-more-help
journey-optimizer-help