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

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

ここまでのレッスンで、LP と社内ツールを作りました。ただしどちらも、あなたのパソコンの中だけで動いている状態です。第6章の仕上げとして、作ったページをインターネット上に公開し、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 など、内容がわかる英数字の名前
• 公開範囲: Public（公開） を選ぶ。Vercel の無料利用では Public が基本です。リポジトリの中身（HTML の中身）が誰でも見られる状態になる、という意味なので、後述の「公開してよいものか」の判断を先に済ませておいてください
• それ以外の項目はそのままで「Create repository」

なお、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 のような「全部作り物」の題材が安心です。

更新の反映：GitHub に送れば自動で公開される

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

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

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

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

やってみよう

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

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

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

まとめ

• 公開（デプロイ）の登場人物は2つ。ファイル置き場の GitHub と、公開係の Vercel
• GitHub・Vercel とも無料で始められる。Vercel は「Continue with GitHub」でアカウントを連携して作る
• 一番難しい 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 にまとめて頼めます。やり直しも何度でもできるので、公開前に完璧を目指す必要はありません。