ウェブサイト作るとき何を使う？初心者でも使える「Webサイト構築診断」作りました
GitHub、Vercel、Netlify、Cloudflare……。
Webサイトを自分で作るときに使う便利なクラウドサービス。名前はよく聞くけど、使い方をちゃんと理解して使い分けられている方は少ないんじゃないでしょうか？ AIに言われたまま、よく分からないまま利用していませんか？
今回は非エンジニアでも簡単にそれぞれのサービスの特徴と違いが分かるようにまとめてみました。
また、自分でWebサイトを作るときに、どのサービスを組み合わせるのがベストかを簡単に診断できるツールも作成したので、ぜひ活用してみてください。
※読むのが面倒な人へ。記事の一番最後の「AIへ渡す手順書」をコピーしてClaudeのチャット欄に貼るだけで勝手に作業を進めてくれます。
（貼ると、作りたいサイトに合うサービスの組み合わせを一緒に決めて、公開の作業まで進めてくれます）
この記事で分かること
GitHub・Vercel・Netlify・Cloudflare・Firebase / Supabase の特徴と違い
できること × サービスの対応表（◎◯△✖︎）
作るものと予算から、どれを組み合わせればいいか（フローチャート）
はい・いいえで答えるだけの「Webサイト構築診断」
Wix や STUDIO を使わなくてもいい時代に
少し前まで、エンジニアじゃない人が自分でWebサイトを作るなら、Wix や STUDIO、ペライチのような「ノーコードツール」を使うのが定番でした。画面の上でパーツを並べるだけでサイトができて、公開まで面倒を見てくれる、とても便利なサービスです。
でも、そういったノーコードツールは、もう時代遅れになりつつあります。なぜなら、AI がコーディングする時代になってきたからです。人間がマウスで操作することを前提に作られたノーコードツールは、AI に作業を任せる今となっては、逆に使いにくくなっています。
その代わり、非エンジニアの私たちにも、どのクラウドサービスを使ってWebサイトを構築していくか、という最低限の知識は必要になったと思います。その理解を少しでも分かりやすくできるように、今回の記事を書いています。
簡単なサイトならどれでも良い
静的なサイト（会社紹介・ポートフォリオ・ブログのような「見せるだけ」のサイト）を公開するだけなら、GitHub Pages でも Vercel でも Netlify でも Cloudflare でも、全部できます。 しかも全部無料の枠があります。
なので「どれが一番すごいか」を比べてもあまり意味がありません。違いが出てくるのは次の2つです。
何を作るか（見せるだけのサイトか、ログインやデータ保存があるか）
予算（無料で済ませたいか、そのサイトでお金を稼ぐか）
それぞれのサービスの特徴
名前を覚えるより、「どこで使うものか」を覚えると一気に分かりやすくなります。大きく分けると3種類です（カッコ内は一般的な呼び方。調べるときはこの言葉で検索すると早いです）。
コードの保管庫（Gitホスティングサービス※）：GitHub
サイトを公開する場所（ホスティングサービス※）：GitHub Pages・Vercel・Netlify・Cloudflare
ログインとデータの置き場（BaaS＝バース※）：Firebase・Supabase
GitHub（コードの保管庫）
作ったファイルを置いておく場所です。いつ・どこを変えたかの履歴が全部残るので、「昨日の状態に戻したい」ができます。パソコンが壊れてもコードが消えない、バックアップの役目もあります。GitHub 自体はサイトを公開する場所ではありません。特に複数人で同時に1つの作業をするときに便利です。
GitHub Pages（GitHub についてくる公開機能）
GitHub の中にある、無料でサイトを公開できる機能です。会社案内やポートフォリオのような「見せるだけ」のサイトならこれで十分。独自ドメイン※も使えます。ただし、ネットショップや有料サービスのような商売の土台に使うことは、GitHub の規約で想定されていません。
Vercel（公開する場所・Webアプリが得意）
ログインや予約のような「動く」サイトを公開するのが得意です。Next.js※ を作っている会社のサービスなので、Next.js との相性は抜群。練習用のURL（プレビュー）と本番を分けるのも簡単です。注意点は、無料プラン（Hobby）は個人の非商用向けということ。仕事のサイトなら有料プランになります。
Netlify（公開する場所・サイトが得意）
Vercel のライバルです。見せるだけのサイトや小さめのアプリに向いていて、お問い合わせフォームの受け取り機能が標準でついているのが便利なところ。無料プランでも商用利用ができます。
Cloudflare（公開する場所・コスパが得意）
Pages（サイトの公開）と Workers（裏側の処理）で、見せるだけのサイトから動くアプリまで対応できます。無料枠が広く、無料プランでも商用利用ができるので、お金を稼ぐサイトをまず無料で始めたいときの有力候補です。
Supabase（ログインとデータの置き場）
会員ログインと、予約・会員情報・注文などのデータを保存するデータベースが、セットになったサービスです。データを表（スプレッドシートのような形）で管理するので、中身が見て分かりやすいのが特徴。無料プランもあります（ただし1週間ほど使われないと一時停止するので、再開のボタンを押す必要があります）。この記事のフローチャートと診断ツールでは、ログインとデータの置き場の代表として Supabase を使っています。
Firebase（ログインとデータの置き場）
Google のサービスで、ログイン・データベース・公開などをまとめて使えます。Google アカウントでのログインと相性がよく、スマホアプリでもよく使われています。Supabase の代わりに使っても、役割は同じです。
どちらも単体で使うというより、Vercel や Cloudflare のような公開する場所と組み合わせて使います。
ひと目で分かる対応表
特徴を1枚の表にまとめるとこうなります。縦が「できること」、横が各サービスです。
見比べると、公開する場所（GitHub Pages・Vercel・Netlify・Cloudflare）は「見せるだけのサイト」ならどれも◎で、差が出るのはフォーム・ログイン・データベース・商用利用の行だと分かります。そして、ログインとデータベースが◎なのは Firebase と Supabase だけ。だから「公開する場所」と「ログイン・データの置き場」を組み合わせる形になるわけです。
どれを組み合わせる？フローチャート
特徴が分かったところで、自分の場合はどれを組み合わせればいいのかを1枚にまとめてみました。
結果はこの8タイプに分かれます（番号は診断ツールと共通です）。最初の質問で「サッと人に見せたいだけ」なら、⑨ AIでそのまま共有タイプ（下の補足1）に進みます。
⑨の「共有機能」は、AIによって名前が違います。Claude なら「アーティファクト」、ChatGPT なら「キャンバス（Canvas）」、Gemini なら「キャンバス（Canvas）」という機能です。どれも、AIに作ってもらったページをそのままリンクにして人に見せられます。
① ひとりで完結タイプ → GitHub Pages
見せるだけのサイトで、フォームもいらないならこれ。会社概要・事業紹介・アクセス情報くらいなら、GitHub だけで保管も公開も無料で完結します。
② ご相談受付係タイプ → GitHub × Netlify
見せるだけのサイトに、お問い合わせフォームを1つ足したいとき。コードは GitHub に置いて、公開は Netlify。フォームの送信も Netlify が受け取ってくれます。
③ Webアプリ職人タイプ／④ 本気のWebサービスタイプ → GitHub × Vercel ＋ Supabase
ログインやデータ保存がある「動く」サイト。個人の練習や趣味なら Vercel の無料プランで（③）、仕事で使うなら Vercel の有料 Pro プランで（④）。ログインとデータは Supabase（または Firebase）に任せます。
ここで大事なのが「将来」も考えること。 最初は趣味で始めても、あとから有料会員や販売をつけて仕事のサイトになる、というのはよくある流れです。そうなった時点で Vercel の無料プランは使えなくなるので、Pro（有料）にするか、Cloudflare に移すことになります。なので診断でも「今または将来、お金を稼ぐ？」と聞くようにしました。
⑤ 小さく始める商売人タイプ → GitHub × Cloudflare ＋ Supabase
ここが一番の落とし穴でした。お金を稼ぐサイトを（将来の予定も含めて）まずは無料で動かしたいなら、Vercel の無料プランは選べません。商用でも使える無料枠がある Cloudflare（または Netlify）を選びます。
⑦ とりあえず出してみるタイプ／⑧ 仕事でサッと公開タイプ → Vercel だけ／Netlify だけ
履歴の管理はいいから、とにかく今日公開したいとき。GitHub がなくても、パソコンから直接公開できます。ここでも分かれ道は「仕事で使うか（今または将来）」です。
⑦ 個人の趣味・練習なら Vercel だけ（Vercel CLI※ でパソコンから直接公開）
⑧ 仕事で使うなら Netlify だけ（Netlify Drop でフォルダをドラッグするだけ。無料でも商用OK）
どちらもコードの保管庫ではないので、バックアップは別に取っておきましょう。
診断ツールでは、このほかに ⑥ ネットショップ店長タイプ（⑤に決済の Stripe を足したもの）も出ます。
※補足1（いちばん手軽なのは、AIの「共有機能」）
ここまで GitHub や Vercel の話をしてきましたが、ちょっとしたものを人に見せるだけなら、もっと手軽な方法があります。AIチャットについている「作ったものをそのまま共有する機能」です（2026年11月時点）。
Claude のアーティファクト：Claude に作ってもらったページやツールを、共有ボタンからリンクにして公開できます。リンクを知っている人は、Claude のアカウントがなくても開けます。この記事の診断ツールも、実はこれで公開しています
ChatGPT のキャンバス（Canvas）：ChatGPT で作ったページやコードを、キャンバスの画面から共有できます。ただし見る側に ChatGPT へのログインが必要なことがあり、使えるモデルも時期によって変わっています
Gemini のキャンバス（Canvas）：Gemini で作ったWebアプリを「共有」からリンクにできます。Google アカウントがない人でも開けます
アンケートの集計ページ、イベントの案内、ちょっとした計算ツールなどをサッと人に見せたいだけなら、まずはこれで十分です。サービスを選ぶ必要もなく、AIに「共有できるようにして」と言うだけで終わります。
ただし、ずっと残しておく本格的なサイトには向いていません。
独自ドメインが使えない（AIサービスのURLのまま）
元の会話を消すと、ページも見られなくなることがある
コードの履歴管理やバックアップができない
検索で見つけてもらうのには向いていない
「まずはAIの共有機能で見せてみる → 長く使うことになったら GitHub や Vercel に引っ越す」という順番でもいいと思います。
よく引っかかる3つの疑問
調べていく中で、私が実際に引っかかったところです。
GitHub を使わずに Vercel だけで公開できる？
できます。パソコンにあるコードを Vercel CLI というツールで直接アップできます。Claude Code に「Vercel に公開して」と頼めばそのままやってくれます。ただ、Vercel には GitHub のようなコードの保管・履歴の機能はありません。
じゃあ Vercel のバージョン管理って？
Vercel にあるのは「デプロイ※履歴」です。昨日公開したサイトに問題があったら、前の正常な版に戻すことはできます。でも「どのファイルの何行目を誰がいつ変えたか」までは分かりません。
GitHub ＝ 作っている途中のコードを管理する場所
Vercel ＝ 公開したサイトを管理する場所
この違いでした。
練習用で確かめてから本番に出したいときは？
Vercel 単体でも「プレビュー（練習用）」と「本番」は分けられます。ただ GitHub と組み合わせると、こんな流れが全部自動になります。
練習用の枝（ブランチ）で新しい機能を作る
Vercel が練習用のURLを自動で作るので、そこで見た目を確認する
問題なければ本番の枝にまとめる
Vercel が自動で本番サイトを更新する
一人で小さく作るなら Vercel だけでも回ります。でも、手元のパソコンが壊れたらコードも消えるので、バックアップのつもりで GitHub は入れておくのが私のおすすめです。
はい・いいえで答えるだけの「Webサイト構築診断」
たくさんのクラウドサービスがあるので毎回最適なものを考えるのが大変という方のためにWebサイト構築診断ツールも作りました。
👉 Webサイト構築診断：https://shindan.claudecodeclub.jp/
犬タイプ診断やパーソナルカラー診断のような、1問ずつ大きなボタンで答えていく形にしています。サイトの種類・保存したいデータ・ログインの方法・決済の有無・独自ドメインなど、だいたい6〜9問に答えると、9タイプのどれかが出ます。結果画面には「AIにこう頼んでみよう」として、「公開する場所は Cloudflare、ログインは Supabase の Google ログイン、決済は Stripe」のように、役割ごとに書いた頼み方の文が出ます。ボタンでコピーして、そのまま AI に貼れます。
※補足2（料金や規約は変わる）
無料枠の中身や商用利用の条件は、各社がよく変えます。この記事は2026年11月時点で書いています。お金が絡むサイトを公開する前は、必ず各社の公式ページで最新の条件を確かめてください。
※補足3（この記事に出てくる言葉）
独自ドメイン：「〇〇.com」「〇〇.jp」のような、自分だけのWebサイトの住所
Gitホスティングサービス：コードとその変更履歴をネット上に預けておけるサービス。GitHub が代表
ホスティングサービス：作ったWebサイトをインターネットに公開してくれるサービス。「サーバーを借りる」とほぼ同じ意味
BaaS（バース）：Backend as a Service の略。ログインやデータベースなど、サイトの裏側の仕組みを丸ごと貸してくれるサービス
Next.js：Webアプリを作るための人気の道具（フレームワーク）。AI に Webアプリを頼むと、これで作られることが多い
CLI：黒い画面（ターミナル）に文字で命令して使うツール。Claude Code などの AI に頼めば代わりに操作してくれる
デプロイ：作ったサイトをインターネットに公開すること
最後に
正直、これまでは「なんとなく Vercel」で公開していました。でも整理してみると、見せるだけのサイトなら GitHub Pages で十分だったし、お金が動くサイトなら Vercel の無料プランは選べませんでした。どれか1つに決めなくていい。作るものに合わせて組み合わせればいい。 これが分かっただけで、次に何かを公開するときの迷いがかなり減りました。
今日やれることは1つだけです。今作っている（または作りたい）サイトを思い浮かべて、上の「Webサイト構築診断」で質問に答えてみてください。結果をそのまま Claude に伝えれば、公開までやってくれます。
同じところで迷っている人に届くと嬉しいので、フォローしてもらえると励みになります。
んじゃ、また！
毎月30枠限定｜30分の個別無料相談
30分の個別無料相談リンクはこちら↓↓
AIの使い方に関してAz本人と30分間無料で相談ができます。毎月の枠に限りがあるのでご注意ください。
※上のリンクは Claude Code Club の LINE 公式アカウントです。友だち追加のあと、トークに「面談希望」と送ってください。予約用のリンクをお送りします。
AIへ渡す手順書
下の枠の中をまるごとコピーして、Claude（できれば Claude Code）のチャット欄に貼ってください。作りたいものを聞かれるので答えるだけで、どのサービスを組み合わせるかを決めて、公開まで進めてくれます。
# Webサイト構築診断と公開の手順書（Claude 向け）
この文章は、note 記事「ウェブサイト作るとき何を使う？初心者でも使える「Webサイト構築診断」作りました」（URL：https://note.com/mosir/n/n74ffd4da6c22）からコピーされて、あなた（Claude）に貼られた作業手順書です。ユーザーは非エンジニアの可能性が高いので、専門用語はかみくだいて説明してください。
## 0. 実行環境の確認
- シェルとファイル操作ができる環境（Claude Code）か確かめる。できない環境（ブラウザのチャットだけ等）なら、診断（手順2）だけ行い、公開は「Claude Code に貼り直してください」と伝えて止まる。
- OS（macOS / Windows / Linux）を判定し、以後のコマンドを合わせる。
## 1. 守ること
- 既存のファイルは消さない・上書きする前にバックアップを取る。
- パスワード・APIキー・トークンを画面やファイルに書き出さない。ログインや承認はユーザー本人に頼み、その一歩手前まで準備する。
- 公開（本番へのデプロイ）の直前に、ユーザーに確認を取る。
- 料金・無料枠・商用利用の条件は変わるので、決める前に各社の公式ページで最新の条件を確かめ、確かめた内容をユーザーに伝える。
## 2. 診断（最初にまとめて聞く）
最初に「作ったものをサッと人に見せたいだけか（長く運用する本格的なサイトではないか）」を聞く。はいなら、使っているAIの共有機能（Claude のアーティファクト、ChatGPT や Gemini のキャンバス）で公開する方法を案内し、長く使うことになったら下の構成に引っ越せると伝えて終わる。いいえなら、次の質問をユーザーに聞き、下の判定で組み合わせを決める。商用かどうかは「今」だけでなく「将来の予定」も含めて聞く（あとから有料会員・販売をつけるケースが多いため）。
Q1. ログイン（会員）やデータの保存は必要ですか？
Q2. お問い合わせフォームは必要ですか？（Q1 がいいえのとき）
Q3. コードの変更履歴を残したいですか？（Q1・Q2 がいいえのとき。基本は「はい」をすすめる）
Q4. 今または将来、仕事で使うサイトですか？（Q3 がいいえのとき）
Q5. 今または将来、このサイトでお金を稼ぎますか？（有料会員・販売・仕事の集客など。Q1 がはいのとき）
Q6. まずは無料で動かしたいですか？（Q5 がはいのとき）
判定：
- Q1 いいえ・Q2 はい → B：GitHub と Netlify（Netlify Forms を使う）
- Q1 いいえ・Q2 いいえ・Q3 はい → A：GitHub Pages（GitHub だけで完結）
- Q1 いいえ・Q2 いいえ・Q3 いいえ・Q4 はい → E：Netlify だけ（Netlify Drop。無料でも商用OK）
- Q1 いいえ・Q2 いいえ・Q3 いいえ・Q4 いいえ → E：Vercel だけ（Vercel CLI で直接公開）
（E はどちらも、手元のパソコンが壊れるとコードが消えるので、バックアップ先を別に用意するようすすめる）
- Q1 はい・Q5 いいえ → C：GitHub と Vercel（無料の Hobby プラン）と Supabase（または Firebase）。「将来有料にするなら Vercel Pro にするか Cloudflare に移す」と伝える
- Q1 はい・Q5 はい・Q6 はい → D：GitHub と Cloudflare（Pages / Workers）と Supabase
- Q1 はい・Q5 はい・Q6 いいえ → C：GitHub と Vercel（有料の Pro プラン）と Supabase
結果を「なぜその組み合わせか」「それぞれのサービスの役割（GitHub＝コードの保管庫、GitHub Pages・Vercel・Netlify・Cloudflare＝公開する場所、Supabase・Firebase＝ログインとデータの置き場）」と一緒に伝える。
## 3. 公開の準備
- 公開したいサイトのフォルダを確かめる（無ければ、何を作りたいか聞いて最小のものを作る）。
- git が入っているか確かめ、無ければ入れ方を案内する。フォルダを git で管理し、最初の記録（コミット）を作る。
- 必要なサービスのアカウントがあるか聞く。無ければ登録ページを開いて、ユーザーに登録してもらう。
- 確認：git log で最初の記録が1件以上あること。
## 4. 公開
- E（Vercel だけ）：Vercel CLI を入れて、フォルダで vercel コマンドを実行する（本番は vercel --prod）。
- E（Netlify だけ）：Netlify にログインし、Netlify Drop の画面にサイトのフォルダをドラッグしてもらう（ドラッグはユーザーに頼む）。
- A：GitHub に新しいリポジトリを作って push し、Settings の Pages を有効にする。表示されたURLを開いて確認。
- B：GitHub に push し、Netlify で「Import from Git」からそのリポジトリを選ぶ。フォームには netlify 属性をつける。
- C：GitHub に push し、Vercel で「Add New Project」からそのリポジトリを選ぶ。Supabase は別にプロジェクトを作り、接続情報は Vercel の環境変数に入れる（値は画面に出さない）。
- D：GitHub に push し、Cloudflare の Workers & Pages からリポジトリをつなぐ。Supabase は C と同じ。
- 各サービスのログイン・連携の承認はユーザーに押してもらう。本番に出す直前に必ず確認を取る。
- 確認：公開されたURLを開き、ページが表示されること。
## 5. 最後の報告
- 選んだ組み合わせと理由、公開URL、次に更新するときのやり方（GitHub に push すると自動で更新される、など）を短くまとめて伝える。
## ハマりどころ
- GitHub Pages で404になる → 公開元のブランチ・フォルダの設定と、index.html がその場所にあるかを確かめる。反映まで数分かかることもある。
- Vercel の無料プランで商用サイトを出そうとしている → Hobby プランは非商用向け。有料プランにするか、Cloudflare / Netlify を検討するよう伝える。
- 環境変数を入れたのに動かない → 入れたあとに再デプロイが必要。
