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 パネルでは、次のオプションを使用できます。
- エクスペリエンスの表示：エクスペリエンスを表示するには、目的のエクスペリエンスをクリックして Design キャンバスに表示します。
- エクスペリエンスを追加：エクスペリ Add ンス アイコン（
- エクスペリエンス名の変更：エクスペリ Rename ンス アイコン（
- エクスペリエンスの複製、削除またはリダイレクト：エクスペリ More Actions ンスのアイコン（
アクティビティの設定/設定
Design キャンバスの上部に表示されている Configure アイコン
以下のオプションがあります。
- Properties: アクティビティにプロパティを割り当てるか、アクティビティからプロパティを削除します。 Properties は（Target Premium 機能です。 詳しくは、Enterprise ユーザー権限を参照してください。
- Page Delivery：サイトの類似のページに同じエクスペリエンスを組み込みます。 ページテンプレートを使用してページに構造を提供するか、ページに類似の要素が含まれている場合は、類似した構造のページ要素またはドメイン全体でのバリエーションをテストします。 詳しくは、 類似のページに同じエクスペリエンスを組み込むを参照してください。
- Site Preferences: サイトの環境設定を設定して、Target が CSS セレクターを生成する方法を指定します。 詳しくは、Visual Experience Composer🔗 の設定の CSS セレクター を参照し ください。
- 追加のページ：アクティビティにページを追加して、複数ページのアクティビティを作成します。このアクティビティでは、各ページに固有のデザインを使用して、複数ページにわたるストーリーを作成できます。 詳しくは、 複数ページアクティビティを参照してください。
- 単一オーディエンス：アクティビティに単一のオーディエンスを使用します。
- 複数のオーディエンス：アクティビティに複数のオーディエンスを割り当てます。 オーディエンスを追加アイコン（
Design/Browse モード
デザインキャンバスの上部に表示されている Design/Browse の切り替えを使用して、デザインモードと参照モードを切り替えます。
Browse モードを使用してサイトを移動し、更新するビューまたはページを選択します。 Design モードに戻って、変更を追加または編集します。
Undo／Redo
取り消しアイコン（
アクションをやり直すには、「 取り消し/取り Redo し」ボタングループを展開し、「取り Redo し」を選択します。
Components パネル
Web ページに多数のコンポーネントを追加し、必要に応じて新しい Components パネルを使用して編集できます。
新しいコンポーネントをエクスペリエンスに追加するには：
-
追加するコンポーネントをクリックしてハイライト表示します。
使用可能なコンポーネントは、次の論理コンテナにグループ化されます。
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
コンポーネントを Design キャンバス内の既存のページ要素にドラッグします。
-
を選択すると、選択した要素のの前にコンポーネントを挿入できます。
以前の VEC バージョンと比較して、選択した要素をコンポーネントで置き換えることはできません。
Modifications パネル
Modifications パネルを開くには、Components パネルの Show Modifications アイコン（
Modifications パネルには、Visual Experience Composer （VEC）内のページに加えられたすべての変更が表示され、追加の変更（CSS セレクター、mbox、カスタムコードなど）を行うことができます。
パネルヘッダーの More Options
各変更の横にある 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 アイコン
Design キャンバスを使用した要素の編集 design
次の節では、Design キャンバスで画像とテキストを編集する方法について説明します。 デザインキャンバスは、コンポーネント パネル、変更パネル、プロパティパネルと共に、アクティビティのエクスペリエンスを容易に作成できる強力なツールを提供します。
画像オプション
A/B Test アクティビティの画像をクリックすると、VEC は次の図のようになります。
左側の Components フレームからコンポーネントを選択して、次の要素を挿入します。
- 基本（ディバイダー、HTML、画像）。
- テキスト（見出し、段落、リンク）。
- 動的（ レコメンデーション、 エクスペリエンスフラグメント、HTML オファー）。
画像上部のメニューでは、次の操作を実行できます。
- リンクを挿入します（
- 画像を変更します（
- パーソナライゼーションを追加（
- 画像を削除します（
右側の Properties パネルでは、画像のプロパティをさらに設定できます。
フレームの上部にあるアイコンを使用すると、次の操作を実行できます。
- HTMLを編集します（
- 画像を複製します（
- 画像を削除します（
- 画像を非表示にします（
右側のフレームのオプションを使用すると、次の操作を実行できます。
- CSS クラスを編集します。
- 画像のプロパティ（ソース、タイトル、代替テキスト）を設定します。
- リンク URL を編集します。
- 画像のサイズ（高さと幅）を設定します。 「Show Advanced Options」をクリックして、画像の最小および最大サイズ、幅、高さ、オーバーフロー、オブジェクトのフィットを設定します。
- ページ上の画像の位置（絶対パス、固定パス、相対パス、静的パス、スティッキーの各パス）を設定します。
- 余白やパディングを含む、要素の間隔を設定します。
- 要素の効果（不透明度）を設定します。 「Show Advanced Options」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ブラーの値を設定します。 また、画像を反転または回転させることもできます。
- 画像のインラインスタイルを設定します。
テキストオプション
A/B Test アクティビティでテキストをクリックすると、VEC は次の図のようになります。
左側の Components フレームからコンポーネントを選択して、次の要素を挿入します。
- 基本（ディバイダー、HTML、画像）。
- テキスト（見出し、段落、リンク）。
- 動的（ レコメンデーション、 エクスペリエンスフラグメント、HTML オファー）。
Show Modifications アイコン（
テキスト要素の上部にあるメニューを使用すると、次の操作を実行できます。
- テキストのプロパティ（見出しレベル、段落、ブロック引用、等幅）を設定する
- テキストのカラーを選択します（
- テキストの属性（太字、斜体、下線、取り消し線）を設定します（
- テキストの整列（左、中央、右、両端揃え）（
- リンクを挿入します（
- コンテンツをHTML オファー、 エクスペリエンスフラグメントまたは レコメンデーションに置き換えます。
- HTMLを編集します（
- パーソナライゼーションを追加（
- 画像を削除します（
右側の Properties パネルでは、テキストのプロパティをさらに設定できます。
フレームの上部にあるアイコンを使用すると、次の操作を実行できます。
- HTMLを編集します（
- テキストを複製します（
- テキストを削除します
- テキストを非表示にします（
右側のフレームのオプションを使用すると、次の操作を実行できます。
- CSS クラスを編集します。
- テキストの背景色と画像を設定します。
- テキストのタイポグラフィ（見出しスタイル、フォントサイズ、フォントの太さ、行の高さ、配置、テキストカラー、テキストスタイル（太字、斜体、下線、取り消し線））を設定します。
- 箇条書き、番号付き、A、B、C などのリストを設定します。
- 境界線のカラーを選択します。
- テキストボックスのサイズ（高さと幅）を設定します。 テキスト ボックスの最小サイズ、最大サイズ、幅、高さ、オーバーフロー、およびオブジェクトの自動調整を設定するには、[Show Advanced Options] をクリックします。
- ページ上のテキストボックスの位置（絶対、固定、相対、静的、固定）を設定し、上、右、下、左からのピクセル数を設定します。
- 余白やパディングを含む、要素の間隔を設定します。
- 要素の効果（不透明度）を設定します。 「Show Advanced Options」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ブラーの値を設定します。 テキストを反転または回転することもできます。
- インラインスタイルを設定します。
HTMLを編集
HTML コードだけでなく、カスタム JavaScript を編集および挿入することもできます。
A/B アクティビティと Experience Targeting アクティビティでテキストと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 パスが表示されていない場合は、Show DOM アイコン（
DOM パスを使用すると、選択した要素に関する情報（タイプ、ID、クラス）をすばやく確認したり、DOM パスを上下に移動して目的の要素を選択したりできます。
DOM パスを使用すれば、VEC 内で任意の親要素、兄弟要素、子要素に容易に移動できます。
DOM パス機能は、クリックの追跡を設定するときにも使用できます。