メールテンプレートオーサリング
メールテンプレートを作成した後、ビジュアルデザインスペースを使用して、メールテンプレート内の構造コンポーネントとコンテンツコンポーネントを作成します。
構造とコンテンツの追加 structure-content
-
コンテンツデザインを開始するには、構造からアイテムをドラッグして、キャンバスにドロップします。
必要な数だけ 構造 の項目を追加し、右側のペインで各項目の設定を編集します。
note tip TIP n:n列 コンポーネントを選択して、選択した列数（3 ～ 10個）を定義します。 列の下にある矢印を移動して、各列の幅を定義することもできます。 
各列のサイズは、構造コンポーネントの全幅の10%未満にすることはできません。 削除できるのは空の列のみです。
-
「コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを1つ以上の構造コンポーネントに追加します。
-
必要に応じて、設定またはスタイル タブで、各コンポーネントに対して追加のカスタマイズを行うことができます。
例えば、各コンポーネントのテキストスタイル、パディング、マージンを変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてターゲットプロファイルにコンテンツを適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの「条件付きコンテンツを有効にする」アイコンをクリックします。
詳しくは、条件付きコンテンツを参照してください。
カスタム CSS を追加
電子メールテンプレートデザイン空間で独自のカスタム CSSを直接追加できます。 カスタム CSSを使用して、高度で特定のスタイルを適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンポーネントを含める前に、この最高レベルのスタイル設定を追加することをお勧めします。
キャンバス内に少なくとも1つのコンテンツコンポーネントがある場合は、左側のナビゲーションツリーでBody コンポーネントを選択して、カスタム CSS エディターにアクセスします。
-
右側に表示される スタイル タブで、「カスタム CSS を追加 をクリックします。
note NOTE 「カスタム CSS を追加」ボタンは、「Body」コンポーネントが選択されている場合にのみ使用できます。 ただし、カスタムの CSS スタイルを、その中のすべてのコンポーネントに適用できます。 カスタム CSS を追加 ポップアップエディターが、プレースホルダーコードのコメントと共に表示されます。
-
エディターに CSS コードを入力します。
カスタム CSS が有効で、適切な構文に従っていることを確認します。 入力した CSS が無効な場合は、エラーメッセージが表示され、CSS を保存できません。 詳しくは、CSS の有効性 を参照してください。
-
「保存」をクリックして、カスタム CSS を保存します。
カスタムスタイルシートは、既存のコンテンツに適用されます。 必要に応じて、カスタム CSS が適用されていることを確認できます。 スタイルシートのアプリケーションを変更および調整する方法について詳しくは、 トラブルシューティング を参照してください。
フラグメントを追加
ビジュアルフラグメントは、Journey Optimizer B2B Edition 全体で複数の内容アセットから参照できる再利用可能なデザインコンポーネントAdobe Systems。 これは通常、事前に作成してすばやく挿入できる内容ブロックであり、オーサリングをより迅速かつ一貫性のあるものにすることができます。
次の例は、内容の作成時にフラグメントを追加する手順を示しています。
-
フラグメントリストを開くには、「 フラグメント アイコン(
次の操作が可能です。
- リストを並べ替えます。
- リストを参照、検索、またはフィルター処理します。
- サムネールビューとリストビューを切り替えます。
- 最近作成したフラグメントのいずれかを反映するようにリスト更新します。
-
フラグメントのいずれかを構造コンポーネントにドラッグ&ドロップします。
編集者は、E メール構造のセクション/要素内のフラグメントをレンダリングします。
note tip TIP 電子メール内の水平レイアウト全体を占めるようにフラグメントを追加するには、1 対 1 の列構造を追加し、フラグメントをそこにドラッグアンドドロップします。 フラグメントの内容は構造内で動的に更新され、内容が内容内でどのように表示されるかが示されます。
カスタマイズ可能なフラグメント内の編集可能フィールド
ビジュアルフラグメントには、カスタマイズ可能な編集可能なフィールドを含めることができます。 特例文字フィールドを使用すると、フラグメントを内容に組み込むときにパラメーターを変更し、元のフラグメントに影響を与えずにカスタマイズされたエクスペリエンスを作成できます。 フレーム作成者は、テキスト、画像、およびボタンコンポーネントの カスタマイズ用のフラグマンを設計 できます。 含まれているフラグメントに編集可能なフィールドを持つコンポーネントが含まれている場合は、デフォルト値を変更して内容に合わせてカスタマイズできます。
-
フラグメントコンポーネントを選択します。
右側に表示される設定には、デフォルト値を持つフィールドと編集可能なフィールドが含まれます。
-
必要に応じて編集可能なフィールド変更します。
テンプレートを保存した後、概要で「使用者」タブを選択すると、フラグメントの詳細ページに表示されます。
画像アセットの追加
Visual Content Editor で、左側のナビゲーションバーにある Assets （
-
新しいアセットを追加するには、画像アセットを構造コンポーネントにドラッグ&ドロップします。
-
既存の画像アセットを置き換えるには、キャンバスで画像アセットを選択し、画像ソースツールの アセットを選択 をクリックします。
ソースタイプのアセットの使用について詳しくは、 コンテンツオーサリングにアセットを使用する を参照してください。
レイヤー、設定、スタイルの移動
ビジュアルデザインスペースでコンテンツを操作する際は、ナビゲーションツリーを使用して、コンポーネント、列およびコンテンツ要素にアクセスできます。 左側の ナビゲーションツリー アイコン（
次の例では、列を持つ構造コンポーネント内のパディングと垂直方向の整列を調整する手順について説明します。
-
キャンバスで構造コンポーネントの列を直接選択するか、左側に表示される ナビゲーションツリー を使用して選択します。
-
列ツールバーから 列を選択 ツールをクリックし、編集する列を選択します。
構造ツリーから選択することもできます。 その列の編集可能なパラメーターは、右側の 設定 タブと スタイル タブに表示されます。
-
列のプロパティを編集するには、右側の「スタイル」タブをクリックし、必要に応じて変更します。
-
背景 については、必要に応じて背景色を変更します。
背景を透明にするには、このチェック ボックスをオフにします。 「背景画像」設定を有効にして、単色の代わりに画像を背景として使用します。
-
「整列」では、「上」、「中央」または「下」アイコンを選択します。
-
パディング については、すべての辺のパディングを定義します。
パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。ロック アイコンをクリックして、同期を解除します。
-
「詳細」セクションを拡張して、列のインラインスタイルを定義します。
-
-
必要に応じて、これらの手順を繰り返して、コンポーネントの他の列の整列とパディングを調整します。
-
変更を保存します。
コンテンツのパーソナライズ
Journey Optimizer B2B Editionでは、インラインのシンプルな構文を使用して、括弧{{}}で囲まれたパーソナライズされたコンテンツを使用して式を作成できます。 同じコンテンツまたはフィールドに複数の式を制限なく追加できます。
例えば、パーソナライゼーション式をHello {{lead.firstName}} {{lead.lastName}}として追加できます。 コンテンツを処理する場合、Journey Optimizer B2B Editionは、エクスプレッションをExperience Platform データベースに含まれるデータに置き換えます。 最初の例は Hello John Doe です。
Journey Optimizer B2B Editionでのパーソナライゼーションツールの使用について詳しくは、 コンテンツパーソナライゼーション を参照してください。
次に、個人トークンとシステムトークンを使用してコンテンツをパーソナライズする手順の概要を示します。 これは、現在のJourney Optimizer B2B Edition リリースを反映しています。
-
テキストコンポーネントを選択し、ツールバーの「パーソナライゼーションを追加」（
この操作を実行すると、Personalizationを編集 ダイアログが開きます。
-
トークンの横にあるプラス（+）記号をクリックして、トークンを追加します。
フォールバック付きのトークン（そのフィールドがリードに使用できない場合に表示されるデフォルトのテキスト）を追加する場合は、詳細 アイコン（…）をクリックし、フォールバックテキスト付きの挿入を選択します。
-
含める追加のトークンやその他の静的テキストを追加します。
-
「保存」をクリックします。
パーソナライゼーションスクリプトは、ビジュアルデザイン空間に表示されます。 これを選択して、必要なときに変更を加えることができます。
リンクされたURL トラッキングを編集
-
左側の リンク アイコン（
-
必要に応じて、編集 （
リンクに タグ を追加することもできます。
ダークモードのスタイル設定の適用
ダークモードを使用して、電子メールクライアントでダークテーマの電子メール表示を確認します。 ダークモードまたはテーマを使用すると、サポートメールクライアントまたはアプリで、テキスト、ボタン、その他のビジュアル要素の背景が暗く、色が明るいメールを表示できます。 デザインキャンバスの右上で、セレクターをダークモード （
ダークモードのスタイル設定とベストプラクティスについて詳しくは、 メールコンテンツのダークモード を参照してください。
表示オプション
ビジュアルデザイン分野で利用可能な表示およびコンテンツ検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、またはテキストのみ/プレーンテキストのコンテンツ表示を切り替えます。
- デバイス間でコンテンツをプレビューするには、Eye アイコンをクリックします。
- すぐに使えるデバイスのいずれかを選択するか、カスタムディメンションを入力してコンテンツをプレビューします。
詳細オプション
メールデザインスペースの上部にあるその他… メニューから、次の操作を実行できます。
- テンプレートをリセット – このオプションをクリックして、デザインキャンバスを空のスレートにクリアし、コンテンツの構築を再開します。
- フラグメントとして保存 - テンプレートの全部または一部をフラグメントとして保存し、複数のメールまたはメールテンプレートで再利用できます。 フラグメントの名前と説明を指定し、使用可能なフラグメントのリストに保存します。
- デザインを変更 - メールをデザイン ページに戻ります。 そこから、別のテンプレートを選択してデザインプロセスを再起動できます。 また、空白のキャンバス（クラシックモード）を使用するか、 ブランドテーマ （テーマモード）を使用して、コンテンツをゼロからデザインすることもできます。
- HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式でローカルシステムにダウンロードします。