- Graphic エディタはシークレットモードでは動作しません。
- クロスサイトクッキーがブロックされている場合、Graphic エディタは動作しません。
- Firefox はデフォルトでクッキーをブロックします。Firefox を使用している場合は、クッキーを手動で有効にする必要があります。
Graphic エディタを開く
Kameleoon の編集モードは、Web ページのバリエーションを作成し A/B 実験を起動するためのツールを提供します。Web サイトから
Kameleoon を起動するには:- Kameleoon スクリプトをインストールした Web ページに移動します。
- Windows では shift + F2、Mac では fn + shift + F2 を押します。
何も起こらない場合は、URL の末尾に
#kameleoon=trueを追加してください。 - Kameleoon がロードされると、ポップインが開きます。ユーザー名とパスワードを入力してエディタにアクセスします。
- 実験を選択するか(すでに作成している場合)、新しいものを作成するように促すポップインが開きます。Create をクリックして実験を作成します。
- 実験の情報を入力し、Experiment type で Classic A/B を選択します。
- Start をクリックします。
Kameleoon アプリから
Kameleoon アプリからエディタを起動することもできます。- Kameleoon アプリ にログインします。
- New experiment > With the graphic editor をクリックします。
- 実験の情報を入力し、Experiment type で Graphic A/B を選択します。
- Create をクリックします。
構造
実験パネル(左側)
機能: 現在の実験を管理します。これにはページ上のバリエーションや要素が含まれます。 特徴:- バリエーションと要素を追加します。
- CSS セレクターを編集します。
- 異なるページに存在する要素を表示・管理します。
メイン編集エリア(中央)
機能: 編集のために Web ページの要素と直接やり取りできます。 特徴:- テキスト、画像、その他のコンテンツを選択して変更します。
- 編集ショートカットにアクセスします。
右パネル(右側)
タブ: Design、State、History 特徴:- コンテンツ、テキスト、背景、ボーダー、シャドウ、パディング、マージンなどをカスタマイズします。
- 要素の状態(たとえば、default、hovered、active、focus、disabled)を管理します。
- 各要素の変更履歴を管理します。
上部ツールバー
機能: 変更の表示と最終調整のためのツールを提供します。 特徴:- デバイスモードの切り替え。
- 変更のシミュレーション。
- 実験の最終調整。
Graphic エディタの表示をカスタマイズする
- ズーム: 画面や好みに合わせてズームレベルを調整します。
- 左パネルの縮小: 左パネルを最小化して作業スペースを増やします。
- 左パネルを非表示にする: 集中して作業できるよう、左パネルを完全に非表示にします。
- フルスクリーンモード: 没入感のある編集体験のためにエディタをフルスクリーンに拡大します。
シミュレーションと最終調整
- シミュレーション: SIMULATE をクリックして、変更が Web サイト上でどのように表示され動作するかをプレビューします。
- 最終調整: FINALIZE をクリックして、最終調整ステップにアクセスします。
デバイスの切り替え
上部のツールバーを使用して、異なるデバイスビュー(デスクトップ、タブレット、モバイル)を切り替え、デザインがレスポンシブで、すべてのデバイスで正しく表示されることを確認します。Kameleoon Graphic エディタ拡張機能
Kameleoon Graphic エディタ拡張機能を使用して、Graphic エディタの使用を強化します。Graphic エディタ拡張機能を使用するタイミング
- 一部の Web サイトは iframe の使用を制限しています。iframe の制限に対処するため、Graphic エディタ拡張機能を使用してこれらの制限を上書きし、Graphic エディタを起動します。
- 特定の Web サイトは、モバイルユーザーエージェントを検出するとモバイルバージョンを表示します。Graphic エディタがモバイルバージョンを正しく表示することを保証するため、ブラウザはモバイルデバイスとして識別する必要があります。拡張機能はモバイル識別プロセスを容易にします。