> ## 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で開いて、思いどおりになるまでスタイルを作り直しましょう。

⏰ *所要時間: 約10分*

テンプレートを使えば、幸先の良いスタートが切れます — 完成したデザインをコピーして、自分のものにするのです。このガイドでは、注目のテンプレートを自分のプロジェクトにリミックスし、Replit Designで開いてスタイルを作り直します。空白のプロンプトは必要ありません。

## 始める前に

必要なのは [Replitアカウント](https://replit.com) だけです。それ以外は不要です — リミックスとスタイルの作り直しは、クリックとプロンプトだけで行えます。

## テンプレートをプロジェクトにリミックスする

このガイドでは例として **Supercar showcase**（Apex 01）を使いますが、どのテンプレートでも同じ手順で進められます。

<Steps>
  <Step title="テンプレートを選ぶ">
    出発点にしたいテンプレートを選びます。選択するとカバーページが開き、ライブプレビューと共有オプションが表示されます。いくつか例を挙げます。

    <div className="template-gallery">
      <CardGroup cols={2}>
        <Card title="Supercar showcase" img="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/templates/supercar-showcase.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=3807a96319b4d974f30bda957f6bd92e" href="https://replit.com/t/replit-gallery/repls/Apex-01/view?canvas=true" width="1920" height="1080" data-path="images/design/replit-design/templates/supercar-showcase.webp" />

        <Card title="Coffee shop landing page" img="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/templates/coffee-shop-landing-page.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=40b973149d3d5b96efd9a8ccf73af241" href="https://replit.com/t/replit-gallery/repls/Lumora/view?canvas=true" width="1920" height="1080" data-path="images/design/replit-design/templates/coffee-shop-landing-page.webp" />

        <Card title="Wedding invitation" img="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/templates/wedding-invitation.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=9f4fbf18f63e2ef72727030e2a835d0a" href="https://replit.com/t/replit-gallery/repls/Dreamy-Invite/view?canvas=true" width="1920" height="1080" data-path="images/design/replit-design/templates/wedding-invitation.webp" />

        <Card title="Fashion ecommerce storefront" img="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/templates/fashion-ecommerce.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=324c62315f98e3746d32ae3b8e2fb591" href="https://replit.com/t/replit-gallery/repls/Fashion-Ecommerce/view?canvas=true" width="1600" height="900" data-path="images/design/replit-design/templates/fashion-ecommerce.webp" />
      </CardGroup>
    </div>

    他のものをお探しですか？ [replit.com/design](https://replit.com/design) でさらに多くのテンプレートを見てみましょう: ランディングページ、ポスター、ソーシャル投稿、モバイル、プロトタイプなど。
  </Step>

  <Step title="リミックスする">
    **Remix this App** を選択して自分のコピーを作成します。リミックスが初めての方は [アプリをリミックスする](/ja/features/projects-and-artifacts/remix-an-app) を参照してください。

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/template-remix.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=08a6a0a8c6bd71d5b1a5d376802ac336" alt="View live app、Remix this App、Copy、共有ボタンが表示されたApex 01テンプレートのカバーページ" width="605" height="399" data-path="images/design/replit-design/template-remix.png" />
    </Frame>
  </Step>

  <Step title="名前を付ける">
    コピーに名前を付け、必要に応じて説明を追加し、**Remix App** を選択します。

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/template-remix-name.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=f4ce6f0953f09a25305fe9c08bc9eeeb" alt="名前と説明の入力欄、Remix Appボタンが表示されたRemix Appダイアログ" width="578" height="436" data-path="images/design/replit-design/template-remix-name.png" />
    </Frame>
  </Step>

  <Step title="Replit Designでコピーと対面する">
    コピーは、テンプレートがキャンバス上のフレームとして配置された状態でReplit Designに開かれます。これは今やあなたのプロジェクトです — ここで行うことは元のテンプレートには一切影響しません。

    <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="Replit Designで開かれたリミックス後のApex 01テンプレート。キャンバス上のAPEX X1スーパーカーフレーム、デザインプロンプトボックス、ツールバーが表示されている" width="2000" height="1255" data-path="images/design/replit-design/design-vs-build-project.png" />
    </Frame>
  </Step>
</Steps>

## 自分好みにする

テンプレートのフレームを選択して、形を変えていきましょう。

* **[提案](/ja/design/explore-suggestions)に従う**: 新しい方向性は新しいフレームとして生成されるため、元のフレームは比較用に残ります。
* **[チャットで相談する](/ja/design/chat-about-your-design)**: フレームを選択し、自分の言葉でAgentにブリーフします。例えば *「もっと暖かみのある色に」*、*「ヒーローの車をヴィンテージロードスターに差し替えて」* のように。

<Frame caption="キャンバス上のApex X1フレーム。提案に応じてAgentがフォローアップを提案している。">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/template-make-it-yours.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=0e14842b7e51c3f0d207c6d7e99ad4b6" alt="キャンバス上のApex X1フレーム。チャットパネルではAgentが異なるアプローチを探り、デザインをさらに押し進めるためのフォローアップ提案を提示している" width="1600" height="1004" data-path="images/design/replit-design/template-make-it-yours.webp" />
</Frame>

デザインがテンプレートのものではなく、自分自身のものだと感じられるまで続けましょう。

## すでにデザインの途中の場合

既存のプロジェクトで探索していて、今あるデザインの中にテンプレートを取り込みたい場合は、リミックスするのではなく、代わりにライブラリパネルから追加しましょう。[テンプレートとインスピレーションを追加する](/ja/design/add-templates-and-inspiration) を参照してください。

## 次のステップ

* [デザインを構築する](/ja/design/build-your-design): スタイルを作り直したテンプレートを動作するアプリに変換します。
* [デザインシステムを作成する](/ja/design/create-a-design-system): 自分のバージョンからシステムを抽出し、以降作るものすべてがそれに合うようにします。
