ドキュメントJourney Optimizer B2BJourney Optimizer B2B エディションのドキュメント

[ベータ版]{class="badge informative" title="この機能は、現在、限定ベータ版リリース中です"}

Web エクスペリエンスデザイン

Last update: Mon Jan 12 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • ユーザー

Web エクスペリエンスを作成 ​ した後で、コンテンツデザインスペースを使用して、Web ページに適用する変更を定義します。

recommendation-more-help

前提条件

Web エクスペリエンスをデザインする前に、次の要件が満たされていることを確認します。

  • 製品管理者は、1 つ以上の web チャネルを設定して、web エクスペリエンスに含める URL （ページ）を定義しています。 詳しくは、「Web チャネル設定 ​」を参照してください。

  • Web サイトには、訪問者の特定とコンテンツ配信のために Adobe Experience Platform Web SDK （alloy.js）が実装されています。 Adobe Experience Platform Web SDK バージョン 2.16 以降が必要です。

  • ジャーニーで web エクスペリエンスを作成および管理するために必要な ​ 権限 ​ を持っている。

    • キャンペーン/キャンペーンの管理 - web パーソナライゼーションアクションノードを追加または更新するために必要です。
    • キャンペーン/キャンペーンを表示 - Web パーソナライゼーションアクションノードの詳細を表示するために必要です。
style
shade-box
IMPORTANT
Web エクスペリエンスをデザインする前に、web ブラウザーにAdobe Experience Cloud Visual Editing Helper ブラウザー拡張機能がインストールされていることを確認します。 この拡張機能は、Journey Optimizer B2B editionの web エクスペリエンスデザイン領域で web ページを確実に開いて作成し、プレビューするために必要です。
現在、Google ChromeとMicrosoft Edgeは、Journey Optimizer B2B editionでの web エクスペリエンスの拡張とオーサリングをサポートしている唯一のブラウザーです。 詳しくは、Visual Editing Helper 拡張機能のインストール ​ を参照してください。

Web エクスペリエンスエディター

Journey Optimizer B2B editionには、web 変更を設計するための 2 種類のエディターが用意されています。

エディタ
説明
に最適
​ ビジュアルエディター ​
Web サイトを表示し、要素を直接選択および変更できるWYSIWYG （What You See Is What You Get） エディター。 Google ChromeまたはMicrosoft Edge web ブラウザーの Visual Editing Helper 拡張機能 ​ が必要です。
テキスト、画像、ボタン、バナーなど、表示されるページ要素に視覚的な変更を加える。
​ 非視覚的エディター ​
ビジュアルエディターでは不可能な変更を適用するためのコードベースのエディター。
視覚的な選択が困難な要素のターゲティング、高度な CSS 変更の適用、非表示要素の変更。

Web エクスペリエンスのプロパティで、「ビジュアルエディター」オプションを使用して、エディターのタイプを判断します。 ビジュアルエディターを使用する場合はオプションを有効にし、ビジュアルエディター以外の場合は無効にします。

​ ビジュアルエディターオプションが有効 ​ {width="400"}

ビジュアルエディター visual-editor

ビジュアルエディターが、iframe 内の web ページを読み込み、ページプレビューで直接要素を選択して変更を適用できます。 Web エクスペリエンスのデザインにビジュアルエディターを使用するには、次の手順を実行します。

  1. Web エクスペリエンスの詳細ページに表示された「コンテンツ」タブを使用して、右側のパネルの Web エクスペリエンスを編集 をクリックします。

    ビジュアルエディターは、web チャネルの設定に基づいて web サイトを読み込みます。

    Web エクスペリエンスビジュアルエディター ​ {width="800" modal="regular"}

  2. 必要に応じて、右上の 参照 をクリックし、サイトナビゲーションバーを使用して、変更する特定のページを読み込みます。

    また、上部のフィールドにページ URL を入力することもできます。

    note note
    NOTE
    読み込んだページが、web チャネル設定で定義された URL パターンと一致することを確認します。 右上の 設定の詳細を表示 をクリックすると、選択した web チャネル設定の URL またはページ一致ルールが表示されます。

    ​ ビジュアルエディターでの参照モード ​ {width="700" modal="regular"}

    右上の デザイン をクリックして、デザインスペースにページを読み込みます。

  3. Web エクスペリエンスに合わせて表示されるページの変更方法を定義するには、次の操作を実行します。

  4. 手順 2 を繰り返して、web エクスペリエンスに含める他のページを読み込み、手順 3 を繰り返して、ページの変更を定義します。

  5. ​ 変更をレビューし ​ 必要な調整を行います。

  6. 変更が完了したら、エディターの上にある左矢印をクリックして、web エクスペリエンスプロパティに戻ります。

要素の変更

表示されたページの要素をクリックして選択します。 青い境界線は選択した要素を示し、コンテキストツールバーに変更オプションが表示されます。

​ 変更する要素を選択 ​ {width="700" modal="regular"}

ツールバーのオプションは、選択したコンポーネントタイプによって異なります。

アクション
説明
テキストオプション
選択した要素のテキスト要素クラスまたはテキストのスタイル設定を変更します。
画像を選択
画像のソースを置き換えるか、要素に画像を追加します。
リンクを編集/リンクを追加
リンク URL を変更または追加します。
整列
選択した要素をディスプレイ内で前後に移動します。
パーソナライゼーションの追加
パーソナライゼーションを挿入します。
クリック追跡要素
要素のクリックの追跡を追加します。
削除
選択した要素をページから削除します。

選択した要素について、右側のパネルのプロパティが、使用可能なスタイル設定とアクションを反映して変更されます。 パネルの上部にあるアクションアイコンをクリックして、選択した要素を複製、クリック追跡、削除または非表示にします。

​ 選択した要素のアクションアイコンをクリック ​ {width="300"}

テキスト要素

  1. ページ上のテキスト要素を選択します。

  2. 新しいテキストコンテンツを入力するか、テキスト文字列を選択して置換テキストを入力します。

  3. （オプション）太字、斜体、配置など、​ テキスト書式設定オプション ​ を使用します。

  4. テキスト要素の外側をクリックして、変更を適用します。

テキストコンポーネントのテキストスタイルオプションについて詳しくは、​ コンテンツコンポーネント ​ を参照してください。

画像要素

  1. ページ上の画像要素を選択します。

  2. コンテキストツールバーまたは右側のパネルにある「画像を選択」アイコンをクリックします。

  3. アセットライブラリから画像を参照して選択します。

  4. 必要に応じて、右側のパネルの ​ 画像スタイル設定オプション ​ を使用します。

ボタンの要素

  1. ページ上のボタン要素を選択します。

  2. （オプション）ボタンの新しいテキストを入力するか、テキスト文字列を選択して置き換えるテキストを入力します。

    パーソナライゼーションを使用すると、アカウントプロファイルまたはユーザープロファイルのデータを使用してボタンテキストを変更できます。

  3. 必要に応じて、右側のパネルの ​ ボタンのスタイルオプション ​ を使用します。

コンテナ要素

  1. ページ上でコンテナ要素を選択します。

  2. 必要に応じて、右側のパネルの ​ コンテナのスタイルオプション ​ を使用します。

新しいコンポーネントの挿入

ビジュアルエディターのデザインの左側のナビゲーションで「+」アイコンを選択すると、次のコンポーネントタイプを web エクスペリエンスの変更としてページに追加できます。

  • ディバイダー – このコンポーネントを使用すると、分割線を挿入してメールのレイアウトと内容を整理できます。 線の色、スタイル、高さなどのスタイル属性は、右側のパネルのプロパティから調整できます。 詳しくは、​ コンテンツコンポーネント ​ の ディバイダー を参照してください。
  • HTML – このコンポーネントを使用して、既存の構造にHTML コードをコピーして貼り付けます。 これにより、無料のモジュラーHTML コンポーネントを作成して、一部の外部コンテンツを再利用できます。 詳しくは、{ コンテンツコンポーネント ​ の ​0}HTML を参照してください。
  • 画像 – このコンポーネントを使用して、ページに画像ファイルを挿入します。 幅や高さなどのスタイル属性は、右側のパネルのプロパティから調整できます。 詳しくは、​ コンテンツコンポーネント ​ の 画像 を参照してください。
  • 見出し – このコンポーネントを使用して、見出しクラステキストを挿入します。 テキストの色、スタイル、フォント、サイズなどのスタイル属性は、右側のパネルのプロパティから調整できます。 詳しくは、​ コンテンツコンポーネント ​ の テキスト を参照してください。
  • 段落 – このコンポーネントを使用して、標準テキスト要素を挿入します。 テキストの色、スタイル、フォント、サイズなどのスタイル属性は、右側のパネルのプロパティから調整できます。 詳しくは、​ コンテンツコンポーネント ​ の テキスト を参照してください。
  • リンク – このコンポーネントを使用すると、指定した URL への独立したテキストリンクを挿入できます。 テキストの色、スタイル、配置、サイズなどのスタイル属性は、右側のパネルのプロパティから調整できます。

左側のコンポーネントタイプを選択し、追加先に隣接する要素の上にマウスポインターを置きます。

​ ビジュアルエディターインターフェイス – 新しいコンポーネント ​ {width="800" modal="regular"}

表示されたボタンの 1 つをクリックして、コンポーネントを配置します。

  • *前に挿入 – 選択した要素の前にコンポーネントを挿入します。
  • *後ろに挿入 – 選択した要素の後ろにコンポーネントを挿入します。

挿入するコンポーネントタイプの選択を解除するには、ページ上部に表示される青いコンテキストバナーの ESC をクリックします。

非視覚的エディター non-visual-editor

ビジュアルエディターでは簡単には実現できない変更を加える必要がある場合は、非ビジュアルエディターを使用します。 このコードベースのアプローチにより、要素のターゲティングと変更を正確に制御できます。 非視覚的なエディターを使用して web エクスペリエンスをデザインするには、次の手順を実行します。

  1. Web エクスペリエンスの詳細ページに表示される コンテンツ タブを使用して、右側のパネルの 変更を追加 をクリックします。

    非視覚的なエディターは、web チャネル設定に基づいてページを読み込みます。

    ​ 非視覚的エディターインターフェイス ​ {width="800" modal="regular"}

  2. 最初に行う変更を定義します。

    左側のパネルには、既存の変更のリストが表示されます（存在する場合）。 追加 をクリックして、新しい変更を定義します。 変更が定義されていない場合、パネルのデフォルトは 変更を追加 オプションになります。

    • 変更タイプ を選択します。

      table 0-row-2 1-row-2 2-row-2
      タイプ 説明
      CSS セレクター ​ CSS セレクター文字列を使用して要素をターゲットに設定します。
      ​ ページ ​ カスタム HTML、CSS、JavaScriptを、<head> や <body> などのページレベルの要素に挿入する。

    • タイプに応じて変更パラメーターを設定します。

      • CSS セレクター – 特定の要素をターゲットにする有効な CSS セレクターを入力します。
      • アクションタイプ – 実行するアクション（編集、非表示、削除、挿入、置換）を選択します。
      • コンテンツ – 適用するコンテンツまたはスタイルを指定します。

  3. 保存 をクリックして、変更を適用します。

CSS セレクターの変更

CSS セレクターの変更により、標準の CSS セレクター構文を使用して、要素を正確にターゲットにすることができます。

  1. 変更のタイプとして CSS セレクター を選択します。

  2. 「CSS 要素セレクター」フィールドにセレクターを入力します。

**例セレクター：**

| セレクター | ターゲット |
| -------- | ------- |
| &#39;#hero-banner&#39; | ID が「hero-banner」の要素 |
| &#39;.cta-button&#39; | &#39;cta-button&#39; クラスを持つすべての要素 |
| &#39;ヘッダーナビゲーション a&#39; | ナビゲーション内のリンク、ヘッダー内 |
| &#39;[data-offer=&quot;premium&quot;]&#39; |特定のデータ属性を持つ要素 |

  1. アクションタイプ を選択し、必要な情報/コンテンツを指定します。

    • コンテンツを設定 - CSS 要素セレクター 値によって識別される要素の「コンテンツ」フィールドにテキストを入力します。

    • 属性を設定 – 現在の CSS セレクターに関連付ける属性を指定し、この属性によって要素を識別できるようにします。 属性名 フィールドに名前を入力し、コンテンツ フィールドに値を入力します。 属性が既に存在する場合は、値が更新されます。存在しない場合は、指定された名前と値で新しい属性が追加されます。

    ​ 非ビジュアルエディターの css セレクターの変更 ​ {width="800" modal="regular"}

  2. （任意）「パーソナライゼーションを追加」をクリックし、​ パーソナライゼーションエディター ​ を使用して、コンテンツ用にカスタマイズされたパーソナライゼーションを作成します。

ページの変更

ページコンテン <head> 変更タイプを使用して、カスタムコードを追加できます。 <head> 要素は、メタデータ（データに関するデータ）のコンテナで、<html> タグと <body> タグの間に配置されます。この場合、コードは本文やページの読み込みイベントを待たずに、ページの読み込みの開始時に実行されます。

<head> 要素は、通常、ページの上部に JavaScript または CSS コードを追加するために使用されます。後続のビジュアルアクションのセレクターは、このタブに追加される HTML 要素に応じて異なります。

NOTE
カスタムコードは訪問者のブラウザーで実行されます。 コードが安全かつテスト済みで、ページのパフォーマンスやユーザーエクスペリエンスに悪影響を与えないことを確認します。

  1. 変更のタイプとして「ページ<head>」を選択します。

  2. コンテンツ​ボックスでカスタムコードを追加します。

    note caution
    CAUTION
    <head> セクションに <script> 要素および <style> 要素のみを追加できます。<div> タグやその他の要素を追加すると、残りの <head> 要素が <body> 内に入力される可能性があります。

    ​ ビジュアルエディター以外のページヘッドの変更 ​ {width="800" modal="regular"}

  3. （任意）「パーソナライゼーションを追加」をクリックし、​ パーソナライゼーションエディター ​ を使用して、コンテンツ用にカスタマイズされたパーソナライゼーションを作成します。

変更の管理 manage-modifications

作成したすべての変更は追跡され、ビジュアルエディターと非ビジュアルエディターの両方の 変更 パネルから管理できます。 左側のツールバーの 変更 アイコンをクリックして、すべての変更を表示します。

各変更レコードには、以下が含まれます。

  • ターゲット要素またはセレクター
  • 変更の種類（編集、非表示、挿入など）
  • 変更のプレビュー

​ 変更パネル ​ {width="500" modal="regular"}

変更の編集

  1. 変更 リストで、編集する変更を見つけます。

  2. 詳細メニュー （…）アイコンをクリックし、「編集」を選択します。

  3. 必要に応じて、変更プロパティを更新します。

  4. 「保存」をクリックして変更を保存します。

変更の削除

  1. 変更 リストで、削除する変更を見つけます。

  2. 詳細メニュー （…）アイコンをクリックし、「変更を削除」を選択します。

  3. プロンプトが表示されたら、削除を確認します。

変更をプレビュー

公開する前に、訪問者に対する変更の表示をプレビューします。

ビジュアルエディターの上部にあるデバイスプレビューオプションを使用して、次の場所で変更を表示します。

  • Desktop
  • タブレット
  • モバイル

​ プレビュー用のデバイスのサイズの変更 ​ {width="550" modal="regular"}

プレビューが更新され、各デバイスサイズで変更がどのようにレンダリングされるかが表示されます。

URL バーを使用して、web チャネル設定内の別のページに移動します。 次に、URL マッチングルールに基づいて、変更がターゲットページに正しく適用されることを確認します。

Web エクスペリエンスのクリックトラッキング web-click-tracking

要素とのユーザーインタラクションを追跡して、エンゲージメントを測定し、インサイトを収集します。 クリック追跡データは、エンゲージメントレポートで使用でき、web エクスペリエンスの変更の有効性を測定するために使用できます。

Web エクスペリエンスがアクティベートされた（ライブ）場合、Adobe Customer Journey Analyticsを使用してレポートを作成することもできます（これには商品のサブスクリプションが必要です）。 Web エクスペリエンスの監視を向上させるために、web サイトの特定の要素に対するクリック数を追跡することもできます。 トラッキングを使用すると、web レポートにその要素のクリック数を表示できます。

Customer Journey Analyticsと web レポートの作成について詳しくは、Customer Journey Analytics ドキュメント ​ を参照してください。

  1. Web エクスペリエンスエディターで、画像やリンクなどの要素を選択します。

  2. 要素プロパティまたはコンテキストツールバーで、「クリック追跡要素」アイコンをクリックします。

    Web エクスペリエンス要素のクリックの追跡を有効にする ​ {width="600" modal="regular"}

  3. 左側のパネルでクリック追跡リストを開き、追跡されたアクション 値を変更して、レポートでこのインタラクションを識別します。

    Web エクスペリエンスのクリック追跡 ID の設定 ​ {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0