作成フローにアクセスする
- 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 をクリックするか、クリップボードから画像を貼り付けます。完全な視覚的コンテキストのために、1 つのプロンプトに最大 10 枚の画像を添付できます。
- アセット: 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 は、プロンプトが必要とする場合、サイト上の他のページや外部サイトに移動できます。別のページの機能やデザイン要素を参照したり、別のサイトをインスピレーションとして活用したりすることができます。プロンプトで直接これをリクエストできます—たとえば、「この旅行予約サイトの検索フィルターレイアウトを複製してください:www.example.com/search」のように指定します。
インタラクションツール
生成プロセスの重要なポイントで、PBX は一時停止し、続行する前に次のいずれかのインタラクションツールを提示します。- ハイライト要素の検証: PBX は変更する予定の要素をハイライトします。選択を確認するか、PBX を別の要素にリダイレクトします。
- オプションピッカー: PBX は、選択する 2 つ以上のデザインオプションを提示します。意図に最も合うオプションを選択します。
- 確認: PBX は実行しようとしているアクションを要約し、コミットする前に確認を求めます。
バリエーションから選択する
生成後、PBX は比較するいくつかのバリエーションオプションを提示します。意図に最も合うものを選択し、Apply version をクリックします。どのオプションも適切でない場合は、結果を絞り込んだり、追加の詳細を提供したりするためにプロンプトを続けます。
バリエーションを Figma にコピーする
バリエーションの準備ができたら、編集可能な Figma レイヤーとしてクリップボードにコピーし、Figma ファイルに直接貼り付けることができます。デザインを最初から作り直す必要はありません。- Your version is ready カードで三点メニューを開き、Copy to Figma をクリックします。
- PBX がバリエーションをパッケージ化する間、待ちます。各ステップの進捗が表示されます。
- Copy to clipboard をクリックします。
- Figma を開き、
⌘ + V(macOS)またはCtrl + V(Windows)で貼り付けます。
コピーしたレイヤーは、シンプルで主に静的なバリエーションで最もよく機能します。インタラクティブな要素が多いバリエーションは、正しく転送されない場合があります。PBX は作成したコンポーネントのみをキャプチャし、周囲のページ全体はキャプチャしません。
プロンプトを元に戻す
各プロンプトの出力には元に戻すボタンが含まれています。クリックすると、そのプロンプトが完了した時点のバリエーションの状態に戻り、以降のプロンプトによるすべての変更が破棄されます。 後続のプロンプトがバリエーションを望ましくない方向に変えてしまった場合に使用します。最初からやり直すのではなく、戻りたいプロンプトの元に戻すをクリックして、そのポイントから別のアプローチを試みてください。スケッチから作成する
ポップアップやオーバーレイのようなデザインコンポーネントを、ページに直接描画して設計します。- + > Draw sketch をクリックします。
- デザインを描きます。
- AI に構築するよう促します(例:「私のスケッチに基づいてポップアップを構築してください」)。
3. 生成されたコードをレビューして調整する
ヘッダーの Code スイッチをクリックして、コードパネルを開きます。CSS または JS をクリックして、関連するコードを表示および編集します。Edit code をクリックして変更を加えます。
4. 比較とシミュレート
ヘッダーボタンを使用してビューを切り替えます。- Website display: バリアントの外観をプレビューします。
- Code: 技術的な実装を表示します。
- Compare: 異なるバリエーションを並べて比較します。
異なるデバイスでのプレビュー
バリアントが異なる画面サイズでどのように表示されるかを確認するには、ページ上部の モバイル、タブレット、または デスクトップ アイコンをクリックします。デバイスプレビューを切り替えても、生成されたコードには影響しません。 起動前に Web サイトで実験をライブテストするには、Simulate をクリックします。実験を共有する
- リンクをコピー: 実験への直接リンクを共有します。
- LinkedIn で共有: 実験をフィードに直接投稿します。
実験を最終調整する
バリエーションが完成したら:- Finalize をクリックします。
- 目標、オーディエンスターゲティング、トラフィック割り当てを設定します。
- 実験を起動します。
FAQ
AI 生成バリアントでグラフィックエディタを使えますか?
AI 生成バリアントでグラフィックエディタを使えますか?
いいえ、AI 生成バリアントで グラフィックエディタを使うことはできません。一部のエッジケースで役立つ可能性はありますが、PBX はグラフィックエディタがカバーするすべてのシナリオを処理します。競合を防ぐため、Kameleoon は AI 生成実験のビジュアルツールを無効化しています。
マルチページ実験を作成できますか?
マルチページ実験を作成できますか?
はい、複数のページにわたる変更をプロンプトできます。希望のページに移動して、プロンプトを直接適用してください。Kameleoon はコードを 1 つのバリエーションに自動的にまとめます。ただし、異なるページのコードが競合しないことを保証するため、Simulation モードで完全なエクスペリエンスをテスト してください。
複数の商品ページでバリエーションをテストするにはどうしますか?
複数の商品ページでバリエーションをテストするにはどうしますか?
最初の商品ページでバリエーションを作成した後、次の商品ページに移動します。このアクションにより AI 生成コードが再実行されます。あるいは、Simulation モードを使用してすべての関連ページでエクスペリエンスをテストし、一貫した動作を確保することもできます。
デザインモックアップを使ってバリアントを作成できますか?
デザインモックアップを使ってバリアントを作成できますか?
はい、デザインやモックアップを使用できます。+ アイコン > Add an image をクリックして、ファイルをアップロードします。ただし、モックアップ単独では通常不十分です。最良の結果を得るには、デザインと明確で詳細な指示を併用してください。PBX を開発者のように扱い、最良の出力のために具体的な詳細を提供してください。モックアップを含む良いプロンプトの例:
- モックアップやデザインファイルを添付します。
- 変更する要素を記述します。
- 寸法、色、スペーシングを指定します。
- インタラクティブな動作を説明します。
- 技術要件をメモします。
SPA 設定は PBX にどのように影響しますか?
SPA 設定は PBX にどのように影響しますか?
PBX はあなたのプロジェクトのシングルページアプリケーション(SPA)設定を採用します。これらの設定を構成している場合(シングルページアプリで実験を設定する を参照)、PBX は自動的に以下を使用します:
- カスタム属性。
- 除外ルール。
- その他の SPA 固有の構成。
PBX がバリアントを生成中に他のバリアントの作業ができますか?
PBX がバリアントを生成中に他のバリアントの作業ができますか?
いいえ。別の作業を開始する前に、PBX がバリアントの生成を終えるのを待つ必要があります。
PBX エディタで白い画面が表示されるのはなぜですか?
PBX エディタで白い画面が表示されるのはなぜですか?
この問題は、ログイン領域などのセキュアなページが iframe 内での読み込みをブロックする際に発生します。PBX エディタはウェブページを安全に編集するために iframe を使用します。サイトのセキュリティ設定が iframe コンテンツをブロックし、白い画面になることがあります。修正方法:
開発チームに “frame-busting” ロジックを修正するよう依頼してください。コードは、フレームの名前が
kameleoon-pbx-preview かどうかを確認する必要があります。一致する場合、ロジックはページの読み込みを許可する必要があります。コード例:PBX が生成するコードはどれくらい信頼できますか?
PBX が生成するコードはどれくらい信頼できますか?
PBX はクリーンで安全、レスポンシブ、アクセシブルなコードを生成します。特に最新のウェブサイトとシングルページアプリケーション(SPA)では、手動コーディングよりも堅牢なソリューションを作成することがよくあります。PBX はクロスブラウザテストや視覚チェックなどの QA ベストプラクティスに従います。生成されたコードはプロジェクト構成も尊重します:
- PBX は SPA 設定とカスタム属性を自動的に適用します。
- 除外ルールを尊重します。