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

# デザインをビルドする

> 勝ち残ったフレームを本物のソフトウェアに変える：新しいアプリとしてビルドするか、すでに持っているアプリにその見た目を適用します。

デザインフレームは単なる絵ではなく、本物のソフトウェアの仕様書です。フレームが仕上がったら、それをAgentに渡しましょう：フレームを選択し、アクションバーで\*\*Build…\*\*を選び、進め方を選びます：

* 同じプロジェクト内で、デザインを新しいアプリとしてビルドする
* デザインの見た目を、すでに持っているアプリに適用する
* どちらの場合も安全にロールバックできる — Agentは開始前にチェックポイントを作成します

## フレームからアプリへの2つの道

選択したDesignフレームの\*\*Build…\*\*メニューは両方をカバーします：

<Frame caption="Build…メニュー：新しいアーティファクトを作成するか、既存のものにデザインを適用します。">
  <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>

### このデザインをビルドする

**Build this design**を選ぶと、そのフレームから新しいアーティファクトが始まります。Agentがレイアウト、スタイリング、アセットをビルドし、プロジェクトのアーティファクト一覧に表示されるライブで動作するアプリに仕上げます。

### 既存のアプリに適用する

このメニューにはプロジェクト内のすべてのアーティファクトも一覧表示されます。いずれかを選ぶとデザインがそのアプリに適用されます：Agentがフレームに合わせてアーティファクトのコードを書き換え、Designフレームは参照用としてCanvasに残ります。これが、最初からやり直すことなくすでにビルド済みのアプリを再スタイルする方法です。

## 流れ

<Steps>
  <Step title="ビルドするデザインを選ぶ">
    出荷したいフレームを決めます。まずCanvas上で候補を並べて比較しましょう — ビルドすると今回の探索は一区切りしますが、Agentがチェックポイントを作成するのでいつでもロールバックできます。
  </Step>

  <Step title="Agentに渡す">
    フレームを選択し、アクションバーで\*\*Build…\*\*を選んで進め方を選びます：新しいアーティファクトか既存のものか。Agentがデザイン、レイアウト、スタイリング、アセットをビルドし、進捗をチャットで報告します。
  </Step>

  <Step title="ビルドを確認する">
    Agentが変更内容を報告し、チェックポイントを作成します。結果を開いてデザインが実際に動いているのを確認し、うまく反映されなかった部分はチャットで調整を続けます。
  </Step>
</Steps>

<Note>
  Designフレームから新しいアプリをビルドするにはCoreまたはProプランが必要です。デザインの適用やその他のReplit Design機能はすべてのプランで利用できます。プランの詳細は[請求](/ja/billing/ai-billing)を参照してください。
</Note>

## ビルド後：本物にする

フレームをビルドすると、デザインがそのまま反映された動作するアプリが手に入ります。モックアップは動いているふりをしていただけですが、これでAgentが本物の機能を追加できます。チャットで必要なものを依頼しましょう：

* **サインインを可能にする**：[Replit Auth](/ja/features/auth-and-identity/authentication)でユーザーアカウントを追加します。ユーザーは設定不要でReplitアカウントでサインインできますし、独自のプロバイダーを持ち込むこともできます。
* **実データを保存する**：組み込みの[Database](/ja/features/data-and-storage/sql-database)で注文、メッセージ、設定を保存・取得します。
* **課金する**：[Monetization](/ja/features/monetization/overview)インテグレーションで支払いとサブスクリプションを追加します。
* **他のサービスに接続する**：Agentはあなたのプロンプトに基づいて、メールからSlack、Googleサービスまで[インテグレーション](/ja/features/integrations/overview)を自動的に有効化します。

## 公開して育てる

アプリが動作するようになったら、人々の目に触れさせて改善を続けましょう：

* **公開する**：[Publishingツール](/ja/features/publishing/overview)から出荷し、公開後の運用アプリの更新方法は[公開後の作業](/ja/features/publishing/after-you-publish)を参照してください。
* **本物のアドレスを持つ**：[カスタムドメイン](/ja/features/publishing/custom-domains)を購入または接続します。
* **見つけてもらう**：[SEO Agent](/ja/features/publishing/seo-agent)を実行して技術的な監査とワンクリック修正を行います。
* **訪問者の声を聞く**：[フィードバックウィジェット](/ja/features/publishing/feedback-widget)を追加して、問題や改善案を人々が報告し、それをそのままAgentに送れるようにします。
* **健全に保つ**：[公開済みアプリの監視](/ja/features/publishing/monitoring-a-deployment)でステータス、パフォーマンス、稼働率を追跡します。

## 次のステップ

* [DesignとBuildの違い](/ja/design/design-vs-build)：それぞれの入口をいつ使うか。
* [デザインシステムを作成する](/ja/design/create-a-design-system)：出荷したデザインを抽出して、次のデザインが最初からブランドに沿うようにします。