メールテンプレートオーサリング
メールテンプレートを作成した後、ビジュアルデザイナーを使用して、メールテンプレートの構造コンポーネントとコンテンツコンポーネントを作成します。
構造とコンテンツを追加 structure-content
-
コンテンツデザインを開始するには、構造 から項目をドラッグし、キャンバスにドロップします。
必要に応じて 構造 から項目を追加し、右側のパネルで各項目の設定を編集します。
note tip TIP n:n 列 コンポーネントを選択して、列数（3～10）を任意に定義します。 また、列の下に矢印を移動して、各列の幅を定義することもできます。 
各列のサイズを構造コンポーネントの全幅の 10% 未満にすることはできません。 削除できるのは空の列のみです。
-
「コンテンツ」セクションを展開し、必要な数の要素を 1 つ以上の構造コンポーネントに追加します。
-
必要に応じて、「設定」タブまたは スタイル タブで各コンポーネントに追加のカスタマイズを加えるこ ができ す。
例えば、各コンポーネントのテキストスタイル、パディングまたは余白を変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてコンテンツをターゲットプロファイルに適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの 条件付きコンテンツの有効化 アイコンをクリックします。
詳しくは、条件付きコンテンツ を参照してください。
フラグメントを追加
ビジュアルコンテンツエディターでは、「フラグメント」アイコンが左側に表示されます。 次の例では、フラグメントをテンプレートコンテンツに追加する手順の概要を説明します。
-
フラグメントリストを開くには、フラグメント アイコン（
次の操作が可能です。
- リストを並べ替えます。
- リストを参照、検索またはフィルターします。
- サムネール表示とリスト表示を切り替えます。
- 最近作成したフラグメントが反映されるように、リストを更新します。
-
任意のフラグメントを構造コンポーネントプレースホルダーにドラッグ&ドロップします。
エディターは、メール構造のセクション/要素内でフラグメントをレンダリングします。
フラグメントのコンテンツは構造内で動的に更新され、コンテンツがメールにどのように表示されるかが表示されます。
メールを保存した後、概要の「使用者」タブを選択すると、フラグメントの詳細ページに表示されます。 メールテンプレートに追加されたフラグメントは、テンプレート内では編集できません。ソースフラグメントがコンテンツを定義します。
アセットの追加
Visual Content Editor で、左側に表示されている Assets アイコン（
次の例では、テンプレートコンテンツにアセットを追加する手順の概要を説明します。
-
アセットライブラリを開くには、Assets アイコンをクリックします。
アセットセレクターから、ソースライブラリに保存されたアセットを直接選択できます。
-
新しいアセットを追加するには、画像アセットを構造コンポーネントにドラッグ&ドロップします。
ソースタイプのアセットの使用について詳しくは、 コンテンツへのアセットの追加を参照してください。
-
キャンバスで既存の画像アセットを選択して置き換え、画像ソースツールの アセットを選択 をクリックします。
レイヤー、設定、スタイルの移動
ビジュアルデザイナーでコンテンツを操作する際に、ナビゲーション ツリーを使用してレイヤー/コンテナおよび要素にアクセスできます。 ナビゲーション アイコンをクリックして、キャンバスの左側にツリーを表示します。
次の例では、列で構成される構造コンポーネント内のパディングと垂直方向の整列を調整する手順について説明します。
-
キャンバスで構造コンポーネントの列を直接選択するか、左側に表示される ナビゲーションツリー を使用して選択します。
-
列ツールバーから 列を選択 ツールをクリックし、編集する列を選択します。
構造ツリーから選択することもできます。 その列の編集可能なパラメーターは、右側の 設定 タブと スタイル タブに表示されます。
-
列のプロパティを編集するには、右側の「スタイル」タブをクリックし、必要に応じて変更します。
-
背景 については、必要に応じて背景色を変更します。
背景を透明にするには、このチェック ボックスをオフにします。 「背景画像」設定を有効にして、単色の代わりに画像を背景として使用します。
-
「整列」では、「上」、「中央」または「下」アイコンを選択します。
-
パディング については、すべての辺のパディングを定義します。
パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。ロック アイコンをクリックして、同期を解除します。
-
「詳細」セクションを拡張して、列のインラインスタイルを定義します。
-
-
必要に応じて、これらの手順を繰り返して、コンポーネントの他の列の整列とパディングを調整します。
-
変更を保存します。
コンテンツのパーソナライズ
Journey Optimizer B2B Edition では、インラインのシンプルな構文を使用します。この構文を使用すると、パーソナライズされたコンテンツを二重の中括弧 {} で囲んだ式を作成することができます。 同じコンテンツまたはフィールドに、制限なく複数の式を追加できます。
例:
-
Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}} -
Hello {{profile.person.name.fullName}}
Journey Optimizer B2B Edition は、メッセージ（メールおよび SMS）を処理する際に、式をExperience Platformデータベースに含まれるデータに置き換えます。 最初の例は、Hello John Doe となります。
次の例では、リード/アカウント属性とシステムトークンを使用してコンテンツをパーソナライズする手順の概要を説明します。
-
テキストコンポーネントを選択し、ツールバーの パーソナライゼーションを追加 アイコンをクリックします。
これにより、「Personalizationを編集 ダイアログが開きます。
-
+ または … をクリックして、空白スペースにトークンを追加します。
-
「保存」をクリックします。
リンクされた URL トラッキングを編集
-
左側の リンク アイコンをクリックすると、追跡するコンテンツのすべての URL が表示されます。
-
必要に応じて、編集 （鉛筆）アイコンをクリックし、トラッキングタイプ または ラベル を変更します。
リンクに タグ を追加することもできます。
オプションを表示
ビジュアルデザイナーで使用できる表示およびコンテンツの検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、テキストのみ/プレーンテキストのいずれかでコンテンツの表示を切り替えます。
- 目 アイコンをクリックすると、デバイス間でコンテンツをプレビューできます。
- 標準提供のデバイスの 1 つを選択するか、カスタムサイズを入力してコンテンツをプレビューします。
詳細オプション
電子メールデザイナーの上部にある その他… メニューから、次のアクションを実行できます。
- テンプレートをリセット – このオプションをクリックすると、ビジュアルデザイナーのキャンバスを空白のスレートに戻し、コンテンツの作成を再開できます。
- フラグメントとして保存 - テンプレートのすべてまたは一部をフラグメントとして保存し、複数のメールまたはメールテンプレートで再利用します。 フラグメントの名前と説明を指定し、使用可能なフラグメントのリストに保存します。
- デザインを変更 - テンプレートのデザイン ページに戻ります。 ここから、テンプレートをゼロから設計するか、既存のテンプレートを使用して設計プロセスを再開するかを選択できます。
- 書き出しHTML - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式でローカルシステムにダウンロードします。