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

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

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

Last update: Sat Apr 04 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
チャネル

作成対象：

ユーザー

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

recommendation-more-help

前提条件

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

製品管理者は、web エクスペリエンスに含めるURL （ページ）を定義するために1つ以上のweb チャネルを設定しています。詳しくは、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 ブラウザー拡張機能がインストールされていることを確認します。この拡張機能は、web ページを開き、作成し、Journey Optimizer B2B edition 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 エクスペリエンスのデザインにビジュアルエディターを使用するには、次の手順を実行します。

web エクスペリエンスの詳細ページに「コンテンツ」タブが表示されたら、右側のパネルで「web エクスペリエンスを編集」をクリックします。

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

{width="800" modal="regular"}

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

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

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

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

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

表示されるページをWeb エクスペリエンスに合わせて変更する方法を定義するには、次の操作を行います。
- 新しいコンポーネント（区切り記号、HTML、画像、見出し、段落またはリンク）をweb エクスペリエンスのページに挿入します。
- 画像、ボタン、段落、テキスト、コンテナ、見出し、リンクなど、ページから既存の要素を選択し、web エクスペリエンス用に変更します。
- クリックトラッキングを要素に追加して、エンゲージメントを測定し、インサイトを収集します。
手順2を繰り返して、web エクスペリエンスに含める他のページを読み込み、手順3を繰り返してページの変更を定義します。
変更を確認し、必要な調整を行います。
変更が完了したら、エディターの上にある左矢印をクリックして、web エクスペリエンスのプロパティに戻ります。

要素を修正

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

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

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

アクション

説明

テキストオプション

選択したエレメントのテキストエレメントクラスまたはテキストスタイルを変更します。

画像を選択

画像ソースを置き換えるか、要素に画像を追加します。

リンクを編集/ リンクを追加

リンク URLを変更または追加します。

配置

選択したエレメントをディスプレイ内で前後に移動します。

パーソナライゼーションの追加

パーソナライゼーションの挿入：

トラック要素をクリック

要素にクリックトラッキングを追加します。

削除

選択した要素をページから削除します。

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

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

テキスト要素

ページ上のテキスト要素を選択します。
新しいテキストコンテンツを入力するか、テキスト文字列を選択して置換テキストを入力します。
（オプション）太字、斜体、整列など、テキスト書式設定オプションを使用します。
変更を適用するには、テキスト要素の外側をクリックします。

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

画像エレメント

ページ上の画像要素を選択します。
コンテキストツールバーまたは右側のパネルの画像を選択 アイコンをクリックします。
アセットライブラリから画像を参照して選択します。
必要に応じて、右側のパネルの画像のスタイル設定オプションを使用します。

ボタン要素

ページ上のボタン要素を選択します。
（オプション）ボタンに新しいテキストを入力するか、テキスト文字列を選択して置換テキストを入力します。

パーソナライゼーション機能を使用すれば、アカウントプロファイルや個人プロファイルのデータを使用して、ボタンテキストを変更できます。
必要に応じて、右側のパネルのボタンのスタイル設定オプションを使用します。

コンテナ要素

ページ上のコンテナ要素を選択します。
必要に応じて、右側のパネルのコンテナのスタイル設定オプションを使用します。

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

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

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

左側のコンポーネントタイプを選択し、追加する場所に隣接する要素にカーソルを合わせます。

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

表示されているボタンのいずれかをクリックして、コンポーネントを配置します。

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

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

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

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

Web エクスペリエンスの詳細ページに「コンテンツ」タブが表示されたら、右側のパネルで「変更を追加」をクリックします。

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

{width="800" modal="regular"}

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

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

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

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

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

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

CSS セレクターの変更

CSS セレクターの変更を使用すると、標準のCSS セレクター構文を使用して要素を正確にターゲティングできます。

変更タイプとして CSS セレクター を選択します。
「CSS エレメントセレクター」フィールドにセレクターを入力します。

**例セレクター：**

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

アクションタイプを選択し、必要な情報/コンテンツを指定します。
- コンテンツを設定 - CSS エレメントセレクター値で識別される要素のコンテンツ フィールドにテキストを入力します。
- 属性を設定 – 現在のCSS セレクターに関連付ける属性を指定して、この属性で要素を識別できるようにします。 属性名 フィールドに名前を入力し、コンテンツ フィールドに値を入力します。属性が既に存在する場合は、値が更新されます。それ以外の場合は、指定した名前と値で新しい属性が追加されます。
{width="800" modal="regular"}
（オプション）「パーソナライゼーションを追加」をクリックし、パーソナライゼーションエディターを使用して、コンテンツ用にカスタマイズされたパーソナライゼーションを作成します。

ページ修正

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

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

NOTE

カスタムコードは、訪問者のブラウザーで実行されます。コードが安全でテストされており、ページパフォーマンスやユーザーエクスペリエンスに悪影響を与えないようにします。

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

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

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

視覚的でないエディターのページヘッドの変更 {width="800" modal="regular"}

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

変更の管理 manage-modifications

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

各修正レコードには、次のものが含まれます。

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

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

修正の編集

変更リストで、編集する変更を見つけます。
詳細メニュー （…）アイコンをクリックし、編集を選択します。
必要に応じて変更プロパティを更新します。
保存をクリックして変更を保存します。

修正の削除

変更リストで、削除する変更を見つけます。
詳細メニュー （…）アイコンをクリックし、変更を削除を選択します。
プロンプトが表示されたら、削除を確認します。

修正をプレビュー

公開する前に、変更が訪問者にどのように表示されるかをプレビューします。

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

Desktop
タブレット
モバイル

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

プレビューが更新され、各デバイスサイズでの変更のレンダリング方法が表示されます。

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

クリック数の追跡 web-click-tracking

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

web エクスペリエンスがアクティブ化された場合（ライブ状態）、Adobe Customer Journey Analyticsを使用してレポートを作成することもできます（これには製品サブスクリプションが必要です）。 web エクスペリエンスのモニタリングを改善するには、web サイトの特定の要素のクリック数を追跡することもできます。トラッキングを使用すると、web レポートでその要素のクリック数を表示できます。

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

Web エクスペリエンスエディターで、画像やリンクなどの要素を選択します。
要素のプロパティまたはコンテキストツールバーで、要素を追跡 アイコンをクリックします。

{width="600" modal="regular"}
左側のパネルでクリックトラックリストを開き、トラッキング済みアクションの値を変更して、レポートでこのインタラクションを特定します。

{width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0