PubleeBlog
ドキュメント公開する
ブログ一覧

Claudeで作ったHTMLを共有する方法

Claude に「LPを作って」「レポートをHTMLでまとめて」と頼むと、プレビュー付きの Artifact として動くページが生成されます。便利なのですが、それを他の人に見てもらおうとした瞬間に詰まる人が多いはずです。

この記事では、Claudeで作ったページを一番簡単に共有する方法を紹介します。先に結論を書くと、Claudeに「HTMLで作って」と頼み、できあがったHTMLをコピーして Publee に貼る、これだけです。

Artifactsの共有で困ること

Artifacts には公開機能がありますが、実際に使うといくつかの壁があります。

  • 相手にClaudeのアカウントやログインを求められる場合がある — 社外のクライアントに「まずClaudeにログインしてください」とは言いづらい
  • 組織(Team/Enterprise)の設定によっては共有自体が無効化されている — 会社のワークスペースでは公開リンクが作れないことがある
  • 頼み方によってはHTMLとして取り出せない — 「HTMLで」と言わずに作ると React 形式の Artifact(コードが import React で始まるもの)になることがあり、コピーしてもそのままではブラウザで開けません。HTMLとして作られていれば「コピー」や「HTMLとしてダウンロード」で取り出せます(後述)
  • 複数ファイル構成にできない — CSSや画像を分けた「普通のWebサイト」の形にはならない
  • パスワードで見る人を制限できない — 公開するなら全世界、が基本

仮にHTMLファイルとして取り出せても、メール添付されたHTMLは開く側の環境で警告が出たり、スマホでは正しく開けなかったりします。

解決策:HTMLをそのまま共有URLにする

Publee を使うと、Claudeが生成したHTMLを 10秒で https://〇〇.publee.site というURL にできます。アカウント登録は不要です。

手順は3ステップです。

  1. Claudeに 「〇〇をHTMLで作って」 と頼み、できあがったHTMLを開いて右上の「コピー」を押す
  2. publee.app/publish を開いて貼り付ける
  3. 「公開してURLを取得」を押す

実際の画面はこうなります。「適当なフリーランスデザイナーっぽいサイトをHTMLで作って」と頼んだ例です。

Claudeの画面。①「〜をHTMLで作って」と頼む ②HTMLファイルのカードにダウンロードボタン ③プレビュー右上のコピーボタン ④コピー横のメニューにある「HTMLとしてダウンロード」

① のように「HTMLで作って」と頼むと、返答に ② のHTMLファイルのカードが付きます。カードを開くとプレビューが表示され、右上の ③「コピー」でHTML全体がクリップボードに入ります。ファイルとして保存したい場合は、コピー横のメニューから ④「HTMLとしてダウンロード」も選べます。Publeeに貼るだけなら ③ で十分です。

Claudeで作ったHTMLを共有URLにする3ステップ

これだけで共有用URLが発行されます。相手はブラウザでURLを開くだけ。ログインもアプリも不要です。

ポイント:最初から「HTMLで」と頼む

「HTMLで」と明言しないと、Claude は React 形式の Artifact を作ることがあります。見た目は同じでも、コードをそのまま貼っても動きません。頼み方の例です。

〇〇のLPを、CSSとJavaScriptを埋め込んだ1つのHTMLファイルとして作って。

すでに React 形式の Artifact ができあがっている場合も、「このページを1つのHTMLファイルにまとめて」と頼めば作り直してくれます。

コピーしたコードが <!doctype html> や <html> で始まり </html> で終わっていれば、そのまま貼って大丈夫です。

デフォルトでパスワード保護される

「URLにする=全世界に公開」ではありません。Publee のデフォルトは パスワード保護 です。

公開時に自動生成されるパスワードをURLと一緒に相手へ送れば、URLを知っていてもパスワードを知らない人は閲覧できません。社内レビューやクライアント向けの下書き共有でも安心です。

誰でも見られるようにしたい場合は、公開時に「一般公開」を選ぶだけです。

CSSや画像があるサイトもそのまま公開できる

Claude Code などでファイル分割された本格的なサイトを作った場合も、フォルダごと(またはzipのまま)ドラッグ&ドロップで公開できます。

my-site/
├── index.html
├── style.css
└── img/
    └── hero.png

index.html がトップページとして配信され、相対パスのCSS・画像もそのまま動きます。

もっと速く:Claudeから直接公開する(MCP)

毎回コピペするのも面倒だ、という場合は MCP 連携が使えます。Claude Code なら1コマンドで設定完了です。

claude mcp add --transport http publee https://publee.app/api/mcp

あとは Claude に「このHTMLをPubleeで公開して」と言うだけで、チャットの中に共有URLが返ってきます。詳しくはMCPでHTMLを共有する方法をどうぞ。

よくある質問

Q. 無料ですか? はい。登録なしで公開したサイトは7日間、無料アカウントなら無期限で保持されます。フッター非表示やカスタムURLが必要な場合は有料プランがあります。

Q. JavaScriptは動きますか? 動きます。各サイトは専用サブドメインに分離して配信されるので、Claudeが作ったインタラクティブなページ(グラフ、計算ツールなど)もそのまま動作します。

Q. 後から消せますか? アカウントを作って公開すれば、管理画面からいつでも削除・公開範囲の変更ができます。

まずは登録なしで試せます → HTMLを公開してみる

HTMLの共有はPubleeで。登録なしで10秒で試せます。

HTMLを公開してみる