バイブコーディングで作ったWebページを公開するには？ドメインとサブドメインについて解説

2025年7月13日

こんにちは。Web3に興味があって、AIをもっと使いこなしたい中高年を応援するWeb３とAIマニアじいじのko_sanです。

バイブコーディングでWebページやアプリが作れたけど、それをどうやって人に見せるの？「Vercel？GitHub Pages？ドメイン、サブドメインってなに？

そんな疑問にお答えします！今回は、バイブコーディングで自作したWebページを公開する方法と、ドメイン、サブドメインの意味と役割をわかりやすく解説します。

バイブコーディングとは何か？

まずはおさらいです。

バイブコーディング（Vibe Coding） とは、ChatGPTやClaudeなどのAIと対話しながら、コードを自分で書かなくてもアプリやWebページを作れる新しいスタイルの開発方法です。

こちらの記事も参照ください。

こうしてできあがった成果物（HTML、CSS、JavaScriptなど）を、「どうやって人に見せるか？」が次のステップです。

作ったページは、自分のパソコンにあるだけでは、他の人に見てもらえません。
インターネット上に公開するための場所が必要です。

ここで登場するのが Vercel や GitHub Pages という「無料のWebホスティングサービス」です。

サービス名	特徴
Vercel	AI系のWebアプリと相性が良く、設定も簡単。https://〇〇.vercel.appのようなURLで公開できる。
GitHub Pages	GitHubにコードを置けば、すぐにWebとして公開できる。https://ユーザー名.github.io/のようなURLでアクセス可能。

こちらの記事も参照ください。

作ったWebページを公開したら、次に考えたいのが**「URLをわかりやすくする」**ことです。

例えば、Vercelを使うと
https://myapp.vercel.app のようなURLが自動で使えます。

でも、ちょっと味気ないですよね？覚えにくいし、信頼感もあまりありません。

たとえば、
https://myaiapp.jp や https://sato-coach.com のようなURLが使えたらどうでしょう？

このように、独自ドメインを取得して紐づけることで、Webサイトの価値がぐっと高まります。

ちょっとしたお試しでWebページを作ってみる場合は、独自ドメインは不要で、無料のURLのサブドメインで十分ですが、LP（ランディングページ）などで実際に運用したい場合は独自ドメインを作るのがおすすめです。

ここで混乱しやすいのが、ホスティングサービスのVercelやGitHubPages提供のサブドメインと、自身で取得したドメインの下につくるサブドメインの違いです。

ホスティングサービスが提供するサブドメインは、　特徴として、所有するドメイン（Vercelなど）の一部を借りて使わせてもらっている形です。

これに対して、独自ドメインの下のサブドメインは、ご自身が所有する「独自ドメイン」（your-awesome-website.com）の下に、ご自身の意思で自由に名前をつけて作成するサブドメインです。

例えば、「ブログ」用に blog.your-awesome-website.com、「プロジェクトA」用に projectA.your-awesome-website.com のように、用途に応じて複数のサブドメインを自由に作成できます。

このサブドメインは、親となる独自ドメインを所有している限り、どのホスティングサービスで運用するかを自由に選べます。

SEOの観点からも、親となる独自ドメインの評価を引き継ぎやすいというメリットがあります。

[バイブコーディング]

　　↓ 作る

[Webページ（成果物）]

　　↓ 公開する場所が必要

[Vercel or GitHub Pages]

　　↓ アクセスURLができる

[独自ドメインを設定するともっと見やすく、覚えやすい！]