メールコンテンツへのブランドテーマの使用 email-brand-themes
技術的な知識がなくても、特定のブランドやスタイルに合わせて、再利用可能なメールコンテンツのデザインガイドラインを作成できます。 マーケターは、テーマを活用することで、視覚的に魅力的でブランドに即した電子メールをより早く、より少ない労力で利用し、独自のデザインニーズに合わせた高度なカスタマイズオプションを利用できます。
テーマのガイドラインと制限事項 themes-guidelines
テーマを扱う場合は、次のガイドラインと制限事項に注意してください。
-
空白のキャンバス（ゼロからデザイン）からメールまたはメールテンプレートを作成する場合、テーマモードを選択して、テーマを使用してコンテンツの作成を開始し、ブランドとデザインに合った特定のスタイルを適用できます。 手動モードを選択した場合、電子メールまたは電子メールテンプレートのデザインをリセットしない限り、テーマを適用することはできません。
-
フラグメント は、メールコンテンツの テーマモード と 手動モード の間で互換性がありません。 テーマが適用されているメールコンテンツでフラグメントを使用するには、フラグメントを テーマモード で作成する必要があります。
-
カスタムテーマに変更を加えても、既に使用しているすべての電子メールや電子メールテンプレートが自動的にカスケードされるわけではありません。 それぞれのコンテンツを編集して、テーマを更新します。
-
テーマを削除しても、既に適用されている電子メールや電子メールテンプレートには影響しません。
ブランドテーマの作成 create-theme
今後のメールコンテンツで、メールやメールテンプレートコンテンツに適用できる独自のブランドテーマを定義できます。
-
次のいずれかの方法を使用して、テーマツールにアクセスします。
-
新しい電子メールテンプレートを作成し、電子メールテンプレートを編集をクリックして、テンプレートをデザイン ページを起動します。
-
をクリック…メールコンテンツデザインスペースの右上にある詳細を選択し、デザインの変更を選択します。
確認ダイアログで、テンプレートの変更をクリックしてデザインページを開きます。
-
-
デザインページで、テーマの作成または編集を選択します。
-
初期設定のテーマを選ぶか、Adobeのテーマを使ってスタートを切ります。
note note NOTE カスタムテーマ（マイテーマ）のいずれかを出発点として使用する場合は、複製して、テーマを編集するときにテーマ名を変更できます。 -
「作成」をクリックします。
テーマの作成 ページには、開始テーマのすべての種類のテキスト、ボタン、コンテナの既存の要素を含むキャンバスが表示されます。
-
適切なナビゲーションを使用して、様々なテーマスタイルタブにアクセスし、テーマ設定を変更します。
新しいテーマ設定を定義すると、ビジュアル要素がキャンバス上で変更されます。 結果が望みのものでない場合は、右側のパネルの下部にある「取り消し」（
-
テーマの定義が完了したら、保存をクリックします。
-
閉じるをクリックしてテーマの作成 ページに戻り、次に キャンセル をクリックしてデザインページに戻ります。
次に、ゼロからデザインを選択してビジュアルデザインスペースを開き、 メールまたはテンプレートにテーマ を使用できます。
一般設定
「一般設定」タブで、テーマの基本的なパラメーターを定義します。
-
一意の テーマ名 を入力してください。
-
電子メールコンテンツ（本文）の ビューポート幅 を調整します。 上向き矢印と下向き矢印を使用して、幅を増減するか、値（ピクセル単位）を入力します。
カラー
「カラー」タブを選択し、設定を使用してテーマカラーパレットを定義します。
-
編集をクリックして、テーマのカラーを含むカラーパレットを表示します。
テーマに配色を使用するには、プリセットを選択するか、セット内の各色を調整します。 また、両方の組み合わせを使用することもできます。
上部の選択したカラー正方形の場合は、既知のRGB、HSL、HSB、または16進数の値を入力してカラーを設定できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
戻る矢印をクリックして、カラーパレット ツールを閉じます。
-
「バリエーションを追加」をクリックして、lightやdark モードなど、複数のカラーバリエーションを作成します。各バリエーションには独自のカラーパレットとニュアンスのコントロールがあります。
note note NOTE ブランドテーマごとに、最大4つのバリエーションを定義できます。 バリエーションごとに、編集 （
バリエーションで変更するカラーごとに、トグルを左または右に移動して、バリエーションを無効または有効にします。 有効なカラー設定の場合は、カラーの正方形をクリックしてカラーを選択します。
accordion バリエーションのカラー設定 設定はタイプに応じてグループ化されます。
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 タイプ 設定 説明 一般 
これらの設定によって、本文、構造、コンテナ、背景、リンク、グリッド、境界線の色が決まります。 見出し 
これらの設定は Heading要素に適用されます。ここでは、6つの見出しレベルごとにテキストと境界線の色を設定できます。 バリエーションの色を設定する各見出しレベルを展開します。段落 バリアントの 
これらの設定は Paragraph要素に適用されます。ここでは、3つの段落タイプごとにテキストと境界線の色を設定できます。 バリエーションのカラーを設定する各段落タイプを展開します。 ボタン バリエーションの 
この設定はボタン要素に適用されます。3つのボタンプリセット（プライマリ、セカンダリ、第3）のそれぞれに対して、塗りつぶし色、境界線の色、およびテキストカラーを設定できます。
テキスト設定
「テキスト設定」タブでは、テーマに使用するグローバルなフォントタイプ、スタイル、サイズを設定できます。 より詳細な制御を行うには、見出しタイプと段落タイプのパラメーターを編集することもできます。
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| タイプ | 設定 | 説明 |
| グローバル |
|
Font libraryを Standard または Google Fonts に設定します。 次に、使用するフォントファミリーを選択します。 これらのグローバルテキスト設定は、見出しレベルと段落タイプに異なるテキストスタイルを設定しない限り、全体に適用されます。 |
| 見出し |
|
設定する見出しレベルの場合は、H1、H2などを選択します。 Font libraryを Standard または Google Fonts に設定します。 次に、フォントファミリー、サイズ、スタイルを選択します。 テキストの配置を選択します：左、中央、右、または正当化。 |
| 段落 | タイプ P1
|
設定する段落タイプに対して、P1、P2などを選択します。 Font libraryを Standard または Google Fonts に設定します。 次に、フォントファミリー、サイズ、スタイルを選択します。 必要に応じて 行の高さ を調整します。 テキストの配置を選択します：左、中央、右、または正当化。 |
間隔と境界線
「間隔」タブでは、様々なエレメントタイプのパディングとマージンを設定できます。 種類を選択するには、コンテンツの種類を選択します。 次に、そのエレメントタイプに適用されるパディング、余白、コーナー、および境界線を設定します。
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| タイプ | 設定 | 説明 |
| 余白 |
|
「マージン」アイコンを選択して、CSS margin パラメーターを複製する設定を表示します。このパラメーターは、コンポーネントの境界線の外側のスペースを制御し、他のコンポーネントや要素と分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。 デザインのニーズに応じて、余白の値をピクセル単位で設定します。 コンポーネントのすべての辺、上下、左右、または各辺のマージンを個別に設定できます。 ロックおよびロック解除 アイコンをクリックして、上下および左右余白の値を同期または同期を解除します。 |
| パディング |
|
パディング アイコンを選択して、コンポーネント/要素のコンテンツと境界線の間のスペースであるCSS padding パラメーターをレプリケートする設定を表示します。 パディングには、コンテンツとコンポーネントの境界線の間の距離を制御するために使用できる内部間隔が用意されています。 デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上下、左右、または各辺のパディングを個別に設定できます。 ロックおよびロック解除 アイコンをクリックして、上下および左右のパディング値を同期または同期を解除します。 |
| 角 |
|
コンポーネントまたは要素の角の半径を定義するCSS border-radius パラメーターをレプリケートする設定を表示するには、角 アイコンを選択します。 コーナーに対するカーブに応じて数値を設定します。 値が0 （デフォルト）の場合、角は四角形になります。 |
境界線 トグルを右に移動して、境界線の表示オプションを有効にし、デザイン条件に従って設定します。
-
境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
境界線スタイルを設定するには、Solid、Dotted、Dashedなど、標準CSS
border-styleの値のリストから値を選択します。 -
境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
ボタン
「ボタン」タブでは、境界線の半径（シェイプ）、テキスト、サイズなど、ボタン要素に異なる属性（カラー以外）を設定できます。 3つのボタンプリセット（プライマリ、セカンダリ、第3段階）ごとに設定を変更できます。
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| タイプ | 設定 | 説明 |
| テキスト |
|
Font libraryを Standard または Google Fonts に設定します。 次に、フォントファミリー、サイズ、スタイルを選択します。 テキストの配置を選択します：左、中央、右、または正当化。 |
| 境界線 |
|
境界線 トグルを右に移動して、ボタンの境界線の表示オプションを有効にし、デザイン条件に従って設定します。 ピクセル数を増減して、境界線サイズ （線幅）を設定します。 Solid、Dotted、Dashedなど、標準CSS border-style値のリストから値を選択して、境界線スタイルを設定します。 |
| サイズ |
|
「高さ」オプションで、上下矢印アイコンをクリックして、ピクセル数を増減します。 空の値（自動）がデフォルトで、ボタンの高さが内容に応じてサイズ調整されます。 幅の場合、切り替えスイッチを使用して幅をピクセルまたはパーセント単位で設定します。 パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。 パーセンテージは、含まれるブロックのコンテンツボックスに基づいてボタンサイズを決定します。このボックスには、パディングと境界線は含まれません。 例えば、値が50の場合、ボタンの幅は、ブロックのコンテンツ幅の50%に設定されます。 ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。 空の値（自動）がデフォルトで、ボタンの幅はその内容に応じてサイズが設定されます。 |
ディバイダー
「Divider」タブでは、分割コンポーネントの行のスタイル設定とコンテナ設定を設定できます。
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| タイプ | 設定 | 説明 |
| Line |
|
Solid、Dotted、Dashedなど、標準CSS border-style値のリストから値を選択して、境界線スタイルを設定します。 |
| コンテナサイズ |
|
「高さ」オプションで、上向き矢印アイコンと下向き矢印アイコンをクリックして、コンポーネントまたは要素のピクセル数を増減します。 空の値（自動）がデフォルトで、その内容に応じて高さのサイズが設定されます（行のスタイル設定）。 幅の場合、切り替えスイッチを使用して幅をピクセルまたはパーセント単位で設定します。 パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。 パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントの幅を決定します。 例えば、値が50の場合、区切り記号の幅は、含まれるブロックのコンテンツ幅の50%に設定されます。 ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。 空の値（自動）がデフォルトで、ディバイダの幅をその内容に応じてサイズ設定します。 |
| 配置 |
|
含むブロック内の水平方向の整列を選択します：左、中央、または右。 |
グリッド
「グリッド」タブでは、グリッド要素の列と行の間隔を制御できます。
-
列の間隔 - グリッド列間の間隔のピクセル数を増減するには、上下の矢印アイコンをクリックします。 または、フィールドに数値を入力することもできます。
-
行の間隔 - グリッド行の間隔のピクセル数を増減するには、上下の矢印アイコンをクリックします。 または、フィールドに数値を入力することもできます。
テーマの編集
テーマの作成時に使用するのと同じワークフローとツールを使用して、テーマを編集できます。 違いは、マイテーマ タブを選択し、変更するカスタムテーマを選択することです。
右側のパネルを使用して、様々なタブを移動し、テーマ設定を変更します。
設定を変更すると、表示されるビジュアル要素が変更されます。 キャンバスの結果が目的と異なる場合は、右側のパネルの下部にある取り消し （
テーマの変更が完了したら、保存をクリックします。
カスタムテーマの管理
テーマの作成時と同じワークフローとツールを使用して、カスタムテーマを管理できます。 違いは、マイテーマ タブを選択し、表示されたリスト内でテーマを管理することです。
カスタムテーマのリストが多い場合は、検索 フィールドと他のフィルターを使用して、表示されるリストを減らします。 利用可能なテーマのリストを管理しながら、カスタムテーマをいつでも編集、削除、複製できます。
テーマの編集
-
変更するテーマを選択し、右上の「編集」をクリックします。
-
右側のナビゲーションを使用して、様々なスタイル設定タブを使用し、テーマ設定を変更します。
設定を変更すると、表示されるビジュアル要素が変更されます。 キャンバスの結果が目的と異なる場合は、右側のパネルの下部にある「取り消し」アイコンをクリックします。 やり直し アイコンをクリックして、変更を再適用します。
-
テーマの変更が完了したら、保存をクリックします。
テーマの削除または複製
テーマを見つけたら、詳細メニュー （…）をクリックします テーマカードの右下にあるアイコンをクリックし、実行するアクションを選択します。
-
複製 - テーマを複製するには、このアクションを選択します。 新しいテーマは、元のテーマの名前にの コピーが追加されているのと同じです。 テーマを編集するときに名前を変更できます。
-
削除 – このアクションを選択して、カスタムテーマを削除します。 確認ダイアログで、「削除」をクリックします。
note note NOTE テーマを削除しても、既に適用されている電子メールや電子メールテンプレートには影響しません。
メールコンテンツのオーサリングにテーマを使用する use-email-theme
新しい電子メールやメールテンプレートを作成する際には、コンテンツオーサリングプロセスを合理化し、定義された標準に沿ったデザインを確保できる、ブランドテーマを使用できます。 新しいフラグメントの場合は、フラグメントを保存する前にテーマを適用することもできます。 このフラグメントは、その時点から テーマモード のままであり、テーマモードにある電子メールや電子メールテンプレートに追加しても互換性があります。
-
次のいずれかのアクションを選択します。
-
テーマ（テーマモードで作成）を組み込んだメールテンプレートを選択します。 各テンプレートに固有のテーマが自動的に適用されます。
-
ゼロからデザイン オプションを使用し、テーマを使用を選択して、定義済みのスタイル設定テーマから開始します。
note important IMPORTANT 手動スタイル設定 モードを選択した場合は、テーマを適用するために電子メールデザインをリセットする必要があります。 テーマ モードを選択した場合、テーマ モードで作成された フラグメント のみがメールコンテンツに追加できます。
-
-
メールデザインスペースで、右側のテーマ （
デフォルトのテーマまたはテンプレートに適用されたテーマが表示されます。 このテーマのカラーバリエーションを切り替えることができます。
-
表示されているテーマの横にある矢印をクリックして、使用可能なカスタムテーマとAdobe テーマのリストを表示します。
-
「マイテーマ」をクリックし、カスタムテーマを選択します。
-
リストの外側をクリックします。
新しく選択したカスタムテーマは、キャンバス内のすべてのメールコンポーネントにスタイルを適用します。 カラーバリエーションを切り替えることができます。
-
選択したコンポーネントのテーマスタイルを上書きする必要がある場合は、コンポーネントスタイルのロック解除 （
確認ダイアログで、ロック解除をクリックします。
右側のパネルで「スタイル」タブを選択して、コンポーネントの設定を変更します。
メールコンテンツのテーマを変更
テーマモードで作成された電子メールまたは電子メールテンプレートの場合、いつでもテーマを変更できます。 メールコンテンツは変更されませんが、スタイルは新しいテーマを反映して更新されます。
-
デザインスペースで電子メールまたは電子メールテンプレートを開きます。
-
右側のテーマ （
適用されたテーマが右側のパネルに表示されます。
-
表示されているテーマの横にある矢印をクリックして、使用可能なカスタムテーマとAdobe テーマのリストを表示します。
-
別のテーマを選択。
-
リストの外側をクリックします。
選択したテーマは、キャンバス内のすべてのメールコンポーネントにスタイルを適用します。 カラーバリエーションを切り替えることができます。