メールメッセージのオーサリング
ジャーニーアクションノードにメールアセットを追加した後、メールメッセージのコンテンツを定義できます。
右側のパネルの 詳細 タブにある メールコンテンツを編集 をクリックします。
このアクションは、メールデザインツールを起動し、次のオプションからメールのデザイン方法を選択できます。
-
E メールDesignerインターフェイスを使用して ゼロからメールをデザインします。
-
ファイルまたは .zip フォルダーから既存の HTML コンテンツを読み込みます。
-
既存のテンプレートを選択– 組み込みまたはカスタムメールテンプレートのリストから行います。
メールコンテンツを作成およびパーソナライズした後、コンテンツを書き出して、検証したり、後で使用したりできます。 「HTMLを書き出し」をクリックして、HTMLとアセットを含む.zip ファイルとしてコンテンツを保存します。
メールをゼロからデザイン design-from-scratch
ビジュアルコンテンツデザイン スペースを使用して、メールの構造とコンテンツを定義します。 簡単なドラッグ&ドロップ操作で構造コンポーネントを追加して移動することで、再利用可能なメールコンテンツの形状を数秒でデザインできます。
-
テンプレートをデザイン ホームページで「ゼロからデザイン」オプションを選択します。
-
メールを作成 ダイアログで、作成するメールコンテンツのタイプを選択します。
-
テーマを使用 - メールを テーマモード で作成する場合は、このオプションを選択します。 このモードでは、定義済みのブランドテーマを使用してコンテンツオーサリングプロセスを効率化し、デザインが定義済みの標準に従っていることを確認できます。
-
手動スタイル設定 - メールを 手動モード で作成する場合は、このオプションを選択します。 このモードでは、空白のキャンバスに追加するすべての構造およびコンテンツコンポーネントのスタイル設定を手動で行います。
-
-
テンプレートに 構造とコンテンツを追加します。
-
リンクを確認および更新します。
内容に問題がなければ、「保存」をクリックします。
既存のHTML コンテンツの読み込み
読み込まれるコンテンツの範囲：
-
スタイルシートが組み込まれたHTMLファイル
-
HTMLファイル、スタイルシート（.css）および画像を含んだ.zip ファイル
note note NOTE .zip ファイル構造に制限はありません。ただし、.zip フォルダーのツリー構造に合わせて、相対参照を指定する必要があります。 画像は、常に connected Marketo Engageのアセットリポジトリにアップロードされます。 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）を任意に定義します。 また、列の下に矢印を移動して、各列の幅を定義することもできます。 
各列のサイズを構造コンポーネントの全幅の 10% 未満にすることはできません。 削除できるのは空の列のみです。
-
「コンテンツ」セクションを展開し、必要な数のコンテンツコンポーネントを 1 つ以上の構造コンポーネントに追加します。
-
必要に応じて、「設定」タブまたは スタイル タブで各コンポーネントに追加のカスタマイズを加えるこ ができ す。
例えば、各コンポーネントのテキストスタイル、パディングまたは余白を変更できます。
-
条件付きコンテンツを追加し、条件付きルールに基づいてコンテンツをターゲットプロファイルに適応させるには、コンテンツコンポーネントを選択し、コンポーネントツールバーの 条件付きコンテンツの有効化 アイコンをクリックします。
詳しくは、条件付きコンテンツ を参照してください。
カスタム CSS を追加
独自のカスタム CSS をメールデザイン空間内に直接追加できます。 カスタム CSS を使用して高度な特定のスタイル設定を適用し、コンテンツの外観をより柔軟に制御できます。 画像、ボタン、テキストなどのコンテンツコンポーネントを含める前に、この最高レベルのスタイル設定を追加することをお勧めします。
キャンバスに 1 つ以上のコンテンツコンポーネントがある状態で、左側のナビゲーションツリーで 本文 コンポーネントを選択して、カスタム CSS エディターにアクセスします。
-
右側に表示される スタイル タブで、「カスタム CSS を追加 をクリックします。
note 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 で、左側のナビゲーションバーにある Marketo Engage Assets （
-
新しいアセットを追加するには、画像アセットを構造コンポーネントにドラッグ&ドロップします。
-
キャンバスで既存の画像アセットを選択して置き換え、画像ソースツールの アセットを選択 をクリックします。
ソースタイプのアセットの使用について詳しくは、 コンテンツオーサリングにアセットを使用するを参照してください。
レイヤー、設定、スタイルの移動
ビジュアルデザインスペースでコンテンツを操作する際は、ナビゲーションツリーを使用して、コンポーネント、列およびコンテンツ要素にアクセスできます。 左側の ナビゲーションツリー アイコン（
次の例では、列を持つ構造コンポーネント内のパディングと垂直方向の整列を調整する手順について説明します。
-
キャンバスで構造コンポーネントの列を直接選択するか、左側に表示される ナビゲーションツリー を使用して選択します。
-
列ツールバーから 列を選択 ツールをクリックし、編集する列を選択します。
構造ツリーから選択することもできます。 その列の編集可能なパラメーターは、右側の 設定 タブと スタイル タブに表示されます。
-
列のプロパティを編集するには、右側の「スタイル」タブをクリックし、必要に応じて変更します。
-
背景 については、必要に応じて背景色を変更します。
背景を透明にするには、このチェック ボックスをオフにします。 「背景画像」設定を有効にして、単色の代わりに画像を背景として使用します。
-
「整列」では、「上」、「中央」または「下」アイコンを選択します。
-
パディング については、すべての辺のパディングを定義します。
パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。ロック アイコンをクリックして、同期を解除します。
-
「詳細」セクションを拡張して、列のインラインスタイルを定義します。
-
-
必要に応じて、これらの手順を繰り返して、コンポーネントの他の列の整列とパディングを調整します。
-
変更を保存します。
コンテンツのパーソナライズ
Journey Optimizer B2B editionでは、パーソナライズされたコンテンツを中括弧 {} で囲んだ式を作成できる、インラインのシンプルな構文を使用します。 同じコンテンツまたはフィールドに、制限なく複数の式を追加できます。
例:
Hello {{lead.firstName}} {{lead.lastName}}Hello {%= lead.mktoName ?: "Marketer" %}
Journey Optimizer B2B editionは、コンテンツの処理時に、式をExperience Platform データベースに含まれるデータで置き換えます。 最初の例は、Hello John Doe となります。
次の例では、リード/アカウント属性とシステムトークンを使用してコンテンツをパーソナライズする手順の概要を説明します。
-
テキストコンポーネントを選択し、ツールバーの パーソナライゼーションを追加 アイコンをクリックします。
これにより、「Personalizationを編集 ダイアログが開きます。
-
トークンの横にあるプラス（+）記号をクリックして、トークンを追加します。
フォールバック（リードでそのフィールドが使用できない場合に表示されるデフォルトのテキスト）を含むトークンを追加したい場合は、詳細 アイコン（…）をクリックして フォールバックテキストで挿入 を選択します。
-
含める追加のトークンやその他の静的テキストを追加します。
-
「保存」をクリックします。
パーソナライゼーションスクリプティングがビジュアルデザインスペースに表示されます。 必要に応じて、テンプレートを選択して変更を加えることができます。
リンクされた URL トラッキングを編集
-
左側の リンク アイコン（
-
必要に応じて、編集 （
リンクに タグ を追加することもできます。
オプションを表示
ビジュアルメールエディターで使用できる表示およびコンテンツの検証オプションを活用します。
-
プリセットのズームオプション全体でコンテンツをズームイン/ズームアウトします。
-
デスクトップ、モバイル、テキストのみ/プレーンテキストのいずれかでコンテンツの表示を切り替えます。
- 表示 アイコンをクリックして、デバイス間でコンテンツをプレビューします。
- 標準提供のデバイスの 1 つを選択するか、カスタムサイズを入力してコンテンツをプレビューします。
詳細オプション
ビジュアルデザインスペースの上部にある その他… メニューから、次の操作を実行できます。
- メールをリセット – このオプションをクリックして、メールデザインキャンバスを空白のスレートにクリアし、コンテンツの作成を再開します。
- フラグメントとして保存 - メールのすべてまたは一部をフラグメントとして保存し、複数のメールまたはメールテンプレートで再利用します。 フラグメントの名前と説明を指定し、使用可能なフラグメントのリストに保存します。
- デザインを変更 - メールのデザイン ページに戻ります。 ここから、別のテンプレートを選択して設計プロセスを再開できます。 また、空のキャンバス（クラシックモード）または ブランドテーマ（テーマモード）を使用して、ゼロからコンテンツをデザインすることもできます。
- コンテンツテンプレートとして保存 - メール本文をメールテンプレートとして保存し、複数のメールまたはメールテンプレートで再利用します。 テンプレートの名前と説明を指定し、保存済みのメールテンプレートのリストに保存します。
- HTMLを書き出し - ビジュアルキャンバスのコンテンツを、zip ファイルとしてパッケージ化されたHTML形式のローカルシステムにダウンロードします。
メールを確認およびテスト email-testing
メッセージコンテンツを定義したら、テストプロファイルを使用してプレビュー、配達確認を送信、デスクトップおよびモバイルの縦横比でのレンダリングを確認できます。 パーソナライズされたコンテンツを挿入した場合は、テストプロファイルデータを使用して、そのコンテンツがメッセージにどのように表示されるかをプレビューできます。
メールコンテンツをプレビューするには、「コンテンツをシミュレート をクリックし、テストプロファイルを選択して、人物プロファイルデータを使用してメッセージを確認します。
追加のツールにアクセスして、メールの内容を検証およびレビューできます。