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.
Canvasとは？
CanvasはAgentとともにデザインを探索・反復するためのスペースです。ここでは、アプリ、動画、スライドなどのアーティファクトをフレームに表示して確認できます。Agentと協力してモックアップを作成し、デザインの方向性を比較し、変更をアプリに反映させることができます — すべて1つのビジュアルボードから。
Canvasにあるもの
Canvasはすべてをビジュアルで確認・操作できる無限のボードです。
- あなたのアプリ：実行中のアプリがCanvas上にライブのインタラクティブプレビューとして表示されます。ブラウザで使うようにクリックして操作できます。
- デザインモックアップ：Agentが作成するビジュアルプロトタイプ。本物のページのような見た目と操作感があり、インタラクト、リサイズ、調整をAgentに依頼できます — ライブアプリとは別なので自由に実験できます。
- 図形と描画：長方形、円、星、矢印、ハートなど。アイデアをスケッチしたり、デザインをマークアップしたり、画面の繋がりをマッピングするのに使えます。
- テキストと付箋：Canvas上のどこにでもラベルやメモを追加して考えを整理できます。
- 画像：スクリーンショットや参考画像をCanvas上にドロップできます。Agentはそれを見て再現したり、アレンジしたりできます。
- 動画：動画ファイルをCanvas上の他のコンテンツと並べて配置できます。
Canvasにデザインを追加する
デザインを作成するにはいくつかの方法があります。最も自然と感じる方法を選んでください。変更を加える
Canvas上にデザインができたら、いくつかの方法で反復できます。Agentに更新を依頼する
Canvas上のフレームを選択し、その下に表示される入力欄に変更内容を入力します。Enterキーを押すと、Agentがリクエストを受け取り、更新を実行し、Canvas上のモックアップを更新します。描画と注釈
下部ツールバーの描画ツールを使ってCanvas上に直接スケッチできます。変更してほしい箇所に矢印を描いたり、問題のある場所を丸で囲んだり、フィードバックをテキストメモで追加したりできます。その後、注釈に基づいてAgentに変更を依頼します。異なるデバイスでプレビューする
さまざまな画面サイズでデザインがどう見えるか確認できます。Agentにモバイル、タブレット、またはデスクトップバージョンを表示するよう依頼します：- モバイル — 390 × 844
- タブレット — 768 × 1024
- デスクトップ — 1280 × 720
アプリに変更を反映する
デザインに満足したら、変更をメインバージョンに反映します。Agentは何が行われたかのサマリーを表示し、適用または破棄のオプションを提供します。フレームをPNGとしてエクスポートする
Canvas上の任意のアーティファクトまたはデザインフレームをPNG画像として保存できます。これは、ドキュメントやチャットでプレビューを共有する場合、さらに反復する前のスナップショットを取る場合、またはチームメイトにスクリーンショットを送る場合に便利です。
エクスポートされたPNGは、Canvas上でフレームが現在表示しているものと一致します。アプリやデザインがまだ読み込み中の場合は、エクスポートする前に完全にレンダリングされるまで待ってください。
デザインの方向性を比較する
どの方向に進むべきか迷っているときは、Agentに複数のバージョンを生成して並べて比較するよう依頼します。- 1つのページの複数バージョン：「このランディングページの5つのバージョンを見せて。」Agentが各バージョンを作成し、並べて配置します。
- 複数ページのフロー：「完全なオンボーディングフローをデザインして：ウェルカム、プロフィール設定、設定、確認。」Agentが各画面を構築し、順番に並べます。
- ミックス＆マッチ：「ランディングページと料金ページを、ミニマルなスタイルとボールドなスタイルの両方で見せて。」Agentがすべての組み合わせを作成するので、全体像を確認できます。
ユーザーフローをマッピングする
Canvas上でサインアップ、オンボーディング、ダッシュボード、設定などの完全なユーザー体験を展開し、すべての繋がりを確認します。- 各画面を別々のフレームとして配置する
- Agentに完全なフローを生成するよう依頼する：「アプリの完全なオンボーディングフローを描いて」
- 矢印と図形を使ってユーザーが画面間をどのように移動するかを示す
- AgentにラフなスケッチをPolishedなデザインに変換するよう依頼する
デザインをリアルなアプリにする
デザインに満足して実際のものにしたい場合、2つの方法があります：フルアプリにする
デザインにデータの保存、ユーザーアカウント、他のサービスへの接続などの実際の機能が必要な場合は、Agentにフルアプリにするよう依頼します。「これをリアルなアプリにして」または「バックエンドを追加して」と言うと、Agentが実際に公開可能なアプリとして機能するために必要なものをすべて構築します。デザインをフルアプリにするには有料プランが必要です。
特定のタイプに変換する
デザインフレームを特定のアーティファクトタイプに変換することもできます：よくある質問
デザインフレームは実行中のアプリと同じですか？
デザインフレームは実行中のアプリと同じですか？
いいえ。デザインフレームはビジュアルプロトタイプです — 本物のように見えて感じられますが、背後に動作するバックエンドやデータベースはありません。一方、Canvas上のアプリプレビューは実際に実行中のアプリです。
ライブアプリを壊さずにページをリデザインできますか？
ライブアプリを壊さずにページをリデザインできますか？
はい。AgentにページをCanvasに取り込むよう依頼します — たとえば「ダッシュボードをCanvasに表示して」。Agentが実験できるコピーを作成します。変更を反映することを選択するまで、ライブアプリには影響しません。
デザインをリアルなアプリにするにはどうすればよいですか？
デザインをリアルなアプリにするにはどうすればよいですか？
Agentにフルアプリにするよう依頼します（「これをリアルにして」）またはのタイプに変換します（「これをウェブアプリに変換して」）。Agentが動作する公開可能なアプリになるために必要なものをすべて構築します。
ウェブアプリ以外のタイプにも変換できますか？
ウェブアプリ以外のタイプにも変換できますか？
はい。CanvasフレームをウェブアプリJSONドキュメント、モバイルアプリ、スライド、データビジュアライゼーションなどに変換できます。
FigmaやOther ツールからデザインをインポートできますか？
FigmaやOther ツールからデザインをインポートできますか？
はい。FigmaデザインをReplitに取り込む方法はいくつかあります：
- Figmaからインポート：replit.com/importにアクセスし、Figmaアカウントを接続して、フレームURLを貼り付けてデザインを動作するReactアプリに変換します。詳細はFigmaクイックスタートからインポートを参照してください。
- AgentチャットのFigma MCP：FigmaリンクをAgentチャットに直接貼り付けて、コードの生成、デザインデータの抽出、またはデザインからコンポーネントの構築を依頼します。Figma MCPインテグレーションガイドを参照してください。
- スクリーンショット参照：スクリーンショットをCanvasにドロップして、Agentにそこからデザインを再現するよう依頼します。
Canvas上に他に何を配置できますか？
Canvas上に他に何を配置できますか？
デザインモックアップとアプリプレビューの他に、図形、矢印、テキストラベル、付箋、画像、動画を追加できます — アイデアのスケッチ、デザインへの注釈、または考えの整理に便利です。