フォローする

UI エディターの使い方

このページについて

このページでは、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で編集する時の注意点

よくある問い合わせ

Question Answer
CSS タブで記述したコードが反映されないのですが、反映の仕方はありますか? エクスペリエンス対象ページの既存スタイルの上書きができていない可能性があります。スタイルシートの実行順序 を参照してください。
要素を移動させる際に、pixel 単位での微調整を行うことはできますか? ドラッグして移動 にて、要素をドラッグさせて移動させた後、エディターの下部にある JavaScript タブを開き、ピクセルの数値を調整することで、微調整が可能です。
画像をアップロードした場合、画像ファイルが置かれているサーバーはどちらになりますか? 画像は Kaizen Platform のサーバー上にアップロードされています。
自社サーバー上にアップロードした画像を、挿入や差し替えすることはできますか? できます。エディターの下部にある JavaScript タブを開き、画像のアップロード先の URL を変更することで、指定したサーバーから画像を表示させることができます。
最初の エクスペリエンスでは、デザインのどこを変更すればいいのでしょうか? ファーストビジュアルや、ボタンの色を変えるだけであれば、 画像の変更 や スタイルを編集 で対応が可能なため、比較的簡単に エクスペリエンスをスタートすることができます。 ボタンの色を変えるだけでも、10%〜20%の改善が見られるケースが多数ございます。
アップロードできる画像に容量制限はありますか? 1つの画像につき 2MB、1デザイン案につき 10MB までとなっております。
エディターを使わず、直接コーディングすることはできますか? 可能です。 エディター左下の JavaScript タブを表示させることで、直接コーディングが可能になります。また、オファー作成時に オファータイプ を スプリット URL とに設定することで、事前に作成し、公開されたページの URL にリダイレクトを行う、スプリット URL 型の エクスペリエンスを行うことができます。
エディターで画像を編集することはできますか? 画像を書き換えることはできません。 画像を変更したい場合は、新しく画像を作成していただき、エディターで画像を差し替えて、デザイン案を作成していただく必要があります。
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。