メールコンテンツ作成
Adobe Marketo Optimizerでは、電子メール デザイン スペースは、マーケターが電子メールを構成する視覚的なキャンバスを提供します。 左側と上部のパネル（構造、コンテンツコンポーネント、テンプレート、フラグメントなど）のメールデザインツールは、ドラッグ&ドロップでゼロから作成できる機能をサポートしています。 また、テンプレートから開始、生のHTMLをペースト、再利用可能なビジュアルフラグメントからメッセージを組み立てることもできます。
Marketo Optimizerでは、すべての電子メールは、個人ジャーニー内の電子メールを送信 アクションに関連付けられます。 ジャーニーの設計から電子メールの定義に至るまでのワークフロー全体が、ひとつの連続的な体験で実現されます。 ユーザーのジャーニーにメール送信 ノード を追加する場合、「メール作成」をクリックしてプロセスを開始します。 まず、メールのアクションとコンテンツ設定を定義します。 「メール本文を編集」をクリックして、メールコンテンツデザインスペースを起動します。ここでは、次のオプションからメールのデザイン方法を選択できます。
-
ビジュアルデザインインターフェイスを使用して メールをゼロからデザイン 。 空白のキャンバスにドラッグ&ドロップして、コンポーネントごとにメールレイアウトコンポーネントを作成します。 この方法は、新しいテンプレートや単発のメールを作成するのに最適です。
-
既存のHTML コンテンツ をコードエディターに読み込むか、ビジュアルキャンバスと並べて作業します。
-
ビルトインまたはカスタムのメールテンプレートのリストから既存のテンプレート を選択します。 この方法は、繰り返し可能なメールのユースケースに最適です。
{width="800" modal="regular"}
メールデザインツール 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 ファイルをドラッグ＆ドロップし、「読み込み」をクリックします。
{width="500"}
<table> タグを HTML ファイルの最初のレイヤーとして使用すると、上部レイヤータグの背景や幅の設定などのスタイルが失われる可能性があります。ビジュアルメールエディターツールを使用して、必要に応じてインポートしたコンテンツをパーソナライズできます。
テンプレートを選択 templates
メールデザインスペースを開く場合は、デザインテンプレートを選択 セクションを使用して、組み込みのサンプルテンプレートまたは保存されたカスタムテンプレートから開始します。 ワークフロー全体については、電子メールでテンプレートを使用を参照してください。
構造とコンテンツの追加 structure-content
ビジュアルメールエディターを使用して、メールメッセージを作成します。 プリヘッダーを追加し、列と区切り記号でレイアウトを構成してから、画像、ボタン、テキストなどのコンテンツコンポーネントを配置します。 また、カスタム CSSを適用して高度なスタイル設定を行い、ダークモードでデザインがレンダリングされる方法をプレビューすることもできます。
プリヘッダーの設定 preheader
プリヘッダーは、受信トレイのプレビューで件名の後に表示されるテキストのスニペットです。 Marketo Optimizerでは、プリヘッダーは、電子メールデザインスペースのビジュアルキャンバスで設定されます。件名と一緒に電子メールプロパティ画面で設定されません。
左側のナビゲーションツリーで Body を選択した状態で、右側の設定 パネルを開きます。
「プリヘッダー」テキスト領域をクリックし、プリヘッダーコピーを入力します。 「パーソナライゼーションを追加」（
）アイコンをクリックして、必要に応じて書式と パーソナライゼーショントークン をリッチテキストコントロールを使用して適用します。
ダークモード 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」（
）アイコンを選択します。 アセットセレクターから、Assets ライブラリに保存されているアセットを直接選択できます。
-
画像アセットを構造コンポーネントにドラッグ&ドロップして、新しいアセットを追加します。
-
既存の画像アセットをキャンバスで選択し、画像ソースツールで「アセットを選択」をクリックして置き換えます。
アセットの使用について詳しくは、コンテンツのオーサリングにアセットを使用を参照してください。
レイヤー、設定、スタイルの移動 navigation-layers
ナビゲーションツリーを使用してコンポーネントと列を選択し、右側のパネルで設定とスタイルを調整します。 ナビゲーションツリーを参照してください。
コンテンツのパーソナライズ personalize-content
Marketo Optimizerは、パーソナライゼーションにHandlebars構文を使用しています。 トークンは、送信時に各受信者のプロファイルデータの値に置き換えられます。 メール内でパーソナライゼーションを使用できる場所は複数あります。
- 件名 – 最も一般的なパーソナライゼーションポイント。
- Preheader — ビジュアルキャンバス内で設定します。プロファイル属性トークンをサポートします。
- 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を簡単に見つけることができる一元的なビューが用意されています。 左側のリンク アイコン（
）をクリックすると、コンテンツ内のすべてのリンク URLが表示されます。 テキストコンポーネント、ボタンコンポーネント、画像コンポーネント内のリンクです。
リストされたコンテンツリンクのトラッキングを定義するには、編集 （
）アイコンをクリックし、トラッキングタイプまたは ラベル を変更します。
メールを確認およびテスト check-and-test-the-email
電子メールデザインスペースツールバーのデスクトップとモバイルのプレビューコントロールを使用して、電子メールレイアウトを保存する前に確認します。 ダークモードのプレビューに切り替えて、読みやすさとコントラストを検証します（メールコンテンツの ダークモード を参照）。
このBeta リリースでは、テストプロファイル、 コンテンツをシミュレート 、プルーフワークフローの送信は使用できません。 メールチャネルの概要の現在の制限を参照してください。
ジャーニーをアクティブ化する前に解決する必要があるコンテンツアラートについては、電子メールコンテンツの検証を確認してください。
メールコンテンツの検証 validation
ジャーニーをアクティブ化する前に、メールコンテンツが有効である必要があります。 Marketo Optimizerは、電子メールおよびジャーニーキャンバスでコンテンツレベルのアラートを表示します。 このセクションでは、表示される可能性のあるアラートとその解決方法について説明します。
共通コンテンツアラート content-alerts
default ヘルパーを使用してフォールバックを追加します。 または、属性が保証されるプロファイルにジャーニーオーディエンスを制限します。