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つのプロンプトで画面全体を整理できます。
スティッキーフッターでCTAを常に表示する
プロンプト: 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 は今後のリリースでこれらの制限を解除する可能性があります。