AgentGrid.io を使用して Claude Design Web サイトを公開する

Reading Time: 3 minutes

Claude Design は静的デザインをパブリック URL に公開できます。これは、簡単なプロトタイプやビジュアルコンセプトに役立ちます。

Web サイトで継続的な編集、複数のエージェント、バージョン履歴、更新の公開、またはカスタムドメインが必要な場合は、AgentGrid.io を使用します。 Claude Design は、チームと接続されているエージェントが継続的に改善できる共有アーティファクトに Web サイトを公開できます。

このガイドでは、Claude Design から公開する方法、AgentGrid.io でバージョンを確認する方法、必要に応じて他のエージェントを導入する方法、およびドメインに接続する方法を示します。

AgentGrid.io で公開 →

Claude Design から Web サイトを公開する方法

1. AgentGrid.ioのClaudeコネクターをインストール

ClaudeコネクターディレクトリからAgentGrid.ioのClaudeコネクターをインストールします。

2. Claude Design に AgentGrid.io 経由で公開するように依頼します

ウェブサイトの Claude Design 会話で、AgentGrid.io を通じてウェブサイトを公開するようにクロードに依頼します。

Claude Design のプロンプト

AgentGrid.io を使用して Web サイトを公開する

Claude Design は、Web サイトを AgentGrid.io アーティファクトとして作成または更新します。そこで結果を確認し、同じプロジェクトでの作業を続けることができます。

AgentGrid.io を通じて Web サイトを公開するように Claude Design に依頼します。

3. オプション: より多くのエージェントを接続します

ChatGPT、Claude、Claude Code、Codex、Cursor、Hermes、Rocket、または別の互換性のあるエージェントを同じアーティファクトで作業するように招待します。複数のエージェントは、切断されたコピーを作成せずに変更を加えることができます。

AgentGrid.io を使用してバージョン間を移動し、各エージェントの変更を確認し、必要に応じて以前のバージョンを復元し、準備ができたら承認された更新を公開します。

変更を確認し、バージョン間を移動し、共有 AgentGrid.io アーティファクトから更新を公開します。

4. ドメインを接続する

Web サイトの準備ができたら、AgentGrid.io から公開し、独自のドメインを接続します。 GrokBot 公開ガイドのドメイン設定と DNS の手順に従ってください。

AgentGrid.io で公開 →

Claude Design パブリック URL 対 AgentGrid.io

Claude Design には、すでに直接パブリック URL オプションがあります。決定は、迅速な静的な結果が必要か、それとも成長し続ける Web サイトが必要かによって決まります。

能力	Claude Design から直接公開	AgentGrid.io を通じて公開する
パブリックブラウザ ZTERM37ZX	はい	はい
こんな方に最適	簡単な静的 UI、プロトタイプ、またはビジュアルコンセプト	進化する Web サイトまたはアプリケーション
カスタムドメインパス	ネイティブカスタムドメインオプションなし	接続されたエージェントは、ドメインおよび運用環境用に現在のアーティファクトを準備できます。
データベースとバックエンド	静的 UI のみ	エージェントに接続して、データベース、バックエンド、認証、支払い、サーバー側サービスを追加または統合します
API と分析	限られた静的エクスペリエンス	API、Google Analytics、イベント追跡、その他の外部サービスを接続する
別のエージェントで続行する	デザインは Claude ワークフロー内に残ります	招待されたエージェントは、適切な機能を備えた同じ成果物を継続できます。
共同開発の歴史	Claude Design プロジェクトのリビジョン	Git ベースの、属性付き、復元可能なアーティファクトの歴史

静的 UI が最終結果である場合は、Claude Design の直接パブリック URL を使用します。 公開 Web サイトがプロジェクトの終わりではなく始まりである場合は、AgentGrid.io を使用します。

Claude Design から AgentGrid.io までを公開するのはなぜですか?

ダイレクトClaude DesignパブリックURLは視認性を解決します。 AgentGrid.io アーティファクトは継続を解決します。これにより、公開された Web サイトに、人々と AI エージェントが同じ作業を開発し続けることができる場所が提供されます。

1 つの安定したアーティファクト: 人間とエージェントは、チャット間でファイルを渡すのではなく、同じ現在のバージョンで作業します。
本当の歴史: 保存されたすべての変更は、帰属を伴う復元可能なバージョンになります。
エージェント間の継続性: Claude、Claude Code、Cursor、Codex、OpenClaw、Hermes、およびその他の互換性のあるエージェントは、接続時に同じ作業を継続できます。
共有と公開を分ける: チームのアクセスは、公開 Web サイトとは異なります。
範囲指定されたアクセス許可: エージェントは、名前付きの取り消し可能な ID と、承認された機能のみを受け取ります。
最初のプロトタイプを超える道: Web サイトは、軽量の公開成果物として残すことも、より深い製品開発の出発点にすることもできます。

重要な利点は、AgentGrid.io によって Claude Design がより良い設計を生成できるということではありません。 Claudeの世代品質は変わりません。 AgentGrid.io により、結果は耐久性があり、共同作業が可能で、バージョン管理され、次の人やエージェントが利用できるようになります。公開 Web サイトは、新しいチャットでやり直したり、スクリーンショットからコンテキストを再構築したりすることなく、成長し続けることができます。

AgentGrid.io がカスタムドメインへのパスを開く方法

カスタムドメインは、プロトタイプのリンクをブランド化されたリンク先に変えます。これは覚えやすく、マーケティングや販売においてより信頼できるように見え、基盤となるスタックの変更に耐えられるアドレスをチームに提供します。

Claude Design ホスティングオプションを比較するチームの場合は、共有アーティファクトを最終的な運用ホストから分離します。 AgentGrid.io は、Web サイトのソース、エージェント、履歴をまとめて保管します。ドメイン対応ホストは実稼働 URL を提供します。

例としては、次のポートフォリオがあります。 yourname.comでのキャンペーン launch.yourcompany.com、またはでの製品体験 app.yourcompany.com.

ダイレクト Claude Design パブリック URL は、カスタムドメインパスを提供しません。 AgentGrid.io を使用すると、Web サイトは、接続されたコーディングエージェントまたはデプロイメントエージェントがドメインおよび選択した運用環境用に準備できる編集可能な成果物になります。

エージェントは、新しいツールで Web サイトを再構築するのではなく、実際の成果物から作業できます。現在のファイルを検査し、意図した対話を保存し、デプロイメント構成を追加し、同じアーティファクトを運用対応バージョンで更新できます。

これにより、カスタムドメインの決定も柔軟になります。ドメインはあなたのビジネスに属しますが、AgentGrid.io は Web サイトのソース、コンテキスト、開発履歴を保存します。

データベース、API、およびGoogle Analyticsを任意のエージェントに追加する

多くの Claude Design Web サイトはフロントエンドとして始まります。ポートフォリオ、ランディングページ、インタラクティブな説明、またはプロトタイプには、初日からバックエンドが必要ない場合があります。

後で、以下を追加することもできます。

送信内容を保存するお問い合わせフォーム
ユーザーアカウントと認証
データベース
支払いまたはサブスクリプション
コンテンツ管理システム
分析またはイベント追跡
API の統合
管理ツールとロールベースのアクセス

ここで、AgentGrid.io がワークフローを開きます。好みのコーディングエージェントを招待し、適切な機能を与え、既存の成果物を継続するように依頼します。エージェントは、外部データベースの作成または接続、API ルートの追加、Google Analytics の統合、認証の実装、またはアプリケーションに必要なサービスの接続を行うことができます。

AgentGrid.io は、アプリの共有ソースと履歴のままです。プロダクションシークレット、データベース認証情報、およびサーバー側サービスは、公開ソースファイルではなく、それらのジョブ用に設計されたインフラストラクチャに存在する必要があります。

Claude Design から Claude Code への一般的なワークフローは、Claude Code を同じ AgentGrid.io アーティファクトに接続し、現在の UI を保持するように要求し、コンテキストでバックエンド統合を追加することです。

コーディングエージェントの入力を求めるプロンプト

Continue this AgentGrid.io website as a production application. Preserve the current UI and interactions. Add a secure contact-form backend, document the required environment variables, and keep all source changes in this same artifact.

分析とデータにも同じパターンを使用できます。

コーディングエージェントの入力を求めるプロンプト

Continue this AgentGrid.io website. Add Google Analytics event tracking, connect the application to a database, and document every external service and environment variable. Keep all changes on this same artifact.

接続されたエージェントには現在のファイルがあり、履歴を確認できます。更新により設計が損なわれた場合は、古いチャットやダウンロードを検索する代わりに、変更を検査して以前のバージョンを復元できます。

プロジェクトを失わずに別のエージェントに接続する

最初の設計に最適なエージェントが、その後のすべてのタスクに最適なエージェントであるとは限りません。

インターフェイスには Claude Design を、実装には Claude Code を、テストには別のコーディングエージェントを、分析、アクセシビリティ、SEO、またはバックエンド作業には専門のエージェントを使用することができます。 AgentGrid.io を使用すると、これらのエージェントは、別々のエコシステムに別々のコピーを作成するのではなく、1 つの共有アーティファクトで作業できるようになります。

ワークフローはシンプルです。

既存の Web サイトのアーティファクトを開きます。
[共有] ダイアログから新しいエージェントを招待します。
必要な機能のみを付与します。
エージェントに成果物リンクと明確なタスクを与えます。
履歴内の変更に起因するものを確認します。
必要に応じて、以前のバージョンを復元します。

これにより、時間の経過とともに Web サイトの開発が容易になります。エージェントが変わっても、アーティファクトは安定したままになります。

公開チェックリスト

アーティファクトが正しい AgentGrid.io チームに存在することを確認します。
プライベートデータ、シークレット、テスト資格情報、内部専用コピーを削除します。
デスクトップとモバイルのレイアウトをテストします。
画像、フォント、リンク、フォーム、インタラクションを検証します。
パブリッシュ機能を必要とするエージェントにのみパブリッシュ機能を付与します。
エージェントに、複製を作成するのではなく、既存のアーティファクトを更新するように依頼します。
ログアウトした状態でパブリック URL を開きます。
機密データを収集する前に、適切な運用インフラストラクチャを使用してください。
カスタムドメイン DNS、バックエンドシークレット、データベース資格情報をパブリックソースファイルの外に保管します。

よくある質問

Claude Design を公開 Web サイトとして公開できますか?

はい。 Claude Design は、静的 UI をパブリック URL に直接公開できます。静的なエクスペリエンスが最終結果である場合は、そのオプションを使用します。カスタムドメイン、データベース、API、分析、バックエンドサービス、または別の AI エージェントを使用して Web サイトを成長させ続ける場合は、AgentGrid.io コネクタを使用します。

Claude Design は Claude アーティファクトと同じですか?

No.Claude DesignはAnthropicの専用設計品です。 Claude アーティファクトは、独自の公開動作を備えた別個の Claude 機能です。検索者はよく用語を混同しますが、ワークフローは異なります。

公開後にウェブサイトを更新できますか?

はい。同じ AgentGrid.io アーティファクトで作業を続けると、そのファイルと履歴が一緒に残ります。接続されているエージェントに、新しいコピーを作成するのではなく、既存のアーティファクトを更新するように依頼します。

独自のドメインを使用できますか?

ダイレクト Claude Design パブリック URL には、カスタムドメインオプションは含まれません。 AgentGrid.io を使用すると、AgentGrid.io が共有ソースと履歴を保持しながら、接続されたコーディングエージェントまたはデプロイメントエージェントがドメインおよび運用環境用に現在の Web サイトアーティファクトを準備できます。

Claude Design Web サイトにバックエンドを追加できますか?

はい。好みのコーディングエージェントを AgentGrid.io アーティファクトに接続し、データベース、API、認証、支払い、Google Analytics、またはその他のサービスの作成または接続を依頼します。アプリのソースと開発履歴を AgentGrid.io に保存し、それらのサービス用に構築されたインフラストラクチャに本番環境の秘密を保存します。

別の AI エージェントが Web サイトを継続できるでしょうか?

はい。必要な機能を備えた同じ AgentGrid.io アーティファクトにエージェントを招待します。現在のファイルを検査し、アーティファクトを更新し、属性付きの変更を履歴に残すことができます。

Claude Designから成長し続けるWebサイトへ

静的なパブリックデザインが最終結果である場合は、次を使用します。 エクスポート → 公開 Claude Design で直接。プロジェクトを Web サイトまたはアプリとして機能させる必要がある場合は、Claude Design を AgentGrid.io に接続し、デザインを編集可能な成果物としてプッシュし、選択したエージェントで開発し、アプリケーションの機能が準備できた後にのみ公開します。

より大きなメリットは発売後に現れます。 Web サイトは、1 つの設計ワークフロー内の静的なパブリック UI に限定されなくなりました。これには、1 つのアドレス、1 つの現在のバージョン、およびユーザーとエージェントが一緒に継続できる履歴があります。

まずは公開プロトタイプから始めます。 Web サイトに永続的な ID が必要な場合は、ブランドドメインを追加します。データベース、API、Google Analytics、認証、支払い、または運用インフラストラクチャが必要な場合は、コーディングエージェントを接続します。同じ AgentGrid.io アーティファクトの成長に合わせて作業を続けます。

AgentGrid.io で Claude Design Web サイトを公開 →

AgentGrid.io を使用して Claude Design Web サイトを公開する方法3 min read

Reading Time: 3 minutesClaude Design から AgentGrid.io まで Web サイトを公開し、複数のエージェントでバージョンを確認し、更新を公開し、カスタムドメインに接続します。