AI Tools 2026年6月11日

7-3 作った Web ページを Vercel で公開する

ローカルで作った HTML を Vercel で世界に公開する手順を解説。GitHub アカウント作成、Claude Code に任せる git 操作、Vercel 連携、公開 URL の確認、更新の反映、公開時の注意点まで初心者向けに説明します。

#Claude Code #カリキュラム #Vercel #GitHub #デプロイ
難易度基本的な操作を一度試したことがある前提です所要時間約 60 分種別学習コース

先に読む7-1 Claude Code で LP（ランディングページ）を作る

このレッスンでわかること

ここまでのレッスンで、LP と社内ツールを作りました。ただしどちらも、あなたのパソコンの中だけで動いている状態です。第7章の仕上げとして、作ったページをインターネット上に公開し、URL を知っている人なら誰でも見られる状態にします。

この「公開する」作業を、専門用語でデプロイと呼びます。かつてはサーバーを借りて設定して……と大変な作業でしたが、今は Vercel（ヴァーセル） というサービスを使えば、無料で、しかも数十分で完了します。

このレッスンで身につくのは次の4点です。

  • 公開までの全体像（GitHub にファイルを置く → Vercel が公開する）
  • GitHub アカウントの作成と、Claude Code に git 操作を任せる方法
  • Vercel と GitHub をつないで公開 URL を手に入れる手順
  • 公開してよいもの・いけないものの判断と、更新の反映方法

公開のしくみ：登場人物は2つ

最初に全体像をつかみましょう。登場人物は2つです。

  • GitHub（ギットハブ）：ファイルの置き場所＋変更履歴の管理サービス。世界中の開発者が使う定番で、無料で使えます。ここに作る「ファイルの保管箱」をリポジトリと呼びます。
  • Vercel（ヴァーセル）：Web ページの公開（ホスティング）サービス。GitHub のリポジトリと連携させると、そこに置いたファイルを自動で Web に公開してくれます。GitHub 連携のほかにコマンドライン（CLI）から公開する方法もありますが、このレッスンでは仕組みがわかりやすい GitHub 連携を使います。個人利用なら無料枠で十分です。

流れはこうです。

  1. GitHub にリポジトリ（保管箱）を作る
  2. 手元の HTML ファイルをリポジトリにアップロードする
  3. Vercel に「このリポジトリを公開して」と設定する
  4. 公開 URL が発行される。以後、リポジトリを更新すれば公開ページも自動で更新される

「ファイルの置き場（GitHub）」と「公開係（Vercel）」が分かれている、と理解すれば十分です。そして朗報があります。この中で一番とっつきにくい手順2のアップロード作業（git 操作）は、Claude Code に丸ごと任せられます。

ステップ1（ブラウザ）：GitHub アカウントを作る

ブラウザで github.com を開き、メールアドレスでアカウントを作成します（Sign up）。ユーザー名・パスワードを決め、メール認証を済ませれば完了です。無料プラン（Free）で問題ありません。

ひとつだけ注意があります。ユーザー名は公開 URL などに表示されることがあるので、仕事で使っても恥ずかしくない名前にしておきましょう。

アカウントができたら、画面右上の「＋」から「New repository」を選び、リポジトリを作ります。

  • Repository name: my-lp など、内容がわかる英数字の名前
  • 公開範囲: Private（非公開）で構いません。Vercel の無料プラン（Hobby）は、自分のアカウントが所有する Private リポジトリをそのままデプロイできます。Public にする必要はありません
  • それ以外の項目はそのままで「Create repository」

「リポジトリの公開」と「サイトの公開」は別の話です

ここは混同しやすいので、先に整理しておきます。

  • リポジトリを Private にする = ソースコード（HTML の中身）は自分だけが見られる
  • Vercel で公開する = 出来上がったページは、URL を知っていれば誰でも見られる

つまり Private リポジトリを選んでも、公開されたページ自体は誰でも閲覧できます。「中身のコードは隠せるが、表示されるページは隠せない」と覚えてください。無料プランでは本番URLにアクセス制限をかけることはできません（Pro プランが必要です）。

なお、会社などの Organization が所有するリポジトリは、無料プランでは Vercel に接続できません。個人アカウントのリポジトリを使ってください。

なお、GitHub も Vercel も画面は随時更新されるため、ボタンの名前や配置など、画面の文言は変わることがあります。迷ったら「GitHub リポジトリ 作成」などで最新の手順を検索するか、Claude Code に画面の状況を伝えて聞いてください。

ステップ2（ターミナル → 対話画面）：ファイルのアップロードは Claude Code に任せる

リポジトリにファイルを上げるには、git（ギット） という変更履歴管理の道具を使います。本来はコマンドをいくつも打つ必要がありますが、ここが Claude Code の出番です。git 操作は Claude Code がもっとも得意とする作業のひとつで、日本語で頼めば全部やってくれます。

LP のファイルがあるフォルダで Claude Code を起動し、こう頼みます。

このフォルダの lp.html を GitHub のリポジトリにアップロードしたいです。
リポジトリは https://github.com/あなたのユーザー名/my-lp です。
git の初期設定からプッシュまで、必要な作業を順に進めてください。
初めてなので、各ステップで何をしているのか一言ずつ教えてください。

Claude Code は、git の初期化 → ファイルの登録（コミット）→ GitHub への送信（プッシュ）という一連のコマンドを、確認を取りながら実行してくれます。途中で GitHub へのログイン認証を求められたら、画面の案内に従ってブラウザで認証します（初回のみ）。

「各ステップで何をしているのか教えて」と添えているのがポイントです。言われるがまま許可するのではなく、「今はファイルを記録しているんだな」「今は GitHub に送っているんだな」と意味を掴みながら進めると、2回目からは流れが読めるようになります。

完了したら、ブラウザで自分のリポジトリのページを開いてみてください。lp.html が表示されていれば成功です。

ステップ3（ブラウザ）：Vercel と連携して公開する

いよいよ公開です。

  1. ブラウザで vercel.com を開き、「Sign Up」から 「Continue with GitHub」 を選んでアカウントを作ります。GitHub のアカウントでそのままログインできるので、新しいパスワードは不要です。プランは無料の Hobby を選びます
  2. ログイン後、「Add New…」→「Project」のような新規プロジェクト作成に進みます
  3. 自分の GitHub リポジトリの一覧が表示されるので、my-lp の「Import」を押します（一覧に出ない場合は、GitHub 側でVercel のアクセス許可を求める画面が出るので許可します）
  4. 設定画面が出ますが、HTML だけのページなら**何も変えずに「Deploy」**を押せば大丈夫です
  5. 1分ほど待つと完了画面になり、https://my-lp-xxxx.vercel.app のような公開 URL が発行されます

この URL をクリックして、自分の LP が表示されたら公開成功です。スマホでも開いてみてください。世界中のどこからでも、この URL で見られる状態になっています。

ここでも画面の文言は変わることがありますが、「GitHub でログイン → リポジトリを Import → Deploy」という流れ自体は変わりません。

ひとつ補足です。ファイル名が lp.html の場合、URL の末尾に /lp.html を付ける必要があるかもしれません。トップの URL だけで表示させたいときは、Claude Code に「lp.html を index.html にリネームして、GitHub に反映してください」と頼みましょう。index.html という名前のファイルが「そのサイトの表紙」として扱われる、という Web の慣習です。

公開前のチェック：出してよい情報か

URL を知っていれば誰でも見られる、ということは、検索や偶然のアクセスも含めて世界中に公開されるということです。公開ボタンを押す前に、必ず次を確認してください。

  • 個人情報が入っていないか：氏名（本人の同意がない他人のもの）、電話番号、メールアドレス、顔写真など
  • 社内情報が入っていないか：顧客名、価格の内部資料、未発表の情報、社内手順など。前のレッスンで作った「社内ツール」は、業務情報を含むなら公開しないのが原則です
  • 架空データのつもりが本物になっていないか：テストで本物の業務データを入れたまま、になりがちです
  • 会社のルールに反していないか：業務に関わる内容を公開する場合は、所属組織の情報公開ルールを確認する

迷ったら公開しない、が鉄則です。練習用には、架空のサービスの LP のような「全部作り物」の題材が安心です。

無料プランは「非商用の個人利用」に限られる

もうひとつ、公開前に知っておくべき制約があります。**Vercel の無料プラン（Hobby）は、非商用の個人利用に限定されています。**次のようなサイトは、無料プランでは公開できません。

  • 商品やサービスの販売を宣伝するサイト
  • 決済の手段があるサイト
  • 広告（Google AdSense など）を掲載するサイト
  • アフィリエイトリンクが主目的のサイト
  • 制作費を受け取って作ったサイト（自分が報酬を得ている場合）
  • 寄付の募集ページ

学習目的の練習や、収益に関わらない個人のページであれば問題ありません。仕事で使う場合は Pro プラン以上が必要になる、と覚えておいてください。

更新の反映（対話画面）：GitHub に送れば自動で公開される

公開後にページを直したくなったら、どうするのでしょうか。ここが GitHub 連携の気持ちよさです。手元でファイルを修正し、GitHub に送り直すだけで、Vercel が自動で検知して公開ページを更新してくれます。

Claude Code への頼み方は、修正と反映をまとめて1回で済みます。

lp.html のキャッチコピーを「〇〇」に変更して、
変更内容をコミットして GitHub にプッシュしてください

プッシュから1〜2分ほどで、公開 URL の内容が新しくなります（ブラウザの再読み込みを忘れずに）。「直す → プッシュ → 自動反映」というこの流れは、プロの開発現場でも使われているのと同じ仕組みです。あなたはもう、その入り口に立っています。

よくあるつまずきと対処法

このレッスンは、これまでで一番つまずきやすい回です。外部サービスを2つ新しく使い、ブラウザ・ターミナル・対話画面を行き来するためです。**うまくいかなくても、あなたの理解が足りないわけではありません。**代表的な5つを挙げます。

git の初回認証でブラウザが開かない／トークンを求められる

GitHub への初回プッシュ時には本人確認が入ります。ブラウザが自動で開かない、あるいは「Username / Password」を聞かれて、パスワードを入れても弾かれる、というケースです。GitHub は通常のパスワードでのプッシュを受け付けなくなっているためで、これは正常な動作です。

対話画面でそのまま状況を伝えてください。

GitHub にプッシュしようとしたら認証を求められて先に進めません。
表示されている内容は次のとおりです。（画面の文言を貼り付け）
どうすればよいか、順番に教えてください。

Claude Code が、いま使える認証方法（GitHub CLI でのログインなど）を案内してくれます。

プッシュが拒否される（remote が見つからない／権限がない）

repository not found や permission denied と出る場合、原因はたいてい次のどちらかです。

  • リポジトリの URL を打ち間違えている（ユーザー名やリポジトリ名のタイプミス）
  • 別の GitHub アカウントでログインした状態になっている

ブラウザで自分のリポジトリのページを開き、URL をコピーして、対話画面に「このリポジトリに送りたいです」と貼り直すのが確実です。

Vercel の Import 一覧に自分のリポジトリが出てこない

Vercel から GitHub へのアクセス許可が済んでいない状態です。一覧の下部にある「Adjust GitHub App Permissions」「Configure GitHub App」といったリンクから、対象のリポジトリ（または全リポジトリ）へのアクセスを許可してください。許可後に一覧を再読み込みすると表示されます。

公開 URL を開くと 404 になる

いちばん多いのがこれです。ファイル名が index.html になっていないのが原因です。Web には「index.html がそのフォルダの表紙になる」という慣習があり、lp.html のままだと URL の末尾に /lp.html を付けないと表示されません。

対話画面でこう頼めば解決します。

lp.html を index.html にリネームして、
コミットして GitHub にプッシュしてください

修正したのに公開ページが変わらない

順に確認してください。

  1. プッシュできているか — ブラウザで GitHub のリポジトリを開き、ファイルの中身が新しくなっているか見る。ここが古ければ、まだ手元にしか反映されていません
  2. Vercel のビルドが終わったか — Vercel の画面で該当プロジェクトを開くと、デプロイの進行状況と成否が見られます。1〜2分かかります
  3. ブラウザのキャッシュ — 古い内容が残っていることがあります。Windows は Ctrl + F5、Mac は Command + Shift + R で強制的に再読み込みしてください

困ったときの共通の型。 エラーメッセージや画面の文言をそのまま対話画面に貼り付けて、「この状況です。次に何をすればよいですか」と聞くこと。このレッスンで出るトラブルのほとんどは、これで解決します。

やってみよう

演習1（公開まで通す）：レッスン7-1で作った LP（または練習用の架空 LP）を、GitHub アカウント作成 → リポジトリ作成 → Claude Code でプッシュ → Vercel 連携、の流れで公開してみましょう。公開 URL をスマホで開けたらゴールです。

演習2（更新の反映）：公開したページの文言を1か所変え、Claude Code に修正からプッシュまで頼んで、公開 URL に反映されるのを確認してみましょう。反映までの所要時間も体感してください。

演習3（公開チェックの練習）：前のレッスンで作った社内ツールについて、「これは公開してよいか？」を本文のチェック観点（個人情報・社内情報・本物データ・会社のルール）で点検し、判断と理由を書き出してみましょう。

まとめ

  • 公開（デプロイ）の登場人物は2つ。ファイル置き場の GitHub と、公開係の Vercel
  • GitHub・Vercel とも無料で始められる。Vercel は「Continue with GitHub」でアカウントを連携して作る
  • リポジトリは Private のままでよい。ただし公開されたページ自体は誰でも見られる（ソースの公開とサイトの公開は別）
  • Vercel の無料プランは非商用の個人利用に限られる。仕事用途は Pro プラン以上
  • 一番難しい git 操作（コミット・プッシュ）は Claude Code に日本語で頼める。「何をしているか教えて」と添えると学びになる
  • 「リポジトリを Import → Deploy」で公開 URL が発行される。画面の文言は変わることがある
  • 公開前に必ずチェック。個人情報・社内情報を含むものは公開しない。迷ったら公開しない
  • 更新は「手元で修正 → GitHub にプッシュ」だけで、Vercel が自動で公開ページに反映する

理解度チェック

Q1. GitHub と Vercel の役割分担として、正しいものはどれでしょう？

  1. GitHub がページを公開し、Vercel がファイルの履歴を管理する
  2. GitHub がファイルの置き場と履歴管理を担い、Vercel がそれを Web に公開する
  3. 両方とも同じ機能のサービスなので、どちらか片方だけ使えばよい
  4. GitHub は有料、Vercel は無料という料金の違いしかない
解答を見る

正解: 2

GitHub は「ファイルの保管箱（リポジトリ）＋変更履歴の管理」、Vercel は「リポジトリの中身を Web に公開するホスティング」という分担です。連携させておけば、GitHub にプッシュするだけで公開ページが自動更新されます。どちらも個人利用なら無料枠で始められます。

Q2. 公開後にページの文言を修正したいとき、正しい手順はどれでしょう？

  1. Vercel の画面で公開済みページの HTML を直接書き換える
  2. 一度公開を取り消し、新しいリポジトリを作って最初からやり直す
  3. 手元のファイルを修正し、Claude Code に頼んで GitHub へプッシュすれば、Vercel が自動で反映する
  4. 公開後の修正はできないので、間違いがないよう公開前に完璧にする必要がある
解答を見る

正解: 3

GitHub 連携済みの Vercel は、リポジトリへのプッシュを検知して自動で公開ページを更新します。修正からプッシュまでは「lp.html の〇〇を直して、コミットして GitHub にプッシュして」と Claude Code にまとめて頼めます。やり直しも何度でもできるので、公開前に完璧を目指す必要はありません。