Visual Experience Composerのオプション
Adobe Target Standard/Premium 25.2.1 リリース（2015年2月17日（PT））では、更新されたVisual Experience Composer （VEC）が導入されています。 この記事では、更新されたUIとそのオプションについて説明します。
VECは、既存のアクティビティを作成または編集するときに表示されます。
VEC UIの概要
次の節では、A/B テスト アクティビティの更新されたVECで使用できるオプションについて説明します。 オプションは、アクティビティタイプによって異なります。
エクスペリエンス パネル
エクスペリエンス パネルがVECの左側のパネルに表示されます。
エクスペリエンス パネルを使用して、エクスペリエンスを表示、作成、名前変更、または削除できます。
エクスペリエンス パネルでは、次のオプションを使用できます。
- エクスペリエンスを表示：エクスペリエンスを表示するには、目的のエクスペリエンスをクリックして、 デザイン キャンバスに表示します。
- エクスペリエンスを追加: 追加 アイコン（
- エクスペリエンスの名前を変更: 名前を変更 アイコン （
- エクスペリエンスの複製、削除、またはリダイレクト:「その他のアクション」アイコン（
アクティビティ設定/設定 settings
デザイン キャンバスの上に表示されている設定 アイコン （
以下のオプションがあります。
- プロパティ: アクティビティにプロパティを割り当てるか、アクティビティからプロパティを削除します。 プロパティ は（Target Premium機能です。 詳しくは、Enterprise ユーザー権限を参照してください。
- ページ配信：サイト上の類似ページに同じエクスペリエンスを含めます。 ページテンプレートを使用して、ページに構造を提供したり、ページに類似した要素が含まれている場合は、類似の構造化ページ要素またはドメイン全体でバリエーションをテストします。 詳しくは、類似ページに同じエクスペリエンスを含めるを参照してください。
- サイト環境設定: サイト環境設定を構成して、TargetがCSS セレクターを生成する方法を指定します。 詳しくは、Visual Experience Composerの CSS セレクター を参照してください。
- 追加ページを追加: アクティビティに追加ページを追加して、複数ページにわたるストーリーを作成できるマルチページアクティビティを作成します。各ページに固有のデザインを使用します。 詳しくは、 マルチページアクティビティ を参照してください。
- 単一のオーディエンス: アクティビティに単一のオーディエンスを使用します。
- 複数のオーディエンス: アクティビティに複数のオーディエンスを割り当てます。 オーディエンスを追加アイコン（
デザイン /参照 モード
デザインキャンバスの上に表示される デザイン /参照 トグルを使用して、デザインと参照モードを切り替えます。
参照 モードを使用して、サイトを移動し、更新するビューまたはページを選択します。 デザイン モードに切り替えて、変更を追加または編集します。
取り消し/やり直し
取り消し アイコン （
VEC
アクションをやり直すには、取り消し/やり直し ボタングループを展開し、やり直しを選択します。
コンポーネント パネル
新しい コンポーネント パネルを使用して、web ページに多数のコンポーネントを追加し、必要に応じて編集できます。
エクスペリエンスに新しいコンポーネントを追加するには：
-
追加する目的のコンポーネントをクリックしてハイライト表示します。
使用可能なコンポーネントは、ロジックコンテナにグループ化されます。
-
基本
- ディバイダー
- HTML
- Image
-
テキスト
- 見出し
- 文章
- リンク
-
動的
-
-
デザイン キャンバスの既存のページ要素の上にコンポーネントをドラッグします。
-
選択したエレメントを置き換えるか、選択したエレメントの後にの前にコンポーネントを挿入するかを選択します。
変更 パネル
変更 レールを開くには、 コンポーネント レールの変更を表示 アイコン （
変更 パネルには、Visual Experience Composer （VEC）でページに加えられたすべての変更が表示され、追加の変更（CSS セレクター、Mbox、カスタムコードなど）を行うことができます。
レールヘッダーの詳細オプション アイコン（
各変更の横にある詳細オプション アイコン（
デザイン キャンバス
デザイン キャンバスでは、画面に合わせて表示するビューポート、 デスクトップ 、 タブレット 、 モバイルランドスケープ 、 モバイルポートレート などを選択できます。 デフォルトでは、キャンバスは、管理 セクションで定義されたビューポートと共に、ページを画面に合わせます。
適切なアイコン（
デザイン キャンバスでページ要素をクリックすると、その要素タイプで使用できるオプションがメニューに表示されます。 さらに、ページの下部に DOM パスが表示されるので、ページ構造を簡単にナビゲートできます。
様々なVisual Experience Composer （VEC）アクションは、作業をより迅速かつ効率的にするために、適切なメニューオプションにグループ化されています。
プロパティ パネル
プロパティ パネルでは、選択した要素がHTMLの要素であるか、レコメンデーションやオファーなどTargetに固有のオブジェクトであるかを問わず、ページ上の選択した要素のプロパティを変更できます。
パネルの上部にあるアイコンをクリックして、HTML コードを編集したり、エレメントを削除、複製、非表示にしたりできます。 変更が変更 パネルに表示されます。
右側のパネルの プロパティ パネルは折りたたみ可能で、デザインキャンバスを非表示にしたり、デザインキャンバスを拡大したりできます。 パネルの右側にある プロパティ アイコン（
デザイン キャンバスを使用した要素の編集 design
次のセクションでは、 デザイン キャンバスで画像とテキストを編集する方法について説明します。 デザインキャンバス、コンポーネント、変更、プロパティのレールには、アクティビティのエクスペリエンスを簡単に作成するための強力なツールが用意されています。
画像オプション
A/B テスト アクティビティで画像をクリックすると、VECは次の図のようになります。
画像が選択された
左側の コンポーネント フレームからコンポーネントを選択して、次の要素を挿入します。
- 基本（ディバイダ、HTML、画像）。
- テキスト（見出し、段落、リンク）。
- 動的（Recommendation、 エクスペリエンスフラグメント 、HTML オファー）。
画像の上部にあるメニューを使用すると、次の操作を実行できます。
- リンク（
- 画像を変更します（
- パーソナライゼーションを追加（
- 画像を削除します（
右側の プロパティ ペインでは、画像のプロパティをさらに設定できます。
フレームの上部にあるアイコンを使用すると、次のことが可能になります。
- HTMLを編集します（
- 画像を複製します（
- 画像を削除します（
- 画像を非表示にします（
右側のフレームのオプションを使用すると、次のことが可能になります。
- CSS クラスを編集します。
- 画像のプロパティ（ソース、タイトル、代替テキスト）を設定します。
- リンク URLを編集します。
- 画像のサイズ（高さと幅）を設定します。 「詳細オプションを表示」をクリックして、画像の最小および最大サイズ、幅、高さ、オーバーフロー、およびオブジェクトのフィットを設定します。
- ページ上の画像の位置（絶対、固定、相対、静的、またはスティッキー）を設定します。
- マージンやパディングなど、エレメントの間隔を設定します。
- エレメントの効果（不透明度）を設定します。 「詳細オプションを表示」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ぼかしの値を設定します。 画像を反転または回転することもできます。
- 画像のインラインスタイルを設定します。
テキストオプション
A/B テスト アクティビティでテキストをクリックすると、VECは次の図のようになります。
テキストが選択された
左側の コンポーネント フレームからコンポーネントを選択して、次の要素を挿入します。
- 基本（ディバイダ、HTML、画像）。
- テキスト（見出し、段落、リンク）。
- 動的（Recommendation、 エクスペリエンスフラグメント 、HTML オファー）。
変更を表示 アイコン（
テキスト要素の上部にあるメニューを使用すると、次の操作を実行できます。
- テキストのプロパティ（見出しレベル、段落、ブロック引用符、またはモノスペース）を設定する
- テキストの色を選択（
- テキストの属性（太字、斜体、下線、取り消し線）を設定します（
- テキストの整列（左、中央、右、均等配置）を設定します（
- リンク（
- コンテンツをHTML オファー、 エクスペリエンスフラグメント またはRecommendationに置き換えます。
- HTMLを編集します（
- パーソナライゼーションを追加（
- 画像を削除します（
右側の プロパティ パネルでは、テキストのプロパティをさらに設定できます。
フレームの上部にあるアイコンを使用すると、次のことが可能になります。
- HTMLを編集します（
- テキストを複製します（
- テキストを削除します（
- テキストを非表示にします（
右側のフレームのオプションを使用すると、次のことが可能になります。
- CSS クラスを編集します。
- テキストの背景色と画像を設定します。
- テキストのタイポグラフィ（見出しスタイル、フォントサイズ、フォントの太さ、行の高さ、整列、テキストカラー、テキストスタイル（太字、斜体、下線、取り消し線））を設定します。
- 箇条書き、自動番号、A、B、Cなどのリストを設定します。
- 境界線の色を選択します。
- テキストボックスのサイズ（高さと幅）を設定します。 「詳細オプションを表示」をクリックして、テキストボックスの最小および最大サイズ、幅、高さ、オーバーフロー、およびオブジェクトのフィットを設定します。
- ページ上のテキストボックスの位置（絶対、固定、相対、静的、またはスティッキ）を設定し、上、右、下、左のピクセル数を設定します。
- マージンやパディングなど、エレメントの間隔を設定します。
- エレメントの効果（不透明度）を設定します。 「詳細オプションを表示」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ぼかしの値を設定します。 テキストを反転または回転することもできます。
- インラインスタイルを設定します。
HTMLを編集
HTML コードだけでなく、カスタム JavaScript を編集および挿入することもできます。
A/Bおよび エクスペリエンスのターゲット設定 アクティビティのテキストとHTMLを編集する際に、いくつかのリッチテキストの書式設定オプションを利用できます。 フォントの選択、フォントスタイルの選択、テキストの整列方法の変更およびその他の標準的なテキスト書式オプションの設定が可能です。 HTMLを変更する場合は、コードビューとHTMLのリッチエディティングビューを切り替えることができます。
次の HTML5 タグをネストできます。
<a><h1-h6>、<p>、<ul>、<ol>、<menu>、<div>、<figure>、<figcaption><ins><h1-h6>、<p>、<ul>、<ol>、<menu><del><ul>、<ol>、<menu>、<h1-h6>、<p><label><p>DOM パスを使用したエレメントの移動 dom-path
ページで要素をクリックすると、VEC オプションメニューが表示されます。 さらに、要素をクリックすると、対応する DOM パスがページの下部に表示されます。
DOM パスが表示されない場合は、DOMを表示 アイコン（
DOM パスを使用すると、選択した要素に関する情報（タイプ、ID、クラス）をすばやく確認したり、DOM パスを上下に移動して目的の要素を選択したりできます。
DOM パスを使用すれば、VEC 内で任意の親要素、兄弟要素、子要素に容易に移動できます。
DOM パス機能は、クリックの追跡を設定するときにも使用できます。
更新された UI に関する詳細情報
-
Target Standard/Premium 25.2.1（2025年2月17日（PT））リリースノート：Target のアクティビティ、レコメンデーション、Visual Experience Composer（VEC）に関する主な UI の変更の概要について説明します。
-
Target Standard/Premium 25.1.1（2025年1月9日（PT））リリースノート：Target のオファーライブラリ に関する主な UI の変更の概要について説明します。
-
Target UI について：Target に慣れるための概要と、より詳細な情報と手順を説明するリンクを提供します。
-
Visual Experience Composer の変更：Adobe Target Standard/Premium 25.2.1 リリース（2015年2月17日（PT））では、更新された Visual Experience Composer（VEC）が導入されています。 この記事では、VEC のレガシーバージョンと更新されたバージョンの違いについて説明します。
-
Visual Experience Composer オプション：この記事では、更新された VEC UI とそのオプションについて説明します。
-
Target UI の更新に関する FAQ：この FAQ では、ナビゲーションの変更、機能の場所、一時的な UI バージョンの切替スイッチの非推奨（廃止予定）など、新しい Target UI と Visual Experience Composer（VEC）に関するよくある質問について説明します。 マーケター、開発者、管理者のいずれであっても、この FAQ はスムーズに移行し、更新された UI を最大限に活用するのに役立ちます。