ドキュメントJourney OptimizerJourney Optimizer ガイド

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

最終更新日： 2026年9月5日

作成対象：

  • 中級
  • 初心者
  • ユーザー

このページでは、​電子メールのコンテンツ コンポーネント（ボタン、テキスト、画像、区切り記号、HTML、ソーシャルリンク、オファー決定など）を追加および設定して、電子メールのコンテンツを作成する方法について説明します。

style
shade-box

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

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

NOTE
欧州アクセシビリティ法では、すべてのデジタル通信がアクセス可能である必要があると規定しています。 コンテンツコンポーネントを活用して Journey Optimizer でメールをデザインする際は、アクセシブルなフォント、読みやすい形式の使用、画像の代替テキストの提供など、このページに示す特定のガイドラインに必ず従ってください。

コンテンツコンポーネントの追加 add-content-components

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

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

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

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

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

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

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

コンテナ container

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

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

ボタン button

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

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

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

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

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

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

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

テキスト text

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

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

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

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

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

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

ディバイダー divider

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

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

HTML HTML

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

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

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

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

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

画像 image

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

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

  2. 「設定」タブで「参照」をクリックしてアセットから画像ファイルを選択するか、「メディアを読み込み」をクリックしてアセットを Adobe Experience Manager Assets にアップロードします。

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

    note
    NOTE
    リンクをアクティブなままにし、有効期限の問題を回避するには、画像のソース URL に依存する代わりに、Adobe Assets を使用することをお勧めします。

  3. また、「Adobe Stock フォトを検索」オプションを使用して、Adobe Stock で直接検索することもできます。

  4. 新しく追加したコンポーネントをクリックし、画像プロパティを設定します。

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

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

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

ソーシャル social

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

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

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

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

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

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

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

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

オファーの決定 offer-decision

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

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

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

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

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

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

IMPORTANT
ジャーニーのメッセージで使用されるオファーの決定に変更が加えられた場合は、ジャーニーを非公開にして、再公開する必要があります。 これにより、変更がジャーニーのメッセージに取り込まれ、メッセージが最新の更新と一致するようになります。

グリッド grid

グリッド コンポーネントを使用して、行と列で構成される構造にコンテンツを整理します。各セルには他のコンテンツ コンポーネントを含めることができます。

{width="90%"}

  1. Container コンポーネントと同様に、他のコンテンツコンポーネントをグリッドの各セルにドラッグ&ドロップします。

    例えば、テキスト コンポーネント、画像 コンポーネント、および2つの​ボタン コンポーネントを追加できます。 次に、画像を追加し、各コンポーネントのコンテンツを個別に編集できます。

    {width="90%"}

  2. グリッドの構造を調整するには、グリッドを選択し、メールDesignerの右側パネルの「設定」タブに移動します。

    {width="90%"}

  3. グリッドに含まれる列と行の数を定義したり、列と行の間隔を編集したり、個々の列の幅をパーセントで変更したりできます。

    note
    NOTE
    列を垂直方向に積み重ねる代わりに、モバイルデバイス上でグリッドレイアウトを保持するには、モバイル上で列を積み重ねない オプションを使用します。

  4. 必要に応じて、他のコンテンツコンポーネントを各セルにドロップし、各コンポーネントの「スタイル」タブからスタイルを調整します。

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: Content components are empty content placeholders you add inside structure components in the Email Designer — including Container, Button, Text, Divider, HTML, Image, Social, Offer decision, and Grid — and configure through the Settings and Style tabs.

Intents:

  • Add and configure content components inside structure components
  • Insert buttons, text, dividers, images, social links, HTML, and offer decisions into an email
  • Group components inside a Container to apply a distinct style
  • Organize content into rows and columns with the Grid component
  • Insert personalized offers with the Offer decision component
  • Adjust component attributes and styling using the Settings and Style tabs

Glossary:

  • Content components: Empty content placeholders used to build and personalize email layout, added inside structure components (product-specific)
  • Container: A component that groups content components so a distinct style can be applied to the group (product-specific)
  • Grid: A component that organizes content into rows and columns, where each cell can contain other content components (product-specific)
  • Offer decision: A component that inserts offers into a message, with the decision management engine picking the best offer to deliver (product-specific)
  • Alt text: Caption defined for an image, corresponding to the alt HTML attribute (product-specific)

Guardrails:

  • If changes are made to an offer decision used in a journey’s message, you need to unpublish the journey and republish it so the changes are incorporated.
  • Follow the European accessibility act guidelines (accessible fonts, readable formats, and alternative text for images) when designing with content components.
  • For images, Adobe recommends using Adobe Assets rather than a source URL to keep links active and avoid expiration issues.
  • Button Target options: None (default, same frame), Blank (new window or tab), Self (same frame), Parent (parent frame), Top (full body of the window).
  • Use the Do not stack columns on mobile option to preserve a grid layout on mobile devices instead of stacking columns vertically.

Terminology:

  • Canonical name: Content components — Acronym: n/a — variants: content component
  • Synonyms: “Settings tab” and “Style tab” = the two configuration tabs in the right pane (also referred to as Styles tab)
  • Do not confuse: “Content components” (empty placeholders for content) ≠ “Structure components” (define the layout, hold content components)
  • Do not confuse: “Container” (styles a group of components) ≠ “Grid” (organizes components into rows and columns)

FAQ:

  • Q: Which content components are available? — Container, Button, Text, Divider, HTML, Image, Social, Offer decision, and Grid.
  • Q: How many components can go into a structure component? — You can add several components into a single structure component and into each column of a structure component.
  • Q: What happens after I change an offer decision used in a journey? — You must unpublish and republish the journey so the message reflects the latest updates.
  • Q: How do I insert an image? — Drag the Image component into a structure component, then Browse your assets, Import media to Adobe Experience Manager Assets, or Find Adobe Stock photos.
  • Q: Can I keep the grid layout on mobile? — Yes, use the Do not stack columns on mobile option.
recommendation-more-help
journey-optimizer-help