小学生でもわかる Vercel 作ったページの、ちゃんとした置き場

Cursorで作る、GitHubで保存する、の次は「出す」。押すだけで本番のURLができて、直すたびに自動で反映される置き場・Vercelの部屋を1つずつ開けていきます。

9 / 10話公開

最新話を見るエピソード一覧

Money

お金のひとこと

無料あり

無料プラン（Hobby）は個人の非商用だけ。フォルダをドラッグするだけで本番のURLができる。

2026-09-23 時点の料金ページで確認
無料か有料かを、23項目で分けて記録

Vercelの料金ページほかと比べる

Map

Vercelでできること

このシリーズの「見取り図」。1話で1つの部屋を開けていきます。

01本番URL
02自動で反映
03下書きURL
04秘密の鍵
05裏側のプログラム

Episodes

エピソード一覧

第1話から順に読むのがおすすめ。途中の話から読んでも、1話で完結します。

01
第1話 2026.09.24

Vercel始め方ガイド！AIに作らせたフォルダを、ドラッグするだけで世界に出す

AIに「自己紹介のページを作って」と頼むと、かなりきれいなページが出てきます。困るのは人に見せようとしたとき。できあがったのはパソコンの中の index.html。LINEで送ってもQRコードにしても、相手の画面では開けない。作ることと公開することは、別の作業です。
- 無料プランあり（個人の非商用のみ）
Xで記事を読むくわしく
- Vercel
- ホスティング
- Web公開
02
第2話 2026.10.01

Vercel×GitHub連携ガイド！GitHubで1行直すだけで、同じURLのページが新しくなる

次の日、ページの誤字に気づきます。直したフォルダを、もう一度 Drop に落とす。出てきたのは、前とは違うURLでした。昨日みんなに送ったURLは、誤字のままです。直したのに、誰にも届いていない。もう一度直すと、URLがさらにもう1つ増えます。ダッシュボードには、名前の似たプロジェクトが3つ並んでいる。
- 無料プランでできる（1日にできるデプロイは100回まで）。GitHub も、個人で使う基本の機能は無料
Xで記事を読むくわしく
- Vercel
- GitHub
- 自動デプロイ
03
第3話 2026.10.02

Vercel独自ドメインガイド！買ったドメインを、自分のページのURLにする

困るのは、そのURLを名刺やプロフィールに書こうとしたときです。shogakusei-vercel-demo.vercel.app のようなURLは、口で伝えにくく、覚えてもらいにくい。末尾には、いつも vercel.app が付いています。これは Vercel が貸してくれている住所です。借りている住所なので、表札に自分の名前を大きく書くことはできません。
- 独自ドメインを Vercel につなぐこと自体は、無料プランでもできる。お金がかかるのはドメインそのもの（毎年の更新料もかかる。この記事では金額を書いていない）
Xで記事を読むくわしく
- Vercel
- 独自ドメイン
- DNS
04
第4話 2026.10.02

Vercelプレビューガイド！本番を壊さずに試して、失敗したら一瞬で戻す

第2話で、GitHub の main を直せば、同じURLの中身がすぐ新しくなるようにしました。便利になったぶん、怖くもなります。ページの色を大きく変えてみたい。でも、そのURLは名刺にも載せてある。試しに変えたら、変な状態のページを、知らない誰かがちょうど見るかもしれません。
- 下書きのURLを作るのにお金はかからない（無料プランの「1日100回までのデプロイ」の中に数えられる）。無料プランで一瞬で戻せるのは、ひとつ前の本番まで
Xで記事を読むくわしく
- Vercel
- プレビュー
- ロールバック
05
第5話 2026.10.03

Vercel環境変数ガイド！APIキーをコードに書かない、正しい置き場所

AIに「天気を表示するページを作って」と頼むと、たいていすぐに動くものが返ってきます。ファイルを開くと、こんな行があります。const API_KEY = "abc123..." この鍵は、あなたの名前で天気のサービスを使うための合鍵です。ファイルに書いたまま公開すると、合鍵を玄関の外に貼り出しているのと同じことになります。
- 環境変数は、無料プランでも追加料金なしで使える（1回のデプロイで使える環境変数は、合わせて64KBまで）。箱を自分で足せるのは、有料の Pro 以上
Xで記事を読むくわしく
- Vercel
- 環境変数
- APIキー
06
第6話 2026.10.03

Vercel Functionsガイド！サーバーを借りずに、ファイル1つで裏側の処理を動かす

第5話の結論は、「秘密の鍵は、ブラウザではなく裏側の処理で使う」でした。では、その裏側はどこにあるのか。ネットで調べると、「サーバーを借りる」「月額いくら」「Linux の設定」といった言葉が並びます。そこで手が止まる人も多いはずです。Vercel では、そこまでしなくていい。
- 無料プラン（Hobby）の月の枠の中で動かせる（メモリは2GBで、360 GB時は月に約180時間ぶん。1回の上限は300秒）。枠を超えると、課金ではなく止まる
Xで記事を読むくわしく
- Vercel
- Vercel Functions
- 裏側の処理
07
第7話 2026.10.04

Vercelデータベースガイド！「Vercel Postgres」はもう無い。今のつなぎ方

メモを保存したい。会員の一覧を持ちたい。「データベース　Vercel」で調べると、こんな手順が出てきます。「Storage タブから Create Database を押して、Postgres を選ぶだけ。無料で使えます」その通りに画面を開いても、Vercel Postgres という選択肢は見当たりません。その記事が古いのです。
- Marketplace でつないだデータベースの請求は Vercel にまとめて届くが、料金の決まりはつないだ会社のもの（無料のプランがあるかは会社ごとに違う）。Vercel Blob は、無料プランでは保存1GB・転送10GB・書き込みや一覧などの操作が月2,000回まで
Xで記事を読むくわしく
- Vercel
- データベース
- Marketplace
08
第8話 2026.10.04

Vercelアクセス解析ガイド！何人に見られて、どれくらい速いかを無料で数字にする

ページを公開して、URLを友だちに送りました。返事は「見たよ」の一言だけ。ほかに何人が見たのかはわかりません。スマホで開くと少し待たされる気もしますが、それが自分の電波のせいなのか、ページのせいなのかも、判断がつかない。
- Web Analytics も Speed Insights も、無料プランで使える（Speed Insights は総合点だけ、Web Analytics は直近1か月分）。赤の内訳まで見る Speed Insights Plus は、Pro（月$20から）に上げたうえで、1プロジェクトにつき月$10
Xで記事を読むくわしく
- Vercel
- アクセス解析
- Speed Insights
09
第9話 NEW 2026.10.04

Vercelセキュリティガイド！無料で最初から入っている守りと、自分でオンにする守り

ページを公開すると、世界中の誰でも、そのURLを開けるようになります。見に来るのは、人だけではありません。1秒に何千回も同じページを開いて、サイトを止めようとするアクセス。.env のような、秘密が書かれていそうなファイルを探して回るプログラム。無料プランには、使える量の枠があります。知らない誰かに枠を使い切られれば、ページは止まる。
- DDoS の自動の守りと Attack Mode は、すべてのプランで無料。無料プランで自分で作れるルールは3つまで、止められる住所（IPアドレス）も3つまで。BotID の詳しい分析（Deep Analysis）は有料の Pro で、1,000回の確認につき$1
Xで記事を読むくわしく
- Vercel
- セキュリティ
- WAF

これから開く部屋

10AIに作らせて、AIに出させる／公開前チェック

Vercelの続きを受け取る

第10話が出たら知らせが届くように。公開したらXで告知し、記事の感想は引用リポストで全部読みます。

Xでフォロー（公開の知らせ） VercelだけのRSS

RSSは、Feedly などのRSSリーダーにこのボタンのURLを入れると使えます。この連載の新しい話だけが届きます。