独自ドメインが鬼門｜DNSで詰まらないデプロイ先の選び方（初心者向け）

この記事で分かること

「デプロイ（Webサイトの公開）って、結局どれを選べばいいの？」と迷う初心者向けに、Vercel / Netlify / Cloudflare Pages / GitHub Pagesを「商用利用の可否」「無料プランの止まり方」「独自ドメイン（DNS）の難しさ」「CI/CD（自動デプロイ）」で整理します。

先に結論だけ言うと、選び方はシンプルです。

• 将来も含めて商用利用の可能性がある → まずはNetlifyが無難（無料枠超過は課金ではなく停止側の挙動になりやすい）
• 個人の学習・非商用ポートフォリオ中心 → Vercelが手早い（ただし無料Hobbyは非商用前提）
• DNS/セキュリティ基盤もまとめて整えたい → Cloudflare Pages（独自ドメイン運用の考え方が少し独特）
• 静的サイトを最小構成で、かつ商用はしない → GitHub Pages（無料枠での商用は規約上リスクが高い）

なぜ今「デプロイ初心者」が迷うのか

デプロイでつまずくのは、技術の難しさというより「似ているサービスを、違う前提のまま使ってしまう」ことが原因です。どれもGitHubと連携してPushだけで公開できるので、見た目は同じに見えます。

ところが、初心者がハマりやすい地雷は主に4つあります。

• 無料プランで商用利用していいか（あとから規約面でやり直しが発生しやすい）
• 無料枠を超えたときの挙動（「勝手に課金」なのか「停止」なのかで安心感が違う）
• 独自ドメインの設定難易度（DNSが分からずに挫折しがち）
• 静的サイトか、SSR/Functionsなど動的機能が必要か（必要機能により楽な選択が変わる）

この記事は「何となくの人気」で選ばず、自分の目的に合う1つを決めるための手順書です。

デプロイの全体像：選び方の基準（迷ったらこの順）

基準1：商用利用の予定が1%でもあるか

副業のLP、店舗サイト、広告（アフィリエイト含む）を載せる可能性があるなら、最初から「無料でも商用OK（または少なくとも禁止されていない）」サービスを選ぶ方が安全です。

ここで大事な注意点があります。

• GitHub Pagesは、無料枠での利用目的に制限があり、一般にオンラインビジネスやeコマース等の商用用途には不向き（規約違反リスクが高い）とされています。副業用途の可能性がある人は最初から候補から外すのが無難です。
• Vercelは無料のHobbyが個人・非商用前提として案内されているため、将来商用に寄せるならプラン見直し・移行が発生し得ます。
• Netlify / Cloudflare Pagesは、少なくとも「無料＝非商用限定」と断定されがちな設計ではないため、初心者の選択肢になりやすいです（最終的には各社規約の確認推奨）。

※規約解釈は法的助言ではありません。実運用前に、必ず各サービスの利用規約・プラン条件の原文を確認してください。

基準2：静的サイトか、動的サイトか（SSR/Functions）

ざっくり言うとこうです。

• 静的サイト：HTML/CSS、React/Vueをビルドした成果物、SSGブログなど。「ファイルを配る」だけ。
• 動的サイト：SSR（例：Next.jsでサーバー側レンダリング）、API、会員機能、フォーム送信の拡張など。

静的ならどれでも大きく困りにくい一方、動的は「そのサービスが得意な形」に合わせる必要が出てきます。
初心者はまず静的で公開→必要になったら動的へ、の順が失敗しにくいです。

基準3：無料枠を超えたとき「どう止まるか」

「気づいたら請求が来るのが怖い」なら、ここを必ず押さえます。

Netlifyは過去に課金まわりで話題になった時期があり、現在は無料枠を超えると課金ではなく“制限・停止”側に倒れる運用が一般的です。つまり、勝手に課金されにくい代わりに、上限超過でサイトが止まる可能性があります。
→ どのみち「無料枠の上限」を知っておくのが最強のリスク対策です。

基準4：独自ドメインを使うか（DNSのハードルを見積もる）

独自ドメインは、つまずきポイントの王様がDNSです。

特にCloudflare Pagesは、独自ドメインの運用が強力な一方で、ケースによっては「ドメイン管理ごとCloudflareに寄せる」発想になります。噛み砕くと、こういうことです。

• subdomain（例：www.example.com）なら、比較的よくあるCNAME設定で進められることが多い
• apex（例：example.com）を気持ちよく運用したいなら、ネームサーバーをCloudflareへ変更して「DNSの主導権をCloudflareに置く」方がスムーズになりやすい

「DNSをいじるのが怖い」なら、最初は標準URL（〜.netlify.app / 〜.pages.dev など）で公開成功→独自ドメインは後回し、が鉄板です。

基準5：CI/CD（自動デプロイ）とプレビューが必要か

週末学習だと、Pushするだけで更新されるCI/CDはほぼ必須です。4つとも実現できますが、初心者は「Git連携が素直」「設定が少ない」ものを選ぶと続きます。

主要4サービス比較（初心者向けに“使いどころ”で整理）

状況別おすすめ：あなたはどれを選ぶべき？

1）「将来、副業や案件にも使うかも」：Netlifyを起点にする

初心者にとって一番痛いのは、公開後に「商用NGだった」「プラン前提が違った」と気づいて引っ越しが発生することです。将来の可能性を少しでも残すなら、まずNetlifyで公開しておくと気が楽です。

ただし、無料枠を超えたら止まる可能性があるので、アクセスが増えそうな時期は「上限チェック→必要なら有料化」を検討できる体制にしておきましょう。

2）「学習成果のポートフォリオを最速で公開」：Vercel

個人の学習成果・非商用が前提なら、Vercelは迷いにくいです。Git連携→自動デプロイまでが短く、プレビューもしやすいので「公開までの成功体験」を作れます。

ただし、のちに広告や案件用ページなど商用に寄せるなら、プラン条件の確認や移行の見立ては先に持っておくと安心です。

3）「DNSやセキュリティも含めて“土台”を作りたい」：Cloudflare Pages

Cloudflare Pagesは、CDNやDNSなど“土台”と一緒に考える人に向いています。

一方、独自ドメインでapex（example.com）をきれいに運用したい場合、ネームサーバー変更を含む選択になりやすく、初心者はここで手が止まります。
だからこそおすすめは、最初はsubdomain（www.example.com）で始めるか、標準URLで公開成功→慣れてからapexに挑戦、です。

4）「とにかく静的サイトを簡単に」：GitHub Pages（ただし非商用の範囲で）

GitHub Pagesはミニマムに静的サイトを公開でき、学習との相性は良いです。

ただし、無料枠での商用用途には制限があるため、副業サイト・店舗サイト・広告収益が絡むサイトなどは最初から避けるのが無難です。「公開できたのに、後でやり直し」になりやすいからです。

具体例：週末学習の会社員が「無料で安全に公開」する最短ルート

想定：20〜30代会社員、未経験。週末に学習してReactでポートフォリオを作成。将来は転職・副業も視野。独自ドメインもいつか使いたい。

この人が迷わず進めるなら、手順はこうです。

• 選ぶサービス：まずNetlify（将来の商用可能性を残しやすい）
• 公開の順番：標準URLで公開成功 → 表示確認 → 独自ドメインは後から
• CI/CD：GitHubにPushしたら自動デプロイの状態を作る

ここまでできると、「デプロイが怖い」から「更新が楽しい」に変わります。独自ドメインはDNSが絡むので、公開の成功体験を作ってから挑むのが挫折しにくいです。

失敗しない始め方：今日からの3ステップ

ステップ1：要件を3行で決める（迷いを止める）

以下をメモするだけで、選定が一気にラクになります。

• 商用の可能性：ある / ない（迷うなら「ある」扱い）
• サイト種類：静的 / 動的（SSRやFunctionsが必要）
• 独自ドメイン：今すぐ / 後で（迷うなら「後で」）

ステップ2：リポジトリを“デプロイ向け”に整える

デプロイで多い失敗は、ローカルでは動くのに本番ビルドが落ちることです。最低限、次を押さえます。

• ビルドコマンド（例：npm run build）と出力フォルダ（例：dist/build/.nextなど）を把握する
• 環境変数が必要なら「必須一覧」を作る（APIキーをGitに入れない）
• Node.jsバージョン差が怖いなら固定（.nvmrc等）

ステップ3：標準URLで公開→最後に独自ドメイン

最初から独自ドメインを付けるとDNSで止まる確率が上がります。まずは標準URLで公開して、表示・更新・ビルドが安定することを確認。

その後、独自ドメインへ進むときは、サービスの推奨手順に沿って進めます。Cloudflare Pagesでapexを使う場合は、ネームサーバー変更が絡む可能性があるので「戻せる状態」も意識しましょう（スクショ保存、現在のDNSレコード控えなど）。

よくある失敗5選と回避策

失敗1：ビルド設定（コマンド/出力先）を間違えて真っ白

症状：デプロイは成功したのに、アクセスすると真っ白・404。
回避策：フレームワークごとの出力先を先に確認し、サービス側の設定を合わせます。分からなければ「最小構成の静的サイト」でまず成功体験を作るのが近道です。

失敗2：環境変数の未設定で本番だけエラー

症状：ローカルはOK、本番は500やビルド失敗。
回避策：環境変数の「必須一覧」を作り、サービス側の設定画面に登録してから再デプロイ。鍵情報は絶対にリポジトリへコミットしないようにします。

失敗3：独自ドメインが反映されない（DNSで詰む）

症状：反映待ちのまま、HTTPSが有効にならない、特定環境だけ見えない。
回避策：apex（example.com）とsubdomain（www.example.com）で手順が変わることを先に理解します。Cloudflare Pagesは「DNSをCloudflareに寄せる」設計に乗るほど運用が楽になる一方、最初の一歩が重いので、初心者はsubdomainから始めるのが無難です。

失敗4：無料枠の上限を知らずに“突然止まる”

症状：ある日から更新できない/表示が不安定、ビルドが通らない。
回避策：無料プランの上限（ビルド回数、帯域、ビルド時間など）を把握し、運用の早い段階で「どれが増えそうか」を見積もります。特にNetlifyは「課金されにくい」安心感がある一方、上限超過で停止の可能性があるので、アクセス増が見えてきたら対策（最適化・有料化検討）をセットで考えます。

失敗5：GitHub Pagesで副業サイトを公開してしまう

症状：最初は公開できたが、後で規約面が不安になり、移行が必要になる。
回避策：GitHub Pagesは学習・非商用の静的公開に寄せて使い、商用の可能性があるなら最初からNetlify等へ。引っ越しは「いつかやる」ではなく、やるなら早いほどラクです。

向いている人／向いていない人

Vercelが向いている人

• 個人の学習成果・非商用のポートフォリオ中心
• フロント開発の公開をとにかく早く終わらせたい
• Next.jsなどで、まずはゼロ設定寄りで進めたい

Vercelが向いていない人

• 無料のまま商用利用したい（プラン前提に注意）

Netlifyが向いている人

• 将来の商用利用を少しでも想定している
• 独自ドメイン・HTTPSをできるだけ自動化して進めたい
• 「勝手に課金は困る」ので、停止型のリスクを許容できる

Cloudflare Pagesが向いている人

• DNSやCDNなど“土台”から整えたい
• Cloudflare側に寄せる運用（ネームサーバー変更の可能性）を理解して進められる
• 静的中心で、必要に応じて軽い動的処理も試したい

GitHub Pagesが向いている人

• 学習用途・非商用で、静的サイトを最小構成で公開したい
• 制限（容量・帯域・ビルド等）を理解して割り切れる

まとめ：チェックリストと次にやること

すぐできるチェックリスト

• 商用の可能性があるなら「商用あり」としてサービスを選ぶ
• 静的か動的（SSR/Functions）かを決めた
• 無料枠を超えたときの挙動（課金/停止/制限）を把握した
• 独自ドメインは「標準URLで成功→最後にDNS」の順にする
• 環境変数（APIキー等）をGitに入れない運用にする
• GitHub Pagesは副業・商用用途を避ける方針にした

次にやること（3ステップ）

• ステップ1：副業の可能性があるならNetlify（またはCloudflare Pages）を候補にし、GitHub Pagesは非商用の範囲で使う
• ステップ2：GitHubにPush → Git連携で自動デプロイ → 標準URLで表示確認
• ステップ3：安定したら独自ドメインへ。Cloudflare Pagesでapex運用したい場合は、ネームサーバー変更の影響を理解したうえで進める