学べること
以下の方法を学びます:- 対象者、オファー、コールトゥアクションをページに変換する。
- ページのコピー、レイアウト、フォームの動作を Agent に依頼する。
- 共有する前にページが明確かどうかを確認する。
- 公開 URL からフォームをテストする。
- レスポンスの質に基づいてページを改善する。
Canvas で改良と代替案を探索する
Agent が最初のビルドを完了したら、Canvas を開いてビジュアルフィードバックを伝え、プロンプトを書き直さずに代替方向を Agent に依頼しましょう。1
ランディングページをビルドする
プロンプトをコピーして replit.com のプロンプトボックスに貼り付けるか、Build on Replit をクリックしてプロンプトが事前に入力された状態で Replit を開きます。
2
Agent がビルドしたアプリをプレビューする
Agent が完了すると、右ペインが Preview に切り替わり、リアルタイムでランディングページを操作できます。改良を始める前に、ヒーローをスクロールし、コールトゥアクションをクリックして、コピーと画像が依頼した内容と一致しているか確認してください。
3
Canvas を開く
Preview と Tools タブの下にある Canvas ボタンを選択して、右ペインを Preview から Canvas に切り替えます。
4
プレビューの外側にアノテーションをつける
Canvas の Text と Draw ツールを使って、モックアップの周りの空きスペースにメモや矢印を追加し、変更してほしい特定の要素を指し示します。キャンバス上に配置されたアノテーション（プレビューの外側）はフィードバックに付いたままになるので、Agent がデザインと一緒に読むことができます。各アノテーションは1つの変更に絞ってください。短く具体的なメモ（「このボタンの幅を縮めて」）は、オープンエンドなフィードバックよりも効果的です。
5
アノテーションとプレビューを選択して Agent に送信する
アノテーションとプレビューフレームをまとめてマーキー選択し、Chat about selected items に短いプロンプトを入力して送信します。Agent はアノテーションとデザインを1つのコンテキストとして読み取るので、各メモがどの要素を参照しているかがわかります。チャットメッセージは一般的なものにしてください — 「アノテーションの変更を適用してください」のような内容でOKです。具体的な内容はアノテーションに任せましょう。
6
異なる方向性を探る
Canvas 上のデザインをクリックし、Explore different approaches など隣に表示される提案を選択して、代替のビジュアル方向性を Agent に依頼します。
7
代替案を確認して反復する
Agent が生成するのを待ちます。Explore different approaches は同じ成果物を新しいバリアントで更新します — モックアップの上のアーティファクトドロップダウンから切り替えられます。Explore different vibes はキャンバス上のオリジナルの隣に別々のビジュアルモックアップを生成します。バリアントが出来上がったら、方向性を選んで反復を続けます。選んだフレームに別のアノテーションを追加し、デザインと一緒にマーキー選択して、新しいリクエストを送信します — 例えば「アノテーションの依頼した変更を適用してください」。Agent はバリアントのコンテキストと新しいアノテーションを1つのプロンプトとして使います。
8
作業を公開する
Preview でページが動作したら、ワークスペース右上の Publish（その後のデプロイでは Republish）をクリックして最新バージョンをパブリック URL にプッシュします。新しいタブで公開 URL を開き、共有する前にライブページでテストレスポンスを1つ送信してキャプチャされることを確認してください。
次のステップ
インテグレーションを追加する
フォローアップメールを送信したり、レスポンスを CRM に同期させましょう。
カスタムドメインを追加する
共有前にページにブランドのキャンペーン URL を設定しましょう。
データベースを追加する
ソートやエクスポートができる、より構造化されたレスポンスを保存しましょう。
1回に1つの変更をテストする
2番目のバリアントを作成してメッセージを直接比較しましょう — ラウンドごとに1要素だけ変更して何が効果的かを把握します。