
Claude Codeで作ったサイトをそのまま共有できるように
朝の出汁版(通勤2分)
- ポイント1: Claude Codeで作成したWebサイトを、そのまま外部に共有できる機能が追加された。
- ポイント2: コードを別途デプロイする手間なく、作ったものをすぐ見せられる状態になる点が注目で、制作から共有までの流れがワンストップに近づいている。
- ポイント3: LPや簡単なツールをAIで作って即クライアントや仲間に見せたい人は、Claude Codeの共有機能から試してみる価値がある。
出汁の素(深読みモード)
これって結局どういうこと?
Claude Codeは、Anthropicが提供するターミナル上で動くAIコーディングアシスタント。これまでも「会話しながらコードを書く」ことはできたが、今回の更新で、作ったWebサイトをそのまま外部URLとして共有できる機能が追加された。要は「作る→デプロイ→URLを渡す」という手順が、「作る→URLを渡す」に圧縮されたということ。コードを別のホスティングサービスに持っていく手間なく、制作物を即座に第三者に見せられる状態になる。LPや簡単な計算ツール、プロトタイプを「とりあえず見せたい」場面でのハードルが大きく下がった形だ。情報はXへの投稿(@id_736045187416260609)で確認できる。
なぜこのタイミングで重要?
注目したいのは、「作る」と「見せる」の間にあったギャップが埋まりつつあるという変化の方向性だ。
これまで非エンジニアがAIでWebページを作っても、それを外部に公開するにはVercelやNetlifyといったホスティングサービスへのデプロイ作業が別途必要だった。設定ファイルを用意して、CLIを入れて、アカウントを作って…という工程は、コーディング自体よりもむしろそちらのほうが詰まりやすいポイントだった。
今回の共有機能はその工程をスキップできる可能性がある。開発者向けというより、「AIで作ったものをすぐ人に見せたい」という使い方をしている層に直接刺さる更新といえる。
類似の動きとしては、v0(Vercel)がプレビューURLを即時発行する仕組みや、Bolt.newがワンクリックでデプロイできる導線を持っている点が挙げられる。Claude Codeはこれまでよりターミナル操作に近い位置にあったが、今回の機能追加でその「見せる」部分の体験が他ツールに近づいた。
SaaSを使う側から、作る側へ転換する動きでも触れたように、AIコーディングの文脈は「書けるかどうか」から「作ったものをどう使うか・見せるか」へと重心が移りつつある。共有機能の追加はその流れの一端として読める。
具体的に始めるなら
まず確認すること:Claude Codeの利用環境を整える
Claude Codeを使うにはAnthropicのAPIキーが必要で、npmでインストールして使うCLIツール(npm install -g @anthropic-ai/claude-code)として提供されている。無料枠はなく、Claudeのトークン消費に応じた従量課金になる。まだ触ったことがない人は、公式ドキュメント(docs.anthropic.com/claude-code)から環境構築の手順を確認するところから始めるとよい。
共有機能を使う想定シーン
現時点で最も使いやすい場面は次のような状況だ。
- クライアントへの提案前に「こんなイメージのLP」を数分で作って見せたいとき
- チームメンバーに「こういう操作感のツール」をざっくり確認してもらいたいとき
- 自分のポートフォリオやデモ用のページを手早く公開したいとき
いずれも「完成品を作る」というより「仮のものを見せて合意を取る」用途に向いている。
組み合わせると面白い使い方
Claude Codeで骨格となるHTMLとCSSを作成し、共有URLを発行。フィードバックを受けたら同じセッション内で修正して再共有、というサイクルが回せると、デザインの合意フローが変わる。デザインツールを開かずに「動くもので確認する」という進め方に慣れてきた人には特にフィットしやすい。
未経験でもアプリが作れる時代、何が変わったかで整理されているように、「コードを書く」ハードルが下がったことで次のボトルネックは「作ったものをどう回すか」に移っている。共有機能はそのボトルネックに対する一つの答えにあたる。
課金が気になる人への現実的な入口
Claude.aiのProプラン(月20ドル)にはClaude Codeへのアクセスが含まれており、上限ありでの利用が可能。まず小さなページを一枚作って共有を試す程度であれば、この範囲で動作を確認できる。本格的に使い込む前に、この規模感で機能の感触をつかむのが現実的なアプローチだ。
よくある疑問
Q. 共有URLは永続的に使えるのか?
現時点の公式発表では永続性についての詳細な仕様は明示されていない。一時的なプレビューURLである可能性が高く、本番公開や長期運用を前提にした使い方には向かないと考えておくのが無難だ。あくまで「作ったものをすぐ見せる」用途として捉えておきたい。
Q. 共有したURLは誰でも見られる状態になるのか?
こちらも公式情報の範囲では詳細が確認できていない。パスワード保護やアクセス制限の有無については、実際に機能を試す際に確認が必要だ。クライアントの未公開情報が含まれるページをそのまま共有する前に、アクセス制御の仕様を把握しておくことが重要になる。
Q. Claude Codeで作れるのはどんなサイトか?
HTML・CSS・JavaScriptベースの静的なWebページが中心になる。データベースと連動した動的なサービスや、バックエンドが必要な機能は別途構成が必要で、共有機能でそのまま見せられる範囲はフロントエンドの見た目・操作感の確認に限られる。LPや簡単な計算ツール、フォームのモックといった用途が現実的な適用範囲だ。
もう一歩踏み込みたい人へ
Claude Codeの共有機能の技術的な仕組みは現時点では非公開だが、内部的にはAnthropicが一時的なホスティング環境を提供している可能性が高い。類似実装としてはStackBlitz(WebContainers)やCodeSandboxのプレビュー機能が参考になる。
より深く使い込みたい場合は、Claude CodeのSDKを通じてプログラム的にコード生成→共有のフローを自動化するという方向性もある。Anthropicは@anthropic-ai/claude-codeのSDK(npm install @anthropic-ai/claude-code)を公開しており、スクリプトからClaude Codeのサブエージェントを呼び出せる。Claude Codeが1,000体のAIを自律で動かす時代へで取り上げた並列エージェントの文脈と組み合わせると、「複数パターンのLPを並列生成→それぞれ共有URLを発行→ABテストの素材として使う」といった自動化が視野に入ってくる。
また、今回の動きと関連して注目しておきたいのがAlibaba発の軽量ベクトルDB「zvec」(github.com/alibaba/zvec、C++実装・1万1千スター超)の存在だ。Claude Codeで作ったWebアプリに検索・推薦機能を組み込む際、インプロセスで動作する軽量DBとの相性はよい。フロントエンドの見た目をClaude Codeで素早く作り、バックエンドの検索ロジックにzvecを埋め込むという構成は、一人で完結させたい人向けのスタック候補として覚えておく価値がある。
元になったツイート
Claude code 作ったWebサイトを共有までできるようになるのが新そう https://t.co/ISktwqILQz
本日はAIシステム開発をさせてただく建設業のお客様の現場訪問でした。 文字通りFDE(Forward Deployed Engineer)として、現場に出て日々の業務を見た方が解像度は上がります。 パソコンの画面上だけでは分からない課題が、現場には山積しております。 https://t.co/qfUUoz9ZWI
参照ソース
- [X]@id_736045187416260609: Claude code 作ったWebサイトを共有までできるようになるのが新そう https://t.…→ twitter.com/id_736045187416260609/status/20676…
- [X]@masahirochaen: 本日はAIシステム開発をさせてただく建設業のお客様の現場訪問でした。 文字通りFDE(Forwar…→ twitter.com/masahirochaen/status/2067612142849…
- [GitHub]alibaba/zvec→ github.com/alibaba/zvec
