このページについて

このページでは、UI エディターの使い方の中でも比較的簡単に操作できる項目を説明いたします。

UI エディターについて

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

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

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

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

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

基本的な操作

• HTMLを編集：選択している要素とその配下の要素を編集することができます。
• スタイルを編集：CSSによる編集をすることができます。
• 属性を編集：classやidなどの編集・追加ができます。
• 背景画像を設定：背景画像の変更・設定ができます。
• ドラッグして移動 : 要素をドラッグして、移動することができます。
• 要素を削除 : 要素の削除を行うことができます。
• テキストを編集 : テキストを編集できます。
• 画像の挿入・変更 : 画像の挿入・変更を行うことができます。1画像あたりの容量は最大 2MB になります。合計で 10MB までアップロードできます。
• オリジナルを表示 : エディターで編集する前のデザイン案を表示します。　
• プレビュー : エディターで編集したデザインをプレビューを開きます。実際の動作 (例: ボタンの動作確認) などを行うことができます。

また、元のページの CSS や HTML によって、画像の位置が規定されているため、変更できない場合があります。 エディター左下の StyleSheet タブや JavaScript タブから直接スタイルシートと JavaScript を記述することで変更できます。

HTML/スタイルを編集する

• HTML を編集: 選択した箇所の HTML を編集することができます。
• スタイルを編集: 選択した箇所の HTML に style="" 形式で CSS を挿入することができます。

JavaScript で要素の操作を行う

• jQuery コードの追加: 選択した箇所に対して、jQuery コードを追加することができます。

コードを直接編集する

• StyleSheet タブ: エクスペリエンスを実行したいページに、後付する形で、CSS を追記いたします。
• JavaScript タブ: UI エディター上での変更内容を JavaScript 形式で記録しているものを確認できます。

アクセス制限のあるページを UI エディターで編集する

IP 制限や Basic 認証、ユーザー認証が必要なページは、Kaizen Platform JavaScript コードを貼り付けるか、Kaizen Platform Assistant Google Chrome 機能拡張をインストールしていただく必要があります。

作業の前に、対象サイトでログインを行った後、エディターを開くことで、ログイン後画面の編集ができます。

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

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

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

よくある問い合わせ