概要

このページでは、UI エディターの使い方の中でも比較的簡単に操作できる項目を説明します。
なお、エディターの利用には、Chromeをご利用いただくことを推奨しております。

UI エディターについて

Kaizen Platform UI エディターは、画面上から、ページ上の要素を移動したり、文字の大きさ・色などを変えることができます。 通常のエクスペリエンス は、このエディターを利用して、デザイン案を作成し、ラウンドを実施します。

このエディターでは、元ページのHTML・CSSを直接書き換えているわけではありません。
エディター上で行った操作を、 JavaScript のコードに変換して元ページに当てることで、デザインを変化させています。

UI エディターの基本的な操作

1. エディターを開く

UI エディターを起動するには、エクスペリエンス詳細画面にある、デザイン案を作成する ボタンをクリックします。

なお、エディターを開くことができない場合は、エディターを開くことができない時 をご覧ください。

2. コンテクストメニューを開く

マウスが移動すると、ページ内の要素が、青い枠で囲われます。その状態でクリックすると、コンテクストメニューが開きます。

コンテクストメニューの基本的な操作

• HTMLを編集：選択している要素とその配下の要素を編集することができます。
• スタイルを編集：CSSによる編集をすることができます。選択した箇所の HTML に style="" 形式で CSS を挿入することができます。
• 属性を編集：classやidなどの編集・追加ができます。
• 背景画像を設定：背景画像の変更・設定ができます。
• ドラッグして移動 : 要素をドラッグして、移動することができます。
• jQuery コードの追加: 選択した箇所に対して、jQuery コードを追加することができます。(記述できるコードには制限があります。詳細は デザイン案におけるJavaScriptコードの制限、挙動 をご覧ください。)
• 要素を削除 : 要素の削除を行うことができます。
• テキストを編集 : テキストを編集できます。

3. コードを直接編集する

• 「CSS」タブ: エクスペリエンスを実行したいページに、後付する形で、CSS を追記します。
• 「JavaScript」タブ: 直接JavaScript・jQueryを記述して変更を加えられるほか、UI エディター上での変更内容を JavaScript 形式で記録しているものを確認できます。

4. その他の操作をする

• 画像一覧を表示: 画像の挿入・変更を行うことができます。1画像あたりの容量は最大 2MB になります。合計で 10MB までアップロードできます。
• 元に戻す/やり直し: 一つ前に戻すもしくは、一つ先の操作やり直します。
• オリジナルを表示 : エディターで編集する前のデザイン案を表示します。　
• プレビュー : エディターで編集したデザインをプレビューを開きます。実際の動作 (例: ボタンの動作確認) などを行うことができます。

アクセス制限のあるページを UI エディターで編集したい場合

Chrome拡張版UIエディターをご利用ください。
詳しい使い方は エディターで開けないページを編集する「Chrome拡張版 UIエディター」の利用方法 をご覧ください。

イベントトラッキングゴールが設定された画面を編集するときの注意点

イベントトラッキングゴールはクリックトラッキングゴールと異なり、画面のソースコード内に明示的に識別できるゴールIDが存在しません。
ゴールイベント対象となるUI要素のHTMLタグ及びIDやCSSクラスなどの属性情報を基に識別しているため、デザイン案作成時に対象UIのHTMLソースコードが変更されますと、ゴール計測ができなくなりますので、編集時には注意が必要です。

上記画面のように「イベントトラッキングを表示ボタン」が確認できる場合には、イベントトラッキングゴールが設定されていますので、対象UIを確認の上、デザイン案を作成してください。
イベントトラッキングゴールや編集時の確認方法について、詳しくは以下ページを参照してください。
「イベントトラッキングゴール」が設定されているエクスペリエンスをエディターで編集する時の注意点

よくある問い合わせ