> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# プロンプトベース実験を作成する
> 自然言語のプロンプトを書くだけで、数分で AI を活用した実験を作成する方法を学びます。
簡単なプロンプトを書くだけで、コーディング不要で数分のうちに AI を活用した実験を作成できます。
Kameleoon のプロンプトベース実験のガイド付きツアーについては、[こちら](https://kameleoon.navattic.com/dac08g2) をクリックしてください。
## 作成フローにアクセスする
1. Kameleoon アプリで、**Experiences** > **A/B Test** > **New experiment** に移動します。
2. Starter または Trial プランを使用している場合、プロンプトベースのインターフェースが自動的に開きます。
3. Enterprise プランを使用している場合、ポップアップが表示されます。**By Prompt** を選択します。
PBX が生成したバリアントを Graphic エディタで編集することはできません。詳細については、[FAQ](../prompt-based-experimentation-faq#can-i-use-the-graphic-editor-on-a-variant-created-with-ai) を参照してください。
4. 必要な情報を入力して **Create** をクリックします。
Kameleoon スクリプトをインストールせずに PBX を使用する場合は、ガイダンスのために [PBX FAQ](../prompt-based-experimentation-faq#can-i-create-a-prompt-based-experiment-without-installing-the-kameleoon-script) を参照してください。
## 実験を構成する
### 1. プロンプトを定義する
プロンプトフィールドで、自然言語を使用して加えたい修正を説明します。コーナーをクリックしてドラッグすることで、プロンプトエリアのサイズを変更できます。
**例:**
* *「商品リストのグリッドを 1 行 4 つではなく、1 行 2 つの商品を表示するように更新します。」*
* *「デフォルトのソートオプションを「Price, low to high」に変更します。」*
Kameleoon は、Web サイトと既存のビジュアルアセットを分析することで、トーン、フォント、画像、カラーパレットを含むブランドアイデンティティを自動的に検出してマップします。
#### 画像とデザインを使う
視覚的なコンテキストを提供したり、特定のアセット(バナーやポップアップなど)を追加したりするには、**+** > **Add an image** をクリックするか、クリップボードから画像を貼り付けます。
画像をアップロードまたは貼り付けてプロンプトを送信すると、PBX はその使用方法を尋ねます。
* **アセット:** PBX は画像ファイルをバリエーションに直接挿入します。
* **モックアップ:** PBX は画像を参照として使用し、コードでデザインを再現します。
アップロードした画像をプレビューするには、プロンプトエリアでそれをクリックします。**Copy reference** をクリックして画像リンクをコピーすることもできます。
Figma デザインも直接インポートできます。詳細については、[Figma からデザインをインポートする](./import-designs-from-figma) を参照してください。
プロンプトの制限の詳細については、[PBX FAQ](../prompt-based-experimentation-faq#can-i-create-any-type-of-variant-with-prompts) を参照してください。
#### 要素を選択する
AI が変更する要素を識別するのを次の方法で支援します。
* **テキスト記述:** プロンプトで要素を説明します(たとえば、*「商品グリッドをバナーの下に移動します」*)。
* **選択ボックス:** **+** > **Draw sketch** をクリックして、ページ上のターゲット要素を囲みます。ツールボックスを使用して、選択を描画、消去、または削除します。
PBX は、プロンプトが必要とする場合、サイト上の他のページに移動することもできます。たとえば、別のページのデザイン要素を参照するためです。
描画ツールを使用しているときは、現在のビューの外側にスクロールしたり描画したりできません。ページの下の方にある要素にはテキスト記述を使用してください。
#### AI 設定を構成する
AI がバリアントを生成し、Web サイトとやり取りする方法をカスタマイズします。**+** アイコンをクリックして **AI Settings** を選択します。**Projects** サイドバーで、編集したいプロジェクトを選択します。
AI Settings メニューには 2 つのタブが含まれています。
* **Master Prompt:** AI の包括的な指示とコンテキストを定義します。詳細については、[Master Prompts](./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:** 回避するセレクターを指定します。
変更を保持するには **Save** をクリックします。エディタインターフェースに戻り、変更を破棄するには **Back to the editor** をクリックします。
### 2. AI ワークフロー
プロンプトを送信すると、PBX はリアルタイムで変更を処理します。AI が実行する各アクションは、その理由を平易な言葉で示しながらリアルタイムに表示されるので、PBX が各ステップで何をしているかを追跡できます。
#### リアルタイムトラッキングと推論
PBX がバリエーションを生成する際、各ステップとその背後にある考えを確認できます。PBX はプロンプトを処理しながら、ページ上の要素をハイライトし、AI が何をターゲットにしているかを正確に示します。
#### AI ナビゲーション
PBX は、プロンプトが必要とする場合、サイト上の他のページに移動できます。たとえば、別のページの機能やデザイン要素を参照するためです。プロンプトで直接これをリクエストできます。
#### インタラクションツール
生成プロセスの重要なポイントで、PBX は一時停止し、続行する前に次のいずれかのインタラクションツールを提示します。
* **ハイライト要素の検証:** PBX は変更する予定の要素をハイライトします。選択を確認するか、PBX を別の要素にリダイレクトします。
* **オプションピッカー:** PBX は、選択する 2 つ以上のデザインオプションを提示します。意図に最も合うオプションを選択します。
* **確認:** PBX は実行しようとしているアクションを要約し、コミットする前に確認を求めます。
この see-understand-steer ループは、間違った道筋を早期に発見し、やり直しや行き詰まった生成を減らします。
#### バリエーションから選択する
生成後、PBX は比較するいくつかのバリエーションオプションを提示します。意図に最も合うものを選択し、**Apply version** をクリックします。どのオプションも適切でない場合は、結果を絞り込んだり、追加の詳細を提供したりするためにプロンプトを続けます。
AI は、念頭に置いている結果と一致することを確認するために、明確化の質問(たとえば、画像の好みやコンテンツタイプについて)をすることもあります。
#### スケッチから作成する
ポップアップやオーバーレイのようなデザインコンポーネントを、ページに直接描画して設計します。
1. **+** > **Draw sketch** をクリックします。
2. デザインを描きます。
3. AI に構築するよう促します(例:*「私のスケッチに基づいてポップアップを構築してください」*)。
最良の結果を得るために [プロンプトを書くベストプラクティス](./how-to-write-effective-prompts-dos-and-donts) に従ってください。
### 3. 生成されたコードをレビューして調整する
ヘッダーの **Code** スイッチをクリックして、コードパネルを開きます。**`CSS`** または **`JS`** をクリックして、関連するコードを表示および編集します。**Edit code** をクリックして変更を加えます。
特定のバリアントに対して複数回プロンプトを送信して複数のバージョンを生成した場合、コードパネルの左上のドロップダウンを使用してそれらのバリアントを切り替えることができます。
AI が実験のコンテンツを生成すると、基礎となるコードを編集して出力を絞り込むことができます。
コードではなくプロンプトを使用してバリアントを絞り込むには、[FAQ](../prompt-based-experimentation-faq#my-first-prompt-didnt-generate-the-right-output-can-i-submit-additional-prompts-to-fix-whats-incorrect) を参照してください。
### 4. 比較とシミュレート
ヘッダーボタンを使用してビューを切り替えます。
* **Website display:** バリアントの外観をプレビューします。
* **Code:** 技術的な実装を表示します。
* **Compare:** 異なるバリエーションを並べて比較します。
#### 異なるデバイスでのプレビュー
バリアントが異なる画面サイズでどのように表示されるかを確認するには、ページ上部の **モバイル**、**タブレット**、または **デスクトップ** アイコンをクリックします。デバイスプレビューを切り替えても、生成されたコードには影響しません。
起動前に Web サイトで実験をライブテストするには、**Simulate** をクリックします。
#### 実験を共有する
右上の **共有アイコン** をクリックして、以下を行います。
* **リンクをコピー:** 実験への直接リンクを共有します。
* **LinkedIn で共有:** 実験をフィードに直接投稿します。
## 実験を最終調整する
バリエーションが完成したら:
1. **Finalize** をクリックします。
2. 目標、オーディエンスターゲティング、トラフィック割り当てを設定します。
3. 実験を起動します。
これで、コードも遅延もなく、これまで以上に速く実験する準備が整いました。