4-1 Web サイト公開先の選び方

まず「Web サイトを公開する」とは何か

手元のパソコンで作った HTML ファイルは、ブラウザで開けば自分だけ見ることができます。これを世界中の誰でも見られる状態にするのが「公開」です。公開のためには下記の 3 つが必要になります。

1. サーバー — HTML や画像を置く場所。24 時間電源が入っていて、常にインターネットからアクセスできるコンピュータ
2. ドメイン — example.com のような覚えやすい住所。サーバーの IP アドレスに紐づける
3. CDN（任意だが推奨） — 世界各地のキャッシュサーバー。日本から見ても、アメリカから見ても速く表示するための仕組み

昔はこれらをすべて自分で用意する必要がありました。レンタルサーバーを月数百円で借りて、ドメインを別途取得して、SSL 証明書を別途購入して、と複数の手続きが必要でした。2026 年現在は「ホスティングサービス」と呼ばれるものが、これらをほぼ全自動でまとめて提供してくれます。

サーバーとブラウザの関係

ブラウザ（Chrome や Safari）に https://example.com と入力したとき、裏側では下記のような流れが走っています。

1. ブラウザが DNS に「example.com はどこ？」と問い合わせる
2. DNS が「IP アドレス 203.0.113.42 です」と返す
3. ブラウザがその IP のサーバーに「HTML ください」と HTTP リクエストを送る
4. サーバーが HTML を返す
5. ブラウザが HTML をパースして、必要な CSS や画像を追加で取得する
6. ブラウザが画面に描画する

このうち 2 番目の DNS と 3 番目のサーバーを用意してくれるのがホスティングサービスです。CDN を併用する場合は、3 番目のステップが「最寄りのキャッシュサーバー」に置き換わるので、応答が速くなります。

ホスティングサービスの基本機能

無料で使えるホスティングサービスは、最低でも下記の機能を備えています。

• 静的ファイル配信 — HTML、CSS、JavaScript、画像をブラウザに返す
• HTTPS 対応 — SSL 証明書を自動発行・自動更新。https:// で安全にアクセスできる
• CDN — 世界中のサーバーから配信。日本のユーザーには日本のサーバーから返るので速い
• 独自ドメイン接続 — 自分で取得したドメインを紐づけられる
• Git 連携 — GitHub にコードを push するだけで自動デプロイ
• HTTP/2、HTTP/3 対応 — 現代の高速プロトコル

これらをすべて無料で提供しているサービスがいくつかあります。「タダより高いものはない」と思うかもしれませんが、各社とも有料プランの入り口として無料枠を提供しているので、個人サイト程度であれば十分な容量と転送量が用意されています。

主要サービスの比較（無料枠中心）

静的サイトを無料で公開できる主要サービスを並べます。

Cloudflare Pages

世界最大級の CDN を持つ Cloudflare 社が提供。無料枠が圧倒的に大きく、ビルド回数（月 500 回）と同時ビルド数（1 つ）以外はほぼ無制限です。帯域無制限、リクエスト数無制限、サイト数無制限。独自ドメインも無料で紐づけ可能。SSL 自動発行。日本国内の配信速度もトップクラス。

GitHub Pages

GitHub の機能の一部として提供。GitHub アカウントさえあれば追加登録不要。リポジトリの設定画面で「Pages」を有効にするだけで公開できます。容量 1GB、月の転送量 100GB の制限はありますが、個人サイトには十分です。独自ドメインも無料で接続可能、SSL も自動。

Netlify

Web 制作者に古くから人気。無料枠は月 100GB の転送量、ビルド時間 300 分。フォーム送信機能や認証機能なども無料枠に含まれており、簡単なお問い合わせフォームを設置するなら強力。

Vercel

React の Next.js を作っている会社のサービス。デプロイ体験が非常に滑らか。プレビュー URL の自動生成（PR ごとに別 URL）が秀逸。ただし商用利用は有料プラン必須なので、個人サイトでも将来お店を載せるなら注意が必要。

Firebase Hosting

Google が提供。Google アカウントで始められる。無料枠は容量 10GB、月の転送量 360MB/日。他の Firebase サービス（認証、データベース）と連携しやすい点が特徴。

Render と Surge.sh も覚えておく

選択肢として Render と Surge.sh も存在します。Render は Web アプリ全般を扱うサービスで、静的サイトのみなら無料。Surge.sh は CLI で surge と打つだけで公開できる老舗のシンプル系サービスで、コマンドラインに慣れている人には根強い人気があります。ただし機能と保守状況を考えると、初心者は本記事で挙げた主要 5 つから選ぶのが無難です。

ひと目でわかる比較表

静的サイト と 動的サイト の違い

ここまでのサービスはすべて「静的サイト」向けです。静的サイトとは、HTML ファイルがあらかじめ用意されていて、ブラウザからのアクセスに対してそのまま返すだけのサイトを指します。

一方「動的サイト」は、アクセスのたびにサーバー側でプログラムが動いてページを生成します。WordPress や Wix、STUDIO は動的サイトに分類されます（厳密には Wix や STUDIO は静的書き出しもしますが、編集時にデータベースを使う点で動的寄り）。

なぜこのコースは Wix や STUDIO ではないのか

Wix や STUDIO は「コードを書かずに作れる」と謳っているのに、なぜわざわざ HTML を書くのか。理由は下記の通りです。

• ロックインを避ける — Wix で作ったサイトは Wix から出せない。HTML なら任意のサーバーに移せる
• コストが永遠に無料 — Wix の独自ドメインは月 1,000 円以上。HTML + GitHub Pages なら年 1,500 円（ドメイン代のみ）
• AI と相性が良い — Claude Code に「ヘッダーを赤くして」と頼めば一瞬。Wix の GUI を覚える必要がない
• 学びが転用できる — HTML/CSS は 30 年前から変わらない技術。次のプラットフォームが出てきても通用する
• 表示速度が圧倒的 — 静的サイトは動的サイトの 5〜10 倍速い

各サービスの強みと弱みを深掘り

数字の比較だけでは見えない、実運用での感触を補足します。

Cloudflare Pages を選ぶべき人

技術寄りの UI に抵抗がない人、長期運用を考えている人、Cloudflare の他サービス（Workers、R2、D1、KV）を将来使いたい人に最適です。CDN の品質が業界トップレベルで、日本国内では NTT 東西の主要回線に直接ピアリングしているため、表示速度が体感で違います。一方、ビルドログの UI が技術者向けで、初心者は最初のデプロイで戸惑うかもしれません。

GitHub Pages を選ぶべき人

学習目的、ポートフォリオ、ドキュメントサイトの公開には最適です。リポジトリの Settings → Pages を開いてブランチを選ぶだけで公開されるシンプルさは他の追従を許しません。弱点は、ビルド時のカスタマイズが Jekyll に限定されていること、独自ドメインで HTTPS を有効化するのに少しコツがいることです。本コースのように「素の HTML/CSS をそのまま公開する」用途には完璧です。

Netlify を選ぶべき人

お問い合わせフォームを設置したい人、サーバーレス関数を少しだけ動かしたい人に向いています。フォーム機能は HTML の <form> に netlify 属性を足すだけで使えて、月 100 通までは無料。スパム対策の reCAPTCHA も統合されています。ビルド時間 300 分/月は、月 50 回程度のデプロイを想定すると十分。

Vercel を選ぶべき人

将来 Next.js や React に進む予定の人。プレビュー URL の自動生成は、デザイナーやクライアントに「この URL を見てください」と共有するのに便利です。ただし無料プランの利用規約に「商用利用不可」が明記されているので、お店のサイトや収益化を考えるなら最初から有料プラン（月 20 ドル）が必要になります。

Firebase Hosting を選ぶべき人

Google アカウントを既に持っている人、Firestore でデータベースを使う予定の人。Authentication との統合がスムーズで、ログイン機能のあるサイトを将来作るなら相性が良いです。転送量制限が他より厳しめなので、画像が多いサイトは注意。

独自ドメインの取得

yourname.com のようなアドレスは、ドメイン登録業者から年単位で借ります。代表的な業者は下記の通りです。

• お名前.com — 日本最大手。日本語サポートあり。.com が初年度 1 円のキャンペーンを頻繁にやっているが、2 年目以降は約 1,500 円/年
• Cloudflare Registrar — 卸値ぴったりで販売。.com で年 約 9.15 ドル（約 1,400 円）。値上げなしの透明な料金体系。Cloudflare Pages と組み合わせるなら最強
• Google Domains（現 Squarespace Domains） — UI がきれい。料金は中程度
• Value Domain — 日本の老舗。ドメインの種類が豊富

このコースでは将来的に Cloudflare Registrar を推奨しますが、まずはドメイン取得自体を後回しにしても問題ありません。GitHub Pages なら yourname.github.io という無料のサブドメインで公開できます。

DNS 設定の基本

独自ドメインを取得したら、DNS（Domain Name System）でホスティングサービスに紐づけます。代表的なレコードは下記の通りです。

• A レコード — ドメインを IP アドレスに紐づける。example.com → 185.199.108.153 のように
• CNAME レコード — ドメインを別のドメインに紐づける。www.example.com → yourname.github.io のように
• MX レコード — メール用。Web 公開には使わない
• TXT レコード — 所有権確認などに使う

GitHub Pages や Cloudflare Pages は、設定画面で「このドメインをここに紐づけてください」という案内を出してくれます。指示通りに DNS 設定画面で A レコードや CNAME を入れれば、通常 5 分〜数時間で反映されます。

Cloudflare Registrar でドメインを取り、Cloudflare Pages で公開する場合は、DNS 設定がほぼワンクリックで完了します。これが「Cloudflare に統一すると楽」と言われる理由です。

TLD（トップレベルドメイン）の選び方

ドメインの末尾、.com や .jp の部分を TLD と呼びます。価格は TLD で大きく変わります。

• .com — 最も一般的、信頼性も高い。年 約 1,400 円。迷ったらこれ
• .net — 「.com が取れなかった」感が出る。年 約 1,500 円
• .io — IT 系で人気だが、年 約 5,000 円と割高
• .jp — 日本専用、信頼性は最高だが年 約 3,500 円。日本居住者しか取れない
• .dev .app — Google が管理する技術者向け TLD。HTTPS 必須。年 約 1,800 円
• .xyz .online — 安いが信頼性に欠ける。年 約 100 円〜

ビジネス用なら .com か .jp、個人ブログなら .com か .dev が無難です。

SSL 証明書 — 全自動で無料

https:// の鍵マークを出すための SSL/TLS 証明書は、昔は年数万円する有料サービスでした。現在は Let's Encrypt という無料の証明書発行サービスのおかげで、ほぼすべてのホスティングサービスが SSL を無料で提供しています。

しかも自動更新です。Let's Encrypt の証明書は 90 日で期限切れになりますが、ホスティングサービス側で自動更新してくれるので、ユーザーは何もしなくて構いません。

なぜ HTTPS が当たり前になったか

数年前まで、HTTPS は EC サイトやログイン機能のあるサイトだけのものでした。現在は Google が HTTP のサイトを「保護されていない通信」と表示するようになり、検索結果でも HTTPS が優遇されます。ユーザーの信頼を得るためにも HTTPS は必須です。幸い、本記事で挙げたサービスはすべて HTTPS が標準なので、特に意識しなくても自動で対応されます。

このコースでの選択 — 段階移行案

下記の段階で進めるのがおすすめです。

Phase 1（このコース内） — GitHub Pages

• GitHub のアカウントは Claude Code を使う上で結局必要
• 設定が最もシンプル。ボタン 3 回クリックで公開できる
• サブドメイン yourname.github.io で無料公開
• Git の基礎も同時に学べる

Phase 2（数ヶ月後） — Cloudflare Pages + Cloudflare Registrar

• 独自ドメインを取得したくなったら移行
• Cloudflare で統一すると DNS 設定がワンクリック
• 容量・転送量とも事実上無制限
• 日本国内の表示速度がさらに向上

Phase 3（必要に応じて） — Vercel や Netlify

• フォーム機能や認証機能が必要になったら検討
• React や Next.js を使う段階で Vercel が候補

最初から完璧な選択をする必要はありません。まずは公開してみる経験が重要です。

<Quiz question="「無料で使えるホスティングサービス」の選び方について、最も正しい説明はどれですか？" options={["一番有名なサービスを選べばよい","自分の目的（容量、機能、将来の拡張性）に応じて選ぶ","とにかく一番安いサービスを選ぶ","日本企業のサービスを選ぶべき"]} answer={1} explanation="個人サイトなら GitHub Pages、容量重視なら Cloudflare Pages、フォーム機能が欲しいなら Netlify など、目的に応じて選びます。どのサービスも無料枠なら大差ありません。" />

<Quiz question="独自ドメイン（例 yourname.com）を持つために必要なものは？" options={["サーバーを自宅に置く","ドメイン登録業者から年単位で借りる","GitHub に無料で申請する","Wix と契約する"]} answer={1} explanation="ドメインは「お名前.com」「Cloudflare Registrar」などの登録業者から年単位で借りる仕組みです。年 1,500 円程度。ホスティングサービスとは別物です。" />

<Checklist title="「公開方法」を理解できたチェック" items={["ホスティングサービスとは何か説明できる","静的サイトと動的サイトの違いがわかる","独自ドメインは別途取得が必要だと理解した","SSL 証明書は無料で自動更新されると知った","このコースでは GitHub Pages を使うことに納得した"]} />

次のレッスン 4-2 では、実際に GitHub にコードをアップロードする手順を学びます。