AI エディター

AI エディターは、フロー＆ペイウォールビルダー内のチャットパネルです。変更内容を自然な言葉で入力するだけで、Adapty が表示中のスクリーンを書き直し、スタイルを変更し、要素を並べ替えます。変更内容は Adapty が説明してくれ、ワンクリックで元に戻せます。

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

仕組み

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

画像の操作

画像を添付し、AIに視覚的な参考として使用するよう指示したり、画面上に配置したりできます。1つのメッセージには最大5枚の画像（JPEG、PNG、WebP形式、各5MBまで）を含めることができます。

スクリーンショットからスクリーンを作成する: 参考ペイウォールのスクリーンショットを添付し、Build a screen like this とプロンプトを入力します。AIが開いているスクリーンをそれに合わせて再デザインします。
添付画像を配置する: 画像を添付して配置場所を指定します。たとえば Use this as the hero image や Make this the background のように指示します。
スクリーンをデバッグする: 問題箇所を示すスクリーンショットを添付し、何が壊れているかを説明します。

プロンプトのアイデア

これらのプロンプトを試して、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が年間価格の下にそれを追加します。週単位・月単位・年単位の価格も利用できます。

実際のプランと価格を含むプロダクト選択肢を追加する

プロンプト: Add a products group with real prices

Products パネルにプロダクトを追加済みの場合、AI はプロダクトが割り当てられたプロダクトグループを、プロダクト名とプロダクト変数とともに生成できます。

画面にプロダクトがない場合、AI はサンプル価格とバッジを含むプランカードを追加します。ストアの価格を表示するには、各カードのプロダクトドロップダウンでプロダクトを選択し、その後 AI に価格を接続するよう依頼してください。

1つのプランカードをスタイリングし、残りを揃える

プロンプト: Apply the selected state of the first card to the other cards

1つのプロダクトカードの選択状態を手動でスタイリングしたら、AIに他のカードへ同じスタイルを適用するよう指示します。AIがその他すべてのカードの選択状態を更新するので、カードごとに設定を繰り返す必要がありません。

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

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

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