メールメッセージの作成

ジャーニーアクションノード 🔗にメールアセットを追加した後、メールメッセージのコンテンツを定義できます。

右側のパネルの「詳細」タブの「メールコンテンツを編集」をクリックします。

​ 「メールコンテンツを編集」をクリック ​ {width="700" modal="regular"}

このアクションにより、電子メールデザインツールが起動し、次のオプションから電子メールのデザイン方法を選択できます。

メールコンテンツを作成してパーソナライズした後、コンテンツを書き出して検証または後で使用できます。 「HTMLを書き出し」をクリックして、コンテンツをHTMLとアセットを含む.zip ファイルとして保存します。

TIP
生成AIを活用したAdobe Journey Optimizer B2B editionのAI アシスタントを利用すれば、コンテンツを進化させることができます。 AI アシスタントを利用すれば、電子メール全体やターゲットを絞ったテキストコンテンツを生成し、オーディエンスの共感を呼ぶ画像に対してAI アシスタントのレコメンデーションを得ることで、配信の効果を最適化することができます。 詳細情報

メールをゼロからデザイン design-from-scratch

ビジュアルコンテンツデザイン機能を使用して、メールの構造とコンテンツを定義します。 シンプルなドラッグ&ドロップ操作で構造コンポーネントを追加、移動させることで、メールコンテンツのレイアウトと整理を数秒でデザインすることができます。

  1. テンプレートのデザイン ホームページから、最初からデザイン オプションを選択します。

  2. メールを作成 ダイアログで、作成するメールコンテンツのタイプを選択します。

    • テーマを使用 – このオプションを選択すると、テーマモード​で電子メールを作成できます。 このモードでは、定義済みのブランドテーマを使用して、コンテンツのオーサリングプロセスを効率化し、定義された標準に合わせてデザインを調整できます。

    • 手動スタイル設定 – このオプションを選択すると、手動モード​で電子メールを作成できます。 このモードでは、空白のカンバスに追加するすべての構造およびコンテンツコンポーネントのスタイル設定を手動で設定します。

  3. 構造とコンテンツ ​をテンプレートに追加します。

  4. ​ リンクのレビューと更新

  5. 電子メールをテスト ​

コンテンツに問題がなければ、保存​をクリックします。

既存のHTML コンテンツのインポート

読み込むコンテンツは次のとおりです。

  • スタイルシートが組み込まれたHTML ファイル

  • HTML ファイル、スタイルシート(.css)および画像を含む.zip ファイル

    note
    NOTE
    .zip ファイル構造に制限はありません。 ただし、.zip フォルダーのツリー構造に合わせて、相対参照を指定する必要があります。 画像は常に、接続されているMarketo Engage Assets リポジトリにアップロードされます。 Experience Manager Assetsで画像ファイルを管理する場合は、そのアプリインターフェイスで個別にアップロードし、電子メールデザインスペースの画像リンクを変更します。

HTML コンテンツを含むファイルを読み込むには​:

  1. テンプレートのデザイン ホームページから、HTMLの読み込み オプションを選択します。

  2. HTML コンテンツを含んだ HTML または .zip ファイルをドラッグ&ドロップし、「読み込み」をクリックします。

zip ファイルにhtml コンテンツを読み込む {width="500"}

NOTE
<table> タグを HTML ファイルの最初のレイヤーとして使用すると、上部レイヤータグの背景や幅の設定などのスタイルが失われる可能性があります。

ビジュアルメールエディターツールを使用して、必要に応じてインポートしたコンテンツをパーソナライズできます。

テンプレートを選択

次の中から選択できます。

  • サンプルテンプレート. Journey Optimizerのインターフェイスには、20種類の電子メールテンプレートが用意されています。

  • 保存済みテンプレート. テンプレート メニューを使用してゼロから作成するか、コンテンツテンプレートとして保存 オプションを使用してジャーニーのメールから保存した、保存されたカスタムテンプレートを使用します。

デザインテンプレートを選択」セクションを使用して、テンプレートからコンテンツの作成を開始します。 サンプルテンプレートまたはJourney Optimizer B2B edition インスタンスから保存したカスタムメールテンプレートを使用できます。

保存されたテンプレート

テンプレートをデザイン ホームページでは、「サンプルテンプレート」タブがデフォルトで選択されています。 カスタムテンプレートを使用するには、「保存したテンプレート」タブを選択します。

現在のサンドボックスで作成されたすべてのメールテンプレートのリストが表示されます。 名前最終変更日最終作成日​で並べ替えることができます。

保存したテンプレートを選択 {width="800" modal="regular"}

リストから必要なテンプレートを選択します。

選択後、テンプレートのプレビューが表示されます。 プレビューモードでは、右向き矢印と左向き矢印を使用して、1つのカテゴリのすべてのテンプレート(選択内容に応じてサンプルまたは保存済み)間を移動できます。

保存したテンプレートをプレビュー {width="800" modal="regular"}

表示が使用する内容と一致したら、プレビューウィンドウの右上にある「このテンプレートを使用」をクリックします。

このアクションにより、コンテンツがビジュアルコンテンツデザイナーにコピーされ、必要に応じてコンテンツを編集できます。

サンプルテンプレート

Adobe Journey Optimizer B2B editionでは、電子メールや電子メールテンプレートの作成に使用できる​ 標準 ​の電子メールテンプレートを提供しています。

Adobeが提供するテンプレートを選択 {width="800" modal="regular"}

NOTE
保存したテンプレートには、1つ以上のコンポーネントにガバナンス(コンテンツロック)設定を適用することができます。 ビジュアルデザインスペースでは、管理されたテンプレートから電子メールを作成する際に、ロックされたコンポーネントに関するガイドラインが表示されます。

構造とコンテンツの追加 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 エディターにアクセスします。

NOTE
メールメッセージがロックされたコンテンツ 🔗を含む テンプレートを使用してデザインされている場合、コンテンツにカスタム CSSを追加することはできません。 ボタンのラベルが​ カスタム CSS を表示 ​に変わり、コンテンツに既に存在するカスタム 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"}

NOTE
マイトークン​がアカウントジャーニーに定義されている場合は、メールコンテンツにこれらのジャーニー固有のトークンを使用することもできます。 詳しくは、電子メールのパーソナライゼーション用カスタムトークン ​を参照してください。

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

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

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

編集アイコンをクリックしてリンク追跡にアクセス ​ {width="400"}

メール配信システム(Marketo Engage経由)は、送信時に一意のトラッキングリダイレクトを使用して、HTML メール内のすべてのURLを自動的にラップします。 トラッキングタイプ​を使用して、リンクのトラッキングを制御します。

  • トークンなしで追跡 - システムはクリックを登録しますが、ユーザーがweb ページで次に行うことを追跡します。 これは、mkt_tokを正しく処理しない可能性のあるサードパーティシステムを扱う場合など、特定の技術的な場合に重要になる可能性があります。 ただし、後続のweb トラッキングは制限されています。

  • mkt-tokでトラッキング - トラッキングトークン(mkt_tok)を使用して、Munchkinを通じて後続のweb アクティビティをトラッキングします。 受信者がリンクをクリックすると、アクティビティログに​クリックメール イベントが登録され、そのアクティビティが安全に追跡され、Cookieが適用されて今後のサイトインタラクションが監視されます。

  • トラッキングしない - システムは、リンクに関連付けられたアクティビティを追跡しません。 この情報は、表示先ページで URL パラメーターをサポートしていないためにページリンクエラーになる場合などに役立ちます。

    note
    NOTE
    メールが365日前に送信され、過去180日間に誰もそのリンクをクリックしなかった場合、システムはデータベースからURLへのルートをプルーニングします。 この削除により、リンクが壊れます。 リンクを永続的にしたい場合は、トラッキングを無効にする必要があります。

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

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

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

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

表示オプション

ビジュアルメールエディターで利用可能な表示およびコンテンツ検証オプションを活用します。

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

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

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

詳細オプション

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

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

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

メールを確認およびテスト email-testing

メッセージコンテンツを定義したら、テストプロファイルを使用してプレビューを表示し、プルーフを送信し、デスクトップとモバイルの縦横比でのレンダリングを確認できます。 パーソナライズされたコンテンツを挿入した場合は、テストプロファイルデータを使用して、このコンテンツがメッセージにどのように表示されるかをプレビューできます。

メールコンテンツを​ プレビューするには、コンテンツをシミュレート​をクリックし、テストプロファイルを選択して、人物プロファイルデータを使用してメッセージを確認します。

電子メールコンテンツをシミュレートして、デザインを確認する {width="700" modal="regular"}

メールコンテンツを検証およびレビューするには、その他のツールにアクセスします。

recommendation-more-help
journey-optimizer-b2b-help-user