> ## 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とPreviewの違い

> ReplitにおけるCanvasとPreviewの違い、およびプロジェクトでそれぞれをいつ使うべきかを学びます。

Replitにはアプリを操作する2つの方法があります：**Canvas**と**Preview**。最も良い点は、両方を一緒に使えることです — まず美しいデザインを作り、磨き上げ、準備ができたら完全に機能するアプリに変換できます。

<Frame>
  <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-preview-toggle.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=a8c72c7986b4fba0d2dca5a4a0a9a735" alt="ワークスペース内のCanvasとPreviewのトグル。「プレビューモードに戻って、フルサイズで作成物を操作しましょう」というツールチップが表示されている" width="2202" height="1410" data-path="images/replitai/canvas-preview-toggle.png" />
</Frame>

## Canvasとは？

[Canvas](/learn/design/canvas)を使うと、数分で美しくインタラクティブなウェブサイトやアプリのデザインを作成できます。アイデアを説明するだけで、Replitが構築してくれます。

Canvasが最適な場面：

* **アイデアをすばやく試す**：機能を構築する前にアプリのデザインを可視化する
* **洗練されたウェブサイトを作成する**：ランディングページ、ポートフォリオ、レストランのメニュー、イベントページ
* **デザインを細かく調整する**：色、レイアウト、コンテンツを即座に調整

<Info>
  Canvasのデザインは本物のアプリのような見た目と操作感がありますが、まだデータを保存したり外部サービスに接続したりはしません。見た目が気に入ったら、ワンクリックでデザインをフルアプリに変換できます。以下のステップでその方法を説明します。
</Info>

## Previewとは？

Previewはデータを保存し、ユーザーのサインインを許可し、他のサービスに接続できる、リアルな動作するアプリケーションとして作成物を表示します。アプリのインタラクティブなフルサイズビューです。

Previewを使うべき場面：

* **ユーザーアカウント**：ユーザーがアカウントを作成してログインできる
* **情報の保存**：注文、メッセージ、ユーザー設定などのデータを保存する
* **他のサービスへの接続**：支払いを処理し、メールを送信し、他のアプリからデータを取得する
* **複雑なタスクの処理**：オンラインストアの運営、予約の管理、ダッシュボードの提供

## 両方のモードを組み合わせて使う

**CanvasとPreviewは一緒に使えるように設計されています**。どちらか一方を選ぶ必要はありません。デザインから始めて、フルアプリへと発展させることができます。

<Steps>
  <Step title="まずデザインする">
    Canvasでアイデアをすばやく可視化することから始めます。アプリの見た目と操作感 — レイアウト、色、ボタン、ユーザー体験 — に集中します。
  </Step>

  <Step title="改良と反復">
    \*\*Reimagine（再構想）\*\*を使って選択したデザインの新しい方向性を探索するか、[ビジュアルエディター](/learn/design/visual-editor)を開いて要素を直接クリックして調整します。Agentとチャットして欲しい変更を説明することもできます — 即座に反映されます。

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-reimagine.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=d913949ca41182092608c123828288f0" alt="Canvasのデザイン再構想ダイアログ。「異なるアプローチを探索する」「異なるレイアウトを試す」「異なるバイブを探索する」などの推奨プロンプトが表示されている" width="2216" height="1616" data-path="images/replitai/canvas-reimagine.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-visual-editor.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=401ee84fd5add21fc418c0521ac22c7f" alt="Canvasで開いたビジュアルエディターパネル。選択した要素のフォントサイズ、フォントウェイト、整列、色のコントロールが表示されている" width="2222" height="1572" data-path="images/replitai/canvas-visual-editor.png" />
    </Frame>
  </Step>

  <Step title="フルアプリに変換する">
    デザインに満足して実際の機能を追加する準備ができたら、\*\*Build（構築）\*\*を選択してデザインをアプリに変換します。新しいアーティファクトを作成するか、既存のものにデザインを適用できます。Agentがデザインを保持しながら、データの保存、ユーザーアカウントの処理、サービスへの接続機能を追加します。完全なワークフローは[FigmaデザインをインタラクティブなアプリにするPP](/build/figma-to-app)ガイドを参照してください。

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-build-dialog.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=ca2917d4a7e9650583fbb1ec71cc0ee3" alt="Canvasの「デザインを構築または適用する」ダイアログ。新しいアーティファクトを作成するか、既存の作成物にデザインを適用するかのオプションが表示されている" width="2210" height="1310" data-path="images/replitai/canvas-build-dialog.png" />
    </Frame>

    <Note>
      データベースや高度な機能を追加しようとすると、Agentが変換を促します。
    </Note>
  </Step>

  <Step title="公開してシェアする">
    アプリが構築されたら、誰でもオンラインでアクセスできるように公開します。Replitがすべての技術的なインフラを処理するので、アプリは視聴者に確実に機能します。
  </Step>
</Steps>

## どちらのモードをいつ使うべきか

<CardGroup cols={2}>
  <Card title="Canvasから始める" icon="paintbrush">
    * アイデアをすばやく確認したい
    * シンプルなウェブサイトを作成する
    * 異なるデザインを試したい
    * 速さを優先する
  </Card>

  <Card title="Previewに直接進む" icon="cube">
    * 必要なものが明確にわかっている
    * アプリが最初からデータを保存する必要がある
    * ユーザーがログインする必要がある
    * 他のサービスに接続する
  </Card>
</CardGroup>

<Tip>
  **どちらを選ぶか迷ったら？** Canvasから始めましょう。より速く、後からいつでもフルアプリに変換できます。作業は無駄になりません — アップグレードしても引き継がれます。
</Tip>

## 主な違い

| 機能            | Canvas        | Preview       |
| ------------- | ------------- | ------------- |
| **速さ**        | 数分            | 完全なアプリで約10分   |
| **データストレージ**  | ビジュアルのみ（保存なし） | リアルなデータを保存・取得 |
| **ユーザーアカウント** | ログインの見た目を表示   | 実際のログイン機能     |
| **サービスへの接続**  | 利用不可          | 支払い、メール、外部データ |
| **ホスティング**    | シンプルな静的ホスティング | 視聴者に合わせてスケール  |

## 次のステップ

<CardGroup cols={2}>
  <Card title="Canvas" icon="paintbrush" href="/learn/design/canvas">
    デザイン作成についてさらに学ぶ
  </Card>

  <Card title="ビジュアルエディター" icon="edit" href="/learn/design/visual-editor">
    クリックでビジュアル変更を加える
  </Card>

  <Card title="Agent" icon="robot" href="/references/agent/overview">
    Agentが構築できるものを探る
  </Card>

  <Card title="学ぶ" icon="graduation-cap" href="https://learn.replit.com">
    完全なワークフローを学ぶ
  </Card>
</CardGroup>