「Webサイトを作りたいけど、コードは書けない」。そんな人が今やるべきことは、エンジニアになることではなく、AIを使うことだ。この記事では、v0・Vercel・Cursorという3つのツールを使って、コード経験ゼロから自分のWebサイトを公開するまでの道筋を、ステップごとに案内する。
この記事で「できるようになること」
この記事を読み終えると、こんな状態になっている。
- 自分の名前やブランド名が入ったURL（例: yourname.vercel.app）でアクセスできるWebサイトが手元にある
- 「ここの色を変えたい」「文章を差し替えたい」を自分でできるようになっている
- 次に何かを作るとき、スタート地点がわかっている
使うのは3つのツールだけだ。まずはざっくり全体像をつかんでほしい。料理に例えると、こんな役割分担になる。
| ツール | 役割 | 料理での例え | 料金 |
|---|---|---|---|
| v0（ブイゼロ） | テキストの指示からWebサイトのコードを自動生成するAI | レシピを考えてくれるAIシェフ | 無料枠あり（詳細は公式参照） |
| Vercel（バーセル） | 生成されたサイトを世界中にインターネット公開するプラットフォーム | 料理をお客さんに届けるレストラン | 個人利用は無料 |
| Cursor（カーソル） | AIが常駐するコードエディタ。日本語でコードを修正できる | 味を微調整できるキッチン | 無料プランあり（Proは月20ドル） |
料理の流れに当てはめると、「シェフ（v0）がレシピと料理を作り → レストラン（Vercel）がお客さんに届け → キッチン（Cursor）で味を調整する」というイメージだ。この3つはそれぞれ独立したサービスだが、連携がうまく設計されており、初心者でも詰まりにくい。
準備するもの
作業を始める前に、手元に揃えておくものを確認しておこう。
必要なもの
GitHubアカウントの作り方（5分でできる）
GitHubはコードを保存・管理するためのサービスだ。Dropboxの「コード専用版」と思ってもらえばいい。v0で作ったコードを保存し、Vercelに渡し、Cursorで編集するための「共通の保管場所」として機能する。
| 手順 | 操作 |
|---|---|
| 1 | github.com にアクセス |
| 2 | 「Sign up」をクリックしてメールアドレスを入力 |
| 3 | ユーザー名・パスワードを設定 |
| 4 | メールに届いた確認コードを入力 |
| 5 | アカウント作成完了 |
以上で準備は終わりだ。所要時間は5分ほど。難しい設定は何もない。
Step 1──v0で「こんなサイトが欲しい」と伝える
v0とは何か
v0は、Vercel社が提供するAIツールで、「こんなサイトが欲しい」と日本語（または英語）で書き込むだけで、Webサイトのコードを自動生成してくれる。エンジニアが何日もかけて書くコードを、数秒で出力する。
アクセスはここから: v0.dev
GitHubアカウントでログインすれば、すぐに使い始められる。
日本語プロンプトで指示を出す
画面中央にテキスト入力欄がある。ここに「こんなサイトが欲しい」を普通の言葉で書き込む。
技術的な知識は一切いらない。「丁寧に話しかける感じ」で書くのがコツだ。
以下に、目的別のプロンプト例をまとめた。
| 目的 | プロンプト例 | ポイント |
|---|---|---|
| ポートフォリオサイト | 「フリーランスのグラフィックデザイナーのポートフォリオサイトを作ってください。名前はYamada Hana、作品一覧と問い合わせフォームがあるシンプルなデザインで」 | 職種・名前・欲しい機能を具体的に書く |
| カフェのLP（ランディングページ） | 「東京・下北沢にある小さなカフェのホームページを作ってください。ナチュラルで温かみのある雰囲気で、営業時間・メニュー・アクセスマップを載せたい」 | 場所・雰囲気・掲載内容を伝える |
| 個人ブログ | 「旅と読書が好きな会社員の個人ブログトップページを作ってください。最新記事一覧とプロフィール欄があるもので、落ち着いたシンプルなデザインにしたい」 | 発信テーマ・構成・デザインの方向性を書く |
生成結果の見方
プロンプトを送信すると、画面の右側にWebサイトのプレビューが表示される。左側にはコードが表示されているが、今は気にしなくていい。プレビューだけ見ればOKだ。
「なんか違う」と感じたら、追加で指示を重ねられる。
- 「背景色をもっと明るくして」
- 「フォントをもっと大きくしてほしい」
- 「ヘッダーにロゴが入るスペースを作って」
チャット形式で会話を続けるように修正指示を出すと、AIがその都度コードを更新してくれる。「完璧じゃなくてもいい、まずは出してみる」という感覚で使うのが、v0をうまく使うコツだ。
プレビューが思ったのと違うとき
| 状況 | 対処法 |
|---|---|
| デザインの方向性がズレた | 「もっとミニマルな（シンプルな）デザインにして」と具体的に伝え直す |
| 英語で出力された | 「すべての文章を日本語にしてください」と追加で指示する |
| レイアウトが崩れて見える | 「スマホでも見やすいレスポンシブデザインにして」と伝える |
| 何度やっても気に入らない | 「最初からやり直して」と打ち込み、プロンプトを書き直す |
Step 2──Vercelでそのまま世界に公開する
「Deploy」ボタンを押す
v0でサイトが完成したら（完璧でなくていい）、次のステップに進む。画面上の「Deploy」ボタンを押すだけで、Vercelと自動で連携してサイトが公開される。
公開までのステップはこうだ。
| ステップ | 内容 | 所要時間 |
|---|---|---|
| 1 | v0の「Deploy」ボタンをクリック | 数秒 |
| 2 | Vercelのアカウント連携画面が開く（初回のみ） | 1〜2分 |
| 3 | GitHubアカウントでVercelにログイン | 数秒 |
| 4 | プロジェクト名を入力（URLの一部になる） | 数秒 |
| 5 | 「Deploy」をクリック | 数秒 |
| 6 | ビルド（サイトの準備作業）が始まる | 1〜3分 |
| 7 | URLが発行され、世界に公開される | 完了 |
URLが届いた瞬間
デプロイが完了すると、画面に yourproject.vercel.app という形式のURLが表示される。これをクリックすると、たった今自分が作ったWebサイトが、世界中どこからでも見られる状態になっている。
スマホに送って確認してみてほしい。「これ、自分が作ったやつだ」という感覚は、初めてのときは少し特別に感じられるはずだ。
独自ドメインについて
yourname.vercel.app というURLではなく、yourname.com のような独自ドメインを使いたい場合は、別途取得が必要だ。ドメインの取得・設定はVercelの管理画面から操作できるが、この記事の対象外のため次回に譲る。まずは .vercel.app のURLで全体の流れをつかんでほしい。
Step 3──Cursorで「ここだけ直したい」を叶える
Cursorとは何か
Cursor（カーソル）は、AIが住んでいるコードエディタだ。コードエディタとは、コードを書いたり編集したりするための専用アプリのこと。Cursorの特徴は、「このテキストの色を青に変えて」「ここにボタンを追加して」のような日本語の指示を受け取り、自動的にコードを修正してくれる点だ。
自分でコードを読む必要はない。「AIに頼む」という感覚で操作できる。
インストールと初期設定
| 手順 | 内容 |
|---|---|
| 1 | cursor.com にアクセスしてダウンロード |
| 2 | インストーラーを実行（WindowsもMacも通常のアプリと同じ手順） |
| 3 | 起動後、GitHubアカウントでログイン |
| 4 | プランを選択（最初は「Hobby」無料プランでOK） |
GitHubからプロジェクトを開く
v0でDeployしたとき、コードはGitHubに自動的に保存されている（GitHubのリポジトリ、と呼ぶ）。Cursorでそのリポジトリを開くことで、自分のサイトのコードにアクセスできる。
手順はこうだ。
| 手順 | 操作 |
|---|---|
| 1 | Cursorを開き、「Clone Repository」を選択 |
| 2 | GitHubと連携するボタンをクリック |
| 3 | v0で作ったプロジェクト名を選んでクローン（コピーをローカルに作る）する |
| 4 | フォルダを開いてプロジェクトを展開する |
AIチャットで修正を指示する
プロジェクトが開いたら、画面右側にAIチャット欄（Cmd+Lで開く）が現れる。ここに日本語で修正指示を入力するだけでいい。
修正指示の例を見てみよう。
| やりたいこと | チャットへの入力例 |
|---|---|
| 色を変えたい | 「ヘッダーの背景色を白から薄い黄色（#fffde7）に変えてください」 |
| テキストを変えたい | 「トップページの見出しを『Hello!』から『ようこそ、私のサイトへ』に変えてください」 |
| 要素を追加したい | 「フッターにInstagramのリンクを追加してください。URLは https://... です」 |
| 不要なものを消したい | 「右上のボタンを削除してください」 |
AIが修正案を提示し、「Apply」ボタンを押せばコードに反映される。気に入らなければ「元に戻して」と入力すればいい。
変更をVercelに反映する
Cursorで修正したコードをVercelに反映するには、GitHubに変更を送る（プッシュ、と呼ぶ）操作が必要だ。
| 手順 | 操作 |
|---|---|
| 1 | Cursorの左サイドバーにある「Source Control」アイコンをクリック |
| 2 | 変更内容に簡単なメモ（例: 「ヘッダーの色を変えた」）を入力 |
| 3 | 「Commit & Push」をクリック |
| 4 | 数分後、Vercelが自動でビルドし直し、URLに反映される |
一度この流れを体験すると、「修正する → 確認する」のサイクルが自分のものになる。
つまずきやすいポイントQ&A
Q. 英語が出てきて怖い
A. v0でもVercelでもCursorでも、英語表示のUIが出てくることがある。怖く感じるのは自然だが、よく出てくるボタンは限られている。
| 英語 | 意味 |
|---|---|
| Deploy | 公開する |
| Build | 準備する |
| Clone | コピーする |
| Commit | 変更を記録する |
| Push | GitHubに送る |
| Preview | プレビューを見る |
最初はこの6つだけ覚えておけば十分だ。
Q. GitHubって何？なぜ必要？
A. GitHubはコードを保存・管理するためのクラウドサービスだ。「コード専用のDropbox」と思えばいい。v0で生成されたコードはGitHubに保存され、VercelはそのGitHubからコードを読み取って公開する。CursorもGitHubからコードを取得して編集する。3つのツールをつなぐ「共通の保管場所」として必要なサービスだ。
Q. お金はかかる？
A. 今回使うすべてのツールには無料プランがある。
| ツール | 無料の範囲 | 課金が必要になるとき |
|---|---|---|
| v0 | 無料枠あり（詳細は公式参照） | 大量に生成したいとき |
| Vercel | 個人・趣味利用は無料 | 商用利用・大量アクセスが想定されるとき |
| Cursor | Hobby無料プラン | より多くAIを使いたいとき |
| GitHub | 個人の公開・非公開リポジトリ共に無料 | チームでの高度な利用時 |
個人のポートフォリオや趣味のサイト程度であれば、無料の範囲で十分まかなえる。
Q. スマホだけでできる？
A. 残念ながら、今回紹介した手順（特にCursorのインストールとGitHubの操作）はPCがないと難しい。v0でのサイト生成とVercelでの公開はスマホのブラウザからも技術的には可能だが、快適ではない。パソコンで作業することを強くすすめる。
Q. 作ったサイトは消える？
A. VercelとGitHubにコードが保存されているため、自分で削除しない限りサイトは残り続ける。無料プランでも有効期限はない。GitHubのアカウントとVercelのアカウントを維持している限り、サイトは公開され続ける。
次のステップへ
この記事でカバーしたのは「サイトを作って公開する」という、いわばスタートラインに立つところまでだ。ここから先には、こんなテーマが待っている。
- 問い合わせフォームを追加して、訪問者からメッセージを受け取る
- ブログ機能を追加して、記事を投稿できるようにする
- 独自ドメイン（yourname.com）を設定して、プロフェッショナルな印象を作る
- データベースを連携して、動的なWebアプリに進化させる
コードを書かないままサイトを持てるようになった今、次に広がるのは「どんなサービスを作るか」という問いだ。WebサイトはSNSと違って自分の「場所」になる。その場所で何を届けるかは、あなた次第ではないだろうか。
出典・参考
- v0 公式サイト: https://v0.dev（Vercel）
- Vercel 公式ドキュメント: https://vercel.com/docs（Vercel）
- Cursor 公式サイト: https://www.cursor.com（Anysphere）
- GitHub 公式サイト: https://github.com（GitHub, Inc.）
- Vercel Hobby Plan 料金ページ: https://vercel.com/pricing（2026年3月時点）
- v0 Pricing: https://v0.dev/pricing（2026年3月時点）
