このガイドのゴール
読み終えると、作ったLP/HPをVercelで公開し、URLを発行できます。さらに独自ドメイン接続の入口までを案内します。所要時間の目安：15〜30分。コードは書けなくてOKです。情報は2026年6月時点のものです。
前提（無料で始められます）：公開したいLP/HP（v0で作ったもの等）、GitHubアカウント（推奨）、Vercelの無料アカウント。これは 1日で作るLP制作 のSTEP5「公開」を深掘りした個別ガイドです。
目次
- Vercelとは（結論：無料で即公開・HTTPS自動）
- 料金（無料のHobbyで足りる範囲）
- STEP 1｜アカウント作成（GitHub連携）
- STEP 2｜公開する3つの道（v0 / Import / CLI）
- STEP 3｜ビルド設定と環境変数
- STEP 4｜公開URLの確認と再デプロイ
- STEP 5｜独自ドメインを接続
- 納品での見せ方
- つまずき（ビルド失敗の読み方）
- 完成チェックリスト
- FAQ
Vercelとは（結論：無料で即公開・HTTPS自動）
Vercelは、Next.jsや静的サイトを数十秒で公開できるホスティングです。HTTPS（鍵マーク）・CDN・自動ビルドが標準で、サーバの知識がなくてもURLを発行できます。v0と同じ会社なので、v0からそのまま公開できるのが強みです。
- 誰向け：作ったLP/HPを、難しい設定なしに世に出したい人。
- 何ができる：公開URL発行／GitHub連携で更新を自動反映／独自ドメイン接続／HTTPS自動。
料金（無料のHobbyで足りる範囲）
個人のLP/HP公開なら無料のHobbyプランでまず十分です。ただし商用利用の範囲・帯域上限はプランで異なるため、受託案件で使う場合は公式の料金/利用規約で最新を確認してください（下表は2026年6月時点の概算）。
| プラン | 目安 | 主な範囲 | 向き |
|---|---|---|---|
| Hobby | ¥0 | 個人/非商用の公開・HTTPS・独自ドメイン | 学習・自分の作例 |
| Pro | 月$20前後/ユーザー | 商用・帯域/ビルド増・チーム機能 | 受託で使う人 |
※ 受託で納品する場合は、顧客のアカウントで公開するか、商用可否を規約で確認のうえ運用しましょう（誇大表現はしません）。
STEP 1｜アカウント作成（GitHub連携）
- vercel.com で「Sign Up」。GitHubでサインインすると後の連携が楽です。
- 初回はチーム名（個人なら自分の名前でOK）を決めるだけ。
STEP 2｜公開する3つの道（v0 / Import / CLI）
状況に合わせて選びます。未経験はAかBが簡単です。
- A. v0からデプロイ：v0の画面の［Deploy］を押すだけ。最短。
- B. GitHubからImport：コードをGitHubに置き、Vercelの「Add New… → Project → Import」でリポジトリを選ぶ。以後はGitHubにpushするだけで自動再公開。
- C. CLI：ターミナルで
npx vercel。慣れた人向け。
STEP 3｜ビルド設定と環境変数
Next.jsならフレームワークは自動検出され、基本そのままで公開できます。触るとすれば次だけ：
- Environment Variables：APIキー等はコードに直書きせずここに登録（例：問い合わせフォームのキー）。
- ビルドコマンド/出力は通常変更不要（自動）。
STEP 4｜公開URLの確認と再デプロイ
- ビルドが緑になると
https://プロジェクト名.vercel.appの公開URLが発行されます。 - スマホでも開いて表示を確認。
- 直したくなったら、GitHubにpush（またはv0で再Deploy）すれば自動で再公開。履歴から前の版に戻すのも数クリック。
STEP 5｜独自ドメインを接続
.vercel.app のままでも公開できますが、納品では独自ドメインが望ましいです。
- ドメインを取得（お名前.com / Cloudflare / Google Domains後継 等）。
- VercelのSettings → Domains に取得したドメインを入力。
- 表示されるDNS設定（AレコードやCNAME）を、ドメイン側の管理画面に登録。
- 反映後、HTTPSは自動で付きます（証明書の手動設定は不要）。
納品での見せ方
- 制作中はプレビューURLを共有して確認をもらう（修正→push→自動更新でスムーズ）。
- 納品時は顧客のVercel/ドメインに移すか、運用代行として月額保守に含める（継続収益）。詳細は 受注ガイド。
つまずき（ビルド失敗の読み方）
- ビルドが赤くなった→ ログの最初のエラー行を読む。多くは「モジュールが無い」「型エラー」。文面を Claude Code に貼って「直して」で解決することが多い。
- 真っ白で表示されない→ ルート（トップページ）があるか、パスの大文字小文字、画像の参照ミスを確認。
- 環境変数が効かない→ 変数名のスペル、登録後に再デプロイしたかを確認。
- 商用で使ってよいか→ Hobbyは非商用前提。案件では顧客アカウント or Proに。規約で要確認。
完成チェックリスト（公開後）
- ☐ 公開URLがHTTPS（鍵マーク）で開く
- ☐ スマホでも崩れず表示される
- ☐ ボタン・フォーム・リンクが動く
- ☐ 不要なテスト用ページ/ダミーが公開されていない
- ☐ （納品時）独自ドメイン接続済み・誰のアカウントで運用するか合意済み
FAQ
無料のままLPを公開していい？
自分の作例・学習なら問題ありません。顧客向けの商用は、顧客アカウントでの公開かProプラン、もしくは規約確認のうえ運用してください。
GitHubは必須？
必須ではありません（v0から直接Deployも可）。ただしGitHub連携にするとpushで自動更新でき、修正運用が圧倒的に楽になります。
独自ドメインは後からでもいい？
はい。.vercel.app で公開してから、あとでSettings→Domainsで接続できます。
公開を取り消したい
プロジェクトの削除、またはドメインの切り離しで取り下げられます。履歴から旧版へ戻すことも可能です。
情報はいつのもの？
2026年6月時点です。VercelのUI・料金・無料枠は変わるので、公開前に公式で確認してください。
まとめ：次の一歩
公開まで通れば、「v0で土台 → AIで仕上げ → Vercelで公開」の一本道が完成します。全体像は 1日で作るLP制作、見た目の生成は v0の使い方、受注〜納品〜保守は 受注ガイド と 実践パッケージ・LP/HP制作プラン へ。情報は2026年6月時点のものです。