メールテンプレートオーサリング

​ メールテンプレートを作成した後、ビジュアルデザインスペースを使用して、メールテンプレート内の構造コンポーネントとコンテンツコンポーネントを作成します。

構造とコンテンツの追加 structure-content

  1. コンテンツデザインを開始するには、構造​からアイテムをドラッグして、キャンバスにドロップします。

    必要な数だけ​ 構造 ​の項目を追加し、右側のペインで各項目の設定を編集します。

    note tip
    TIP
    n:n列 コンポーネントを選択して、選択した列数(3 ~ 10個)を定義します。 列の下にある矢印を移動して、各列の幅を定義することもできます。

    構造をキャンバスにドラッグして、設定を調整します {width="800" modal="regular"}

    各列のサイズは、構造コンポーネントの全幅の10%未満にすることはできません。 削除できるのは空の列のみです。

    これらのコンポーネントの使用と書式設定について詳しくは、構造コンポーネント​を参照してください。

  2. コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを1つ以上の構造コンポーネントに追加します。

    ​ コンテンツ要素をキャンバスにドラッグして、設定を調整します {width="800" modal="regular"}

  3. 必要に応じて、設定​または​スタイル タブで、各コンポーネントに対して追加のカスタマイズを行うことができます。

    例えば、各コンポーネントのテキストスタイル、パディング、マージンを変更できます。

  4. 条件付きコンテンツを追加し、条件付きルールに基づいてターゲットプロファイルにコンテンツを適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの「条件付きコンテンツを有効にする」アイコンをクリックします。

    詳しくは、条件付きコンテンツ​を参照してください。

カスタム CSS を追加

電子メールテンプレートデザイン空間で独自のカスタム CSSを直接追加できます。 カスタム CSSを使用して、高度で特定のスタイルを適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンポーネントを含める前に、この最高レベルのスタイル設定を追加することをお勧めします。

キャンバス内に少なくとも1つのコンテンツコンポーネントがある場合は、左側のナビゲーションツリーで​Body コンポーネントを選択して、カスタム CSS エディターにアクセスします。

​ ボディスタイルにアクセス ​ {width="800" modal="regular"}

  1. 右側に表示される スタイル タブで、「カスタム CSS を追加 をクリックします。

    note
    NOTE
    カスタム CSS を追加」ボタンは、「Body」コンポーネントが選択されている場合にのみ使用できます。 ただし、カスタムの CSS スタイルを、その中のすべてのコンポーネントに適用できます。

    カスタム CSS を追加 ポップアップエディターが、プレースホルダーコードのコメントと共に表示されます。

  2. エディターに CSS コードを入力します。

    カスタム CSS が有効で、適切な構文に従っていることを確認します。 入力した CSS が無効な場合は、エラーメッセージが表示され、CSS を保存できません。 詳しくは、CSS の有効性 ​ を参照してください。

  3. 保存」をクリックして、カスタム CSS を保存します。

    カスタムスタイルシートは、既存のコンテンツに適用されます。 必要に応じて、カスタム CSS が適用されていることを確認できます。 スタイルシートのアプリケーションを変更および調整する方法について詳しくは、​ トラブルシューティング ​ を参照してください。

NOTE
すべてのコンテンツを削除すると、CSS セクションが本文スタイルパネルに表示されなくなり、以前に定義したカスタム CSS は適用されなくなります。 コンテンツを再度追加すると、「CSS スタイル」セクションが再び表示され、カスタム CSS が再度適用されます。

フラグメントを追加

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

ビジュアルフラグメントは、Adobe Journey Optimizer B2B edition全体で複数のコンテンツアセットで参照できる、再利用可能なデザインコンポーネントです。 通常は、コンテンツのブロックを作成し、すばやく挿入することで、オーサリングをより迅速に、より一貫性のあるものにできます。

次の例では、コンテンツのオーサリング時にフラグメントを追加する手順の概要を示します。

  1. フラグメントのリストを開くには、「フラグメント」アイコン( ​ フラグメントアイコン ​ )を選択します。

    次の操作が可能です。

    • リストの並べ替え。
    • リストを参照、検索、またはフィルターします。
    • サムネール表示とリスト表示を切り替えます。
    • 最近作成したフラグメントを反映するには、リストを更新します。

    ​ リストからフラグメントを選択 {width="700" modal="regular"}

  2. 任意のフラグメントを構造コンポーネントにドラッグ&ドロップします。

    エディターは、メール構造のセクション/エレメント内でフラグメントをレンダリングします。

    note tip
    TIP
    フラグメントを追加して、メール内の水平方向のレイアウト全体を占めるようにするには、1:1列構造を追加してから、フラグメントをドラッグ&ドロップします。

    フラグメントのコンテンツは、構造内で動的に更新され、コンテンツ内でコンテンツがどのように表示されるかを示します。

カスタマイズ可能なフラグメントの編集可能なフィールド

ビジュアルフラグメントには、カスタマイズ可能な編集可能なフィールドを含めることができます。 カスタムフィールドを使用すると、フラグメントをコンテンツに組み込む際にパラメーターを変更し、元のフラグメントに影響を与えることなく、カスタマイズされたエクスペリエンスを作成できます。 フラグメント作成者は、テキスト、画像、ボタンのコンポーネントを​ カスタマイズするためにフラグメントをデザインできます。 含まれているフラグメントに編集可能なフィールドを含むコンポーネントが含まれている場合は、デフォルト値を変更してコンテンツに合わせてカスタマイズできます。

  1. フラグメントコンポーネントを選択します。

    右側に表示される設定には、デフォルト値を含むフィールドと編集可能フィールドがあります。

    ​ フラグメントコンポーネントパラメーターの変更 {width="700" modal="regular"}

  2. 必要に応じて、編集可能なフィールドを変更します。

テンプレートを保存した後、概要で「使用者」タブを選択すると、フラグメントの詳細ページに表示されます。

画像アセットの追加

Visual Content Editor で、左側のナビゲーションバーにある Assets Assets アイコン ​ )アイコンまたは Experience Manager Assets AEM Assets アイコン ​ )アイコンを選択します。 アセットセレクターから、ソースライブラリに保存されたアセットを直接選択できます。

NOTE
Adobe Experience Manager as a Cloud Services のプロビジョニングが行われている場合、ユーザーアカウントに必要な権限があれば、Journey Optimizer B2B editionとAdobe Experience Manager Assets as a Cloud Serviceの両方のリポジトリにアクセスできます。 これらのリポジトリは個別に存在し、同期していません。どちらのソースからも画像アセットを使用できます。
  • 新しいアセットを追加するには、画像アセットを構造コンポーネントにドラッグ&ドロップします。

    ​ 内部アセットをキャンバスにドラッグして、設定を調整します ​ {width="800" modal="regular"}

  • 既存の画像アセットを置き換えるには、キャンバスで画像アセットを選択し、画像ソースツールの アセットを選択 をクリックします。

    ​ ソースライブラリからアセットを選択 ​ {width="600" modal="regular"}

ソースタイプのアセットの使用について詳しくは、​ コンテンツオーサリングにアセットを使用する ​ を参照してください。

レイヤー、設定、スタイルの移動

ビジュアルデザイン空間でコンテンツを操作する際は、ナビゲーションツリーを使用して、コンポーネント、列、コンテンツ要素にアクセスできます。 左側の​ナビゲーションツリー アイコン( ​ ナビゲーションツリーアイコン ​ )をクリックすると、ツリーが表示されます。

​ コンテンツレイヤーにアクセス ​ {width="800" modal="regular"}

次の例では、構造コンポーネント内のパディングと垂直方向の整列を列で調整する手順の概要を示します。

  1. 構造コンポーネントの列をキャンバスで直接選択するか、左側に表示されている​ ナビゲーションツリー ​を使用して選択します。

  2. 列ツールバーで、列を選択 ツールをクリックし、編集するツールを選択します。

    構造ツリーから選択することもできます。 その列の編集可能なパラメーターは、右側の​設定 タブと​スタイル タブに表示されます。

    ビジュアルデザイナーに表示される 列コンポーネント ​ {width="800" modal="regular"}

  3. 列のプロパティを編集するには、右側の「スタイル」タブをクリックし、必要に応じて変更します。

    • 背景​の場合、必要に応じて背景色を変更します。

      透明な背景の場合は、チェックボックスをオフにします。 背景画像​設定を有効にして、単色の代わりに画像を背景として使用します。

    • 線形​の場合、上位中央、または​下位 アイコンを選択します。

    • パディング​の場合、すべての側面のパディングを定義します。

      パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。 同期を解除するには、ロック アイコンをクリックします。

    • 詳細 セクションを展開して、列のインラインスタイルを定義します。

    選択した列のスタイルを変更 {width="700" modal="regular"}

  4. 必要に応じて、これらの手順を繰り返して、コンポーネント内の他の列の整列とパディングを調整します。

  5. 変更を保存します。

コンテンツのパーソナライズ

Journey Optimizer B2B editionでは、インラインのシンプルな構文を使用して、中括弧{{}}で囲まれたパーソナライズされたコンテンツを使用したエクスプレッションを作成できます。 同じコンテンツまたはフィールドに複数の式を制限なく追加できます。

例えば、パーソナライゼーション式をHello {{lead.firstName}} {{lead.lastName}}として追加できます。 コンテンツを処理する場合、Journey Optimizer B2B editionは、エクスプレッションをExperience Platform データベースに含まれるデータに置き換えます。 最初の例は​ Hello John Doe ​です。

Journey Optimizer B2B editionでのパーソナライゼーションツールの使用について詳しくは、​ コンテンツパーソナライゼーション ​を参照してください。

NOTE
Journey Optimizer B2B editionは、電子メールのパーソナライゼーショントークンの​_キャメルケース_​構文に従って、他のAdobe Experience Platform アプリケーションと一致させ、一貫性のあるエクスペリエンスを実現します。 このトークン形式は、Handlebars テンプレート言語と完全に互換性があります。 この変更前に追加されたトークンは、自動的に更新されます。

次に、個人トークンとシステムトークンを使用してコンテンツをパーソナライズする手順の概要を示します。 これは、現在のJourney Optimizer B2B edition リリースを反映しています。

  1. テキストコンポーネントを選択し、ツールバーの「パーソナライゼーションを追加」( ​ パーソナライゼーションを追加アイコン ​ )アイコンをクリックします。

    ​ パーソナライズ アイコンをクリック ​ {width="600"}

    この操作を実行すると、Personalizationを編集 ダイアログが開きます。

  2. トークンの横にあるプラス(+)記号をクリックして、トークンを追加します。

    フォールバック付きのトークン(そのフィールドがリードに使用できない場合に表示されるデフォルトのテキスト)を追加する場合は、詳細 アイコン()をクリックし、フォールバックテキスト付きの挿入​を選択します。

    ​ トークンを使用してパーソナライズされたテキストを作成 {width="700" modal="regular"}

  3. 含める追加のトークンやその他の静的テキストを追加します。

  4. 保存」をクリックします。

    パーソナライゼーションスクリプトは、ビジュアルデザイン空間に表示されます。 これを選択して、必要なときに変更を加えることができます。

    ​ パーソナライゼーションスクリプトを選択 {width="600"}

リンクされたURL トラッキングを編集

リンクトラッキングパネルには、コンテンツ内の各URLを簡単に見つけることができる一元的なビューが用意されています。 左側の​リンク アイコン( ​ リンクを表示アイコン ​ )をクリックすると、コンテンツ内のすべてのリンク URLが表示されます。 テキストコンポーネント、ボタンコンポーネント、画像コンポーネント内のリンクです。

リストされたコンテンツリンクのトラッキングを定義するには、編集 編集アイコン ​ )アイコンをクリックし、トラッキングタイプ​または​ ラベル ​を変更します。

ダークモードのスタイル設定の適用

ダークモード​を使用して、電子メールクライアントでダークテーマの電子メール表示を確認します。 ダークモードまたはテーマを使用すると、サポートメールクライアントまたはアプリで、テキスト、ボタン、その他のビジュアル要素の背景が暗く、色が明るいメールを表示できます。 デザインキャンバスの右上で、セレクターを​ダークモード ​ ダークモードアイコン ​ )に変更します。 次に、ダークテーマが有効になっている場合に、サポートするメールクライアントが表示に使用する特定のカスタム設定をプレビューして定義します。

​ ダークモードのセレクターと、ダークモードで表示される電子メールコンテンツを示す電子メールデザインキャンバス ​ {width="700" modal="regular"}

ダークモードのスタイル設定とベストプラクティスについて詳しくは、​ メールコンテンツのダークモード ​を参照してください。

表示オプション

ビジュアルデザイン分野で利用可能な表示およびコンテンツ検証オプションを活用します。

  • プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。

  • デスクトップ、モバイル、またはテキストのみ/プレーンテキストのコンテンツ表示を切り替えます。

    • デバイス間でコンテンツをプレビューするには、Eye アイコンをクリックします。
    • すぐに使えるデバイスのいずれかを選択するか、カスタムディメンションを入力してコンテンツをプレビューします。

詳細オプション

メールデザインスペースの上部にある​その他… メニューから、次の操作を実行できます。

詳細をクリックしてテンプレートアクションにアクセス ​ {width="500"}

  • テンプレートをリセット – このオプションをクリックして、デザインキャンバスを空のスレートにクリアし、コンテンツの構築を再開します。
  • フラグメントとして保存 - テンプレートの全部または一部をフラグメントとして保存し、複数のメールまたはメールテンプレートで再利用できます。 フラグメントの名前と説明を指定し、使用可能なフラグメントのリストに保存します。
  • デザインを変更 - メールをデザイン ページに戻ります。 そこから、別のテンプレートを選択してデザインプロセスを再起動できます。 また、空白のキャンバス(クラシックモード)を使用するか、​ ブランドテーマ ​テーマモード)を使用して、コンテンツをゼロからデザインすることもできます。
  • HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式でローカルシステムにダウンロードします。
recommendation-more-help
journey-optimizer-b2b-help-user