AI活用の教科書

自作AIツールを無料で公開する。Vercel/Cloudflare Pages × 独自ドメインの最小構成

AI2026年5月23日7 分で読了執筆: 翔平

ChatGPTやClaudeで作った小さなWebツールを、無料ホスティングと独自ドメインで公開する手順。サーバー契約前に試せる構成です。

個人開発VercelCloudflare独自ドメイン
PR本記事には広告(PR)が含まれます

ChatGPTやClaudeに手伝ってもらえば、ちょっとしたWebツールは数時間で形になる時代になりました。

ただ、せっかく作っても自分のPCの中だけで動かしてると、外出先で使えない・人に見せられない・スマホから触れない、で結局使わなくなります。

「ネットに置くにはサーバー契約が必要」と思われがちですが、無料ホスティング+独自ドメインの組み合わせなら、かなり低コストで公開できます。まずはお金をかける前に試せる最小構成をまとめました。

「無料ホスティング」って何ができる?

VercelやCloudflare Pages、Netlify、Render などのサービスは、個人利用なら基本無料で使えます。

サービス無料枠の特徴向いている用途
VercelNext.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 / 静的サイト / APIWordPress / PHPツール
WordPress△(できなくはないが面倒)◎(1クリックインストール)
カスタムドメイン○(DNS設定が必要)◎(特典で無料付与)
Gitプッシュで自動デプロイ△(プラグイン要)
サーバー管理の手間ゼロほぼゼロ

WordPressブログを立てたい → 共用レンタルサーバー AIで作ったWebツールを公開したい → 無料ホスティング

ざっくりこの線引きで考えると、用途に合った方を選びやすくなります。

AI支援でゼロから作るときの進め方

ChatGPTやClaudeを使えば、コードがほぼ書けなくても形になります。手順例:

Step 1: 何を作るかを言語化する

「家計簿に毎日の支出を入力すると、月末に自動集計してSlackに通知してくれる」など、やりたいことを1〜2行で書き出す

Step 2: AIに技術スタックを相談する

Vercelの無料枠で動かしたい。
やりたいこと: {{上で書いたやりたいこと}}
推奨の技術スタックを教えて。理由も一緒に。
コードをコピーしました

ChatGPTClaude に上のように聞けば、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円なら試してみる価値はあります。

Glossary

この記事に出てくる用語

用語集を見る

わからない言葉は、やさしい解説でその場で確認できます。

Follow

思いついたことを、AIでかたちに。

初心者でも、頭の中にあるものをそのまま形にできる短いプロンプトを、X で毎日発信中。

@ai_shohei_jp をフォロー