> ## 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のデザインをReplit Designにインポートする

> 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の同意画面で **Access apps**、**Create and manage apps**、**Stay signed in to this application** のスコープをリクエストします。
</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がリクエストするアクセス — **Access apps**、**Create and manage apps**、**Stay signed in to this application** — を確認してから接続を承認します。

    <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` ファイルとしてインポートします。インポートでは、Claudeがデザインに含めたビジュアルレイアウト、スタイリング、アセットが保持されます。

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

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

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

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

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

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

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

<Frame caption="Claudeから届いたVelocityデザインが、Agentの実行完了とともにReplit Designのフレームになった状態。">
  <img src="https://mintcdn.com/replit/5ybcLQczgFi7A9hB/images/claude-to-app/claude-design-in-replit-design.webp?fit=max&auto=format&n=5ybcLQczgFi7A9hB&q=85&s=8872ca8b827e38a916d58e52dec4748b" alt="Claudeから送信されたVelocity高級車レンタルデザインが、Replit Design内でClaudeデザインフレームとして開かれ、チャットパネルにAgentのタスク完了が表示されている" width="1600" height="1004" data-path="images/claude-to-app/claude-design-in-replit-design.webp" />
</Frame>

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

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

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

## Configure and run your app

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

* **[Agent](/features/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](/features/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](/features/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がどれだけ構築するかによって異なります。

## 関連情報

* [プロバイダーからインポートする](/ja/build/import-from-providers)
* [FigmaデザインをReplit Designにインポートする](/ja/design/import-figma-designs-into-replit-design)