メインコンテンツへスキップ

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

ランディングページは、アイデア、キャンペーン、ウェイトリスト、イベント、オファーに1つのフォーカスした場所を提供します。
パブリック URL に公開された Rachel Jones Fitness Coach のランディングページ — ダークな編集者風ヒーローに「Stronger body. Confident mind. Unstoppable you.」というヘッドライン、Work with Rachel のコールトゥアクション、認定資格、プレスメンション帯が表示されている

学べること

以下の方法を学びます:
  • 対象者、オファー、コールトゥアクションをページに変換する。
  • ページのコピー、レイアウト、フォームの動作を Agent に依頼する。
  • 共有する前にページが明確かどうかを確認する。
  • 公開 URL からフォームをテストする。
  • レスポンスの質に基づいてページを改善する。

Canvas で改良と代替案を探索する

Agent が最初のビルドを完了したら、Canvas を開いてビジュアルフィードバックを伝え、プロンプトを書き直さずに代替方向を Agent に依頼しましょう。
1

ランディングページをビルドする

プロンプトをコピーして replit.com のプロンプトボックスに貼り付けるか、Build on Replit をクリックしてプロンプトが事前に入力された状態で Replit を開きます。
2

Agent がビルドしたアプリをプレビューする

Agent が完了すると、右ペインが Preview に切り替わり、リアルタイムでランディングページを操作できます。改良を始める前に、ヒーローをスクロールし、コールトゥアクションをクリックして、コピーと画像が依頼した内容と一致しているか確認してください。
Agent チャットの隣の Replit Preview ペインにレンダリングされた Rachel Jones フィットネスコーチのランディングページ — 金色に照らされたポートレートの上に「Stronger body. Confident mind. Unstoppable you.」というヘッドラインが表示されたダークな編集者風ヒーロー、Work with Rachel と Watch Rachel's Story ボタン、右側に認定資格、「Trusted by 500+ women worldwide」の5つ星帯
3

Canvas を開く

Preview と Tools タブの下にある Canvas ボタンを選択して、右ペインを Preview から Canvas に切り替えます。
Preview と Tools タブの下の Canvas ボタンがハイライトされた Replit ワークスペース
4

プレビューの外側にアノテーションをつける

Canvas の TextDraw ツールを使って、モックアップの周りの空きスペースにメモや矢印を追加し、変更してほしい特定の要素を指し示します。キャンバス上に配置されたアノテーション(プレビューの外側)はフィードバックに付いたままになるので、Agent がデザインと一緒に読むことができます。各アノテーションは1つの変更に絞ってください。短く具体的なメモ(「このボタンの幅を縮めて」)は、オープンエンドなフィードバックよりも効果的です。
Rachel Jones ランディングページの右側のキャンバスマージンに置かれた「Reduce the width of this button」というキャンバスアノテーション。ページヘッダーの金色の「Book a Free Consultation」ボタンを指す矢印付き
5

アノテーションとプレビューを選択して Agent に送信する

アノテーションとプレビューフレームをまとめてマーキー選択し、Chat about selected items に短いプロンプトを入力して送信します。Agent はアノテーションとデザインを1つのコンテキストとして読み取るので、各メモがどの要素を参照しているかがわかります。チャットメッセージは一般的なものにしてください — 「アノテーションの変更を適用してください」のような内容でOKです。具体的な内容はアノテーションに任せましょう。
Canvas 上で2つのアノテーションと一緒に選択された Rachel Jones ランディングページ — Book a Free Consultation ボタンを指す「Reduce the width of this button」とヒーロー写真を指す「Add a slide-in animation for Rachel's image」、Chat about selected items 入力欄に入力されたチャットプロンプト
6

異なる方向性で Reimagine する

Canvas 上のデザインをクリックして Reimagine を選択し、Explore different approaches を選んで代替ビジュアル方向性を Agent に依頼します。
Rachel Stone モックアップ上で Explore different approaches オプションがハイライトされた Reimagine メニュー
7

代替案を確認して反復する

Agent が生成するのを待ちます。Explore different approaches は同じ成果物を新しいバリアントで更新します — モックアップの上のアーティファクトドロップダウンから切り替えられます。Explore different vibes はキャンバス上のオリジナルの隣に別々のビジュアルモックアップを生成します。バリアントが出来上がったら、方向性を選んで反復を続けます。選んだフレームに別のアノテーションを追加し、デザインと一緒にマーキー選択して、新しいリクエストを送信します — 例えば「アノテーションの依頼した変更を適用してください」。Agent はバリアントのコンテキストと新しいアノテーションを1つのプロンプトとして使います。
Agent が3つのバイブバリアント(Editorial Warmth、Quiet Clinical、Vibrant Pop)を生成した後の Canvas 上の Rachel Jones ランディングページ — オリジナルフレームが2つの新しいアノテーション(「Reduce the width of this button」と「Add a slide-in animation for Rachel's image」)と共に選択されており、チャットには「Apply the requested changes from the annotations」と入力されている
8

作業を公開する

Preview でページが動作したら、ワークスペース右上の Publish(その後のデプロイでは Republish)をクリックして最新バージョンをパブリック URL にプッシュします。新しいタブで公開 URL を開き、共有する前にライブページでテストレスポンスを1つ送信してキャプチャされることを確認してください。
2倍ズームで表示された Replit ワークスペースの右上隅 — ヘッダーのグレーの Republish ボタンがオレンジのアウトラインでハイライトされており、その下のポップオーバーに「Raouf published about 18 hours ago」、Visibility: Public、Review security と Republish アクションボタンが表示されている

次のステップ

インテグレーションを追加する

フォローアップメールを送信したり、レスポンスを CRM に同期させましょう。

カスタムドメインを追加する

共有前にページにブランドのキャンペーン URL を設定しましょう。

データベースを追加する

ソートやエクスポートができる、より構造化されたレスポンスを保存しましょう。

1回に1つの変更をテストする

2番目のバリアントを作成してメッセージを直接比較しましょう — ラウンドごとに1要素だけ変更して何が効果的かを把握します。

関連