メールデザイナーのコンテンツコンポーネントを使用する

メールコンテンツを作成する際は、コンテンツコンポーネント​を使用すると、メールに配置して編集できる生のコンポーネントで、メールをさらにパーソナライズできます。

メールのレイアウトを定義する 1 つ以上の構造コンポーネント内には、必要な数だけコンテンツコンポーネントを追加できます。

コンテンツコンポーネントの追加

コンテンツコンポーネントをメールに追加し、必要に応じて調整するには、次の手順に従います。

1. 電子メールデザイナーで、既存のコンテンツを使用するか、構造コンポーネント​を空のコンテンツにドラッグ＆ドロップして、メールのレイアウトを定義します。 方法についてはこちらを参照

2. 「コンテンツ コンポーネント」セクションにアクセスするには、電子メールデザイナーの左パネルから対応するボタンを選択します。

   

3. 選択したコンテンツコンポーネントを、関連する構造コンポーネント内にドラッグ＆ドロップします。

   

   メモ

   単一の構造コンポーネントおよび構造コンポーネントの各列に複数のコンポーネントを追加できます。

4. 右側の「設定」タブと「スタイル」タブを使用して、コンポーネントごとに属性とスタイルを調整します。例えば、コンポーネントのテキストスタイル、パディングまたは余白を変更できます。詳しくは、整列とパディングを参照してください

   

5. コンテンツコンポーネント​の詳細メニューから、必要に応じてコンテンツコンポーネントを簡単に削除または複製できます。

   

コンテナ

コンテンツコンポーネントのグループに特定のスタイルを適用するには、コンテナ​コンポーネントを追加してから、目的のコンテンツコンポーネントをその中に追加します。これにより、コンテナ内のコンテンツコンポーネントに適用されるスタイルとは異なる、独自のスタイルをコンテナに適用できます。

例えば、コンテナ​コンポーネントを追加してから、 ボタンコンポーネントをそのコンテナ内に追加します。コンテナには特定の背景を使用し、ボタンには別の背景を指定することができます。

ボタン

ボタン​コンポーネントを使用すると、メールに 1 つ以上のボタンを挿入し、メールのオーディエンスを別のページにリダイレクトできます。

1. コンテンツコンポーネント​から、ボタン​コンポーネントを​構造コンポーネント​にドラッグ＆ドロップします。

2. 新しく追加したボタンをクリックして、テキストをパーソナライズし、メールデザイナーの右側のパネルにある「設定」タブと「スタイル」タブにアクセスできるようにします。

   

3. 「リンク」メニューから、ボタンをクリックした際にリダイレクトする URL を追加します。

4. ターゲット​ドロップダウンリストで、オーディエンスのリダイレクト方法を選択します。

   • なし：クリックしたフレームと同じフレームでリンクを開きます（デフォルト）。
   • 空白：リンクを新しいウィンドウまたは新しいタブで開きます。
   • セルフ：クリックしたフレームと同じフレームでリンクを開きます。
   • 親：親フレームでリンクを開きます。
   • トップ：ウィンドウ全体でリンクを開きます。

   

5. ボタンをさらにパーソナライズするには、境界線、サイズ、余白​などのスタイル属性を​コンポーネント設定​パネルから変更します。

テキスト

テキスト​コンポーネントを使用してメールにテキストを挿入し、スタイル（境界線、サイズ、パディングなど）を「スタイル」タブを使用して調整します。

1. コンテンツコンポーネント​から、テキスト​コンポーネントを​構造コンポーネント​にドラッグ＆ドロップします。

2. 新しく追加したコンポーネントをクリックして、テキストをパーソナライズし、メールデザイナーの右側のパネルにある「設定」タブと「スタイル」タブにアクセスできるようにします。

3. ツールバーで次のオプションを使用して、テキストを変更します。

   

   • テキストスタイルの変更：テキストに太字、斜体、下線、取り消し線を適用します。
   • 配置の変更：テキストの行揃えを左揃え、右揃え、中央揃えまたは両端揃えから選択します。
   • リストの作成：テキストに箇条書きまたは番号リストを追加します。
   • 見出しの設定：テキストに最大 6 つのレベルの見出しを追加します。
   • フォントサイズ：テキストのフォントサイズをピクセル単位で選択します。
   • フォントカラーを変更：フォントの色を選択します。
   • リンクを挿入：コンテンツに任意のタイプのリンクを追加します。
   • 画像の編集：テキストコンポーネントに画像またはアセットを追加します。詳しくは、アセット管理を参照してください
   • フォントカラーを変更：フォントの色を選択します。
   • パーソナライゼーションを追加：パーソナライゼーションフィールドを追加し、プロファイルデータを使用してコンテンツをカスタマイズできます。詳しくは、コンテンツのパーソナライゼーションを参照してください
   • ソースコードの表示：テキストのソースコードを表示します。変更はできません。
   • 条件付きコンテンツを有効にする：条件付きコンテンツを追加して、コンポーネントのコンテンツをターゲットプロファイルに適応させます。詳しくは、動的コンテンツを参照してください。
   • 複製：テキストコンポーネントのコピーを追加します。
   • 削除：選択したテキストコンポーネントをメールから削除します。

4. その他のスタイル属性（テキストの色、フォントファミリー、境界線、パディング、余白など）を「スタイル」タブから調整します。

   

ディバイダー

ディバイダー​コンポーネントを使用すると、分割線を挿入してメールのレイアウトと内容を整理できます。

線の色、スタイル、高さなどのスタイル属性は、「設定」タブと「スタイル」タブから調整できます。

HTML

HTML コンポーネントを使用して、既存の HTML のさまざまな部分をコピーして貼り付けることができます。これにより、無料のモジュラー HTML コンポーネントを作成して、一部の外部コンテンツを再利用できます。

1. コンテンツコンポーネント​から、HTML コンポーネントを​構造コンポーネント​にドラッグ＆ドロップします。

2. 新しく追加したコンポーネントをクリックし、コンテキストツールバーから「ソースコードを表示」選択して HTML を追加します。

   

3. 追加する HTML コードをメールにコピー＆ペーストし、「保存」をクリックします。

   

画像

画像​コンポーネントを使用して、コンピューターからメールコンテンツに画像ファイルを挿入します。

1. コンテンツコンポーネント​から、画像​コンポーネントを​構造コンポーネント​にドラッグ＆ドロップします。

   

2. 「参照」をクリックして、アセットから画像ファイルを選択します。

   Assets Essentials について詳しくは、Adobe Experience Manager Assets Essentials ドキュメントを参照してください。

3. 新しく追加したコンポーネントをクリックし、「設定」タブを使用して画像プロパティを設定します。

   • 「画像タイトル 」に画像のタイトルを入力します。
   • 代替テキスト​を使用すると、画像にリンクするキャプションを設定できます。これは HTML の alt 属性に対応します。

   

4. また、「類似のストックフォトを検索」を選択することもできます。詳細情報

5. 「スタイル」タブから、余白、境界線などの他のスタイル属性を調整します。または、別のコンテンツにオーディエンスをリダイレクトするためのリンクを​コンポーネント設定​ペインで追加します。

ソーシャル

ソーシャル​コンポーネントを使用すると、メールコンテンツにソーシャルメディアページへのリンクを挿入できます。

1. コンテンツコンポーネント​から、ソーシャル​コンポーネントを​構造コンポーネント​にドラッグ＆ドロップします。

2. 新しく追加したコンポーネントを選択します。

3. 「設定」タブの「ソーシャル」フィールドで、追加または削除するソーシャルメディアを選択します。

   

4. 専用フィールドでアイコンのサイズを選択します。

5. 各ソーシャルメディアアイコンをクリックして、オーディエンスのリダイレクト先の URL を設定します。

   

6. 必要に応じて、アセットから各ソーシャルメディアのアイコンを変更することもできます。

7. スタイル、余白、境界線などのその他のスタイル属性を「スタイル」タブから調整します。

オファーの決定

オファーの決定​コンポーネントを使用すると、メッセージにオファーを挿入できます。意思決定管理エンジンが、顧客に提示する最適なオファーを選択します。

1. コンテンツコンポーネント​から、オファーの決定​コンポーネントを​構造コンポーネント​にドラッグ＆ドロップします。

2. 「追加」をクリックして、「オファーの決定」を選択します。

   

3. ドロップダウンから、「プレースメント」を選択します。次に、コンテンツに追加する​オファーの決定​を選択し、「追加」をクリックします。

   

4. 「オファーの決定」タブから、挿入したオファーをプレビューまたは変更できます。

パーソナライズされたオファーをメールに追加する方法については、この節を参照してください。

Business.Adobe.com リソース