Claude Code はアイデアを午後のうちにクリックできるプロトタイプにします。本物の画面、本物のリンク、どこかに移動するボタンです。止まるのは共有の段階です。ノートパソコン上のフォルダは、クライアント、PM、テスト参加者に送れるリンクではないからです。Claude Code に「このプロトタイプを公開して」と依頼すると、公開 HTTPS アドレスとそれを残すリンクを返すコマンドを 1 つ実行します。アカウントも Git も、事前に設定するビルドパイプラインも必要ありません。
仕組み
- Claude Code でプロトタイプを作成します。 通常の HTML ページ、または小さな React や Vite のアプリです。画面ごとに本物のページを依頼すると、各画面に開いてブックマークできる専用のアドレスが付きます。
- Claude Code に共有を依頼します。 フォルダで
npx -y lobsite --yesを実行します。アップロードされるのはビルド済みファイルのみで、途中で質問されることはありません。 - リンクを送ります。 Claude がアドレスと取得リンクを伝えます。取得リンクを開いてログインすると、6 時間を超えてプロトタイプを残せ、アドレスは変わりません。
モックアップではなくプロトタイプとして依頼する
セッションの最初に数行加えると、共有前の修正を 1 回分減らせます。指示とともに Claude Code に貼り付けてください。
Build this as a static, clickable prototype:
- One HTML page per screen, linked with relative paths (about.html, not /about.html).
- Fake data in the page itself; no backend, no API keys, no login.
- Every button and link goes somewhere, even if it's a "not built yet" screen.
- Works on a phone as well as a laptop.
When it's done, share it with `npx -y lobsite --yes` and give me the link.
最も重要なのは相対パスです。同じファイルをノートパソコン、プレビューアドレス、後で独自ドメインから開けます。
イテレーションごとに 1 つのリンク
プロトタイプはレビューのたびに変わります。送ったリンクを機能させたまま、新しいバージョンをその隣に置いてください。
npx -y lobsite --yes --preview
プレビューデプロイには専用のアドレスが付き、メインのリンクはレビュー中のバージョンを表示し続けます。変更を依頼した人にプレビューを送ってください。合意したら npx lobsite promote <id> でメインのバージョンにし、フィードバックが逆なら 1 ステップでロールバックできます。無料アカウントでは過去 7 日間のデプロイがプレビューアドレスを保持する（Standard では 30 日間）ので、次のレビューでも「v2」と「v3」を比較できます。
誰が見られるか
- アカウントなしでは、プロトタイプは検索エンジンにインデックスされず、取得しない限り 6 時間後に削除されます。
- プレビューアドレスはどのプランでもインデックスされません。
- Standard ではパスワードを追加できます（サイトの設定）。プレビューとカスタムドメインを含むサイトのすべてのアドレスで求められます。レビュアーの入力はブラウザごとに 1 回で、変更すると全員がログアウトされます。パスワードはプロジェクトではなくダッシュボードにあるので、リポジトリに入ることはありません。
「これをクライアントと私たちの間だけにできますか？」の意味は通常これです。本当に機密性の高いものは、プロトタイプに入れないでください。
ユーザーテスト
ホストされたプロトタイプは URL で、多くのテストツールに必要なのはそれだけです。アドレスを Maze、Lyssna、UserTesting に Web サイトタスクとして貼り付けるか、参加者に直接送ってください。各画面に独自のパスがあるため、タスクを /checkout.html で開始し、「/thanks.html に到達」を成功にできます。
登録やアンケートの画面など、プロトタイプから回答を受け取りたい場合は、フォームを /_lobsite/forms/feedback に向けてください。プロトタイプをアカウントに残すと、送信がスパム除去されてメールで届きます。フォームをご覧ください。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
Standard では、サイトのすべてのアドレスでパスワードを求められます。レビュアーの入力はブラウザごとに 1 回です。
エージェント実行時は確認を求めず、URL と取得リンクを含む Tell the user: 行を出力します。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
Free アカウントでも利用できます。DNS レコードを 1 つ追加するとサイトが独自ドメインに移動します。すべてのプランですべてのサイトに HTTPS が付きます。
Claude Code プロトタイプ: Lobsite と一般的な共有方法
| Lobsite | Claude アーティファクトの共有リンク | Netlify Drop | GitHub Pages | |
|---|---|---|---|---|
| アップロードする人 | Claude Code、コマンド 1 つ | あなた、claude.ai から | あなた、フォルダをドラッグ | Claude Code、コミットとプッシュ |
| 開始時のアカウント | 6 時間は不要 | Claude アカウント | 約 1 時間は不要 | GitHub アカウントとリポジトリ |
| マルチページと React のビルド | はい、フォルダ全体 | アーティファクトごとに 1 ページ | はい | はい、ビルド用ワークフローで |
| イテレーションごとのリンク | --preview、昇格とロールバック付き |
毎回新しいアーティファクト | 毎回新しいサイトまたはデプロイ | 組み込みなし |
| パスワード | はい、Standard | チームの共有ルールのみ | Netlify の有料プラン | いいえ |
1 画面なら Claude のアーティファクトリンクで十分です。プロトタイプが Claude Code がプロジェクトに書いたページのフォルダになったら、フォルダをそのまま受け取るホストならコピーと貼り付けが不要です。
よくある質問
Claude Code のプロトタイプを無料でホストできますか？
はい。アカウントなしで 6 時間公開されます。Claude が渡すリンクで取得すると、同じアドレスのまま無料アカウントで公開され続けます。
プロトタイプのリンクがローカルでは機能するのに公開すると壊れます。なぜですか？
通常は絶対パスが原因です。/about.html はドメインのルートを指し、ノートパソコンとホストされたアドレスでは異なります。Claude Code に相対リンク（about.html、./img/logo.png）を使うよう依頼して、再度デプロイしてください。変更されたファイルのみがアップロードされます。
ルートのある React プロトタイプは動作しますか？
はい。lobsite.toml の spa = true、またはサイト設定の シングルページアプリ でシングルページモードをオンにすると、/settings や /orders/42 へのリンクが 404 ではなくアプリを開きます。
クライアントのプロトタイプをクライアント自身のドメインに置けますか？
はい。無料アカウントにはカスタムドメインが 1 つ含まれます。DNS レコードを 1 つ追加すると、プロトタイプが HTTPS 付きでそこに移動します。
Claude Code はレビュー後にプロトタイプを更新できますか？
はい。lobsite.toml がサイトを記憶するため、どのセッションからも同じコマンドで同じアドレスが更新されます。CLAUDE.md に 1 行追加すると、すべてのセッションが同じ方法で行います。Claude Code から Web サイトをデプロイをご覧ください。