ドキュメントJourney Optimizer B2BJourney Optimizer B2B エディションのドキュメント

[ベータ版]{class="badge informative"}

メールコンテンツへのブランドテーマの使用 email-brand-themes

Last update: Mon Sep 08 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 中級
  • ユーザー

テーマを使用すると、非テクニカルデザイナーは、特定のブランドやスタイルに合わせた再利用可能なメールコンテンツデザインガイドラインを作成できます。 テーマを使用すると、マーケターは、視覚的に魅力的でブランドと一貫性のあるメールをより迅速かつ少ない労力で活用し、独自のデザインニーズに合わせて高度なカスタマイズオプションを提供できます。

テーマのガイドラインと制限 themes-guidelines

テーマを使用する場合は、次のガイドラインと制限事項に注意してください。

  • 空のキャンバスからメールまたはメールテンプレートを作成する（ゼロからデザイン）場合、テーマモード を選択して、ブランドとデザインに合った特定のスタイル設定を適用するテーマを使用してコンテンツの作成を開始できます。 手動モード を選択した場合、メールまたはメールテンプレートのデザインをリセットしない限り、テーマを適用できません。

  • フラグメントは、メールコンテンツの テーマモード と 手動モード 間で相互互換性がありません。 また、テーマが適用されるメールコンテンツでフラグメントを使用するには、フラグメントを テーマモード で作成する必要があります。

  • カスタムテーマに対する変更によって、そのテーマを既に使用しているすべてのメールまたはメールテンプレートに自動的にカスケードされるわけではありません。 それぞれのコンテンツを編集して、テーマを更新します。

  • テーマを削除しても、既に適用されているメールまたはメールテンプレートには影響しません。

ブランドテーマの作成 create-theme

今後のメールコンテンツでメールおよびメールテンプレートコンテンツに適用できる、独自のブランドテーマを定義します。

  1. 次のいずれかの方法を使用して、テーマツールにアクセスします。

    • 新しいメールテンプレートを作成、「メールテンプレートを編集」をクリックして テンプレートのデザイン ページを起動します。

    • 「…」をクリックします。その他 メールコンテンツデザインスペースの右上で、「デザインを変更」を選択します。

      デザインを変更する {width="700" modal="regular"}

      確認ダイアログで、「テンプレートを変更」をクリックしてデザインページを開きます。

  2. デザインページで、「テーマを作成または編集」を選択します。

    テーマの作成または編集 {width="800" modal="regular"}

  3. デフォルトのテーマを選択するか、任意のAdobe テーマを使用して、開始点として使用します。

    note note
    NOTE
    カスタムテーマ（マイテーマ）のいずれかを出発点として使用する場合は、 テーマを複製できます。また、 テーマを編集するときにテーマ名を変更できます。

  4. 「作成」をクリックします。

    テーマを作成 – デフォルトのテーマを選択 {width="750" modal="regular"}

    テーマを作成 ページは、開始テーマのすべてのタイプのテキスト、ボタンおよびコンテナの既存の要素を含むキャンバスを提供します。

  5. 適切なナビゲーションを使用して、様々なテーマスタイルのタブにアクセスし、テーマの設定を変更します。

    新しいテーマ設定を定義すると、キャンバス上の視覚要素が変更されます。 結果が期待どおりでない場合は、右側のパネルの下部にある 取り消し （ 取り消しアイコン {width="16"}）アイコンをクリックします。 やり直し （ やり直しアイコン {width="16"}）アイコンをクリックして、変更を再適用します。

  6. テーマの定義が完了したら、「保存」をクリックします。

  7. 「閉じる」をクリックして テーマを作成 ページに戻り、「キャンセル」をクリックしてデザインページに戻ります。

    その後、「ゼロからデザイン を選択してビジュアルデザインスペースを開き、メールまたはテンプレートの テーマを使用できます。

一般設定

一般設定 タブで、テーマの基本パラメーターを定義します。

  • 一意の テーマ名 を入力します。

  • メールコンテンツ（本文）の ビューポートの幅 を調整します。 上下の矢印キーを使用して幅を増減するか、値をピクセル単位で入力します。

テーマの一般設定 {width="450"}

色

「カラー」タブを選択し、設定を使用してテーマのカラーパレットを定義します。

テーマの色の設定 {width="450"}

  • 編集 をクリックして、テーマのカラーを含むカラーパレットを表示します。

    テーマのカラースキームを使用したり、セットの各色を調整したりするには、プリセット を選択します。 また、両方の組み合わせを使用することもできます。

    テーマの色の設定 – プリセットの変更 {width="350"}

    上部の選択したカラーの正方形に対して、既知のRGB、HSL、HSB、または 16 進数値を入力してカラーを設定できます。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

    戻る 矢印をクリックして、カラーパレットツールを閉じます。

  • 「バリアントを追加」をクリックして、明 モードや 暗 モードなど、複数のカラーバリアントを作成します。各バリアントには、独自のカラーパレットとニュアンスのコントロールがあります。 最大 6 つのバリアントを使用できます。

    各バリアントに対して、「編集 （ 編集アイコン ）」アイコンをクリックします。 デフォルトパレットまたは任意のカスタムカラーを使用できます。

    テーマのカラー設定 – バリアントを編集 {width="450"}

    バリアントに対して変更する色ごとに、切り替えスイッチを左または右に移動して、無効または有効にします。 カラー設定を有効にするには、カラーの四角形をクリックしてカラーを選択します。

    テーマカラー設定 – バリアントカラーセレクター {width="450"}

    accordion
    バリアントのカラー設定

    設定は、タイプに従ってグループ化されます。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3
    タイプ 設定 説明
    ​ 一般 ​ バリアントの一般的なカラー設定 {width="300"} これらの設定を使用すると、ボディ、構造物、コンテナ、背景、リンク、グリッド、および境界の色を設定できます。
    ​ 見出し ​ バリアントの見出しカラー設定 {width="300"} これらの設定は Heading の要素に適用され、6 つの見出しレベルのそれぞれにテキストと境界線の色を設定できます。 バリアントの色を設定する各見出しレベルを展開します。
    ​ 段落 ​ バリアントの段落カラー設定 {width="300"} これらの設定は Paragraph 要素に適用され、3 つの段落タイプのそれぞれにテキストと境界線のカラーを設定できます。 バリアントの色を設定する各段落タイプを展開します。
    ​ ボタン ​ バリアントのボタンのカラー設定 {width="300"} この設定はボタン要素に適用され、プライマリ、セカンダリ、{3 次 の 3 つのボタンプリセットのそれぞれに対して、塗りつぶしカラー、境界線のカラー、テキストカラーを 定できます。

テキスト設定

「テキスト設定」タブでは、テーマに使用するグローバルなフォントタイプ、スタイル、サイズを設定できます。 より詳細な制御を行うために、これらのパラメーターを見出しおよび段落タイプ用に編集することもできます。

テーマテキストの設定 {width="450"}

タイプ別テキスト設定
table 0-row-3 1-row-3 2-row-3 3-row-3
タイプ 設定 説明
​ グローバル ​ グローバルテキスト設定用のライブラリを選択 {width="300"} フォントライブラリ を 標準 または Google フォント に設定します。 次に、使用するフォントファミリーを選択します。 見出しレベルと段落タイプに異なるテキストスタイルを設定しない限り、これらのグローバルテキスト設定は全体に適用されます。
​ 見出し ​ H1 の見出しテキストスタイル {width="300"} 設定する見出しレベルに対して、H1、H2 などを選択します。 フォントライブラリ を 標準 または Google フォント に設定します。 次に、フォントファミリー、サイズ、スタイルを選択します。 テキストの配置 （左揃え、中央揃え、右揃え、両端揃え のいずれかを選択します。
​ 段落 ​ タイプ P1 の段落テキストスタイル {width="300"} 設定する見出しレベルに対して、P1、HP などを選択します。 フォントライブラリ を 標準 または Google フォント に設定します。 次に、フォントファミリー、サイズ、スタイルを選択します。 必要に応じて 線の高さ を調整します。 テキストの配置 （左揃え、中央揃え、右揃え、両端揃え のいずれかを選択します。

間隔と境界線

「間隔」タブでは、様々な要素タイプに合わせてパディングと余白を設定できます。 タイプを選択 には、コンテンツタイプを選択します。 次に、その要素タイプに適用できるパディング、余白、コーナー、境界線を設定します。

テーマの間隔と境界線の設定 {width="450"}

間隔の設定
table 0-row-3 1-row-3 2-row-3 3-row-3
タイプ 設定 説明
​ 余白 ​ 余白の設定 {width="300"} マージン アイコンを選択すると、CSS margin パラメーターを複製した設定が表示されます。このパラメーターは、コンポーネントの境界線の外側のスペースを制御し、他のコンポーネントや要素から分離します。 コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。 デザインのニーズに応じて、マージンの値をピクセル単位で設定します。 コンポーネントのすべての辺、上部のボタン、左右または各辺の余白を個別に設定できます。 ロック アイコンと ロック解除 アイコンをクリックして、上下と左右のマージン値を同期または非同期にします。
​ 小漕ぎ ​ パディングの設定 {width="300"} パディング アイコンを選択して、コンポーネント/要素のコンテンツとその境界線の間のスペースである CSS padding パラメーターをレプリケートする設定を表示します。 パディングには、コンテンツとコンポーネントの境界線との距離を制御するために使用できる内部間隔が用意されています。 デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上部ボタン、左右または各辺のパディングを個別に設定できます。 ロック アイコンと ロック解除 アイコンをクリックして、上下および左右のパディング値を同期または同期解除します。
​ コーナー ​ コーナー設定 {width="300"} 「コーナー」アイコンを選択すると、コンポーネントや要素のコーナーの半径を定義する CSS border-radius パラメーターを複製した設定が表示されます。 コーナーに必要なカーブに従って数値を設定します。 値が 0 （デフォルト）の場合、コーナーは 2 乗になります。
境界線の設定

境界線 トグルを右に切り替えて、境界線の表示オプションを有効にし、設計条件に従って設定します。

  • 境界線のサイズ （線の幅）を設定するには、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。

  • 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値（実線、点線、破線 など）を選択します。

  • 境界線の表示場所を指定するには、それぞれの 境界線の位置 チェックボックスを選択します。

境界線のスタイル {width="250"}

ボタン

ボタン タブでは、境界線の半径（シェイプ）、テキスト、サイズなど、ボタン要素に対して色以外の様々な属性を設定できます。 3 つのボタンプリセット（プライマリ、セカンダリ、{3 次 ）をそれぞれ変 できます。

テーマ ボタンの設定 {width="450"}

ボタン設定
table 0-row-3 1-row-3 2-row-3 3-row-3
タイプ 設定 説明
テキスト ボタンテキストの設定 {width="300"} フォントライブラリ を 標準 または Google フォント に設定します。 次に、フォントファミリー、サイズ、スタイルを選択します。 テキストの配置 （左揃え、中央揃え、右揃え、両端揃え のいずれかを選択します。
​ 境界線 ​ ボタンの境界線の設定 {width="300"} ボーダー トグルを右に切り替えて、ボタンのボーダー表示オプションを有効にし、デザイン条件に従って設定します。 ピクセル数を増減して ボーダーのサイズ （ラインの幅）を設定します。 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値（実線、点線、破線 を選択します。
​ サイズ ​ ボタンのサイズ設定 {width="300"} 「高さ」オプションでは、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。 デフォルトは空の値（Auto）で、ボタンの内容に応じてボタンの高さのサイズを指定します。 幅 には、切り替えスイッチを使用して幅をピクセルまたはパーセンテージで設定します。 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 割合は、ボタンを含むブロックのコンテンツボックス（パディングと境界線を除く）に基づいてボタンのサイズを決定します。 例えば、値が 50 の場合、ボタンの幅は、ボタンを含むブロックコンテンツの幅の 50% に設定されます。 ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、ボタンの内容に応じてボタンの幅をサイズ設定します。

ディバイダー

「ディバイダー」タブでは、ディバイダーコンポーネントの行のスタイル設定とコンテナ設定を行うことができます。

テーマ区切り設定 {width="450"}

ディバイダーの設定
table 0-row-3 1-row-3 2-row-3 3-row-3
タイプ 設定 説明
Line ディバイダーの linesettings {width="300"} 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値（実線、点線、破線 を選択します。
​ コンテナのサイズ ​ ディバイダーコンテナのサイズ設定 {width="300"} 「高さ」オプションで、上向き矢印アイコンと下向き矢印アイコンをクリックして、コンポーネントまたは要素のピクセル数を増減します。 デフォルトは空の値（自動）で、コンテンツに応じて高さのサイズを設定します（行のスタイル設定）。 幅 には、切り替えスイッチを使用して幅をピクセルまたはパーセンテージで設定します。 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 パーセンテージは、含まれているブロックのコンテンツボックスに基づいて要素の幅を決定します。 例えば、値を 50 に設定すると、ディバイダーの幅は、その値を含むブロックコンテンツの幅の 50% に設定されます。 ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、コンテンツに応じてディバイダーの幅が調整されます。
​ 整合性 ​ ディバイダーの位置揃えの設定 {width="300"} 含まれるブロック内の水平方向の配置を 左、中央、または 右 から選択します。

グリッド

「グリッド」タブでは、グリッド要素の列と行の間隔を制御できます。

  • 列の間隔 – の上向き矢印アイコンと下向き矢印アイコンをクリックして、グリッド列の間隔のピクセル数を増減します。 または、フィールドに数値を入力できます。

  • 行のギャップ – の上下の矢印アイコンをクリックして、グリッド行のギャップのピクセル数を増減します。 または、フィールドに数値を入力できます。

テーマグリッドの設定 {width="700" modal="regular"}

テーマの編集

テーマの作成時に使用するのと同じワークフローおよびツールを使用して、テーマを編集できます。 違いは、「マイテーマ」タブを選択し、変更するカスタムテーマを選択している点です。

テーマを編集 – 編集するカスタムテーマを選択します {width="750" modal="regular"}

右側のパネルを使用して様々なタブ間を移動し、テーマの設定を変更します。

テーマを編集 – 編集するカスタムテーマを選択します {width="800" modal="regular"}

設定を変更すると、表示される視覚要素が変わります。 キャンバス上の結果が目的どおりでない場合は、右側のパネルの下部にある 取り消し （ 取り消しアイコン {width="16"}）アイコンをクリックします。 やり直し （ やり直しアイコン {width="16"}）アイコンをクリックして、変更を再適用します。

テーマの変更が完了したら、「保存」をクリックします。

NOTE
保存した変更は、そのテーマを現在使用しているすべてのメールまたはメールテンプレートに自動的にカスケードされるわけではありません。 テーマを更新し、更新されたスタイルに一致するようにそれぞれのコンテンツを編集します。

カスタムテーマの管理

テーマを作成する際に使用するのと同じワークフローおよびツールを使用して、カスタムテーマを管理できます。 違いは、「マイテーマ」タブを選択し、表示されたリスト内のテーマを管理することです。

カスタムテーマのリストが多数ある場合は、「検索」フィールドとその他のフィルターを使用して、表示されるリストを減らします。 使用可能なテーマのリストを管理する際に、カスタムテーマの編集、削除または複製をいつでも行うことができます。

テーマの編集 – カスタムテーマのリストをフィルタリング {width="750" modal="regular"}

テーマの編集

  1. 変更するテーマを選択し、右上の 編集 をクリックします。

    テーマを編集 – 編集するカスタムテーマを選択します {width="750" modal="regular"}

  2. 右側のナビゲーションを使用して、様々なスタイル設定タブを使用し、テーマの設定を変更します。

    テーマを編集 – 編集するカスタムテーマを選択します {width="800" modal="regular"}

    設定を変更すると、表示される視覚要素が変わります。 キャンバス上の結果が目的の結果でない場合は、右側のパネルの下部にある 取り消し アイコンをクリックできます。 やり直し アイコンをクリックして、変更を再適用します。

  3. テーマの変更が完了したら、「保存」をクリックします。

NOTE
保存したテーマの変更は、そのテーマを現在使用しているすべてのメールまたはメールテンプレートに自動的にカスケードされるわけではありません。 テーマを更新し、更新されたスタイルに一致するようにそれぞれのコンテンツを編集します。

テーマの削除または複製

テーマを見つけたら、テーマカードの右下にある その他メニュー （…）アイコンをクリックし、実行するアクションを選択します。

テーマを編集 – 編集するカスタムテーマを選択します {width="220"}

  • 複製 - テーマを複製するには、このアクションを選択します。 新しいテーマは、元のテーマの名前に のコピー が追加されたものと同じです。 テーマを編集 するときに名前を変更できす。

  • 削除 - カスタムテーマを削除する場合は、このアクションを選択します。 確認ダイアログで、「削除」をクリックします。

    note note
    NOTE
    テーマを削除しても、既に適用されているメールまたはメールテンプレートには影響しません。

メールコンテンツのオーサリングにテーマを使用 use-email-theme

新しいメールまたはメールテンプレートを作成する際には、コンテンツオーサリングプロセスを合理化し、定義済みの標準にデザインが準拠していることを確認するブランドテーマを使用できます。 新しいフラグメントの場合、フラグメントを保存する前にテーマを適用することもできます。 フラグメントは、その時点から テーマモード のままであり、同じく テーマモード のメールおよびメールテンプレートに追加するための互換性があります。

  1. 次のいずれかのアクションを選択します。

    • （テーマモード で作成した）テーマが組み込まれた電子メールテンプレートを選択します。 各テンプレートに固有のテーマが自動的に適用されます。

    • ゼロからデザイン オプションを使用し、テーマを使用 を選択して、事前定義済みのスタイル設定テーマから始めます。

      メールの作成 – テーマを使用 {width="450"}

      note important
      IMPORTANT
      手動スタイル設定 モードを選択した場合、テーマを適用するには、メールデザインをリセットする必要があります。
      テーマ モードを選択した場合は、 テーマモードでも作成された フラグメント のみをメールコンテンツに追加できます。

  2. メールデザインスペースで、右側の テーマ （ テーマアイコン ）アイコンをクリックします。

    メールデザインスペース – テーマアイコンを選択 {width="600" modal="regular"}

    デフォルトのテーマ、またはテンプレートに適用されるテーマが表示されます。 このテーマのカラーバリエーションを切り替えることができます。

  3. 表示されたテーマの横にある矢印をクリックして、使用可能なカスタムテーマとAdobe テーマのリストを表示します。

  4. マイテーマ をクリックし、カスタムテーマを選択します。

    メールデザインスペース – カスタムテーマを選択 {width="325"}

  5. リストの外側をクリックします。

    新しく選択したカスタムテーマは、キャンバス内のすべてのメールコンポーネントにスタイルを適用します。 カラーバリエーションを切り替えることができます。

  6. 選択したコンポーネントのテーマスタイルを上書きする必要がある場合は、「コンポーネントスタイルのロックを解除」アイコン（ コンポーネントスタイルのロック解除アイコン ）をクリックします。

    メールデザインスペース – コンポーネントのテーマスタイルのロックを解除 {width="600" modal="regular"}

    確認ダイアログで、「ロック解除」をクリックします。

    右パネルの「スタイル」タブを選択し、コンポーネントの設定を変更します。

    メールデザインスペース – コンポーネントのテーマスタイルのロックを解除 {width="600" modal="regular"}

メールコンテンツのテーマの変更

テーマモード で作成されたメールまたはメールテンプレートの場合、いつでもテーマを変更できます。 メールコンテンツは変更されませんが、スタイルは新しいテーマを反映して更新されます。

  1. デザインスペースでメールまたはメールテンプレートを開きます。

  2. 右側の テーマ （ テーマアイコン ）アイコンをクリックします。

    適用されたテーマが右側のパネルに表示されます。

  3. 表示されたテーマの横にある矢印をクリックして、使用可能なカスタムテーマとAdobe テーマのリストを表示します。

  4. 別のテーマを選択します。

  5. リストの外側をクリックします。

    選択したテーマは、キャンバス内のすべてのメールコンポーネントにスタイルを適用します。 カラーバリエーションを切り替えることができます。

recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0