AI で作った HTML、どうやって人に見てもらう？
最近は ChatGPT や Claude などの AI に頼めば、ちょっとした HTML や簡単な Web アプリくらいなら数十秒で書いてくれます。
「ボタンを押すとサイコロが転がるページ作って」
「家族の予定を書き込めるシンプルなカレンダー作って」
このくらいであれば、コードを 1 行も自分で書かずに動くものができてしまいます。
ところが、いざ動かしてみたあと――
「これ、家族にも見せたいな」
「スマホからも触ってみたいな」
となった時に、意外と詰まりました。
ローカルで開くのは手軽だけど共有はできない
AI が出してくれた HTML をテキストエディタに貼って、index.html として保存し、ダブルクリックすればブラウザで開くことはできます。
でもこれだと自分の PC でしか動きません。
家族に LINE で送るにしても、HTML ファイルをそのまま渡すのは少し面倒だし、画像や CSS が分かれていたりすると一気にハードルが上がります。
GitHub Pages を立てるとか、自宅サーバを動かすとか、方法はいろいろあるのですが、「ちょっと作ったものを 1 分で見せたい」だけにしては大袈裟すぎます。
Netlify Drop という神サービスを見つけた
調べていくうちに行き着いたのが Netlify Drop です。
Netlify という静的サイトのホスティングサービスが提供している機能で、
- ブラウザで
https://app.netlify.com/dropを開く - そこに HTML が入ったフォルダ（または ZIP）をドラッグ＆ドロップする
これだけで、その場で公開 URL を発行してくれます。アカウント登録すらなくても試せます。
実際に使ってみた手順
1. AI に HTML を作ってもらう
例えば AI に「ボタンを押すとサイコロが出るページを 1 ファイルで作って」とお願いします。
返ってきたコードをまるごと index.html として保存します。
2. フォルダにまとめる
my-dice/ のような適当なフォルダを作って、その中に index.html を置きます。
画像や CSS、JS ファイルがあれば一緒に同じフォルダに入れておきます。
3. ブラウザで Netlify Drop を開く
https://app.netlify.com/drop にアクセスします。
4. フォルダごとドラッグ＆ドロップ
エクスプローラ（Mac なら Finder）から、先ほどのフォルダをそのまま画面にドロップします。
5. 数秒で公開 URL が発行される
数秒待つと、https://なんとかかんとか.netlify.app のような URL が発行されます。
このリンクを LINE や Slack で共有すれば、それだけで誰でもブラウザで動くものを見られます。
共有したあとの運用
- 発行された URL をそのまま共有 → 相手はクリックするだけ。
- 無料アカウントを作っておくと、サイト名を分かりやすい名前に変えたり、不要になったときに消したりできます。
- 同じフォルダを再度ドラッグ＆ドロップすれば上書き更新もできます。
「ちょっと AI で作った試作を見てもらって、フィードバックをもらってまた更新する」というループが、ものの数分で回ります。
使ってみて気付いた注意点
- 静的ファイルだけ動きます。サーバ側で動く処理（PHP や Python のバックエンド）は使えません。HTML / CSS / JS で完結するもの限定です。
- 未ログインで上げたサイトは一定期間で消える可能性があります。長く残したいならアカウントを作ってログイン状態でアップしましょう。
- API キーや個人情報をベタ書きした HTML を上げないように注意。公開 URL は誰でもアクセスできます。
- 「ちょっとした試作を共有する」用途には最強ですが、本格的に運用するなら GitHub と連携した通常の Netlify デプロイに切り替えると幸せです。
まとめ
AI で作った “その場限りの HTML” を、
- アカウント登録不要
- ドラッグ＆ドロップ 1 回
- 数秒で公開 URL
で共有できる Netlify Drop は、AI 時代の「ちょっと作ってみた」を一気に共有可能にしてくれる便利サービスでした。
AI で何か作るたびに「これどうやって見せよう…」と悩んでいた人は、ぜひ一度試してみてください。