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

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

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

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

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

電子メールデザイナーで、既存のコンテンツを使用するか、構造コンポーネントを空のコンテンツにドラッグ＆ドロップして、メールのレイアウトを定義します。方法についてはこちらを参照
「コンテンツコンポーネント」セクションにアクセスするには、電子メールデザイナーの左パネルから対応するボタンを選択します。
選択したコンテンツコンポーネントを、関連する構造コンポーネント内にドラッグ＆ドロップします。

メモ

単一の構造コンポーネントおよび構造コンポーネントの各列に複数のコンポーネントを追加できます。
右側のコンポーネント設定パネルを使用して、各コンポーネントのスタイル属性を調整します。例えば、コンポーネントのテキストスタイル、パディングまたは余白を変更できます。詳しくは、整列とパディングを参照してください

コンテナ

シンプルなコンテナを追加し、その中に別のコンテンツコンポーネントを追加できます。これにより、コンテナに特定のスタイルを適用できます（内部で使用されるコンポーネントとは異なります）。

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

ボタン

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

コンテンツコンポーネントから、ボタンコンポーネントを構造コンポーネントにドラッグ＆ドロップします。
新しく追加したボタンをクリックして、テキストをパーソナライズし、電子メールデザイナーの右側のパネルにあるコンポーネント設定にアクセスできるようにします。
「リンク」フィールドに、ボタンをクリックしたときにリダイレクトする URL を追加します。
ターゲットドロップダウンリストで、オーディエンスのリダイレクト方法を選択します。
- なし：クリックしたフレームと同じフレームでリンクを開きます（デフォルト）。
- 空白：リンクを新しいウィンドウまたは新しいタブで開きます。
- セルフ：クリックしたフレームと同じフレームでリンクを開きます。
- 親：親フレームでリンクを開きます。
- トップ：ウィンドウ全体でリンクを開きます。
ボタンをさらにパーソナライズするには、境界線、サイズ、余白などのスタイル属性をコンポーネント設定パネルから変更します。

テキスト

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

コンテンツコンポーネントから、テキストコンポーネントを構造コンポーネントにドラッグ＆ドロップします。
新しく追加したコンポーネントをクリックして、テキストをパーソナライズし、電子メールデザイナーの右側のパネルにあるコンポーネント設定にアクセスできるようにします。
ツールバーで次のオプションを使用して、テキストを変更します。
- テキストスタイルの変更：テキストに太字、斜体、下線、取り消し線を適用します。
- 配置の変更：テキストの行揃えを左揃え、右揃え、中央揃えまたは両端揃えから選択します。
- リストの作成：テキストに箇条書きまたは番号リストを追加します。
- 見出しの設定：テキストに最大 6 つのレベルの見出しを追加します。
- フォントサイズ：テキストのフォントサイズをピクセル単位で選択します。
- 画像の編集：テキストコンポーネントに画像またはアセットを追加します。詳しくは、アセット管理を参照してください
- ソースコードの表示：テキストのソースコードを表示します。変更はできません。
- 複製：テキストコンポーネントのコピーを追加します。
- 削除：選択したテキストコンポーネントをメールから削除します。
- パーソナライズの追加：パーソナライゼーションフィールドを追加し、プロファイルデータを使用してコンテンツをカスタマイズできます。詳しくは、コンテンツのパーソナライゼーションを参照してください
- 条件付きコンテンツを有効にする：条件付きコンテンツを追加して、コンポーネントのコンテンツをターゲットプロファイルに適応させます。詳しくは、動的コンテンツを参照してください。
その他のスタイル属性（テキストの色、フォントファミリー、境界線、パディング、余白など）をコンポーネント設定ペインから調整します。

ディバイダー

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

線の色、スタイル、高さなどのスタイル属性は、コンポーネント設定ペインから調整できます。

HTML

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

コンテンツコンポーネントから、HTML コンポーネントを構造コンポーネントにドラッグ＆ドロップします。
新しく追加したコンポーネントをクリックし、コンテキストツールバーから「ソースコードを表示」選択して HTML を追加します。
追加する HTML コードをメールにコピー＆ペーストし、「保存」をクリックします。

メモ

外部のコンテンツを簡単に電子メールデザイナーに準拠させるには、メッセージをゼロから作成し、既存のメールのコンテンツをコンポーネントにコピーすることをお勧めします。

画像

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

コンテンツコンポーネントから、画像コンポーネントを構造コンポーネントにドラッグ＆ドロップします。
「参照」をクリックして、アセットから画像ファイルを選択します。

Assets Essentials について詳しくは、Adobe Experience Manager Assets Essentials ドキュメントを参照してください。
新しく追加したコンポーネントをクリックし、コンポーネント設定ペインを使用して画像プロパティを設定します。
- 「画像タイトル 」に画像のタイトルを入力します。
- 代替テキストを使用すると、画像にリンクするキャプションを設定できます。これは HTML の alt 属性に対応します。
余白や境界線など、他のスタイル属性を調整します。または、別のコンテンツにオーディエンスをリダイレクトするためのリンクをコンポーネント設定ペインで追加します。