AIでWebサイトを完全無料で作成・公開する全手順｜AI駆動開発の始め方

この記事で分かること

Webサイトは、AI駆動開発で完全無料で作って、世界に公開できる。

2026年現在、これは誇張ではありません。この記事では、6年以上 Web 制作をしてきた 大森翔吾 が、AI 駆動開発で 0円 Webサイト公開 を実現する全手順を、プログラミング未経験の方にも分かるように解説します。

結論：使うのはこの3つだけ

サービス	役割	料金
Next.js	Webサイトを作るフレームワーク	無料
GitHub	作ったコードを保存するクラウド	無料
Vercel	Webに公開するサービス	Hobbyプラン無料（非商用利用限定・使用量上限あり、商用は Pro 以上）

これに AI 駆動開発ツール（Cursor または Google AI Studio）を加えるだけで、Webサイトが作れて公開できます。

なぜこの構成が最適解なのかは、別記事 AI駆動開発の技術スタック で詳しく解説しています。

ステップ1：Next.jsプロジェクトを作る

ノーコードではなく Next.js を選ぶ理由

「Wix」「STUDIO」などのノーコードツールも Web サイト作成には有効です。ただし AI 駆動開発で本気で作るなら、Next.js 一択です。

• 自由度が桁違いに高い
• 「〜で作りました」の透かしが入らない
• スケールしても破綻しない
• AI がこの言語を一番よく知っている

プロジェクトの作り方

パソコンのターミナル（Windows なら PowerShell）を開き、以下を入力。

npx create-next-app@latest

いくつかの質問に Enter で答えると、数分後に Next.js のテンプレートが完成します。あとは Cursor で開くだけです。

ステップ2：AI駆動開発でサイトを作る

Cursor を開いて、AI に依頼します。

例：お菓子屋さんの Web サイト

「日本のお菓子屋さんを始めるので、次のような Web サイトを作ってほしい。

• ショップ名：CAEN菓子店
• メニュー：商品一覧・ショップの思い・アクセス・お問い合わせ
• ブランドカラー：#3BBAD7
• 画像素材は public/images/ に置いてあります」

AI がファイルを横断して、商品一覧ページ・アクセスページ・お問い合わせフォームなどを実装してくれます。

違う箇所があれば、

「トップページのヒーロー画像をもう少し大きくして」

と指示するだけで修正されます。これが Vibe Coding の世界です。

ステップ3：GitHubに保存する

GitHub とは

GitHub は「エンジニア版 Google Drive」と思ってください。自分が書いたコードをクラウドに保存できるサービスです。

• 無料でアカウント作成
• 公開 / 非公開を選べる
• プロ（$4/月）だと機能が増える

僕（大森翔吾）は200以上のプロジェクトを非公開で保存しています。

保存の手順

1. GitHub で無料アカウント作成
2. 「New repository」でリポジトリ（保存場所）を作る
3. Cursor から GitHub にひも付ける（Cursor が案内してくれる）
4. コードを push（アップロード）

難しい操作は Cursor の AI が全部教えてくれます。「GitHub に push したい」と相談すれば OK。

ステップ4：Vercelで公開する

Vercel とは

Vercel は「ワンボタンで Web 公開 しようぜ」がコンセプトのサービスです。

• 複雑なサーバー設定なし
• GitHub との連携が最短
• Next.js を作った会社が運営（相性が最高）
• 個人開発範囲は基本無料

公開の手順

1. Vercel で無料アカウント作成
2. 「Import Git Repository」で GitHub とつなぐ
3. さっき作ったリポジトリを選ぶ
4. 「Deploy」ボタンを1回押す
5. 数分待つ
6. xxxx.vercel.app のような URL が発行される

これでWeb上にサイトが公開されました。友達にもお客さんにも見せられます。ここまでで 総費用0円。

サイトを更新するのも0円

AI 駆動開発でコードを書き換えて GitHub に push すると、Vercel が変更を検知して自動でデプロイし直してくれます。

• コード書く → push → 自動公開

このループが完全無料で回ります。

ステップ5：独自ドメインにしたい場合（任意）

xxxx.vercel.app ではなく yourshop.com のような独自ドメインにしたい場合は、別途ドメインを買います。

おすすめドメイン販売サイト

• ムームードメイン（年間900円〜）
• お名前.com

年額900円程度から買えるので、サブスク料金より圧倒的に安いです。

買ったドメインは Vercel の設定画面で数クリックで紐付けられます。

実際にかかる費用（まとめ）

項目	費用
Next.js	0円
GitHub（非公開リポジトリ含む）	0円
Vercel（個人開発範囲）	0円
Cursor	無料プランで可（Pro は月$20）
Google AI Studio（代替）	0円
合計（最小構成）	0円
独自ドメイン（任意）	年900円〜

重要：Vercel の Hobby（無料）プランは非商用利用限定 です。事業活動・収益目的のサイトは Pro プラン（月額20ドル〜）が必要になります。また Hobby には月次の利用量上限（Function Invocations、Edge Requests、転送量など）があり、超えると課金ではなく機能停止になります。個人のポートフォリオサイトや勉強用なら、基本 無料で運用し続けられます。

副業への発展

Web サイト制作は、副業として今でも需要が高いジャンルです。

• クラウドワークス
• ランサーズ
• ココナラ

これらで「ホームページ制作」を検索すると案件が常時山のように出てきます。

自分のポートフォリオサイト（これを Next.js + Vercel で作れる）を持っていれば営業でも強いですし、AI 駆動開発を使いこなせば 制作速度が3〜10倍 変わります。

詳しくは 独立・副業を考えているならAI駆動開発がノーリスク で。

関連する記事

• AI駆動開発の技術スタック｜Next.js × Supabase × Vercel
• Cursorとは？AI駆動開発の代表エディタ完全ガイド
• Google AI Studio で AI 駆動開発を始める方法
• 素養0でもAI駆動開発ならプログラミングできる体験談

AI駆動開発のご相談・お仕事のご依頼

株式会社CAEN（代表：大森翔吾）では、Next.js × Vercel 前提の Web サイト制作、AI 駆動開発による短納期ローンチ、社内向け AI 駆動 Web 制作レクチャーを承ります。

• お問い合わせ：info@caen.co.jp
• ポッドキャスト：AI駆動開発ラボ（stand.fm）
• YouTube：@aidd-lab
• X：@shogo_oomori

「AI 駆動開発で自社サイトを刷新したい」「スモールビジネス向けに安価でサイトを作ってほしい」など、お気軽にご相談ください。