施策を作成する

施策のコードは、AIエージェントとの対話やテンプレートから生成できます。コードを直接編集したり、プレビューで表示を確認したりすることもできます。

施策を新規作成する

1. A/Bテスト画面の右上にある 新規作成 をクリックします
2. 編集画面が開きます。左側がAIエージェントのパネル、右側がプレビューや設定のパネルです

改善対象のページから施策案をAIに考えさせたい場合は、AIに提案させる から始めることもできます。詳しくは AIで施策案を生成する をご覧ください。

作成方法を選ぶ

新規作成の直後は、左側のパネルで作成方法を選びます。

• 自由入力 — 作りたい施策を文章で入力します（例: TOPページにキャンペーンバナーを表示して、期限が近いことを訴求する）
• テンプレートから選ぶ — よく使う施策の型から選びます

テンプレートには、要素を追加する追加型と、既存の要素を変える変更型があります。

種類	テンプレート	用途の例
追加型	バナー	セール告知、新機能リリース、メンテナンス通知
追加型	フローティングCTA	資料請求、チャット誘導、キャンペーン訴求
追加型	モーダル/ポップアップ	会員登録促進、クーポン配布、アンケート
追加型	トースト通知	購入通知、在庫残りわずか、レビュー表示
追加型	ツールチップ	機能説明、入力ガイド、注意事項の補足
追加型	ホットスポット	新機能への誘導、注目ボタンの強調
追加型	埋め込みバナー	関連商品の提案、記事中のCTA、おすすめ表示
変更型	テキスト変更	見出しの文言テスト、CTAボタンのラベル変更
変更型	スタイル変更	ボタンの色変更、フォントサイズ調整、余白変更
変更型	要素の表示/非表示	不要なバナーの非表示、ナビ項目の削減
変更型	リンク/URL変更	CTAの遷移先変更、バナーリンクの差し替え

テンプレートを選んだあとは、対象デバイスとプレビューURLを指定して作成を開始します。プレビューURLには、配信先のうち代表的なページを1つ指定してください。アクセス可能なページであれば、そのページのスタイルに馴染むよう自動で調整されます。

変更型のテンプレートは、既存の要素を書き換えるためフリッカーが起きやすくなります。配信前にプレビューで表示を確認してください。

AIエージェントと対話する

左側のチャット欄にメッセージを送ると、AIが施策のコードを生成します。「バナーの色を変えて」「閉じるボタンを追加して」のように、対話しながら調整できます。

AIが生成したコードはそのまま使えるほか、コードタブで手動編集することもできます。Cursor や Claude Code などの外部ツールで作成したコードを貼り付けて使うことも可能です。

コードを編集する

コード タブでは、施策の JavaScript・CSS・HTML を直接編集できます。

• JS / CSS / HTML をタブで切り替えて編集します
• 外部からデータを取得する場合は、許可するドメインをあらかじめ設定します
• 配信を開始する際に、コードのセキュリティチェックが自動で実行されます

セキュリティチェックで問題が検出されると、配信を開始できません。検出された箇所（フィールド名・行番号・内容）が表示されるので、修正してから再度お試しください。

プレビューで確認する

プレビュー タブでは、施策を適用した実際のページの見た目を確認できます。

1. プレビューURLを入力し、開く をクリックします
2. PC / モバイル を切り替えて表示を確認します
3. コードを編集すると、プレビューに反映されます

スタイルをGUIで調整する

施策にスタイルが含まれる場合、コードを直接書き換えなくても、スタイル編集 から色やサイズを調整できます。

• 代表的なスタイル変数 — 主要な箇所を、色はカラーピッカー、サイズはスライダーで調整できます
• 全てのスタイル変数 — 施策で使われているスタイルを項目ごとに一覧から編集できます

変更内容はコードとプレビューに即座に反映されます。

計測ターゲットを設定する

施策にクリックやクローズの計測対象が含まれる場合、計測ターゲット で各要素の計測のON/OFFと表示名を設定できます。オフにした要素は、クリック・クローズが計測されません。設定した表示名は、効果測定の 操作内訳 に表示されます。

画像を使う

画像 タブでは、施策で使う画像をアップロードできます。

1. 画像アップロード から画像を追加します（1施策あたり最大10件）
2. アップロードした画像の コピー ボタンで公開URLを取得し、コードに貼り付けて使用します