[限定提供]{class="badge informative"}
メールコンテンツへのテーマの追加 apply-email-themes
テーマを使用すると、技術ユーザー以外でも、標準テンプレートの上にカスタムスタイルを追加することで、特定のブランドやデザイン言語に適合する再利用可能なコンテンツを作成できます。
この機能により、マーケターは、一意のデザインニーズに合わせた高度なカスタマイズオプションを提供しながら、視覚的に魅力的でブランドの一貫性のあるメールをより迅速かつ少ない労力で活用できます。
ガードレールと制限 themes-guardrails
-
メールをゼロから作成する際に、ブランドやデザインに合った特定のスタイルをすばやく適用するには、テーマを使用してコンテンツの作成の開始を選択します。
手動スタイルモードを選択した場合は、メールをリセットしない限り、テーマを適用できません。
-
フラグメントには、テーマを使用モードと手動スタイルモード間で相互互換性がありません。
-
HTML で作成されたコンテンツを使用する場合は、互換性モードになり、このコンテンツにテーマを直接適用できません。
-
テーマを適用するには、まずインポートしたコンテンツを新しいテンプレートとして保存し、次にこのテンプレートをテーマと互換性のあるコンテンツに変換する必要があります。 その後、このテンプレートを使用して、メールコンテンツを作成できます。 手動スタイル設定で作成したテンプレートを変換する方法について詳しくは、この節を参照してください。
-
また、インポートした HTML コンテンツを引き続き変換することもできます。 詳細情報
-
-
テーマでカスタム web フォント(Google フォントを含む)を使用する場合は、多くのメールクライアントがサポートしていないことに注意してください。 あらゆるメールクライアントで読みやすさを確保するために、テーマで適切なフォールバックフォントを常に定義します。
- GmailとYahoo! HTML/CSSで指定したフォントファミリーに関係なく、外部のweb フォントを読み込まず、システムフォントにフォールバックします。
- GmailでサポートされているGoogle フォントは、RobotoとGoogle Sansのみです。
- doがWeb フォントをサポートしている電子メールクライアントには、Apple Mail、iOS Mail、Android Mail、Thunderbird、Outlook for macOSなどがあります。
テーマの作成 create-and-edit-themes
今後のメールコンテンツで活用できるテーマを定義するには、次の手順に従います。
-
まず、新しいコンテンツテンプレートを作成します。
-
「テーマを作成または編集」オプションを選択します。
-
Adobe テーマを選択します。 この例では、デフォルトのテーマを選択し、「作成」をクリックします。
-
また、「マイテーマ」タブからカスタムテンプレートを選択し、「編集」をクリックして更新することもできます。
-
「一般設定」タブで、ブランドに適した特定の名前を付けてテーマの定義を開始します。 デフォルトのメールのビューポート幅を調整したり、現在のテーマをエクスポートしてサンドボックス間で共有したりすることもできます。
-
右側のパネルを使用して、様々なタブを移動し、デザイン設定を更新します。
-
「カラー」タブから、次の操作を行います。
-
「編集」ボタンを使用して、ブランドのデフォルトカラーを含む カラーパレット を設定します。 プリセットを選択して、カラースキームをすばやく作成するか、テーマの各カラーを個別に調整します。 また、両方の組み合わせを使用することもできます。
-
「バリアントを追加」をクリックして、ライトモードやダークモードなど、複数のカラーバリアントを作成します。テーマの各バリアントには、独自のカラーパレットとニュアンスコントロールがあります。
-
各バリアントに対して、編集アイコンをクリックして、個々の要素を編集します。 作成したデフォルトのパレットや、任意のカスタムカラーを使用できます。
-
-
テキスト設定では、テーマ全体に使用するグローバルフォントを設定できます。 より精度の高い制御を行うには、各見出しと段落のタイプを編集して、フォント、サイズ、スタイルなどを調整することもできます。
note NOTE カスタム web フォントを選択する場合は、GmailやYahoo!などの多くのメールクライアントに注意してください。 外部web フォントはサポートしておらず、システムフォントにフォールバックします。 あらゆるメールクライアントでコンテンツが正しく表示されるように、フォールバックフォントを含めることを検討してください。 詳細情報 -
「間隔」タブで、リストから個々の要素を選択し、様々なコンポーネント間の間隔を適切に調整します。
-
右側の他のタブを使用すると、このテーマの各ボタン要素、ディバイダー、追加の画像書式設定、グリッドレイアウト間隔を個別に管理できます。
-
「保存」をクリックして、今後の使用のためにこのテーマを保存します。 これで、「マイテーマ」タブに表示されます。
メールコンテンツへのテーマの追加 apply-themes-email
コンテンツテンプレートやメールにデフォルトまたはカスタムのスタイルテーマを適用するには、次の手順に従います。
-
Journey Optimizer で、ジャーニーまたはキャンペーンにメールアクションを追加するか、メールコンテンツテンプレートを作成し、メール本文を編集します。
-
次のいずれかのアクションを選択できます。
-
ビルトインのメールテンプレートを選択して、E メールデザイナーを開きます。 各テンプレートに固有のデフォルトのテーマが自動的に適用されます。
-
新しいコンテンツをゼロからデザインし、「テーマを使用」を選択して、定義済みのスタイルテーマから開始します。
note caution CAUTION 手動スタイルモードを選択した場合は、デザインをリセットしない限り、テーマを適用できません。 テーマが設定されたコンテンツでフラグメントを活用するには、このフラグメント自体がテーマを使用して作成されている必要があります。 詳細情報
-
-
E メールデザイナーに移動したら、右側のパネルにある「テーマ」ボタンをクリックします。 デフォルトのテーマまたはテンプレートのテーマが表示されます。 このテーマでは、2 つのカラーバリアントを切り替えることができます。
-
現在使用しているテーマの横にある矢印をクリックします。 使用可能なカスタムテーマとアドビテーマのリストが表示されます。
-
「マイテーマ」をクリックし、作成したテーマを選択します。
-
ドロップダウンリストの外側をクリックします。 新しく選択したカスタムテーマのスタイルは、すべてのメールコンポーネントに自動的に適用されます。 カラーバリアントがある場合は、切り替えることができます。
-
コンテンツテンプレートでテーマを選択すると、「テーマを編集」ボタンをクリックして更新できます。 詳細情報
{width="40%"}
note NOTE このオプションは、メールコンテンツでテーマを使用する際は使用できません。 -
複数のカラーバリアントを使用するテーマを活用すると、特定の構造コンポーネントに対して特定のバリアントを選択できます。 これにより、コンテンツ全体のカラーバリアントを定義し、1 つの特定の構造に対してのみ異なるバリアントを使用できます。
note NOTE このアクションは、コンテンツコンポーネントに対して実行できません。 これを行うには、構造コンポーネントを選択し、右側の「スタイル」タブから「特定のテーマのバリアントを使用」オプションをクリックして、目的のバリアントをこの構造に適用します。
この例では、現在のテーマの最初のカラーバリアントがメールコンテンツ全体に適用されますが、3 番目のカラーバリアントは選択した構造に適用されます。 この特定の構造の本文とビューポートの背景色が、コンテンツの残りの部分と異なることがわかります。
テーマはいつでも切り替えることができます。 メールコンテンツは変更されませんが、スタイルは新しいテーマを反映して更新されます。
スタイルのロック解除 unlocking-styles
コンポーネントを選択した場合、「スタイル」タブの専用アイコンを使用してこのスタイルをロック解除できます。
選択したテーマは、引き続きこのコンポーネントに適用されますが、スタイル要素を上書きできます。 テーマを変更すると、新しいテーマは上書きされなかったスタイル要素にのみ適用されます。
例えば、テキストコンポーネントをロック解除すると、フォントカラーを黒から赤に変更できます。
テーマを変更すると、このコンポーネントのフォントカラーは赤のままですが、このコンポーネントの背景色は新しいテーマに合わせて変更されます。
フラグメントでのテーマの活用 leverage-themes-fragment
テーマが適用されたテンプレートまたはメールでフラグメントを活用するには、このフラグメント自体がテーマを使用して作成されている必要があります。 そうしないと、テーマが設定されたコンテンツでこのフラグメントを使用できなくなります。
テーマと互換性のあるフラグメントを作成するには、次の手順に従います。
-
Journey Optimizer で、ビジュアルフラグメントを作成し、「作成」をクリックして、フラグメントのコンテンツをデザインします。 方法についてはこちらを参照
-
「テーマを使用」を選択して、定義済みのスタイルテーマから開始します。
{width="100%"}
note caution CAUTION 手動スタイルモードを選択した場合は、フラグメントデザインをリセットしない限り、テーマを適用できません。 -
E メールデザイナーでは、フラグメントの作成を開始できます。
-
右側のパネルにある「テーマ」ボタンをクリックします。 デフォルトのテーマが表示されます。 このテーマでは、様々なカラーバリアントを切り替えることができます。
{align="center" width="100%" modal="regular"}
-
他のテーマを選択して、フラグメントコンテンツをプレビューできます。 これを行うには、デフォルトのテーマの横にある矢印を選択し、「テーマを選択」をクリックします。
{width="40%"}
-
「Adobe テーマ」タブと「マイテーマ」タブ間を移動して、フラグメントに互換性のあるテーマを(両方のタブから)最大 5 つ選択できます。
{width="70%"}
note caution CAUTION メールコンテンツでフラグメントを使用する際は、このフラグメントに定義したテーマを適用してください。 テーマを適用しないと、特に Outlook 2021 以前のバージョンで、表示の問題が発生する場合があります。 -
「閉じる」をクリックします。
-
デフォルトのテーマの横にある矢印をもう一度選択します。 これで、選択した様々なテーマを切り替えて、各スタイルのレンダリングをプレビューできるようになりました。
{width="90%"}
-
「テーマを選択」をもう一度クリックして、テーマを追加するか、選択を変更します。
テーマと互換性のあるテンプレートの作成 theme-convertor
Journey Optimizer を使用すると、手動スタイル設定を使用して作成したテンプレートをテーマ互換のコンテンツに変換できます。 これは、テーマが Journey Optimizer に導入される前にコンテンツテンプレートを作成した場合や、外部コンテンツをインポートしている場合に特に役立ちます。
-
メールコンテンツテンプレートを開き、E メールデザイナーを使用してこのコンテンツを編集します。
-
右側のパネルにある「テーマ」アイコンを選択し、「コンテンツからテーマを生成」ボタンをクリックします。
{width="100%"}
-
テーマを作成ウィンドウが開きます。 Journey Optimizer は、スタイル要素を自動的に検出し、新しいテーマに統合します。
{width="90%"}
-
テーマの名前を入力します。
-
カラーバリエーションの追加やフォントの編集など、ゼロからテーマを作成する場合と同じように、必要に応じて独自の調整を行います。方法を学ぶ
{width="90%"}
-
「保存」をクリックして、再利用のためにこの新しいテーマを保存します。 これで、このテーマを他のテーマなどのコンテンツに適用できるようになりました。 方法についてはこちらを参照