AI エディター

AI エディターは、フロービルダー内のチャットパネルです。変更したい内容を平易な言葉で入力するだけで、Adapty が現在表示中のスクリーンを書き直し、スタイルを変更し、要素を並び替えます。変更内容は Adapty が説明してくれるので、ワンクリックで元に戻すことができます。

結果を手動で調整したり、プロンプトを続けたり、すべての変更を元に戻したりすることができます。

仕組み

  • AI エディターを開く: 左パネルのスパークル ボタンをクリックします。
  • 画面ごとにチャット: パネルのヘッダーには編集中の画面名が表示され、各プロンプトはその画面にのみ適用されます。ドロップダウンから画面を切り替えると、プレビューも連動します。
  • プロンプト履歴の共有: チームの誰かがフロー画面を開くと、あなたが送ったプロンプトを確認できます。同僚の作業を繰り返さず、続きから始めましょう。
  • ヒントを得る: Prompts library を開き、Visual・Content・Layout・Products のいずれかのカテゴリを選択します。このページのプロンプトのアイデアでは、エディターでできることを紹介しています。
  • プロンプト1つ=元に戻す1ステップ: AI はプロンプトの変更をすべて一度に適用し、Undo でまとめて元に戻せます。
  • 過去のプロンプトを修正する: 送信済みのプロンプトを修正したい場合は、Retry をクリックします。フローエディターが入力ボックスに戻します。
  • 公開するまでユーザーには届かない: 変更がユーザーに反映されるのは、フローを保存して公開した後のみです。

プロンプトのアイデア

これらのプロンプトを試して、AIエディタがどのようにイテレーションを助けてくれるかを確認しましょう。変更はいつでも元に戻せます。

新しいビジュアルの方向性をテストする

プロンプト: Give the paywall a dark, premium feel

AIがコピーを書き直し、要素のスタイルを変更し、新しいカラーテーマを適用します — すべて1つのプロンプトで完結します。フローの新しいビジュアルの方向性を試してみて、気に入ればそのまま採用し、気に入らなければ元に戻してください。

評価とお客様の声セクションで信頼を構築する

プロンプト: Add a social proof section with star rating and short testimonials

AIはコンテナ、星評価、お客様の声カードを購入ボタンの上に追加します。既存要素のスタイル変更ではなく、すべて新しい要素です。まだ画面にないセクションを依頼すると、AIがそれを構築します。

1つのプロンプトで密度の高い画面をスキャンしやすくする

プロンプト: Shorten all the text

AIが画面上のすべてのテキスト要素を一度に短くし、それぞれの意味を保ちます。要素を1つずつ編集する代わりに、1つのプロンプトで画面全体を整理できます。

プロンプト: Add a sticky footer with the main subscribe button

AIは画面下部に固定されたフッターを作成し、サブスクライブボタンをその中に移動します。モバイルレイアウトのパターン名を伝えるだけで、AIが構築してくれます。

打消し線価格で割引を見逃せないものにする

プロンプト: 割引プランに元の価格を取り消し線付きで表示する

AIはオファーが設定されたプランを見つけ、元の価格に取り消し線を引いて、その横に割引後の価格を表示します。同じ結果を手動で作成するには、いくつかの手順が必要です。

一文でユーザーを最良のプランへ誘導する

プロンプト例: Push users towards the yearly plan

目的を伝えるだけで、AIが仕組みを選択します。年間プランのカードをあらかじめ選択状態にし、Best Value バッジを追加し、オファーを強調するようプランのラベルを書き換えます。この3つの変更はまとめて適用されるか、まったく適用されないかのどちらかです。

色やサイズを指定せずにCTAを目立たせる

プロンプト: 購読ボタンを最も目立つ要素にして

AIがボタンのコントラストを高め、サイズを大きくし、周囲の余白を追加します。具体的な数値を一切指定しなくてもOKです。目指す結果を言葉で伝えるだけで、AIが数値を決めてくれます。

年間価格を1日あたりのコストに換算する

プロンプト: Break down the annual plan price to a daily cost

Adapty はすべてのサブスクリプションの1日あたりの価格をすでに計算しており、AIが年間価格の下にそれを追加します。週単位・月単位・年単位の価格も利用できます。

やり直さずに調整を続ける

プロンプト例: 背景をもう少し柔らかくして、トライアルの行をボタンに近づけて

チャットは画面と前回のプロンプトを記憶しているので、続きのリクエストに繰り返しは不要です。画面が思い通りになるまで調整を続けられます。各プロンプトは個別の元に戻すステップになっています。

AI エディターにできないこと

AI エディターは、指定した画面のスタイル変更、書き換え、要素の並べ替えを行います。ただし、以下のことはできません。

  • 複数のスクリーンを一度に編集する: アクティブなスクリーンを切り替えて、再度プロンプトを入力してください。
  • メディアを生成・取得する: 画像や動画はご自身で追加してから、AIに配置やスタイル変更を指示してください。
  • カスタム変数や条件分岐ロジックを作成する: AIは1日あたりの価格などの組み込みのプロダクト変数をコピーに書き込みます。カスタム変数や分岐はご自身で設定してください。
  • アクションを設定する: ナビゲーション、購入、リンクは手動で接続してください。
  • 提供するプロダクトを選択する: AIはスクリーン上のプロダクトカードのスタイルを変更します。Productsエレメントへのプロダクトの割り当てはご自身で行ってください。

Adapty は今後のリリースでこれらの制限を解除する可能性があります。