作成フローにアクセスする
- Kameleoon アプリで、Experiences > A/B Test > New experiment に移動します。
- Starter または Trial プランを使用している場合、プロンプトベースのインターフェースが自動的に開きます。
- Enterprise プランを使用している場合、ポップアップが表示されます。By Prompt を選択します。
PBX が生成したバリアントを Graphic エディタで編集することはできません。詳細については、FAQ を参照してください。
- 必要な情報を入力して Create をクリックします。
実験を構成する
1. プロンプトを定義する
プロンプトフィールドで、自然言語を使用して加えたい修正を説明します。コーナーをクリックしてドラッグすることで、プロンプトエリアのサイズを変更できます。 例:- 「商品リストのグリッドを 1 行 4 つではなく、1 行 2 つの商品を表示するように更新します。」
- 「デフォルトのソートオプションを「Price, low to high」に変更します。」
画像とデザインを使う
視覚的なコンテキストを提供したり、特定のアセット(バナーやポップアップなど)を追加したりするには、+ > Add an image をクリックするか、クリップボードから画像を貼り付けます。
- アセット: PBX は画像ファイルをバリエーションに直接挿入します。
- モックアップ: PBX は画像を参照として使用し、コードでデザインを再現します。
要素を選択する
AI が変更する要素を識別するのを次の方法で支援します。- テキスト記述: プロンプトで要素を説明します(たとえば、「商品グリッドをバナーの下に移動します」)。
- 選択ボックス: + > Draw sketch をクリックして、ページ上のターゲット要素を囲みます。ツールボックスを使用して、選択を描画、消去、または削除します。
描画ツールを使用しているときは、現在のビューの外側にスクロールしたり描画したりできません。ページの下の方にある要素にはテキスト記述を使用してください。
AI 設定を構成する
AI がバリアントを生成し、Web サイトとやり取りする方法をカスタマイズします。+ アイコンをクリックして AI Settings を選択します。Projects サイドバーで、編集したいプロジェクトを選択します。 AI Settings メニューには 2 つのタブが含まれています。- Master Prompt: AI の包括的な指示とコンテキストを定義します。詳細については、Master Prompts の記事を参照してください。
- Technical Settings: プロジェクトの技術設定を構成します。次のオプションを調整できます。
- Website adapts automatically to different screen sizes: レスポンシブな Web サイトの場合、このオプションを有効にします。モバイルバージョンが別の URL を使用するか、リサイズ時に更新されない場合は、これを無効にします。
- Enable support for dynamic websites (SPA, PWA…): 仮想 URL 変更を検出し、URL ターゲティングとデータ収集が正しく機能するように、このオプションを有効にします。
- Custom attribute: カスタム属性を設定して、Kameleoon がすべての仮想 URL 変更を追跡し、URL ターゲティングを有効にし、ページビュー数などのデータを収集できるようにします。
- Avoid dynamic IDs selectors: 回避するセレクターを指定します。
2. AI ワークフロー
プロンプトを送信すると、PBX はリアルタイムで変更を処理します。AI が実行する各アクションは、その理由を平易な言葉で示しながらリアルタイムに表示されるので、PBX が各ステップで何をしているかを追跡できます。リアルタイムトラッキングと推論
PBX がバリエーションを生成する際、各ステップとその背後にある考えを確認できます。PBX はプロンプトを処理しながら、ページ上の要素をハイライトし、AI が何をターゲットにしているかを正確に示します。AI ナビゲーション
PBX は、プロンプトが必要とする場合、サイト上の他のページに移動できます。たとえば、別のページの機能やデザイン要素を参照するためです。プロンプトで直接これをリクエストできます。インタラクションツール
生成プロセスの重要なポイントで、PBX は一時停止し、続行する前に次のいずれかのインタラクションツールを提示します。- ハイライト要素の検証: PBX は変更する予定の要素をハイライトします。選択を確認するか、PBX を別の要素にリダイレクトします。
- オプションピッカー: PBX は、選択する 2 つ以上のデザインオプションを提示します。意図に最も合うオプションを選択します。
- 確認: PBX は実行しようとしているアクションを要約し、コミットする前に確認を求めます。
バリエーションから選択する
生成後、PBX は比較するいくつかのバリエーションオプションを提示します。意図に最も合うものを選択し、Apply version をクリックします。どのオプションも適切でない場合は、結果を絞り込んだり、追加の詳細を提供したりするためにプロンプトを続けます。
スケッチから作成する
ポップアップやオーバーレイのようなデザインコンポーネントを、ページに直接描画して設計します。- + > Draw sketch をクリックします。
- デザインを描きます。
- AI に構築するよう促します(例:「私のスケッチに基づいてポップアップを構築してください」)。
3. 生成されたコードをレビューして調整する
ヘッダーの Code スイッチをクリックして、コードパネルを開きます。CSS または JS をクリックして、関連するコードを表示および編集します。Edit code をクリックして変更を加えます。
4. 比較とシミュレート
ヘッダーボタンを使用してビューを切り替えます。- Website display: バリアントの外観をプレビューします。
- Code: 技術的な実装を表示します。
- Compare: 異なるバリエーションを並べて比較します。
異なるデバイスでのプレビュー
バリアントが異なる画面サイズでどのように表示されるかを確認するには、ページ上部の モバイル、タブレット、または デスクトップ アイコンをクリックします。デバイスプレビューを切り替えても、生成されたコードには影響しません。 起動前に Web サイトで実験をライブテストするには、Simulate をクリックします。実験を共有する
- リンクをコピー: 実験への直接リンクを共有します。
- LinkedIn で共有: 実験をフィードに直接投稿します。
実験を最終調整する
バリエーションが完成したら:- Finalize をクリックします。
- 目標、オーディエンスターゲティング、トラフィック割り当てを設定します。
- 実験を起動します。