Visual Experience Composer個のオプション

Adobe Target Standard/Premium 25.2.1 リリース（2015年2月17日（PT））では、更新されたVisual Experience Composer （VEC）が導入されています。 この記事では、更新されたUIとそのオプションについて説明します。

VECは、既存のアクティビティを作成または編集するときに表示されます。

VEC UIの概要

次の節では、A/B Test アクティビティの更新されたVECで使用できるオプションについて説明します。 オプションは、アクティビティタイプによって異なります。

Experiences パネル

Experiences パネルがVECの左側のパネルに表示されます。

Experiences パネルを使用して、エクスペリエンスを表示、作成、名前変更または削除できます。

Experiences パネルでは、次のオプションを使用できます。

アクティビティ設定/設定 settings

Design キャンバスの上に表示されているConfigure アイコン（ ）をクリックして、アクティビティのプロパティメニューを表示します。

以下のオプションがあります。

Design/Browse モード

デザイン キャンバスの上に表示されるDesign/Browseの切り替えスイッチを使用して、デザイン モードと参照モードを切り替えます。

Browse モードを使用してサイトを移動し、更新するビューまたはページを選択します。 変更を追加または編集するには、Design モードに切り替えます。

Undo／Redo

Undo アイコン（ ）をクリックして行った変更を取り消すことができます。

VEC の取り消しアイコン

アクションをやり直すには、取り消し/Redo ボタン グループを展開し、Redoを選択します。

Components パネル

新しいComponents パネルを使用して、web ページに多数のコンポーネントを追加し、必要に応じて編集できます。

NOTE

Components パネルではなくModifications パネルがこの領域に表示されている場合は、Show Components アイコン （ ）をクリックします。 Show Components アイコン （ ）とShow Modifications アイコン （ ）は、適切なオプションを表示するための切り替えスイッチとして機能します。

Components パネルを折りたたんでDesign キャンバスを拡大し、Components パネルを開いている間に、（ ）アイコンをクリックします。

エクスペリエンスに新しいコンポーネントを追加するには：

Modifications パネル

Modifications パネルを開くには、Components パネルのShow Modifications アイコン（ ）をクリックします。

NOTE

Show Components アイコン （ ）とShow Modifications アイコン （ ）は、適切なオプションを表示するための切り替えスイッチとして機能します。

Modifications パネルを折りたたんでDesign キャンバスを拡大し、Modifications パネルを開いている間に、Show Modifications アイコン （ ）をクリックします。

Modifications パネルには、Visual Experience Composer （VEC）でページに加えられたすべての変更が表示され、追加の変更（CSS セレクター、Mbox、カスタムコードなど）を行うことができます。

レールヘッダーの​More Options アイコン（ ）をクリックして、変更を追加するか、すべての変更を削除するか、無効なすべての変更を削除します。 Selectをクリックして一括操作を実行します：Apply to All PagesまたはDelete。

各変更の横にある​More Options アイコン（ ）をクリックして、情報を表示したり、変更を削除したり、変更を他のビューに適用したりします。

Design個のキャンバス

Design キャンバスを使用すると、画面に合うビューポート、Desktop、Tablet、Mobile LandscapeおよびMobile Portraitを含むビューポートを選択できます。 デフォルトでは、キャンバスは、管理 セクションで定義されたビューポートと共に、ページを画面に合わせます。

適切なアイコン（ または ）をクリックして、ズームインまたはズームアウトすることもできます。

Design キャンバスでページ要素をクリックすると、その要素タイプで使用できるオプションがメニューに表示されます。 さらに、ページの下部に DOM パスが表示されるので、ページ構造を簡単にナビゲートできます。

様々なVisual Experience Composer （VEC） アクションは、ジョブをより迅速かつ効率的にするために、適切なメニューオプションにグループ化されます。

Properties パネル

Properties パネルを使用すると、選択した要素がHTMLの要素であるか、レコメンデーションやオファーなど、Targetに固有のオブジェクトであるかを問わず、ページ上の選択した要素のプロパティを変更できます。

パネルの上部にあるアイコンをクリックして、HTML コードを編集したり、エレメントを削除、複製、非表示にしたりできます。 変更がModifications パネルに表示されます。

右側のパネルでPropertiesのパネルを折りたたむことができ、デザインキャンバスを非表示にしたり、デザインキャンバスを拡大したりできます。 パネルの右側にあるShow/Hide Properties アイコン（ ）をクリックして、Properties パネルを折りたたんだり表示したりします。

Design キャンバスを使用した要素の編集 design

次のセクションでは、Design キャンバスで画像とテキストを編集する方法について説明します。 デザインキャンバス、コンポーネント、変更、プロパティのレールには、アクティビティのエクスペリエンスを簡単に作成するための強力なツールが用意されています。

画像オプション

A/B Test アクティビティで画像をクリックすると、VECは次の図のようになります。

画像が選択された

左側のComponents フレームからコンポーネントを選択して、次の要素を挿入します。

画像の上部にあるメニューを使用すると、次の操作を実行できます。

右側のProperties ペインでは、画像のプロパティをさらに設定できます。

フレームの上部にあるアイコンを使用すると、次のことが可能になります。

右側のフレームのオプションを使用すると、次のことが可能になります。

テキストオプション

A/B Test アクティビティでテキストをクリックすると、VECは次の図のようになります。

テキストが選択された

左側のComponents フレームからコンポーネントを選択して、次の要素を挿入します。

Show Modifications アイコン（ ）をクリックして、エクスペリエンスに変更を表示します。

テキスト要素の上部にあるメニューを使用すると、次の操作を実行できます。

右側のProperties パネルでは、テキストのプロパティをさらに設定できます。

フレームの上部にあるアイコンを使用すると、次のことが可能になります。

右側のフレームのオプションを使用すると、次のことが可能になります。

HTMLを編集

HTML コードだけでなく、カスタム JavaScript を編集および挿入することもできます。

A/BおよびExperience TargetingのアクティビティでテキストとHTMLを編集する場合は、いくつかのリッチテキスト書式設定オプションを利用できます。 フォントの選択、フォントスタイルの選択、テキストの整列方法の変更およびその他の標準的なテキスト書式オプションの設定が可能です。 HTMLを変更する場合は、コードビューとHTMLのリッチエディティングビューを切り替えることができます。

次の HTML5 タグをネストできます。

DOM パスを使用したエレメントの移動 dom-path

ページで要素をクリックすると、VEC オプションメニューが表示されます。 さらに、要素をクリックすると、対応する DOM パスがページの下部に表示されます。

DOM パスが表示されない場合は、Show DOM アイコン（ ）をクリックします。

DOM パスを使用すると、選択した要素に関する情報（タイプ、ID、クラス）をすばやく確認したり、DOM パスを上下に移動して目的の要素を選択したりできます。

DOM パスを使用すれば、VEC 内で任意の親要素、兄弟要素、子要素に容易に移動できます。

DOM パス機能は、クリックの追跡を設定するときにも使用できます。

更新された UI に関する詳細情報