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

# Claude のデザインをアプリに変換する

> Claude のデザインを Replit に送り、静的 HTML からプロジェクトを作成して、Agent にインタラクティブなアプリに変換させましょう。

export const platform_0 = "Claude"

export const projectType_0 = "project"

export const setupDescription_0 = "Agent が静的デザインをインタラクティブなアプリに変換して Replit で実行できるよう設定します"

Claude で構築されたデザインは、体験がどのように見えるべきかを示しています。Claude の **Send to Replit** オプションを使えば、そのデザインを Replit に引き渡せます。Replit ではプロジェクトとして取り込まれ、Agent が動作するインタラクティブなアプリに変換します。

<Note>
  これは新しいインテグレーションです。**Send to Replit** は、Claude がデザインの送信先として Replit を提供するときにのみ Claude の **Send to…** メニューに表示されます。利用可能かどうかは Claude が制御するため、すべてのアカウントにまだ表示されない場合があります。ハンドオフを受け入れると、Claude は Replit の同意画面で **アプリへのアクセス**、**アプリの作成と管理**、**このアプリへのサインイン維持** のスコープをリクエストします。
</Note>

<Frame>
  <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/claude-design-canvas.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=ea508bc83dc1ad35c5d3f17a511af737" alt="Claude のデザインキャンバスに開かれた Velocity デザイン。Replit に引き渡してインタラクティブなアプリに変換する自己完結型のデザイン" width="2000" height="1143" data-path="images/claude-to-app/claude-design-canvas.png" />
</Frame>

## 仕組み

ハンドオフは Claude で始まり、Replit で完了します：

1. Claude のデザインキャンバスで自己完結型のデザインを構築します。
2. Claude の **Share → Send to…** メニューから Replit にデザインを送信します。
3. Claude が Replit アカウントにアクセスすることを承認し、ワークスペースを選択します。
4. Replit がデザインを静的な `index.html` ファイルとしてプロジェクトを作成します。
5. Agent が **Turn this Claude design into a real app** タスクを引き受けてインタラクティブにします。

これは Claude が承認されたアプリ接続を通じて Replit にデザインを*送信*するフローです。Replit で何かを設定する必要はありません — フローは Claude から始まります。

## 始める前に

以下が必要です：

* [Replit アカウント](https://replit.com)。
* Claude のデザインキャンバスにデザインがある Claude アカウント。
* 新しいプロジェクトを作成するターゲットの Replit ワークスペース。

## Claude から Replit にデザインを送る

Claude のデザインを使って構築を始めましょう。

<Steps>
  <Step title="Claude でデザインを開く">
    Claude で、アプリに変換したいデザインを開きます。
  </Step>

  <Step title="Send to メニューを開く">
    **Share** を選択してから **Send to…** メニューを開きます。Replit が送信先として表示されます。

    <Frame>
      <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/claude-send-to-menu.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=de707da5fc30121d0ed31d2a0bdf128a" alt="Claude Code と並んで Replit が送信先として表示された Claude の Send to… メニュー" width="2000" height="1143" data-path="images/claude-to-app/claude-send-to-menu.png" />
    </Frame>
  </Step>

  <Step title="Replit を選択する">
    **Replit** を選択して、Replit アカウントへのハンドオフを開始します。
  </Step>

  <Step title="Replit へのアクセスを承認する">
    **Claude would like to access your Replit account** というタイトルの Replit 同意画面で、Claude がリクエストするアクセス — **アプリへのアクセス**、**アプリの作成と管理**、**このアプリへのサインイン維持** — を確認してから接続を承認します。

    <Frame>
      <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/replit-oidc-consent.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=9e5607b4fdfb94c29c26967202fbf2d0" alt="「Claude would like to access your Replit account」というタイトルの Replit 同意画面。Access apps、Create and manage apps、Stay signed in のスコープとワークスペースピッカーが表示されている" width="2000" height="1143" data-path="images/claude-to-app/replit-oidc-consent.png" />
    </Frame>
  </Step>

  <Step title="ワークスペースを選択する">
    新しいプロジェクトを作成する Replit ワークスペースを選択して確定します。
  </Step>
</Steps>

確定後、Replit はデザインからプロジェクトを作成してワークスペースで開きます。

## インポートされるもの

Replit はデザインを単一の自己完結型 `index.html` ファイルとしてインポートします。インポートによりデザインに含まれるビジュアルレイアウト、スタイリング、アセットが保持されます。

インポートにより動作する出発点が得られます。デザインは静的 HTML として届くため、インポート後に動作、データ、インタラクティビティを追加する必要があります。

## インポートされないもの

ハンドオフはデザインを運びますが、完全なアプリケーションではありません。以下はインポートに含まれません：

* バックエンドロジックとサーバーサイド機能。
* データベースや保存されたデータ。
* 動作するフォーム、状態、ナビゲーションなどのインタラクティビティ。

Agent がデザインを実際のアプリに変換するときにこの機能を追加します。

## Agent にデザインをインタラクティブにさせる

インポート後、Agent がワークスペースで **Turn this Claude design into a real app** タスクを開始します。Agent が静的デザインから作業して、デザインが示すインタラクティブな動作を構築します。

<Frame>
  <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/agent-task-preview.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=24d5529ff1ff555b7d0ee14c620829e4" width="2000" height="1154" data-path="images/claude-to-app/agent-task-preview.png" />
</Frame>

タスクが完了したら Preview を開いて結果をテストします。実行中のアプリとオリジナルの Claude デザインを比較して確認してください：

* レイアウトとスタイリングがデザインに十分近い。
* ボタン、フォーム、ナビゲーションが期待通りに動作する。
* リフレッシュ後もアプリが動作する。

何かが欠けていたり違っていたりする場合は、Agent に変更を説明してアプリを改良させましょう。

## Configure and run your app

During import, {setupDescription_0}. If your app needs changes, use these Project Editor tools:

* **[Agent](/references/agent/overview)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/project-editor/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/references/workspace-tools/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, explore these next steps:

* [Replit Agent](/references/agent/overview): Get help with feature work, debugging, and refactoring
* [Replit Deployments](/learn/projects-and-artifacts/replit-deployments): Publish your app
* [Collaborate](/build/invite-teammates): Build with teammates

## 料金

デザインを動作するアプリに変換するには Agent を使用するため、クレジットが消費される場合があります。クレジットの使用量は Agent がインポートされたデザインの上にどれだけ構築するかによって異なります。

## 関連

* [プロバイダーからインポートする](/build/import-from-providers)
* [Figma デザインをインタラクティブなアプリに変換する](/build/figma-to-app)