Ctrlk
プロダクトページサインイン
For the complete documentation index, see llms.txt. This page is also available as Markdown.

施策を作成する

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

チャットからの作成とテンプレートからの作成には、Wicle AIの有効化が必要です。未設定の場合は画面に案内が表示され、AI設定 から有効化できます。詳しくは AI機能の提供ポリシー をご覧ください。

作成画面の切り替え

新規作成 を開くと、画面上部のタブで次の3つの導線を切り替えられます。

タブ
説明

AIに提案させる

改善対象ページから施策案をAIに考えさせます。詳しくは AIで施策案を生成する

チャットから作成

自由入力または自分で実装するフローで、編集画面へ進みます

テンプレートから作成

テンプレートカタログから形を選び、編集画面へ進みます

チャットから作成する

  1. A/Bテスト画面の右上にある 新規作成 をクリックします

  2. チャットから作成 タブを選びます

  3. やりたいことを入力して 作成を始める をクリックします（⌘ / Ctrl + Enter でも進められます）

  4. 表示デバイスとスタイル参照ページを指定して 生成する をクリックすると、編集画面に進みます

入力欄の 自分で実装する から、外部のコーディングエージェント向けのフローへ切り替えることもできます。詳しくは 自分で実装する をご覧ください。

ステップ2: もう少し教えてください

作成を始めたあと、表示デバイスと参照ページを指定します。

項目
説明
備考

表示デバイス

施策を想定するデバイス

全デバイス / PC / モバイル（必須）

スタイル参照ページ

サイトのスタイルに馴染ませるための参照URL

任意。アクセス可能なページであれば、そのページのスタイルに馴染むよう自動調整されます

生成する をクリックすると、編集画面が開き、AIが雛形の生成を開始します。

テンプレートから作成する

  1. 新規作成 を開き、テンプレートから作成 タブを選びます

  2. カテゴリと検索でテンプレートを探し、カードをクリックして詳細を確認します

  3. このテンプレートで作成 をクリックします

  4. チャットから作成 と同様に、表示デバイスとスタイル参照ページを指定して 生成する をクリックします

テンプレートは 形（バナー・モーダル・要素の変更など）ごとにカタログ化されています。各カードにはプレビューが表示され、要素の変更 カテゴリにはフリッカー（表示のちらつき）に関する注意が付きます。一部のテンプレートには PC用 / モバイル用 のバッジが表示されます。

カテゴリ
主なテンプレート

バナー（固定位置）

固定バー、固定バー（追従）、固定サイドバー など

バナー（フローティング）

画像バナー、カード、動画付きカード、フローティングCTA など

バナー（埋め込み）

埋め込みバナー

通知

トースト通知、ツールチップ、ホットスポット など

モーダル

モーダル、ハーフモーダル

要素の変更

テキスト/URL変更、スタイル変更、画像差し替え、要素の非表示

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

編集画面の見方

編集画面は次の3つのエリアで構成されます。

  • ヘッダー — 施策名・ステータス・配信操作。鉛筆アイコンから 基本情報 ダイアログで施策名と説明を編集できます（ステータスに関係なく編集可能です）

  • バリアントバー（ヘッダー直下） — コントロールと各トリートメントをタブで切り替えます。トリートメントを追加 で新しい案を追加できます（最大5案）

  • 左: AI編集 — AIエージェントとのチャット。ヘッダーの AI編集 で表示を切り替えられます

  • 中央: プレビュー — 施策の見た目を確認します（デザイン / 評価設定 タブ表示時）

  • 右: ワークスペース — デザイン・評価・配信・レビューなどの設定パネル

右パネルのメインタブは次のとおりです。

タブ
内容

デザイン

ビジュアル・コード・画像の編集

評価設定

コンバージョンと、施策内のクリック・クローズの計測設定

配信設定

配信対象・バリアント比率など

AIレビュー

設定のチェック、コードレビュー、配信規模の目安

配信状況

配信実績、効果測定、施策評価

配信設定 / AIレビュー / 配信状況 を開いているときは、中央プレビューは非表示になり、右パネルが広く表示されます。AIレビュー の使い方は 配信と効果測定 をご覧ください。

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

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

プレビュー上部の 要素を選ぶ ボタンを使うと、プレビュー上の要素をクリックして選択できます。選択した要素の近くには 付近の要素を選択 が表示され、重なっている要素や周辺の要素を選び直せます。選択した要素はAIチャット入力欄にセレクタとして挿入され、「このボタンの色を変えて」のように位置を指定しながら編集できます。

AIが生成したコードはそのまま使えるほか、デザインの コード タブで手動編集することもできます。Cursor や Claude Code などの外部ツールで作成したコードを取り込むことも可能です。詳しくは 自分で実装する をご覧ください。

AI編集パネルは、下書きまたは一時停止の施策でのみ表示されます。予約中・配信中はスケジュールのみ編集できます。終了・採用済み・アーカイブでは編集できません。詳しくは 配信と効果測定 をご覧ください。

デザインを編集する

デザイン タブでは、ビジュアル / コード / 画像 / 設定 を切り替えながら編集できます。

ビジュアル

施策にスタイルや編集可能なテキストが含まれる場合、コードを直接書き換えなくても調整できます。プレビューで要素を選ぶと、GUI編集 からその要素を編集できます。

  • コンテンツ — 施策内の文言などを直接編集できます

  • スタイル — 主要な箇所を直接調整できます

  • AIで編集 — 選択中の要素を、チャットで修正する起点にできます

  • 選択解除 — 要素の選択を外します

文言を直接編集できない要素では、AIにGUI編集できるようにしてもらう から、GUIで編集できる形への変更をAIに依頼できます。

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

画像

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

  1. 施策を一度保存します（未保存の場合はアップロードできません）

  2. 画像アップロード から画像を追加します（1施策あたり最大10件）

  3. アップロードした画像の公開URLをコードに貼り付けて使用します

対応形式は JPEG / PNG / GIF / WebP / SVG です。最大サイズは 2MB（SVGは200KB）です。

コード

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

  • JavaScript / CSS / HTML / 設定 をタブで切り替えて編集します

  • 設定 では、外部からデータを取得する場合に許可するドメインを指定できます

  • 整形 でコードを整形できます

  • 記述に問題がある場合は、言語と行番号付きで警告が表示されます

  • コントロールにはコードを取り込めません。取り込む場合はトリートメントを選択します

  • 配信を開始する際に、コードのセキュリティチェックが自動で実行されます

Cursor などの外部ツールで実装する場合は、SKILL.mdをコピー と 一括取り込み を使います。手順・実装ルール・チェックリストは 自分で実装する をご覧ください。

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

プレビューで確認する

編集画面の中央では、施策の見た目を確認できます。プレビューには次の2種類があります。

種類
用途
備考

デザインプレビュー

HTML/CSS の見た目確認

デザインタブで常時表示されます。JSの動的挙動は反映されません

ライブプレビュー

実ページ上での表示・動的挙動の確認

デザインプレビュー上部の プレビューボタンで接続します

デザインプレビューは、HTML/CSS の見た目確認用です。表示位置・遅延などの動的挙動や、既存ページを改変する施策は、ライブプレビューで確認してください。

デザインプレビュー

  • AIが施策を生成すると、中央に見た目が反映されます

  • PC / モバイル を切り替えて表示を確認できます

  • プレビュー下部で背景色を切り替えられます。ライト / ダーク / カスタム色を選び、白背景・暗色サイトなど実ページに近い見え方で確認できます

  • HTMLがない変更型の施策などでは、サンプルでは表示できません。ライブプレビューで確認してください

ライブプレビュー

  1. プレビュー上部の プレビュー ボタンをクリックします

  2. プレビューURLを入力します

  3. 実ページ上の表示を確認します

  4. 別ウィンドウで開いて確認することも可能です

評価設定

評価設定 タブでは、施策の成果と、施策内の操作をまとめて設定します。

コンバージョンイベント

購入や予約完了など、施策の成果として数えるイベントです。設定の詳細は 配信設定 をご覧ください。

施策内の計測対象

施策に含まれるクリックやクローズの計測対象を設定できます。

  • 各要素の計測のON/OFFと表示名を設定できます

  • オフにした要素は、クリック・クローズが計測されません

  • 設定した表示名は、効果測定の 操作内訳 に表示されます

  • デザインタブで編集した文言などは、計測ターゲットの表示名にも反映されます

コードに計測対象がない場合は、「計測ターゲットがありません」と表示されます。

クリック・クローズがどのイベントとして送られるかなど、計測仕様の詳細は 計測されるイベント をご覧ください。

前へA/Bテスト
次へ自分で実装する

最終更新

役に立ちましたか？