Claude は 1 つのアーティファクトでページ全体を書きます。ランディングページ、クイズ、計算機、レポートなどです。チャットの外に専用の場所を持たせるには、Lobsite で公開してください。上のボックスにアーティファクトのコードを貼り付けるか、Lobsite を Claude に接続して公開を依頼します。Claude Code で作成している場合は、Claude Code からのデプロイをご覧ください。
仕組み
- アーティファクトのコードを取得します。アーティファクトパネルでコード表示に切り替えてコピーするか、ファイルをダウンロードします。
- 上のボックスに貼り付け、このページを公開 を押します。HTTPS 対応の
*.lobsite.appアドレスが手に入ります。 - 残します。 サイトは 6 時間有効です。無料で残す → を押すと、同じアドレスのまま無料アカウントに移動します。
HTML アーティファクトと React アーティファクト
Claude はいくつかの種類のアーティファクトを作成し、どれを持っているかが重要です。
- HTML アーティファクト(
<!doctype html>で始まる完全なページ)はそのまま公開できます。インラインのスタイルとスクリプトが機能し、完全な URL で CDN から読み込むライブラリも機能します。 - React アーティファクト(
importとexport default functionで始まるコード)はまだ Web ページではなく、アーティファクトパネルがビルドしています。下のようなプロンプトで Claude にページへの変換を依頼し、結果を貼り付けてください。
Rewrite this artifact as one self-contained index.html: plain HTML, CSS and
JavaScript, no build step, any libraries loaded from a CDN by full URL.
Keep the design and behaviour exactly the same.
Claude がファイルとして作成できない画像(ロゴ、写真)には完全な https:// URL が必要です。または、ページと画像をフォルダに入れて ファイルをドロップ タブにドロップしてください。
Claude に公開させる: コネクタ
Claude.ai は、リモート MCP サーバーであるカスタムコネクタとして Lobsite を使えます。Claude の設定で次の URL のカスタムコネクタを追加してください。
https://lobsite.com/api/mcp
その後、「Lobsite でこのページを公開して」と依頼してください。Claude はコネクタの唯一のツール deploy_files をページの内容とともに呼び出し、アドレスとサイトを残す取得リンクを返します。カスタムコネクタは対応する Claude プランで利用できます。各クライアントの詳細は MCP ページをご覧ください。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
コーディングエージェントには npx lobsite mcp、チャットアシスタントには lobsite.com/api/mcp。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
Free アカウントでも利用できます。DNS レコードを 1 つ追加するとサイトが独自ドメインに移動します。すべてのプランですべてのサイトに HTTPS が付きます。
Claude の公開ボタンとサイトの違い
Claude には、アーティファクトを共有する独自の 公開 ボタンがあります。Claude 内でアーティファクトを見せる最も速い方法です。サイトは、ページを独立させたいときに使います。
| Claude の公開 | Lobsite | |
|---|---|---|
| 開く場所 | claude.ai | 専用の *.lobsite.app アドレス |
| 自分のファイル(画像、追加のページ) | いいえ | はい: フォルダをドロップ |
| メッセージを送るフォーム | いいえ | はい(サイトをアカウントに残した後) |
| 更新 | Claude から新しいバージョンを公開 | 再度貼り付けて更新を押す、または再デプロイ |
| カスタムドメイン | いいえ | はい、無料 |
| アカウントの必要性 | Claude アカウント | 6 時間は不要、残すのも無料 |
よくある質問
Claude アーティファクトを無料でホストできますか?
はい。公開はアカウントなしで無料、6 時間有効です。無料の Lobsite アカウントでは、月間帯域幅 10 GB でサイトを 1 つずっと残せます。
公開したアーティファクトが空白ページなのはなぜですか?
おそらく React アーティファクトです。アーティファクトパネルが行っているビルドがコードに必要です。上のプロンプトで Claude に自己完結した単一の HTML ファイルへの書き換えを依頼し、それを公開してください。
コネクタは必要ですか?
いいえ。コードをコピーしてここに貼り付ける方法は、どの Claude プランでも使えます。コネクタを使うとコピーと貼り付けが不要になり、ページを変更し続ける中で Claude がサイトを更新できます。
私のページを Google で見つけられますか?
一時的な間は見つけられません。アカウントのないサイトはインデックスされません。無料アカウントに残すと、検索エンジンがインデックスできます。
ページにお問い合わせフォームを追加できますか?
はい。フォームを /_lobsite/forms/contact に送信するよう Claude に依頼してください。サイトをアカウントに残すと、メッセージがダッシュボードとメールに届きます。フォームをご覧ください。