ChatGPTやClaudeに手伝ってもらえば、ちょっとしたWebツールは数時間で形になる時代になりました。
ただ、せっかく作っても自分のPCの中だけで動かしてると、外出先で使えない・人に見せられない・スマホから触れない、で結局使わなくなります。
「ネットに置くにはサーバー契約が必要」と思われがちですが、無料ホスティング+独自ドメインの組み合わせなら、かなり低コストで公開できます。まずはお金をかける前に試せる最小構成をまとめました。
「無料ホスティング」って何ができる?
VercelやCloudflare Pages、Netlify、Render などのサービスは、個人利用なら基本無料で使えます。
| サービス | 無料枠の特徴 | 向いている用途 |
|---|---|---|
| Vercel | Next.js が圧倒的に楽。月100GB帯域まで無料 | React/Next.jsで作るWebアプリ |
| Cloudflare Pages | 帯域無制限。静的サイトに強い | HTML/Markdown/SSGサイト |
| Netlify | フォーム機能・関数を統合 | フォーム付きの簡単サイト |
| Render | バックエンドAPI(Node.js/Python)も無料枠あり | サーバーサイドが必要なアプリ |
このブログ自体も Cloudflare Pages の無料枠 で動いています。月数万PVくらいまでは費用ゼロで運用できる構成です。
最小構成: 月100円以下で「自分のドメインで動くツール」を作る
ステップは4つだけ。
1. ドメインを取得する(格安TLDなら低コスト)
「自分のドメイン」が無いと、URLが xxx.vercel.app のような借り物になります。スタードメインのような格安サービスを使えば、.com 以外の安いTLD(.work, .tokyo, .online等)を低コストで取れます。
.comだと年額1,500円前後.xyz.online.workなどは年額数百円台から出ることがある
スタードメインPR は、ネットオウル(エックスサーバーグループ)の格安ドメインサービス。個人ツール用の使い捨てドメインなら、安いTLDで十分です。
2. 無料ホスティングのアカウントを作る
VercelかCloudflare Pagesなら、GitHubアカウントでログインするだけで使えます。クレジットカード登録すら不要。
- Webアプリ系 → Vercel(Next.js使うなら鉄板)
- 静的サイト系 → Cloudflare Pages(帯域無制限が強い)
3. GitHubにコードを置く
ChatGPTやClaudeで作ったコードを GitHub リポジトリに置きます。Vercel/Cloudflare Pages は GitHubと連携してプッシュするだけで自動デプロイしてくれます。
「Gitが分からない」場合も、ChatGPTに「このコードをGitHubに上げる手順を教えて」と聞けば、コマンド単位で教えてくれます。
4. 取得したドメインを紐付ける
Vercel/Cloudflare Pages の管理画面で「独自ドメインを追加」→ ドメイン提供元のDNS設定で指定されたCNAMEレコードを追加するだけ。10分くらいで反映されます。
これで、xxx.your-domain.com で自分のツールが世界に公開されます。
共用レンタルサーバーとの使い分け
「ConoHa WINGやエックスサーバーを契約する」ルートと比較すると、こんな違いがあります。
| 観点 | 無料ホスティング | 共用レンタルサーバー |
|---|---|---|
| 月額 | 0〜100円 | 800〜1,200円 |
| 向いてる用途 | React/Next.js / 静的サイト / API | WordPress / PHPツール |
| WordPress | △(できなくはないが面倒) | ◎(1クリックインストール) |
| カスタムドメイン | ○(DNS設定が必要) | ◎(特典で無料付与) |
| Gitプッシュで自動デプロイ | ◎ | △(プラグイン要) |
| サーバー管理の手間 | ゼロ | ほぼゼロ |
WordPressブログを立てたい → 共用レンタルサーバー AIで作ったWebツールを公開したい → 無料ホスティング
ざっくりこの線引きで考えると、用途に合った方を選びやすくなります。
AI支援でゼロから作るときの進め方
ChatGPTやClaudeを使えば、コードがほぼ書けなくても形になります。手順例:
Step 1: 何を作るかを言語化する
「家計簿に毎日の支出を入力すると、月末に自動集計してSlackに通知してくれる」など、やりたいことを1〜2行で書き出す。
Step 2: AIに技術スタックを相談する
Vercelの無料枠で動かしたい。
やりたいこと: {{上で書いたやりたいこと}}
推奨の技術スタックを教えて。理由も一緒に。
ChatGPT や Claude に上のように聞けば、Next.js+Vercel等の構成を提案してくれます。
Step 3: 最小コードを書かせる
Next.js (App Router) で、上の機能の最小コードを書いて。
ファイル名と配置場所も指定して。
ファイル単位でコードが返ってくるので、1ファイルずつ「これは何をしている?」と聞き返しながらコピペします。
Step 4: GitHubに置いてVercelで公開
今のコードをGitHubに上げて、Vercelで公開するまでの手順を、コマンドベースで教えて。
ここまでで、だいたい4〜6時間で「動くツールが自分のドメインで公開されてる」状態になります。
気をつけたいこと
1. 「無料」枠には上限がある
VercelもCloudflare Pagesも、個人利用の範囲なら超えにくい上限ですが、急にPVが伸びたり大量のAPI呼び出しが発生すると、有料プラン誘導されます。料金体系は最初に1回見ておくのがおすすめ。
2. 機密データは置かない
無料ホスティングは、設定ミスで公開状態になりやすい面があります。家族のクレカ情報や仕事のデータは置かないこと。「自分一人で使う、もしくは公開してもいいデータ」に限定するのが安全。
3. AIに作らせたコードのセキュリティ
ChatGPT/Claudeが書いたコードはそれっぽく動くがセキュリティ対策が抜けていることがあります。「セキュリティ観点で問題があれば指摘して」ともう一度AIに確認させる癖をつけると、抜けが減ります。
まとめ
- 無料ホスティング + 格安ドメインの組み合わせで、月100円以下で自分のドメインのWebツールを公開できる
- 用途別: Webアプリ系=Vercel、静的サイト系=Cloudflare Pages
- ドメインは安いTLD(
.xyz.work.online等)なら低コストで始められる - 共用レンタルサーバーは WordPress を立てたい時、無料ホスティングは AIで作ったWebツールを動かす時
- AI支援で4〜6時間で「動くツールが自分のドメインで公開」が現実的に可能
「自分のドメインで自分のツールが動いてる」って、地味だけど結構な満足感があります。月100円なら試してみる価値はあります。