Claude DesignからVercelへ直接公開する方法と使い分け
「デザインはできたのに、公開するまでが一番めんどくさい」——Webサイトやプロトタイプを作るとき、誰もがこの壁にぶつかります。
結論から言うと、Claude Designで作ったデザインは、Gitもコマンドも使わずにVercelへ直接公開できるようになりました。ただし、この「直接公開」は検証や共有には効きますが、本番サイトの継続運用まで任せると事故のもとになります。
株式会社Fyveは、日々の制作でClaude DesignとVercelの両方を実際に使っています。この記事では、直接公開の手順そのものより、「どの場面で使い、どの場面では使わないか」という実務の線引きを、私自身の失敗も含めてお伝えします。
Claude DesignからVercelへ直接公開とは
Claude Design（Anthropicのデザインツール）で仕上げたデザインを、そのままVercelへ送って公開できる連携機能です。Vercelの公式チェンジログで案内されており、キャンバス上のデザインが数クリックでライブなVercelデプロイになります。
これまでのWeb公開は、コードを書き、Gitにコミットし、CLIやホスティング側の設定を経て、ようやくURLが出る——という多段の工程が当たり前でした。直接公開は、その工程をまるごと畳んで「キャンバスから公開URLまで」を一本にします。
直接公開の具体的な手順
操作自体はシンプルです。Vercel公式の案内では、次の流れで完結します。
- Claude Designでプロジェクトを開き、右上のShareを選ぶ
- Send to…から一番下のAdd a destinationを開く
- 送り先にVercelを選び、Vercelアカウントを接続してチームを選ぶ
- デプロイを実行すると、数秒で本番URLが返ってくる
エクスポートもファイルのダウンロードも挟みません。接続済みのVercelアカウントに新しいプロジェクトとして作られ、開いて共有できるURLがそのまま手に入ります。
.zipエクスポート＋Vercel Dropという代替ルート
直接つなぎたくない場合は、デザインを.zipで書き出してVercel Dropにドロップする方法もあります。どちらのルートも、Git・Vercel CLI・ローカルのツール一式は不要です。
ブラウザにフォルダをドロップするだけで即公開できるVercel Dropの手軽さは、別記事でも整理しています。
3つの公開ルートを比べる
Claude Designで作ったものをWebに出す道は、いま大きく3つあります。それぞれ手数と「後からどう育てられるか」が違います。私が実務で使い分けている感覚を表にまとめました。
公開ルート | 手数 | 変更履歴・切り戻し | 向いている用途 |
|---|---|---|---|
Vercelへ直接公開 | 数クリック（Gitもコマンドも不要） | 残らない | 検証・共有・使い捨ての叩き台 |
.zip書き出し＋Vercel Drop | 書き出してドロップするだけ | 残らない | ツール接続を避けたい単発公開 |
GitHub連携でVercelへデプロイ | 実装・コミットの工程が要る | Gitで完全に残る | 本番・長く育てるサイト |
ポイントは、直接公開と.zip＋Dropが「速いが履歴を持たない」道、GitHub連携が「工程は増えるが履歴と切り戻しを持つ」道だということです。速さと堅さはトレードオフの関係にあり、どちらが正解かはその公開が本番かどうかで決まります。
この直接公開は、Claude Designの大型アップデート（デザインシステムの取り込みやコードとの往復に対応した刷新）の一環として整備されました。単発の機能追加ではなく、「デザインから実装・公開までを地続きにする」という方向性の中の一歩だと捉えると、使いどころも見えてきます。
読者特典・無料ダウンロードClaude Codeを「素のまま」使うな無料でダウンロード →私がこの機能を「効く／様子見」で判断した理由
新機能を紹介するだけの記事なら誰でも書けます。私が価値を感じるのは、自分の制作フローに当てはめて「どこが楽になり、どこは変えるべきでないか」を判断できるかどうかです。
これまでの私の制作フロー：Claude Designを一段挟む
私は以前から、Webデザインの実装工程でClaude Designを経由させてきました。生成AIにいきなりコードを書かせると、デザインの再現精度にばらつきが出やすい。そこでデザインを一度Claude Designで整えてから実装に落とす、という一段を挟むことで、仕上がりが安定しました。
公開先は基本的にVercelです。自社のコーポレートサイトやSaaSも、GitHubと連携してVercelへ継続デプロイする構成で運用しています。つまり私にとってClaude DesignもVercelも、思いつきではなく日常の道具です。
Claude DesignとClaude Codeをどう連携させて実装まで持っていくかは、こちらで詳しく整理しています。
直接公開が「効く」場面：検証と共有の即時性
直接公開が明確に効くのは、まだ本番ではない段階です。具体的には次のような場面です。
- クライアントに「まずイメージを見てもらう」ための、URL共有つきの叩き台
- 2案・3案を並べて反応を比べたい、使い捨て前提のプロトタイプ
- 社内で「これで方向性は合っているか」を数分で確認したいとき
この段階では、Gitのブランチもデプロイ設定も要りません。むしろ工程が増えるほど、確認のスピードという一番の価値が削れます。キャンバスから数クリックでURLが出る手軽さは、検証サイクルを回す道具として素直に強いと感じました。
直接公開に「頼らない」場面：本番の継続運用
一方で、公開したあと長く育てていくサイトを、直接公開だけに寄せるのは避けています。理由は運用の作法が変わってしまうからです。
- 変更履歴が残らないと、「いつ・誰が・何を変えたか」を後から追えない
- Gitがないと、問題が起きたときに一つ前の状態へ戻す手段が乏しい
- 本番は保守・脆弱性対応・バックアップまで含めて設計する必要がある
私の結論はこうです。検証・共有は直接公開、本番の継続運用はGit管理のVercel。同じVercelでも、目的に応じて入口を分けるのが実務では安全です。
1人で制作を回すなら「速い検証」の価値は特に大きい
専任のエンジニアやデザイナーを何人も抱えられない立場だと、このトレードオフの重みはさらに変わります。人手が限られるほど、「作って、見せて、反応を得る」までの往復回数がそのまま成果を左右するからです。
直接公開は、その往復から公開作業のコストをほぼ消してくれます。私自身、複数の制作を並行で抱える日ほど、「まず出して見てもらう」までの数分が効いてくるのを実感します。手を動かす人数が少ない事業ほど、検証の速さは本番の堅さと同じくらい大事な武器です。
直接公開で気をつけたいこと：自動デプロイは静かに暴発する
「数クリックで公開される」手軽さには、裏側でもう一つの顔があります。意図しないものまで、そのまま世に出てしまうという顔です。
これは実際に私が経験したことです。あるサイトの制作中、完成前なので検索結果に載らないよう、検索エンジンにインデックスさせない設定をしていました。ところが自動化を任せていたAIが、その設定をインデックス許可の状態に書き換えて公開まで進めてしまったのです。
幸いすぐ気づいて戻しましたが、それ以来、公開に直結する部分には明確な編集制限（変更を許可しない設定）を設けるようにしています。
直接公開は、この「静かな暴発」の距離をさらに縮めます。だからこそ、次の一手を癖にしておくと安全です。
- 公開URLが検索に載ってよい段階か、送信前に必ず一度立ち止まる
- まだ見せたくない検証用は、公開範囲・インデックス可否を意識して扱う
- AIに公開まで任せるなら、触ってほしくない設定は編集制限で物理的に守る
Claude Design × Vercelを実務にどう組み込むか
ここまでを踏まえて、私が1人でいくつもの制作を回す前提で組み立てている使い分けをまとめます。
- アイデアの検証：Claude Designで作り、直接公開で即URL共有。反応を見たら潔く捨てる
- クライアント提案：直接公開の叩き台で握り、方向が固まってから実装フローへ移す
- 本番構築：Claude Designで整えたデザインを実装し、GitHub連携でVercelへ継続デプロイ
- 公開前の安全確認：インデックス設定・公開範囲は人が最終確認。AI任せにしない
大事なのは、便利な新機能で既存の工程を全部置き換えようとしないことです。速さが要る検証には直接公開、堅さが要る本番にはGit管理。この二層を持っておくと、手軽さと安全のどちらも取りこぼしません。
「AIとの対話だけでWebを形にする」という発想そのものについては、私自身がどう仕組み化したかを別記事で書いています。
まとめ
Claude DesignからVercelへの直接公開は、キャンバスから公開URLまでを一本にする、確かに便利な機能です。検証・共有の即時性という点では、私も日々の制作で素直に恩恵を感じています。
ただし本番の継続運用まで背負わせると、変更履歴も切り戻しも失われ、公開事故の距離が縮まります。検証は直接公開、本番はGit管理のVercel——目的で入口を分けることが、1人で制作を回す上での安全弁になります。
まず今日試すなら、捨ててよい検証用のデザインを一つ、直接公開でURLにしてみるのが早道です。数クリックで公開まで届く感覚をつかんだ上で、本番はGit管理へ——という二層を自分の中に作っておくと、判断に迷わなくなります。
新機能は「置き換える」より「使いどころを足す」。その線引きさえ持っておけば、Claude DesignとVercelの組み合わせは、小さく速く試して、堅く育てるための強い相棒になります。
Claude Codeを「素のまま」使うな
設定で差がつく——CLAUDE.md・権限・スキルの実物を公開（全24ページ）
素のClaude Codeは"優秀な新入社員"。仕事を教えるほど、自分専用になります。覚えさせる4点セット——会社の説明書（CLAUDE.md）・権限の柵・手順書（スキル）・フォルダの地図——を、1人会社の実運用からコピペで使える型つきで公開します。
- そのまま書き換えて使えるCLAUDE.mdの型
- お金と送信をAIに触らせない「3段階の柵」
- 1回教えたら何度でも動く、手順書のコピペ雛形
- AIが迷子にならないフォルダ構造の3原則
毎週金曜の無料ニュースレター「ひとりAI経営」の購読特典です。メール登録後すぐ、ダウンロードページのご案内が届きます。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。