AIで作ったWebツールを無料で公開する全手順【GitHub × Vercel】

はじめに：作ったものを「世界に公開」する感動

Claude Codeでバイブコーディングを始めてから、Webツールを作れるようになりました。

でも最初は「自分のパソコンでだけ動くもの」だったんです。ブラウザでlocalhost:3000を開いて「おお、動いた！」と喜んでいても、友達に見せるには「僕のパソコンの前に来て」と言うしかない。

作ったものをURLにして、誰でもアクセスできるようにしたい。

調べてみたら、Vercelというサービスを使えば無料でWebサイトやツールを公開（デプロイ）できることがわかりました。GitHubと連携するだけで、コードを更新すれば自動で公開サイトにも反映される。

実際にやってみたら、思ったより簡単でした。僕が作ったAdSense診断ツールもこの方法で公開しています。

この記事でわかること

VercelとGitHubって何？（ざっくり）
デプロイまでの全手順（5ステップ）
独自ドメインの設定方法
つまづきやすいポイントと対処法
Vercel無料プランの制限

結論：GitHubにコードを置いて、Vercelで「Deploy」を押すだけ

先に結論です。

ステップ	やること	所要時間
①	GitHubにリポジトリを作る	1分
②	Claude Codeでツールを作ってプッシュ	作業時間による
③	Vercelのアカウントを作る	2分
④	GitHubリポジトリをVercelに接続	3分
⑤	「Deploy」ボタンを押す	1分

合計10分以内（ツール制作時間を除く）で、URLが発行されて世界中からアクセスできるようになります。費用は無料（Hobbyプラン）。

VercelとGitHubって何？

知っている人は飛ばしてOKです。ざっくり説明します。

GitHubは、コードを保存・管理する場所です。「コードのクラウドストレージ」だと思ってください。バージョン管理ができるので、「さっきの状態に戻したい」が簡単にできます。

Vercelは、そのコードを自動でWebサイトとして公開してくれるサービスです。GitHubにコードを置いておけば、Vercelが勝手にビルド（変換）して、URLを発行してくれます。

サービス	例えるなら
GitHub	原稿を保存しておく本棚
Vercel	原稿を自動で印刷・配布してくれる出版社

この2つを連携させると、GitHubにコードをアップロードするだけでサイトが自動更新される仕組みができます。

実際の手順：全体の流れ

STEP 1：GitHubでリポジトリを作成する

まだGitHubアカウントを持っていない場合は、github.comで無料アカウントを作成してください。

ログイン後、右上の「+」ボタンから「New repository」を選択。リポジトリ名は英語で、プロジェクトの内容がわかる名前にします。

例：adsense-checker
例：blog-ogp-generator
例：portfolio-site

「Add a README file」にチェックを入れて「Create repository」をクリック。

GitHubでリポジトリを新規作成する画面のスクリーンショット。
個人プロジェクトはprivateが安全という注釈付き。

STEP 2：Claude Codeでツールを作ってGitHubにプッシュする

Claude Codeの始め方で紹介した手順で、ツールを作ります。

作成したリポジトリをクローン（ダウンロード）してから作業を始めます。

このリポジトリをクローンして：
https://github.com/自分のユーザー名/adsense-checker

ツールが完成したら、GitHubにプッシュ（アップロード）。

変更をGitHubにプッシュして。
コミットメッセージは「初期構築：AdSense診断ツール」で。

Claude Codeがクローンもプッシュも代行してくれるので、Gitコマンドを覚える必要はありません。

Gitコマンドを覚えなくても、Claude Codeに「プッシュして」って言うだけでOKだモン！

STEP 3：Vercelのアカウントを作成する

vercel.comにアクセスして、「Sign Up」→ 「Continue with GitHub」を選択。GitHubアカウントで認証するだけで、Vercelのアカウントが作成されます。

プランは「Hobby」（無料）を選択。個人プロジェクトならこれで十分です。

STEP 4：GitHubリポジトリをVercelに接続する

Vercelのダッシュボードで「Add New…」→「Project」を選択。

「Import Git Repository」の画面で、STEP 1で作ったリポジトリが一覧に表示されるので、「Import」をクリック。

VercelのImport Git Repository画面。リポジトリ一覧から選択しているスクリーンショット

STEP 5：設定を確認して「Deploy」を押す

プロジェクトの設定画面が表示されます。Next.jsのプロジェクトなら自動認識されるので、設定は何も変えなくてOK。

「Deploy」ボタンを押すと、Vercelが自動でビルドを開始します。1〜2分待つと……

URLが発行されて、サイトが公開されます。

発行されるURLは https://プロジェクト名.vercel.app という形式。このURLを誰かに送れば、世界中どこからでもアクセスできます。

「Deploy」を押しただけで、自分のツールにURLがついたモン！世界中からアクセスできるモン！

独自ドメインを設定する

Vercelが自動で発行してくれる *.vercel.app のURLでも十分使えますが、独自ドメインを設定することもできます。

僕の場合、ヒトブログのサブドメイン tools.hitoblog.site を使っています。

設定	手順
Vercel側	プロジェクト設定 → Domains → 独自ドメインを入力
DNS側	ドメインのDNS設定でCNAMEレコードを追加（`cname.vercel-dns.com`）

DNS設定はドメインを管理しているサービス（ConoHaやお名前.comなど）の管理画面から行います。
わからなければ、Claude Codeに「このドメインをVercelに紐づけるDNS設定を教えて」と聞けば手順を教えてくれます。

つまづきやすいポイント

ビルドエラーが出て公開できない

一番多いトラブル。Vercelのビルドログを確認して、エラーメッセージをClaude Codeに貼り付ければ解決策を教えてくれます。

Vercelで以下のビルドエラーが出ました。
原因と修正方法を教えてください。

Error: Cannot find module 'next/image'

よくある原因は、package.jsonの依存関係の不足や、Node.jsのバージョン違い。←自分もこれでした。

環境変数が設定されていない

APIキーなどの環境変数（.envファイルの中身）は、GitHubにはプッシュしません（セキュリティ上）。代わりにVercelの管理画面で設定する必要があります。

Vercelのプロジェクト設定 → 「Environment Variables」で、.envの中身を登録。

GitHubの認証でつまずく

STEP 2でClaude CodeからGitHubにプッシュするとき、認証エラーが出ることがあります。Claude Codeに「GitHubの認証設定を手伝って」と頼めば、GitHub CLIのインストールから認証まで案内してくれます。

Vercel無料プラン（Hobby）の制限

2026年6月時点の情報です。

項目	制限
帯域幅	月100GB
ビルド時間	月100時間
サーバーレス関数の実行時間	10秒/回
チーム利用	不可（個人のみ）
商用利用	非営利の個人プロジェクトのみ

個人ブログのサブツールや、ポートフォリオ程度なら完全に無料枠内で収まります。僕のAdSense診断ツールも無料プランで問題なく動いています。

公開したら何ができるか

URLがあるということは、こういうことができます。

できること	具体例
友達やSNSで共有	「こういうの作ったよ」とURLを送るだけ
ブログの記事にする	ツールの使い方を解説する記事 → PVが増える
就活のポートフォリオに	「実際に動くもの」を見せられる説得力
GitHubのプロフィールに載せる	緑の草（コミット履歴）も増える

特に就活では、「動くURLがある」と「コードだけある」では説得力がまったく違います。面接官にスマホで見せられるのは強い。

まとめ：作ったものに「住所」をつけよう

ステップ	やること
①	GitHubにリポジトリを作る
②	Claude Codeでツールを作ってプッシュする
③	Vercelに無料アカウントを作る
④	GitHubリポジトリをImportする
⑤	「Deploy」を押す

自分のパソコンだけで動いていたツールに「URL」という住所がつく。
その瞬間、個人開発者としてのステージが一段上がる感覚があります。

まだlocalhostで満足している人は、ぜひ一度Vercelにデプロイしてみてください。世界中からアクセスできるURLを手に入れた瞬間の感動は、プログラミング未経験者でも味わえます。

・関連記事

Claude Codeを始めたい人はこちら！