v0やGeminiで作ったプロトを即公開!Git不要、「ドラッグ&ドロップ」でURLを秒速ゲットする方法(Netlify Drop)

v0でUIを生成したり、FigmaのデザインをJavaScriptで実装したりして、「よし、できた!この動きをクライアントやチームメンバーに今すぐ確認してもらいたい!」と思う瞬間、ありますよね。

私の場合は、 index.html をZIPで送ったり、GitHub PagesにGitでプッシュしたりするのが一般的でした。

しかし、v0で生成したコンポーネントのようにファイル数が多くなってくると、管理が大変です。
もちろん、CursorGitHubでコードをしっかり管理するのは非常に重要です。
多分これからもメインは、こっちです。

ですが、「とにかく今、この瞬間に動作するURLが欲しい」というスピードが求められる場面で、
Gitにコミットしてプッシュして…というのは、gitに慣れてない人にとって、ほんの少しだけ面倒です。
(ただ、Gitは覚えると便利なので、慣れたら勉強がおすすめです。https://backlog.com/ja/git-tutorial/

今回は、この「秒速公開」に焦点を当てた方法をご紹介します。

本記事の前提条件

この記事で紹介する方法は、以下の前提に基づいています。

  • データベース(サーバーサイドの処理)は不要
  • 決済システムなども不要
  • あくまで、最速で「動作」や「挙動」を確認するためのプロトタイプ公開である

結論:最速は「Netlify Drop」

GitHub Pagesよりも速く、Git操作も一切不要な方法。それが「Netlify Drop」です。

これは、HTML/CSS/JSのファイルが入ったフォルダを、ブラウザにドラッグ&ドロップするだけで、即座に公開URLを発行してくれるサービスです。

アカウント登録すら不要で、まさに「どんな動きをするのか?」の確認において、これ以上の速さはありません。

なぜこれが最強のプロトタイプ確認なのか?

私たちがFigma(FigmaMaka)やBubbleのようなノーコードツールを使うのは、実装の速さを求めるからです。

しかし、最終的にJavaScriptでしか表現できないインタラクションや、v0 / Cursorで生成したコードの微妙な挙動を調整した場合、それを確認するのに手間取っていては意味がありません。

この「ドラッグ&ドロップ」方式は、コード実装の自由度ノーコード並みの公開速度を両立させる、最高の選択肢なのです。

爆速公開の手順 (Netlify Drop)

手順はたったこれだけです。

  1. 公開したいindex.htmlやCSS/JSファイル群を、1つのフォルダにまとめます。
  2. ブラウザで Netlify Drop を開きます。
  3. 点線の枠内に、先ほどまとめたフォルダごとドラッグ&ドロップします。
  4. アップロードが完了すると、その場にユニークなURLが発行されます。

もう、このURLをSlackやチャットで送るだけです。

選択肢:Cloudflare Pages (Direct Upload)

Netlifyの強力なライバルである Cloudflare Pages も、まったく同じ機能を提供しています。(こちらは無料のアカウント登録が必要です)

ダッシュボードから「Direct Upload」を選び、同じようにフォルダをドラッグ&ドロップすれば、Cloudflareの高速なネットワークでサイトが公開されます。

主要静的ホスティングサービス比較

では、これらのサービスにはどのような違いがあるのでしょうか。プロトタイプ公開に関連する点で比較してみましょう。

項目GitHub PagesNetlifyCloudflare Pages
バックエンド言語実行不可 (静的のみ)可能 (Functions)
(Node.js, Go)
可能 (Workers)
(JavaScript, WASM)
ECサイト原則NG
(商取引が主目的は不可)
⭕️ OK (得意分野)⭕️ OK
アダルトNG (規約で禁止)⭕️ OK (合法な限り)⭕️ OK (合法な限り)
ギャンブルNG (規約で禁止)⭕️ OK (合法な限り)⚠️ 要注意 (※)
無料枠の強み完全無料ビルド時間 (300分/月)帯域幅 (無制限)
無料枠の制限帯域 (100GB/月)
ビルド (10回/時)
帯域 (100GB/月)ビルド (500回/月)

(※ Cloudflareは合法であればOKですが、攻撃対象になりやすいため高負荷時にプラン変更を求められるリスクがあります)

ご覧の通り、GitHub PagesはECサイトやアダルト等が規約で厳しく禁止されています。
一方、NetlifyとCloudflare Pagesは「合法である限り」寛容ですが、これはあくまで本格運用の話です。

今回の「プロトタイプ確認」という前提においては、どのサービスも技術的な問題はありません。

個人的にはGithubの無制限無料はでかいんですよね。。。

まとめ:用途で使い分けよう

コード管理の重要性は変わりません。最終的なコードはGitHubでしっかりバージョン管理するべきです。

ですが、開発サイクルの「途中」で発生する無数の「これ、どう動く?」という確認作業のために、Gitを操作する必要はありません。

v0やCursorでコードを生成・編集し、その動作確認は「ドラッグ&ドロップ」で即時に行う。
この高速なフィードバックループを活用して、開発スピードをさらに上げていきましょう。

この記事を書いた人

宮崎翼

愛媛県出身・東京都在住。
国立工業高専(新居浜工業高等専門学校)卒業後、外資系ソフトウェア企業などで法人営業・IT導入支援に従事し、BtoB領域で多様な新規開拓やエンタープライズのDX推進を経験。

現在は「AppTalentHub」の理念、ノーコード/ローコードを活用したアプリ開発の標準化と、エンジニアのスキルの可視化による適正評価を実現するためのプロジェクトやコミュニティ運営に取り組んでいます。
https://tsubasa.tech/about