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

# テンプレートから構築して公開する

> Replit Designのテンプレートから始めて、選択したフレームをAgentで機能するWebsiteに変え、Previewでテストし、ライブURLに公開しましょう。

⏰ *所要時間: 10分*

このガイドを終える頃には、共有できるURLで公開された小さなアプリが完成しています。

<Frame>
  <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/07-published-site.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=d522791d07c7bc5450709f2d32dca337" alt="選択したテンプレートをWebsiteとしてビルドし、公開されたReplitのURLで開いた状態" width="1274" height="717" data-path="images/first-app-template/07-published-site.jpg" />
</Frame>

洗練されたテンプレートから始め、それを機能するWebsiteに変え、公開します。利用できる正確なテンプレートは変わることがあるため、作りたいものに合ったものを選んでください。

## 始める前に

[Replitアカウント](https://replit.com)が必要です。Designフレームから新しいアプリを構築するにはCoreまたはProプランが必要です。プランの詳細は[デザインを構築する](/ja/design/build-your-design)と[請求](/ja/billing/ai-billing)をご覧ください。

目標は、1つの完全なループを終えることです:

* [Replit Design](https://replit.com/design)でテンプレートを選び、
* [Agent](/ja/features/agent/overview)でビルドし、
* アプリをテストし、
* 公開して、共有する。

Agentは Replit のAIビルダーです。作りたいものを説明すると、Agentがアプリの作成、説明、修正を手伝います。

## テンプレートを選び、構築し、公開する

<Steps>
  <Step title="デザインテンプレートを閲覧する">
    [replit.com/design](https://replit.com/design) を開きます。注目のテンプレートを閲覧するか、**Landing Pages**、**Mobile**、**Prototypes** などの形式でフィルタします。

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/01-design-gallery.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=3c00280a1b20c5bff141183d7a741f50" alt="注目のテンプレートと形式フィルタが表示されたReplit Designギャラリー" width="1280" height="720" data-path="images/first-app-template/01-design-gallery.jpg" />
    </Frame>
  </Step>

  <Step title="テンプレートをプレビューして使用する">
    テンプレートを選択して確認し、**Use template** を選択します。Replitが新しいプロジェクトを作成し、テンプレートをDesign Canvasに配置します。テンプレートのカバーページから始めた場合は、リミックスの流れについて[テンプレートから始める](/ja/design/start-from-a-template)をご覧ください。

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/02-template-preview.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=090fda02a1643cd376d00b83dcd84ecb" alt="Use templateボタンが表示されたReplit Designテンプレートのプレビュー" width="1280" height="720" data-path="images/first-app-template/02-template-preview.jpg" />
    </Frame>

    リミックスされたテンプレートは、新しいプロジェクト内のDesign Canvasに開かれます。

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/03-remixed-design.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=e4174b4f149b82c868173d22140baf8a" alt="新しいReplitプロジェクトのDesign Canvasにリミックスされた選択済みテンプレート" width="1280" height="720" data-path="images/first-app-template/03-remixed-design.jpg" />
    </Frame>
  </Step>

  <Step title="デザインをWebsiteに変える">
    テンプレートはまずデザインのモックアップとして始まります。公開する前に、**Build** に切り替えて、選択したデザインを機能するWebsiteに変えるようAgentに依頼します。例えば:

    > 選択したこのテンプレートを機能するWebsiteとしてビルドしてください。ビジュアルデザインを保ち、ナビゲーションとお問い合わせのアクションを機能させてください。

    Agentは同じプロジェクト内にWebsiteアーティファクトを作成し、選択したデザインをその元にします。

    <Note>
      **Publish** ボタンはDesignでも表示されます。プロジェクトにデザインのモックアップしか含まれていない場合、Publishingはまだデプロイするものがないことを報告し、Agentにアプリの構築を依頼するよう案内します。Websiteアーティファクトが存在すれば、DesignまたはBuildのどちらからでも公開できます。
    </Note>

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/04-build-request.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=0086fff335263cb1dcfe83d79d299721" alt="選択済みのポートフォリオデザインが添付されたBuildワークスペース、Agentチャット内のビルドリクエスト、デザインのみのプロジェクトにはまだデプロイするものがないことを説明するPublishing" width="1280" height="720" data-path="images/first-app-template/04-build-request.jpg" />
    </Frame>
  </Step>

  <Step title="Previewでアプリが動作することを確認する">
    Agentが完了したら、[Preview](/ja/features/editor/preview) を開いて、訪問者のようにアプリを使ってみてください。Previewは公開前にビルド中にアプリをテストする場所です。

    以下を確認してください:

    * メインナビゲーションをたどれる。
    * テンプレートのボタンやフォームを使用できる。
    * 操作後に明確な成功状態や検証状態が表示される。
    * ページをリフレッシュしてもサイトを再び使用できる。
    * Previewを電話サイズの幅にリサイズできる。

    何か壊れている場合は、症状をAgentに説明してください。コードを自分で診断する必要はありません。

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/05-preview.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=8a4aa6fe26961c70b48f89be1713e45a" alt="プロジェクトエディタのPreviewで動作しているテンプレートベースのWebsite" width="1280" height="720" data-path="images/first-app-template/05-preview.jpg" />
    </Frame>

    <Tip>
      公開前にビジュアルのバリエーションを探索したいですか？[提案を探索する](/ja/design/explore-suggestions) を参照して、代替のルックスを並べて生成し、好みのものを適用してください。
    </Tip>
  </Step>

  <Step title="アプリを公開する">
    Previewが正常に動作したら、**Publish** を選択します。生成されたサブドメインを確認し、アプリにアクセスできる人を選択し、セキュリティ設定を確認します。次にダイアログで **Publish** を選択します。

    公開すると、共有できるURLを持つアプリのパブリックバージョンが作成されます。

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/06-publish-dialog.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=59b2f5b98e3ec216858c5d0b762dd7b8" alt="生成されたサブドメイン、アクセス設定、Publishボタンが表示されたPublishダイアログ" width="1280" height="720" data-path="images/first-app-template/06-publish-dialog.jpg" />
    </Frame>
  </Step>

  <Step title="公開したアプリを開く">
    新しいブラウザタブでパブリックURLを開き、同じ確認を繰り返してください。共有する前に、アプリがプロジェクトエディタの外でも動作することを確認しましょう。

    公開されたアプリがPreviewと異なる動作をする場合は、公開ログとアプリに必要な本番設定を確認してください。よくある公開の問題については、[公開のトラブルシューティング](/ja/build/troubleshooting) をご覧ください。

    <Frame>
      <img src="https://mintcdn.com/replit/19qgTrUVf3Dm9vud/images/first-app-template/07-published-site.jpg?fit=max&auto=format&n=19qgTrUVf3Dm9vud&q=85&s=d522791d07c7bc5450709f2d32dca337" alt="公開済みのReplitのURLで開いた、完成したテンプレートベースのWebsite" width="1274" height="717" data-path="images/first-app-template/07-published-site.jpg" />
    </Frame>
  </Step>
</Steps>

## 🎉 おめでとうございます — 初めてのアプリを公開しました

デザインテンプレートから、ライブで共有できるURLまで作り上げました。その過程で:

* Replit Designからテンプレートを選び、リミックスしました。
* 選択したデザインを機能するWebsiteに変えるようAgentに依頼しました。
* Previewで結果をテストしました。
* アプリを公開して、パブリックURLで開きました。

これがReplitの完全なワークフローです — 出発点を選び、構築し、テストし、改善し、公開する。

## 次のステップ

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/ja/design/explore-suggestions">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="palette" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="palette" size={19} />
    </span>

    <div className="chat-card-title">Canvasでデザインする</div>
    <p>ビジュアルバリエーションを探索し、再構築せずに新しいデザインを適用しましょう。</p>
    <div className="chat-card-link">Designを探索する →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/core-concepts/agent/task-system">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="list-check" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="list-check" size={19} />
    </span>

    <div className="chat-card-title">並行して構築する</div>

    <p>
      複数のAgentタスクを同時に実行して、アプリのさまざまな部分を並行して
      進めましょう。
    </p>

    <div className="chat-card-link">詳しく見る →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/learn/foundations/vibe-coding-101">
    <div className="chat-use-case-visual palette-ink">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="robot" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="robot" size={19} />
    </span>

    <div className="chat-card-title">バイブコーディング101</div>
    <p>アイデアから動作するアプリへとAgentを導く方法を学びましょう。</p>
    <div className="chat-card-link">ガイドを開く →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/build/add-database">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="database" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="database" size={19} />
    </span>

    <div className="chat-card-title">データベースを追加する</div>
    <p>リフレッシュ後もアプリのデータを保存しましょう。</p>
    <div className="chat-card-link">続ける →</div>
  </a>
</section>