自分のアドレスで動く本物のサイトを、話すだけで作る
完成すると手に入るもの
世界中の誰でも開けるサイトのアドレス(https://...vercel.app)
Claude Pro 以上のプラン必須
バイブコーディングの頭脳です。まずは Claude Pro($20/月)で十分始められます。毎日たくさん作るなら Max プランが余裕があります。無料プランでも体験はできますが、すぐに上限に達します。
パソコン(Windows か Mac)必須
スペックはほとんど関係ありません。ネットにつながるノートパソコンで十分です。
Node.js(LTS 版)必須
コードを動かすエンジンです。nodejs.org で「LTS」と書かれた安定版を入れます。インストールはステップ1で一緒に行います。
VS Code(Visual Studio Code)必須
無料のコードエディタです。ここに Claude Code 拡張を入れて「AI と話しながらコーディング」します。Microsoft の Visual Studio(別の重い IDE)とは違うので名前に注意してください。
昔はサイト一つに HTML・CSS・デザイン・サーバを全部知る必要がありました。今は Claude に「カフェ紹介サイト作って」と言うだけです。
最も人気の Next.js を使います。作る間は自分のパソコンでプレビューし、完成したら Vercel という無料サービスでネットに公開します。
ヒント
もっと早く試したいなら、Claude に「1つの index.html だけの簡単な紹介ページを作って」と頼み、そのファイルをブラウザで開いても OK。このトラックはきちんとした版を扱います。
nodejs.org で「LTS」版を入れます(「次へ」を押し続ける)。
VS Code でターミナル → 新しいターミナル を開き、下で確認します。
$node -v$npm -v
v20.18.0 10.8.2
こう出れば成功
バージョン番号が2つ出れば成功です。値は違っても構いません。
エラーが出たら？
code.visualstudio.com から VS Code を入れます。拡張機能(四角4つ)で「Claude Code」を検索して入れます。
サイドバーの Claude → Sign in でログインすると Pro/Max が連携されます。これで日本語で頼めます。
ヒント
検索結果が複数なら、発行元(Publisher)が Anthropic のものを選びます。
作業したい場所(例:デスクトップ)でターミナルを開き、下を入力します。質問の多くはそのまま Enter(既定値)で OK。
TypeScript? Tailwind CSS? App Router? は全部 Yes 推奨。完了すると my-site フォルダができます。
$npx create-next-app@latest my-site
✔ Would you like to use TypeScript? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use App Router? … Yes Creating a new Next.js app... Success! Created my-site
こう出れば成功
「Success! Created my-site」が出れば成功です。
エラーが出たら？
できたフォルダに入り、開発サーバを起動します。下の2行を順に入力します。
「http://localhost:3000」が出たらブラウザで開きます。Next.js の初期画面が見えれば成功。この画面は作業中ずっと開いておきます。
$cd my-site$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
こう出れば成功
ブラウザに初期ページが出れば開発環境が完成です。
エラーが出たら？
Claude にサイトを説明します。例:「app/page.tsx を近所のカフェ『Move』の紹介ページにして。上に店名とスローガン、メニュー3つ、営業時間、地図リンク、下にインスタリンクを入れて、温かい茶色トーンで。」
保存するとブラウザが自動更新され結果が見えます。「メニューをカード型に」「ボタンをもっと丸く」「スマホでもきれいに」と直し続けます。
ヒント
参考サイトがあれば「○○みたいに整然と」と言うか、希望色の HEX(例:#6b4f3a)を伝えると意図通りになります。
エラーが出たら？
ネットに上げる前に、サイトが問題なく「完成版」になるか確認します。下を実行します。
「Compiled successfully」が出れば公開して安全。赤いエラーが出たら内容を Claude に見せ、直して再実行します。
$npm run build
✓ Compiled successfully ✓ Generating static pages Route (app) Size ┌ ○ / 5.2 kB
こう出れば成功
成功メッセージとページ一覧・容量の表が出れば OK です。
Next.js を作った会社が運営する Vercel が一番簡単です。下でツールを入れて実行します。初回なら登録案内(GitHub/Google でも可)が出ます。
質問はほぼ既定値(Enter)で進めます。終わると「Production: https://my-site.vercel.app」のような本物のアドレスが出ます。誰に送っても開けます。
$npm i -g vercel$vercel
Vercel CLI ? Set up and deploy? yes ? Link to existing project? no ✅ Production: https://my-site.vercel.app
こう出れば成功
https://...vercel.app が出て開ければ、あなたのサイトが世界に公開されました。
ヒント
vercel.com で GitHub リポジトリを連携して公開する方法もあります。コードを直すたび自動で更新されて便利です。
エラーが出たら？
おめでとうございます。本物のアドレスを持つサイトができました。
次は問い合わせフォーム、ブログ、多言語、独自ドメイン(例:mycafe.com)の連携まで同じ方法で頼めます。完成したサイトは Launchpad に上げてフィードバックをもらいましょう。
