超初級編約25分

ハンズオン④ 作ったサイトを世界に公開する

保管庫のファイルが、世界中から見られる“あなたのサイト”になる日

超初級編のクライマックスです。今日、あなたが③で育てた自己紹介ページは、世界中のどこからでも見られる本物のWebサイトになります。使うのは、無料講座の「デプロイ・公開」で学んだ Vercel。ブラウザだけで完結します。

今日のゴール

公開URLを手に入れて、自分のスマホでサイトを開くこと。そして誰かにURLを送ること。

STEP0：出発前チェック

GitHubの hello-ai の mainブランチに index.html がある（③のSTEP4）。
中身が最新になっている。

STEP1：Vercelのアカウントを作る

ブラウザで vercel.com を開き、「Sign Up」へ。
「Continue with GitHub」を選ぶ（②で作ったGitHubアカウントでそのまま入れる。新しいパスワード不要）。
個人利用の無料プラン（Hobby）でOK。

“GitHubでログイン”の正体

これは無料講座の「ログイン機能（認証）」でやったソーシャルログインの実物。あなたはもう、学んだ言葉の実例を次々と体験しています。

STEP2：リポジトリを取り込んで、公開ボタンを押す

Vercelの画面で「Add New…」→「Project」。
リポジトリ一覧から hello-ai を探して「Import」（見つからなければGitHub連携の許可画面でアクセスを許可）。
設定は何も変えずに「Deploy」を押す。
数十秒待つ——お祝いの画面（Congratulations!）が出たら成功！

STEP3：🎉 世界からアクセスしてみる

「Visit」を押す（URLは https://hello-ai-〇〇.vercel.app のような形）。
あなたの自己紹介ページが表示されたら——それ、もう世界に公開されています。
同じURLを自分のスマホでも開いてみる。Wi-Fiを切って携帯回線で開くと「本当に外から見えてる」が実感できます。

ふりかえってみて

①で手でタグを打ち、②でAIに頼み、③で育てて、④で世界へ。「作って、世界に出す」を、あなたは一周しました。

STEP4：“自動で更新される”魔法を体験

VercelはGitHubとつながっているので、mainが更新されると、サイトも自動で更新されます（自動デプロイ）。試してみましょう。claude.ai/code でこう頼みます。

自己紹介文の最後に「このサイトはAIと一緒に作りました」という一文を足して。変更はmainブランチに反映して。

1〜2分待って、公開URLを再読み込み。一文が増えていたら——もうあなたは「更新が自動で世界に届くサイト」のオーナーです。

STEP5：仕上げて、共有する

ブラウザのタブに出る名前も整えましょう。「<title>タグを『〇〇の自己紹介』に変えて。mainに反映して」と頼めばOK。仕上がったら、家族や友だちにURLを送ってみてください。「作ったの！？」の一言が、次の原動力になります。

公開前に、個人情報チェック

公開＝世界中の誰でも見られるということ。本名・住所・学校や職場・電話番号・顔写真などは、載せない／載せるなら慎重に。送る前にもう一度ページを見直しましょう。

おさらい：今日使った“言葉”

デプロイ: 作ったものをネットに公開すること。お店の“開店”。
Vercel: GitHubとつないでボタン1つで公開できるサービス。
自動デプロイ: mainが更新されると、サイトも自動で更新される仕組み。
公開URL（.vercel.app）: 無料でもらえる、あなたのサイトの住所。独自ドメインは初級編で。
<title>: ブラウザのタブに表示されるページ名。

第4回・完成チェック

0 / 5

つまずいたら

①ページが404／真っ白→ mainに index.html があるか確認（③のSTEP4）。②Deployが失敗→ 赤いエラーメッセージをコピーしてClaudeに「Vercelでこのエラーが出た。直し方を教えて」。③変更が反映されない→ mainに入っているか確認して、1〜2分待ってから再読み込み。

🎉 超初級編、コンプリート！

おめでとうございます！あなたは「AIと一緒に作り、世界に公開する」を最後までやりきりました。ここから先の初級編では、このサイトを“本物のアプリ”（複数ページ・ログイン・データ保存）へ進化させていきます（準備中）。それまで、自己紹介サイトを自由に育てておいてください——もうやり方は知っているはずです。