> For the complete documentation index, see [llms.txt](https://docs.wicle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wicle.io/action/experiment/create.md).
# 施策を作成する
施策のコードは、AIエージェントとの対話やテンプレートから生成できます。コードを直接編集したり、プレビューで表示を確認したりすることもできます。
## 施策を新規作成する
1. A/Bテスト画面の右上にある `新規作成` をクリックします
2. `新しい施策` 画面が開きます。ここで作成方法を選びます
3. 表示デバイスとスタイル参照ページを指定して `生成する` をクリックすると、編集画面に進みます
改善対象のページから施策案をAIに考えさせたい場合は、`AI に提案させる` から始めることもできます。詳しくは [AIで施策案を生成する](/action/experiment/ideation.md) をご覧ください。
## 作成方法を選ぶ
`新しい施策` 画面では、次のいずれかの方法で作成を開始します。
### ステップ1: どんな施策を作りますか？
* **自由入力** — 作りたい施策を文章で入力し、`作成を始める` をクリックします（例: `TOPページにキャンペーンバナーを表示して、期限が近いことを訴求する`）
* **テンプレート** — `テンプレート` をクリックして、よく使う施策の型から選びます
* **自分で実装する** — Cursor などのコーディングエージェントや手元のエディタでコードを実装する場合に選びます。詳しい手順は [自分で実装する](/action/experiment/create/diy-coding.md) をご覧ください
テンプレートには、要素を追加する**追加型**と、既存の要素を変える**変更型**があります。
| 種類 | テンプレート | 用途の例 |
| --- | ----------- | ---------------------- |
| 追加型 | バナー | セール告知、新機能リリース、メンテナンス通知 |
| 追加型 | フローティングCTA | 資料請求、チャット誘導、キャンペーン訴求 |
| 追加型 | モーダル/ポップアップ | 会員登録促進、クーポン配布、アンケート |
| 追加型 | トースト通知 | 購入通知、在庫残りわずか、レビュー表示 |
| 追加型 | ツールチップ | 機能説明、入力ガイド、注意事項の補足 |
| 追加型 | ホットスポット | 新機能への誘導、注目ボタンの強調 |
| 追加型 | 埋め込みバナー | 関連商品の提案、記事中のCTA、おすすめ表示 |
| 変更型 | テキスト変更 | 見出しの文言テスト、CTAボタンのラベル変更 |
| 変更型 | スタイル変更 | ボタンの色変更、フォントサイズ調整、余白変更 |
| 変更型 | 要素の表示/非表示 | 不要なバナーの非表示、ナビ項目の削減 |
| 変更型 | リンク/URL変更 | CTAの遷移先変更、バナーリンクの差し替え |
{% hint style="warning" %}
変更型のテンプレートは、既存の要素を書き換えるためフリッカーが起きやすくなります。配信前にライブプレビューで表示を確認してください。
{% endhint %}
### ステップ2: もう少し教えてください
作成方法を選んだあと、表示デバイスと参照ページを指定します。
| 項目 | 説明 | 備考 |
| --------- | ---------------------- | ------------------------------------------ |
| 表示デバイス | 施策を想定するデバイス | `全デバイス` / `PC` / `モバイル`（必須） |
| スタイル参照ページ | サイトのスタイルに馴染ませるための参照URL | 任意。アクセス可能なページであれば、そのページのスタイルに馴染むよう自動調整されます |
`生成する` をクリックすると、編集画面が開き、AIが雛形の生成を開始します。
## 編集画面の見方
編集画面は次の3つのエリアで構成されます。
* **左: AI編集** — AIエージェントとのチャット。ヘッダーの `AI編集` で表示を切り替えられます
* **中央: プレビュー** — 施策の見た目を確認します（`デザイン` / `計測設定` タブ表示時）
* **右: ワークスペース** — デザイン・計測・配信などの設定パネル
右パネルのメインタブは次のとおりです。
| タブ | 内容 |
| ------- | ---------------------- |
| デザイン | スタイル・画像・コードの編集 |
| 計測設定 | クリック・クローズの計測ターゲット設定 |
| 配信設定 | 配信対象・バリアント比率・コンバージョンなど |
| 配信前チェック | 設定チェックリスト・AIレビュー・配信規模感 |
| 配信状況 | 配信実績と効果測定 |
`配信設定` / `配信前チェック` / `配信状況` を開いているときは、中央プレビューは非表示になり、右パネルが広く表示されます。
## AIエージェントと対話する
左側のチャット欄にメッセージを送ると、AIが施策のコードを生成します。「バナーの色を変えて」「閉じるボタンを追加して」のように、対話しながら調整できます。
AIが生成したコードはそのまま使えるほか、デザインの `コード` タブで手動編集することもできます。Cursor や Claude Code などの外部ツールで作成したコードを取り込むことも可能です。詳しくは [自分で実装する](/action/experiment/create/diy-coding.md) をご覧ください。
{% hint style="info" %}
配信中またはアーカイブ済みの施策では、AI編集パネルは表示されません。編集するには、一時停止またはアーカイブ解除をしてください。
{% endhint %}
## デザインを編集する
`デザイン` タブでは、スタイル・画像・コードを切り替えながら編集できます。
### スタイル
施策にスタイルや編集可能なテキストが含まれる場合、コードを直接書き換えなくても調整できます。
* **コンテンツ** — 施策内の文言などを編集できます
* **代表的なスタイル** — 主要な箇所を、色はカラーピッカー、サイズはスライダーで調整できます
* **すべてのスタイル** — 施策で使われているスタイルを項目ごとに一覧から編集できます
変更内容はコードとプレビューに即座に反映されます。
### 画像
`画像` では、施策で使う画像をアップロードできます。
1. 施策を一度保存します（未保存の場合はアップロードできません）
2. `画像アップロード` から画像を追加します（1施策あたり最大10件）
3. アップロードした画像の公開URLをコードに貼り付けて使用します
対応形式は JPEG / PNG / GIF / WebP / SVG です。最大サイズは 2MB（SVGは200KB）です。
### コード
`コード` では、施策の JavaScript・CSS・HTML を直接編集できます。
* `JavaScript` / `CSS` / `HTML` / `設定` をタブで切り替えて編集します
* `設定` では、外部からデータを取得する場合に許可するドメインを指定できます
* `整形` でコードを整形できます
* 配信を開始する際に、コードのセキュリティチェックが自動で実行されます
Cursor などの外部ツールで実装する場合は、`SKILL.mdをコピー` と `一括取り込み` を使います。手順・実装ルール・チェックリストは [自分で実装する](/action/experiment/create/diy-coding.md) をご覧ください。
{% hint style="info" %}
セキュリティチェックで問題が検出されると、配信を開始できません。検出された箇所（フィールド名・行番号・内容）が表示されるので、修正してから再度お試しください。
{% endhint %}
## プレビューで確認する
編集画面の中央では、施策の見た目を確認できます。プレビューには次の2種類があります。
| 種類 | 用途 | 備考 |
| --------- | ----------------- | --------------------------- |
| サンプルプレビュー | HTML/CSS の見た目確認 | 中央に常時表示されます。JSの動的挙動は反映されません |
| ライブプレビュー | 実ページ上での表示・動的挙動の確認 | ツールバーの `ライブプレビュー` から接続します |
サンプルプレビューは、HTML/CSS の見た目確認用です。表示位置・遅延などの動的挙動や、既存ページを改変する施策は、ライブプレビューで確認してください。
### サンプルプレビュー
* AIが施策を生成すると、中央に見た目が反映されます
* `PC` / `モバイル` を切り替えて表示を確認できます
* HTMLがない変更型の施策などでは、サンプルでは表示できません。ライブプレビューで確認してください
### ライブプレビュー
1. プレビュー欄の `ライブプレビュー` をクリックします
2. プレビューURLを入力し、`プレビューを開く` をクリックします
3. 接続状態（接続中 / 接続済み / エラー）を確認しながら、実ページ上の表示を確認します
4. 確認が終わったら `切断` できます
## 計測ターゲットを設定する
`計測設定` タブでは、施策に含まれるクリックやクローズの計測対象を設定できます。
* 各要素の計測のON/OFFと表示名を設定できます
* オフにした要素は、クリック・クローズが計測されません
* 設定した表示名は、効果測定の `操作内訳` に表示されます
コードに計測対象がない場合は、「計測ターゲットがありません」と表示されます。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wicle.io/action/experiment/create.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.