メールコンテンツ作成
Adobe Marketo Optimizerでは、電子メール デザイン スペースは、マーケターが電子メールを構成する視覚的なキャンバスを提供します。 左側と上部のパネル（構造、コンテンツコンポーネント、テンプレート、フラグメントなど）のメールデザインツールは、ドラッグ&ドロップでゼロから作成できる機能をサポートしています。 また、テンプレートから開始、生のHTMLをペースト、再利用可能なビジュアルフラグメントからメッセージを組み立てることもできます。
- B2B メールを表示 - メール メッセージを表示するには必須です。
- B2B メールの管理 - メールメッセージの作成、編集、および削除に必要です。
Marketo Optimizerでは、メールは独立したアセットであり、 プログラムまたはフォルダーで作成してから、 ジャーニーで公開して選択します。 最初に、プロパティと アクション を定義します。 そしてコンテンツを定義します。
「メール本文を編集」をクリックしてメール本文デザインスペースを起動します。このスペースでは、次のオプションからメールのデザイン方法を選択できます。
-
ビジュアルデザインインターフェイスを使用して メールをゼロからデザイン 。 空白のキャンバスにドラッグ&ドロップして、コンポーネントごとにメールレイアウトコンポーネントを作成します。 この方法は、新しいテンプレートや単発のメールを作成するのに最適です。
-
既存のHTML コンテンツ をコードエディターに読み込むか、ビジュアルキャンバスと並べて作業します。
-
ビルトインまたはカスタムのメールテンプレートのリストから既存のテンプレート を選択します。 この方法は、繰り返し可能なメールのユースケースに最適です。
メールデザインツール email-design-tools
- 一番上のツールバー：保存、戻る、コードエディターに切り替える、プレビューコントロール。
- 左パネル：構造（列レイアウト）、コンテンツ（テキスト、ボタン、画像、ディバイダー、ソーシャル、HTML）、フラグメント、テンプレート、ナビゲーションツリー（メールのDOM スタイル階層）。
- センターキャンバス： デスクトップとモバイルのプレビューが表示されたWYSIWYG エディター。
- 右側のパネル： コンテンツプロパティ、背景、境界線、パディング、パーソナライゼーションなど、現在選択されているコンポーネントの設定とスタイル。
メールデザインのベストプラクティス design-best-practices
HTMLとCSSのベストプラクティスに従うことで、メールクライアント間で一貫性のあるレンダリングを実現できます。
メールをゼロからデザイン design-from-scratch
ビジュアルコンテンツデザイン機能を使用して、メールの構造とコンテンツを定義します。 シンプルなドラッグ&ドロップ操作で構造コンポーネントを追加、移動させることで、メールコンテンツのレイアウトと整理を数秒でデザインすることができます。
-
メールを作成 ページから、ゼロからデザイン オプションを選択します。
-
メールを作成 ダイアログで、作成するメールコンテンツのタイプを選択します。
-
テーマを使用 – このオプションを選択すると、テーマモードで電子メールを作成できます。 このモードでは、定義済みのブランドテーマを使用して、コンテンツのオーサリングプロセスを効率化し、定義された標準に合わせてデザインを調整できます。
-
手動スタイル設定 – このオプションを選択すると、手動モードで電子メールを作成できます。 このモードでは、空白のカンバスに追加するすべての構造およびコンテンツコンポーネントのスタイル設定を手動で設定します。
-
-
キャンバスに構造とコンテンツのコンポーネント を追加します。
コンテンツに問題がなければ、保存をクリックします。
既存のHTML コンテンツのインポート import-html-content
読み込むコンテンツは次のとおりです。
-
スタイルシートが組み込まれたHTML ファイル
-
HTML ファイル、スタイルシート（.css）および画像を含む.zip ファイル
note NOTE .zip ファイル構造に制約はありません。 ただし、.zip フォルダーのツリー構造に合わせて、相対参照を指定する必要があります。 画像は常に アセットリポジトリ にアップロードされます。
HTML コンテンツを含むファイルを読み込むには:
-
デザインホームページから、「HTMLを読み込み」オプションを選択します。
-
HTML コンテンツを含んだ HTML または .zip ファイルをドラッグ＆ドロップし、「読み込み」をクリックします。
<table> タグを HTML ファイルの最初のレイヤーとして使用すると、上部レイヤータグの背景や幅の設定などのスタイルが失われる可能性があります。ビジュアルメールエディターツールを使用して、必要に応じてインポートしたコンテンツをパーソナライズできます。
テンプレートを選択 templates
メールデザインスペースを開く場合は、デザインテンプレートを選択 セクションを使用して、組み込みのサンプルテンプレートまたは保存されたカスタムテンプレートから開始します。 ワークフロー全体については、電子メールでテンプレートを使用を参照してください。
次の中から選択できます。
- サンプルテンプレート - Adobeが提供するビルトインメールテンプレート。
- 保存したテンプレート – ゼロから作成したカスタムテンプレートまたは既存のメールコンテンツから保存したカスタムテンプレート。
メールを作成 ページで、サンプルテンプレート タブがデフォルトで選択されています。 カスタムテンプレートを使用するには、「保存したテンプレート」タブを選択します。
| note |
|---|
| NOTE |
| 保存したテンプレートには、1つ以上のコンポーネントにガバナンス（コンテンツロック）設定を適用することができます。 ビジュアルデザインスペースでは、管理されたテンプレートから電子メールを作成する際に、ロックされたコンポーネントに関するガイドラインが表示されます。 |
リストには、現在のサンドボックスで作成されたすべてのメールテンプレートが表示されます。 名前、最終変更日、最終作成日で並べ替えることができます。
リストから目的のテンプレートを選択して、プレビューを表示します。 プレビューモードでは、右矢印と左矢印を使用して、選択したカテゴリ（サンプルまたは保存済み）のテンプレート間を移動します。
プレビューが使用するものと一致したら、プレビューウィンドウの右上にある「このテンプレートを使用」をクリックします。
このアクションにより、コンテンツがビジュアルメールデザイン空間にコピーされ、必要に応じて編集することができます。
Adobe Marketo Optimizerには、メールとメール テンプレートの作成に使用できる組み込みテンプレートの選択肢が用意されています。
構造とコンテンツの追加 structure-content
ビジュアルメールエディターを使用して、メールメッセージを作成します。 プリヘッダーを追加し、列と区切り記号でレイアウトを構成してから、画像、ボタン、テキストなどのコンテンツコンポーネントを配置します。 また、カスタム CSSを適用して高度なスタイル設定を行い、ダークモードでデザインがレンダリングされる方法をプレビューすることもできます。
本文の設定を定義 body-settings
本文の設定により、メールのプリヘッダー、ドキュメントのタイトル、ドキュメントの言語が定義されます。 このメタデータは、電子メールの件名とは別に、電子メールデザインスペースで設定します。
-
左側のナビゲーションツリーで「Body」を選択し、右側のパネルで「設定」タブを選択します。
-
以下のフィールドに入力します。
-
プリヘッダー – 件名の後に表示されるテキストのスニペットを受信トレイのプレビューに入力します。
note tip TIP プリヘッダーは40～100文字の範囲に収めます。 件名を補完し（繰り返さず）、受信者が電子メールを開くための追加の理由を提供する必要があります。 -
ドキュメントのタイトル - メール HTML ドキュメントのタイトルを入力します。 件名とは異なります。
-
ドキュメント言語 - メールドキュメントの言語を指定します。
フィールドの横にある「パーソナライゼーションを追加」（
-
ダークモード dark-mode
ダークモードのレンダリングは、CSS prefers-color-scheme メディアクエリでサポートされています。 メールデザインツールには、ダークモードのプレビューや、メールクライアントをサポートするカスタムスタイルを定義するオプションが含まれています。これにより、テキストが読みやすいままであること、ロゴが表示されていること、ブランドカラーが暗い背景にも引き続き表示されていることを検証できます。
プレビュー、カスタムダークモード設定の設定、メールクライアントサポート、およびテストのベストプラクティスに関する詳細なガイダンスについては、 メールコンテンツのダークモード を参照してください。
構造コンポーネントとコンテンツコンポーネントを追加 components
構造コンポーネント と コンテンツコンポーネント をキャンバスに追加して、メールレイアウトを構築します。
左側のパネルの 構造 およびコンテンツ セクションから項目をドラッグし、右側の 設定 およびスタイル タブで各コンポーネントを設定します。
カスタム CSS を追加 custom-css
カスタム CSSをメールデザインスペースに直接追加して、標準コンポーネントの設定を超えた高度なスタイル設定を行うことができます。 画像、ボタン、テキストなどのコンテンツコンポーネントを含める前に、このレベルの高いスタイル設定を追加することをお勧めします。
手順、構文ルール、およびトラブルシューティングについては、 コンテンツ用カスタム CSSの追加を参照してください。
フラグメントを追加 visual-fragments
ビジュアルフラグメントは、再利用可能なデザインコンポーネントで、Marketo Optimizer全体で複数のコンテンツアセットで参照できます。 通常は、コンテンツのブロックを作成し、すばやく挿入することで、オーサリングをより迅速に、より一貫性のあるものにできます。
次の例では、コンテンツのオーサリング時にフラグメントを追加する手順の概要を示します。
-
フラグメントのリストを開くには、「フラグメント」アイコン（
次の操作が可能です。
- リストの並べ替え。
- リストを参照、検索、またはフィルターします。
- サムネール表示とリスト表示を切り替えます。
- 最近作成したフラグメントを反映するには、リストを更新します。
-
任意のフラグメントを構造コンポーネントにドラッグ&ドロップします。
エディターは、メール構造のセクション/エレメント内でフラグメントをレンダリングします。
フラグメントのコンテンツは、構造内で動的に更新され、フラグメントがメール内でどのようにレンダリングされるかをプレビューします。
メールが保存されると、要約で「使用者」タブを選択すると、フラグメントの詳細ページに表示されます。
画像アセットの追加 insert-image
Marketo Optimizerがプロビジョニングされると、既存のMarketo Design Studio アセットが電子メールデザインスペースで使用できるようになります。 これらの画像は、アセットピッカーから直接メールで閲覧し、挿入することができます。
サポートされている画像ファイルの種類：
- 完全にサポートされている （ピッカーで表示、埋め込み可能なインライン）:JPG、PNG、GIF、WebP。
- 注意事項でアクセス可能：SVG（一部の電子メールクライアントがSVGをレンダリングしないという警告が表示されます）。
- このBeta リリースではサポートされていません： TIFF、PDF、DOCX、XLSX、PPTX、CSS、JS、HTML、TXT、バイナリ ファイル、PSD、AI、INDD。
ビジュアルコンテンツデザイン領域で、左側のナビゲーションバーで「Assets」（
-
画像アセットを構造コンポーネントにドラッグ&ドロップして、新しいアセットを追加します。
-
既存の画像アセットをキャンバスで選択し、画像ソースツールで「アセットを選択」をクリックして置き換えます。
アセットの使用について詳しくは、コンテンツのオーサリングにアセットを使用を参照してください。
レイヤー、設定、スタイルの移動 navigation-layers
ナビゲーションツリーを使用してコンポーネントと列を選択し、右側のパネルで設定とスタイルを調整します。 ナビゲーションツリーを参照してください。
コンテンツのパーソナライズ personalize-content
Marketo Optimizerは、パーソナライゼーションにHandlebars構文を使用しています。 トークンは、送信時に各受信者のプロファイルデータの値に置き換えられます。 メール内でパーソナライゼーションを使用できる場所は複数あります。
- 件名 – 最も一般的なパーソナライゼーションポイント。
- Body metadata — ビジュアルキャンバス内で設定します。プロファイル属性トークンをサポートします。
- Email body text — インラインで挿入された名とその他のプロファイル属性。
- ボタン URL – 受信者ごとのパラメーターを追加します。
パーソナライゼーションを追加するには:
- 電子メールデザインスペース（または件名の電子メールプロパティページ）で、トークンを挿入するフィールドをクリックします。
- パーソナライゼーショントークンを使用するには、パーソナライズ （
- パーソナライゼーションダイアログで、左側のスキーマツリーを参照します。 プロファイル属性（名、姓、電子メール、役職およびその他のプロファイルフィールド）が一覧表示されます。
- 属性を選択します。 エディターは、対応するHandlebars式（例：
{{profile.firstName}}）を挿入します。 - 欠落しているデータを処理するフォールバック値を追加します：
{{profile.firstName | default: "there"}}。 - 確認または 挿入 をクリックします。 式がフィールド内にインラインで表示されます。
次のようなHandlebars式を使用します（パーソナライゼーションは、 コンテンツのパーソナライズ で説明されているのと同じ構文を使用します）。
{{profile.lastName}}– 受信者の姓を挿入します。{{profile.jobTitle}}– 本文のコピーで受信者の役職を参照します。{{profile.firstName}}, ready to take the next step?— トークンと静的テキストをインラインで結合します。
値が見つからない場合のフォールバックを含む名あいさつには、前のパーソナライゼーション手順に示すようにdefault ヘルパーを使用します（例えば、名がデフォルトの"there"の場合）。
default以降、パーソナライゼーションエディターには、条件付きロジック、テキスト変換、日付の書式設定を行うためのHandlebars ヘルパーが組み込まれています。 エディターの関数ブラウザーを使用して、使用可能なヘルパーを検索し、正しい構文で挿入します。
| note tip |
|---|
| TIP |
電子メールデザイン領域で、{{を任意のテキストフィールドに直接入力して、使用可能なプロファイル属性を一覧表示するインライン自動補完ドロップダウンリストをトリガーします。クイック挿入のために完全なパーソナライゼーションダイアログを開く必要はありません。 |
式エディターツールと構文について詳しくは、Personalization式を参照してください。
リンクされたURL トラッキングを編集 preview-and-edit-linked-urls
リンクトラッキングパネルには、コンテンツ内の各URLを簡単に見つけることができる一元的なビューが用意されています。 左側のリンク アイコン（
リストされたコンテンツリンクのトラッキングを定義するには、編集 （
メールを確認およびテスト check-and-test-the-email
電子メールデザインスペースツールバーのデスクトップとモバイルのプレビューコントロールを使用して、電子メールレイアウトを保存する前に確認します。 ダークモードのプレビューに切り替えて、読みやすさとコントラストを検証します（メールコンテンツの ダークモード を参照）。
このBeta リリースでは、テストプロファイル、 コンテンツをシミュレート 、プルーフワークフローの送信は使用できません。 メールチャネルの概要の現在の制限を参照してください。
ジャーニーをアクティブ化する前に解決する必要があるコンテンツアラートについては、電子メールコンテンツの検証を確認してください。
メールコンテンツの検証 validation
ジャーニーをアクティブ化する前に、メールコンテンツが有効である必要があります。 Marketo Optimizerは、電子メールおよびジャーニーキャンバスでコンテンツレベルのアラートを表示します。 このセクションでは、表示される可能性のあるアラートとその解決方法について説明します。
共通コンテンツアラート content-alerts
default ヘルパーを使用してフォールバックを追加します。 または、属性が保証されるプロファイルにジャーニーオーディエンスを制限します。