> ## 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.

# Design vs. Build

> ReplitプロジェクトにおけるDesignとBuildの違い、それぞれをいつ使い始めるべきかを学びます。

すべてのReplitプロジェクトには、ヘッダーに並ぶ2つの入り口があります: **Design**と**Build**です。Designはソフトウェアの見た目を形作る場所で、Buildはそれをちゃんと動くようにする場所です。両方とも同じプロジェクトを開くので、デザインしたものがデザインツールの中に取り残されることはありません。

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-vs-build-project.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=d3f7fcbc912ce59d00f6d88e41b9ba38" alt="ヘッダーに並ぶDesignとBuildの入り口を持つReplitプロジェクト。選択されたAPEX X1 Exact ReplicaデザインフレームとともにCanvasが表示されている" width="2000" height="1255" data-path="images/design/replit-design/design-vs-build-project.png" />
</Frame>

## Designとは？

[Design](/ja/design/what-is-replit-design)ではCanvasが表示され、プロンプトからデザインフレームを生成し、バリエーションを探索し、コードに落とし込む前に勝者を磨き上げることができます。

Designは次のような場合に最適です:

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

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

## Buildとは？

Buildはあなたの作品が、データを保存したり、ユーザーのサインインを許可したり、他のサービスに接続したりできる、リアルな動作するアプリケーションとして実行される場所です。

Buildを使うべき場面:

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

## DesignとBuildを組み合わせて使う

DesignとBuildは同じプロジェクト上で動作するので、どちらか一方を選ぶ必要はありません。見た目から始めて、完全なアプリへと発展させましょう。

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

  <Step title="改良と反復">
    [提案](/ja/design/explore-suggestions)に従って、選択したフレームの新しい方向性を探索するか、**Edit**ツールを選択して要素をクリックし、[ビジュアルエディター](/ja/design/visual-editor)で調整します。[Agentとチャット](/ja/design/chat-about-your-design)して、欲しい変更を説明することもできます。

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7f39fec76cde3f60e3a20e6c5a13d8db" alt="APEX X1スーパーカーのヒーローを表示する選択済みのWebsiteフレーム。横にはSuggested next stepsパネルがあり、Explore different approaches、Try different layouts、Explore different vibes、Surprise meなどの提案チップが表示されている" width="2000" height="1254" data-path="images/design/replit-design/ambient-iq.png" />
    </Frame>
  </Step>

  <Step title="デザインをBuildする">
    デザインに満足し、実際の機能を追加する準備ができたら、フレームの\*\*Build…\*\*を選択します。新しいアーティファクトを作成するか、既存のものにデザインを適用しましょう。Agentがデザインをそのまま保ちながら、データの保存、ユーザーアカウントの処理、サービスへの接続機能を追加します。

    <Frame>
      <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=494228a2a81e9f943376d78e77b96417" alt="選択済みのDesignフレーム（APEX X1 Exact Replica）で開いたBuildメニュー。見出しは「Build or apply your designs」で、新しいアーティファクトを作成する「Build this design」と、プロジェクトのAPEX X1 Design SystemおよびScroll HeroウェブサイトをリストするApply to an existing creationが表示されている" width="2000" height="1153" data-path="images/replitai/canvas-build-menu.png" />
    </Frame>

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

  <Step title="公開して共有する">
    アプリがビルドされたら、誰でもオンラインでアクセスできるように公開しましょう。Replitがすべての技術的なインフラを処理するので、アプリはあなたのオーディエンスに対して確実に機能します。
  </Step>
</Steps>

## それぞれをいつ使い始めるべきか

<CardGroup cols={2}>
  <Card title="Designから始める" icon="paintbrush">
    * 見た目が一番の課題
    * アイデアをすばやく確認したい
    * 複数の方向性を探索して比較したい
    * 速さを優先したい
  </Card>

  <Card title="Buildから始める" icon="cube">
    * 挙動が一番の課題
    * アプリが最初からデータを保存する必要がある
    * ユーザーがログインする必要がある
    * 他のサービスに接続する
  </Card>
</CardGroup>

<Tip>
  **どちらを選ぶか迷ったら？** Designから始めましょう。より速く、後からいつでもデザインを完全なアプリにビルドできます。作業は無駄になりません — ビルドすると引き継がれます。逆方向でも機能します: まずBuildでアプリを動かしてから、Designで見た目を作り直すこともできます。
</Tip>

## 主な違い

| 機能            | Design（モックアップ） | Build（アプリ）    |
| ------------- | -------------- | ------------- |
| **速さ**        | 数分             | 完全なアプリで約10分   |
| **データストレージ**  | ビジュアルのみ（保存なし）  | リアルなデータを保存・取得 |
| **ユーザーアカウント** | ログインの見た目を表示    | 実際のログイン機能     |
| **サービスへの接続**  | 利用不可           | 支払い、メール、外部データ |

## 次のステップ

<CardGroup cols={2}>
  <Card title="Replit Designとは" icon="palette" href="/ja/design/what-is-replit-design">
    プロンプトからブランドに合ったアプリまでの全体的な流れ
  </Card>

  <Card title="Canvas" icon="object-group" href="/ja/design/canvas">
    フレームが並ぶボード
  </Card>

  <Card title="デザインをBuildする" icon="hammer" href="/ja/design/build-your-design">
    フレームから動作するアプリへのガイド付きフロー
  </Card>

  <Card title="Agent" icon="robot" href="/ja/features/agent/overview">
    Agentがあなたのために構築できるものを探る
  </Card>
</CardGroup>