メールメッセージの作成
ジャーニーアクションノード 🔗にメールアセットを追加した後、メールメッセージのコンテンツを定義できます。
右側のパネルの「詳細」タブの「メールコンテンツを編集」をクリックします。
このアクションにより、電子メールデザインツールが起動し、次のオプションから電子メールのデザイン方法を選択できます。
-
ビジュアルデザインインターフェイスを使用して メールをゼロからデザイン 。
-
ファイルまたは .zip フォルダーから既存の HTML コンテンツを読み込みます。
メールコンテンツを作成してパーソナライズした後、コンテンツを書き出して検証または後で使用できます。 「HTMLを書き出し」をクリックして、コンテンツをHTMLとアセットを含む.zip ファイルとして保存します。
メールをゼロからデザイン design-from-scratch
ビジュアルコンテンツデザイン機能を使用して、メールの構造とコンテンツを定義します。 シンプルなドラッグ&ドロップ操作で構造コンポーネントを追加、移動させることで、メールコンテンツのレイアウトと整理を数秒でデザインすることができます。
-
テンプレートのデザイン ホームページから、最初からデザイン オプションを選択します。
-
メールを作成 ダイアログで、作成するメールコンテンツのタイプを選択します。
-
テーマを使用 – このオプションを選択すると、テーマモードで電子メールを作成できます。 このモードでは、定義済みのブランドテーマを使用して、コンテンツのオーサリングプロセスを効率化し、定義された標準に合わせてデザインを調整できます。
-
手動スタイル設定 – このオプションを選択すると、手動モードで電子メールを作成できます。 このモードでは、空白のカンバスに追加するすべての構造およびコンテンツコンポーネントのスタイル設定を手動で設定します。
-
-
構造とコンテンツ をテンプレートに追加します。
コンテンツに問題がなければ、保存をクリックします。
既存のHTML コンテンツのインポート
読み込むコンテンツは次のとおりです。
-
スタイルシートが組み込まれたHTML ファイル
-
HTML ファイル、スタイルシート(.css)および画像を含む.zip ファイル
note NOTE .zip ファイル構造に制限はありません。 ただし、.zip フォルダーのツリー構造に合わせて、相対参照を指定する必要があります。 画像は常に、接続されているMarketo Engage Assets リポジトリにアップロードされます。 Experience Manager Assetsで画像ファイルを管理する場合は、そのアプリインターフェイスで個別にアップロードし、電子メールデザインスペースの画像リンクを変更します。
HTML コンテンツを含むファイルを読み込むには:
-
テンプレートのデザイン ホームページから、HTMLの読み込み オプションを選択します。
-
HTML コンテンツを含んだ HTML または .zip ファイルをドラッグ&ドロップし、「読み込み」をクリックします。
<table> タグを HTML ファイルの最初のレイヤーとして使用すると、上部レイヤータグの背景や幅の設定などのスタイルが失われる可能性があります。ビジュアルメールエディターツールを使用して、必要に応じてインポートしたコンテンツをパーソナライズできます。
テンプレートを選択
次の中から選択できます。
-
サンプルテンプレート. Journey Optimizerのインターフェイスには、20種類の電子メールテンプレートが用意されています。
-
保存済みテンプレート. テンプレート メニューを使用してゼロから作成するか、コンテンツテンプレートとして保存 オプションを使用してジャーニーのメールから保存した、保存されたカスタムテンプレートを使用します。
「デザインテンプレートを選択」セクションを使用して、テンプレートからコンテンツの作成を開始します。 サンプルテンプレートまたはJourney Optimizer B2B edition インスタンスから保存したカスタムメールテンプレートを使用できます。
テンプレートをデザイン ホームページでは、「サンプルテンプレート」タブがデフォルトで選択されています。 カスタムテンプレートを使用するには、「保存したテンプレート」タブを選択します。
現在のサンドボックスで作成されたすべてのメールテンプレートのリストが表示されます。 名前、最終変更日、最終作成日で並べ替えることができます。
リストから必要なテンプレートを選択します。
選択後、テンプレートのプレビューが表示されます。 プレビューモードでは、右向き矢印と左向き矢印を使用して、1つのカテゴリのすべてのテンプレート(選択内容に応じてサンプルまたは保存済み)間を移動できます。
表示が使用する内容と一致したら、プレビューウィンドウの右上にある「このテンプレートを使用」をクリックします。
このアクションにより、コンテンツがビジュアルコンテンツデザイナーにコピーされ、必要に応じてコンテンツを編集できます。
Adobe Journey Optimizer B2B editionでは、電子メールや電子メールテンプレートの作成に使用できる 標準 の電子メールテンプレートを提供しています。
構造とコンテンツの追加 structure-content
-
コンテンツデザインを開始するには、構造からアイテムをドラッグして、キャンバスにドロップします。
必要な数だけ 構造 の項目を追加し、右側のペインで各項目の設定を編集します。
note tip TIP n:n列 コンポーネントを選択して、選択した列数(3 ~ 10個)を定義します。 列の下にある矢印を移動して、各列の幅を定義することもできます。 {width="800" modal="regular"}
各列のサイズは、構造コンポーネントの全幅の10%未満にすることはできません。 削除できるのは空の列のみです。
これらのコンポーネントの使用と書式設定について詳しくは、構造コンポーネントを参照してください。
-
「コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを1つ以上の構造コンポーネントに追加します。
{width="800" modal="regular"}
-
必要に応じて、設定またはスタイル タブで、各コンポーネントに対して追加のカスタマイズを行うことができます。
例えば、各コンポーネントのテキストスタイル、パディング、マージンを変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてターゲットプロファイルにコンテンツを適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの「条件付きコンテンツを有効にする」アイコンをクリックします。
詳しくは、条件付きコンテンツを参照してください。
カスタム CSS を追加
独自のカスタム CSSをメールデザイン内で直接追加できます。 カスタム CSSを使用して、高度で特定のスタイルを適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンテンツコンポーネントを含める前に、このレベルの高いスタイル設定を追加することをお勧めします。
キャンバス内に少なくとも1つのコンテンツコンポーネントがある場合は、左側のナビゲーションツリーでBody コンポーネントを選択して、カスタム CSS エディターにアクセスします。
-
右側に表示される スタイル タブで、「カスタム CSS を追加 をクリックします。
note NOTE 「カスタム CSS を追加」ボタンは、「Body」コンポーネントが選択されている場合にのみ使用できます。 ただし、カスタムの CSS スタイルを、その中のすべてのコンポーネントに適用できます。 カスタム CSS を追加 ポップアップエディターが、プレースホルダーコードのコメントと共に表示されます。
-
エディターに CSS コードを入力します。
カスタム CSS が有効で、適切な構文に従っていることを確認します。 入力した CSS が無効な場合は、エラーメッセージが表示され、CSS を保存できません。 詳しくは、CSS の有効性 を参照してください。
-
「保存」をクリックして、カスタム CSS を保存します。
カスタムスタイルシートは、既存のコンテンツに適用されます。 必要に応じて、カスタム CSS が適用されていることを確認できます。 スタイルシートのアプリケーションを変更および調整する方法について詳しくは、 トラブルシューティング を参照してください。
フラグメントを追加
ビジュアルフラグメントは、Adobe Journey Optimizer B2B edition全体で複数のコンテンツアセットで参照できる、再利用可能なデザインコンポーネントです。 通常は、コンテンツのブロックを作成し、すばやく挿入することで、オーサリングをより迅速に、より一貫性のあるものにできます。
次の例では、コンテンツのオーサリング時にフラグメントを追加する手順の概要を示します。
-
フラグメントのリストを開くには、「フラグメント」アイコン(
)を選択します。次の操作が可能です。
- リストの並べ替え。
- リストを参照、検索、またはフィルターします。
- サムネール表示とリスト表示を切り替えます。
- 最近作成したフラグメントを反映するには、リストを更新します。
{width="700" modal="regular"}
-
任意のフラグメントを構造コンポーネントにドラッグ&ドロップします。
エディターは、メール構造のセクション/エレメント内でフラグメントをレンダリングします。
note tip TIP フラグメントを追加して、メール内の水平方向のレイアウト全体を占めるようにするには、1:1列構造を追加してから、フラグメントをドラッグ&ドロップします。 フラグメントのコンテンツは、構造内で動的に更新され、コンテンツ内でコンテンツがどのように表示されるかを示します。
カスタマイズ可能なフラグメントの編集可能なフィールド
ビジュアルフラグメントには、カスタマイズ可能な編集可能なフィールドを含めることができます。 カスタムフィールドを使用すると、フラグメントをコンテンツに組み込む際にパラメーターを変更し、元のフラグメントに影響を与えることなく、カスタマイズされたエクスペリエンスを作成できます。 フラグメント作成者は、テキスト、画像、ボタンのコンポーネントを カスタマイズするためにフラグメントをデザインできます。 含まれているフラグメントに編集可能なフィールドを含むコンポーネントが含まれている場合は、デフォルト値を変更してコンテンツに合わせてカスタマイズできます。
-
フラグメントコンポーネントを選択します。
右側に表示される設定には、デフォルト値を含むフィールドと編集可能フィールドがあります。
{width="700" modal="regular"}
-
必要に応じて、編集可能なフィールドを変更します。
メールが保存されると、要約で「使用者」タブを選択すると、フラグメントの詳細ページに表示されます。
画像アセットの追加
Visual Content Editor で、左側のナビゲーションバーにある Assets (
-
新しいアセットを追加するには、画像アセットを構造コンポーネントにドラッグ&ドロップします。
{width="800" modal="regular"}
-
既存の画像アセットを置き換えるには、キャンバスで画像アセットを選択し、画像ソースツールの アセットを選択 をクリックします。
{width="600" modal="regular"}
ソースタイプのアセットの使用について詳しくは、 コンテンツオーサリングにアセットを使用する を参照してください。
レイヤー、設定、スタイルの移動
ビジュアルデザイン空間でコンテンツを操作する際は、ナビゲーションツリーを使用して、コンポーネント、列、コンテンツ要素にアクセスできます。 左側のナビゲーションツリー アイコン(
次の例では、構造コンポーネント内のパディングと垂直方向の整列を列で調整する手順の概要を示します。
-
構造コンポーネントの列をキャンバスで直接選択するか、左側に表示されている ナビゲーションツリー を使用して選択します。
-
列ツールバーで、列を選択 ツールをクリックし、編集するツールを選択します。
構造ツリーから選択することもできます。 その列の編集可能なパラメーターは、右側の設定 タブとスタイル タブに表示されます。
ビジュアルデザイナーに表示される
{width="800" modal="regular"}
-
列のプロパティを編集するには、右側の「スタイル」タブをクリックし、必要に応じて変更します。
-
背景の場合、必要に応じて背景色を変更します。
透明な背景の場合は、チェックボックスをオフにします。 背景画像設定を有効にして、単色の代わりに画像を背景として使用します。
-
線形の場合、上位、中央、または下位 アイコンを選択します。
-
パディングの場合、すべての側面のパディングを定義します。
パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。 同期を解除するには、ロック アイコンをクリックします。
-
詳細 セクションを展開して、列のインラインスタイルを定義します。
{width="700" modal="regular"}
-
-
必要に応じて、これらの手順を繰り返して、コンポーネント内の他の列の整列とパディングを調整します。
-
変更を保存します。
コンテンツのパーソナライズ
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 リリースを反映しています。
-
テキストコンポーネントを選択し、ツールバーの「パーソナライゼーションを追加」(
)アイコンをクリックします。 {width="600"}
この操作を実行すると、Personalizationを編集 ダイアログが開きます。
-
トークンの横にあるプラス(+)記号をクリックして、トークンを追加します。
フォールバック付きのトークン(そのフィールドがリードに使用できない場合に表示されるデフォルトのテキスト)を追加する場合は、詳細 アイコン(…)をクリックし、フォールバックテキスト付きの挿入を選択します。
{width="700" modal="regular"}
-
含める追加のトークンやその他の静的テキストを追加します。
-
「保存」をクリックします。
パーソナライゼーションスクリプトは、ビジュアルデザイン空間に表示されます。 これを選択して、必要なときに変更を加えることができます。
{width="600"}
リンクされたURL トラッキングを編集
リンクトラッキングパネルには、コンテンツ内の各URLを簡単に見つけることができる一元的なビューが用意されています。 左側のリンク アイコン(
リストされたコンテンツリンクのトラッキングを定義するには、編集 (
メール配信システム(Marketo Engage経由)は、送信時に一意のトラッキングリダイレクトを使用して、HTML メール内のすべてのURLを自動的にラップします。 トラッキングタイプを使用して、リンクのトラッキングを制御します。
-
トークンなしで追跡 - システムはクリックを登録しますが、ユーザーがweb ページで次に行うことを追跡します。 これは、mkt_tokを正しく処理しない可能性のあるサードパーティシステムを扱う場合など、特定の技術的な場合に重要になる可能性があります。 ただし、後続のweb トラッキングは制限されています。
-
mkt-tokでトラッキング - トラッキングトークン(mkt_tok)を使用して、Munchkinを通じて後続のweb アクティビティをトラッキングします。 受信者がリンクをクリックすると、アクティビティログにクリックメール イベントが登録され、そのアクティビティが安全に追跡され、Cookieが適用されて今後のサイトインタラクションが監視されます。
-
トラッキングしない - システムは、リンクに関連付けられたアクティビティを追跡しません。 この情報は、表示先ページで URL パラメーターをサポートしていないためにページリンクエラーになる場合などに役立ちます。
note NOTE メールが365日前に送信され、過去180日間に誰もそのリンクをクリックしなかった場合、システムはデータベースからURLへのルートをプルーニングします。 この削除により、リンクが壊れます。 リンクを永続的にしたい場合は、トラッキングを無効にする必要があります。
ダークモードのスタイル設定の適用
ダークモードを使用して、電子メールクライアントでダークテーマの電子メール表示を確認します。 ダークモードまたはテーマを使用すると、サポートメールクライアントまたはアプリで、テキスト、ボタン、その他のビジュアル要素の背景が暗く、色が明るいメールを表示できます。 デザインキャンバスの右上で、セレクターをダークモード (
ダークモードのスタイル設定とベストプラクティスについて詳しくは、 メールコンテンツのダークモード を参照してください。
表示オプション
ビジュアルメールエディターで利用可能な表示およびコンテンツ検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、またはテキストのみ/プレーンテキストのコンテンツ表示を切り替えます。
- デバイス間でコンテンツをプレビューするには、表示 アイコンをクリックします。
- 定義済みのデバイスのいずれかを選択するか、カスタムディメンションを入力してコンテンツをプレビューします。
詳細オプション
ビジュアルデザインスペースの上部にある「その他…」メニューから、次の操作を実行できます。
- メールをリセット – このオプションをクリックして、メールデザインキャンバスをクリアし、コンテンツの作成を再開します。
- フラグメントとして保存 – 電子メールのすべてまたは一部をフラグメントとして保存し、複数の電子メールまたは電子メールテンプレートで再利用できます。 フラグメントの名前と説明を指定し、使用可能なフラグメントのリストに保存します。
- デザインを変更 - メールをデザイン ページに戻ります。 そこから、別のテンプレートを選択してデザインプロセスを再起動できます。 また、空白のキャンバス(クラシックモード)を使用するか、 ブランドテーマ (テーマモード)を使用して、コンテンツをゼロからデザインすることもできます。
- コンテンツテンプレートとして保存 – 複数のメールまたはメールテンプレートで再利用するメールテンプレートとしてメール本文を保存します。 テンプレートの名前と説明を入力し、保存したメールテンプレートのリストに保存します。
- HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式でローカルシステムにダウンロードします。
メールを確認およびテスト email-testing
メッセージコンテンツを定義したら、テストプロファイルを使用してプレビューを表示し、プルーフを送信し、デスクトップとモバイルの縦横比でのレンダリングを確認できます。 パーソナライズされたコンテンツを挿入した場合は、テストプロファイルデータを使用して、このコンテンツがメッセージにどのように表示されるかをプレビューできます。
メールコンテンツを プレビューするには、コンテンツをシミュレートをクリックし、テストプロファイルを選択して、人物プロファイルデータを使用してメッセージを確認します。
メールコンテンツを検証およびレビューするには、その他のツールにアクセスします。