この記事で扱うこと
AI や手書きで作った HTML を、相手のスマホや別 PC で そのまま開ける共有リンク にしたい場面の話です。
本番の CDN / カスタムドメイン運用ではなく、「レビュー用・デモ用の URL が今ほしい」ケースを中心に、よくあるやり方の切り分けと、自分で試した最短フローを書きます。
※ 文中で触れる htmlto.link は、自分が関わっているサービスです。宣伝が主目的ではなく、手順比較のための一例として出します。
よくあるつまずき
-
.htmlをチャットに添付すると、相対パスの CSS / 画像が壊れる - スクリーンショットだとボタンやフォームを触れない
- GitHub Pages や本番ホスティングは「今すぐ見せたい」には準備が長い
やりたいことが「ファイルを渡す」ではなく「URL を渡す」なら、共有手段を先に決めた方が早いです。
意図を2つに分ける
- 即時共有：レビュー・デモ用のリンクが今ほしい
- 静的ホスティング：CDN / ドメイン付きの本番寄り公開
同じ検索語（例: HTML を URL にしたい、HTML アップロード）でも、結果ページには両方が混ざります。日本だと EdgeOne Pages 系の解説が目立つことがありますが、それは多くが後者寄りです。
手段のざっくり比較
| 手段 | 向くこと | 重いところ |
|---|---|---|
| メール / チャット添付 | ファイルそのものを渡す | パス崩れ、スマホで開けないことが多い |
| ローカルサーバ + トンネル | 手元の開発中画面を見せる | 常時起動やセキュリティの注意が必要 |
| GitHub Pages | 永続・履歴 | リポジトリと push が前提 |
| Netlify Drop 等 | フォルダを即デプロイ | 管理のためにアカウントが必要なことが多い |
| EdgeOne Pages など | CDN 付き静的公開 | 「今すぐ共有」より本番導線が強い |
| HTML→URL 変換サービス | 貼り付け / アップロード → 即リンク | 本番 CDN 一体運用ではない |
手元で確認する最小例
単一ファイルなら、まずローカルで開けることを確認します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>hello</h1>
<script src="./app.js"></script>
</body>
</html>
相対パスがある場合は、単体 .html だけ送ると壊れます。フォルダごと、または ZIP でまとめて置く前提の共有手段を選ぶのが安全です。
自分がよく使う最短フロー（一例）
即時共有が目的のとき、自分は次の流れを使っています（htmlto.link）。
- 日本語ページを開く
- HTML 貼り付け、または
.html/ フォルダ / ZIP をアップロード - 入口 HTML を確認する（複数ファイル時）
- 公開 URL をコピーして共有する
実務で効いた点：
- 同じ URL のまま更新できると、レビュー相手にリンクを再送しなくてよい
- フォルダ / ZIP なら相対パスの CSS・JS・画像をまとめて公開しやすい
- デモを限定したいときはパスワード保護があると便利
本番寄り（独自ドメイン・長期 CDN）なら、Pages 系の方が自然です。目的が違うだけなので、どちらかが「正解」という話ではありません。
EdgeOne 系との使い分け（検索で混ざりやすいため）
- 今すぐレビューリンクが欲しい → 変換 / 即デプロイ系
- CDN / ドメイン込みで静的本番に載せたい → EdgeOne Pages など
迷ったら「相手にリンクを送るまでに何分かけられるか」で切るとだいたい当たります。
まとめ
- AI で HTML は作れる。足りないことが多いのは 共有可能な URL
- 「HTML を URL にしたい」系の検索語は、即時共有と本番ホスティングが混ざる
- 目的を先に分けてから手段を選ぶと、検索上位の記事に振り回されにくい
単一ページを1本のリンクにするだけなら、まず手元の最小 HTML で一度試すのが早いです。