AIでプロ並みのWebサイトを作成｜v0の使い方【コピペOKのプロンプト付き】

前の記事で、v0の概要を説明しました。

v0は、作りたいサイトを言葉で指示するだけで、おしゃれなWebサイトを自動で作ってくれます。

やり方はとても簡単です。

1. アカウントを作る

まずは、v0.app にアクセスし、「Sign Up」をクリックしてアカウントを作成します。

Vercel・GitHub・Googleなどのアカウントでログインすることも可能です。

アカウントを作らずに使うこともできますが、生成したサイトを保存できないので、最初にアカウントを作っておくのがおすすめです。

▲「Sign Up」をクリックしてアカウントを作成する

2. プロンプトを入力する

ログインすると、すぐにプロンプトを入力できる画面になります。左下のアカウントアイコンをクリックし「言語」で「日本語」にできます。

そして作りたいサイトのイメージを、できるだけ具体的に入力してください。

v0はHTMLファイルではなくReactのコードを生成するので、「5つのファイルを出力して」などの指示は不要です。

以下のようなプロンプトでも大丈夫です。

東京・代官山にある上品なマカロン専門店「Macaron Shop」のWebサイトを作成してください。
- くすみピンクとアイボリーを基調に、ゴールドをアクセントにした、エレガントで洗練されたデザイン
- ヒーローセクションに美しいビジュアルと「ひとくちで、しあわせ色」というキャッチコピー
- ナビゲーションはホーム、商品紹介、店舗案内、アクセス
- 商品紹介セクションでは人気のマカロン（ピスタチオ、ローズ、フランボワーズ、ダークショコラ、レモン、塩キャラメルなど）をカードで美しく表示
- 各カードをクリックすると詳細モーダルが開く
- こだわりのセクション（厳選素材、ていねいな手仕事、ギフトにうれしい上品なパッケージ）
- 全体的に高級感がありつつ親しみやすい雰囲気
- Tailwindとshadcn/uiスタイルでモダンに
- レスポンシブ対応

なお、このプロンプトは、1ページ構成のサイトになります。

商品紹介や店舗案内を別々のページに分けたい場合は、プロンプトに次の2行を加えてください。

- TOP・商品紹介・店舗案内・アクセスを、それぞれ別ページ（別URL）として作成し、ヘッダーのナビゲーションから各ページへ移動できるようにする
- 全ページ共通のヘッダーとフッターをつける

※無料プランの場合は、1日に送れるメッセージ数（7件まで）と、月$5分のクレジットという上限があります。何度も作り直しができないので注意してください。

3. プレビューを確認する

しばらくすると、v0が必要なコードを自動で生成し、画面にサイトのプレビューが表示されます。

はじめての人は驚くと思います。

▲プレビューが表示される

4. 修正する

気になるところは、プロンプトで指示するだけで直せます。

たとえば、「ヘッダーの色をもっと淡いピンクにして」「商品を3列のカードで並べて」といった具合です。

プロンプト入力欄の「＋」から「Upload from computer」を選んで画像を追加し、「ヒーローエリアの画像を選択した画像に差し替えて」と入力すれば、写真を差し替えることもできます。

▲修正したい箇所があればプロンプトを入力する

途中でエラーが出た場合も、「エラーを直して」と伝えれば修正してくれます。

対話しながら少しずつ調整できますが、無料プランは1日に送れるメッセージ数に上限があるので、その範囲内での調整になります。

右上の「リロード」ボタンをクリックすると修正が反映されます。

▲画像を差し替えた

このように、修正も自分の言葉で入力すればやり直してくれます。

ただし、もっと細かく修正したい場合はCursorなどのツールを使うと便利です。

5. 公開する（Vercelにデプロイ）

デザインが決まったら、いよいよ公開です。

画面右上の「Publish」ボタンをクリックし、「Publish to Production」をクリックします。

▲「Publish」ボタンをクリックし、「Publish to Production」をクリック

しばらくするとVercelにデプロイされ、「https://〜.vercel.app」のような公開URLが発行されます。

「Visit Site」をクリックするとサイトが表示されます。

▲Visit Siteをクリックするとサイトが表示される

このように、サーバーの契約やファイルのアップロードが不要で、ここまで数クリックで完了するのがv0の魅力です。

6. 独自ドメインの使用

独自ドメインが使えるかが気になると思います。

発行されるのは「〜.vercel.app」というアドレスですが、自分の独自ドメイン（例：〜.com）をつなげることもできます。

設定はVercel側（

vercel.com

の管理画面）で行います。もちろん、ドメインの取得費用（年1,000〜3,000円程度）が別途かかります。

独自ドメインを設定する場合は、

Vercelにアクセスしてv0と同じアカウントでログイン
デプロイしたサイトを選択し、「Domains」の「＋」をクリックしてドメインを入力
DNSレコードの設定指示が表示されるので、ドメイン管理サービスの管理画面に登録 ※登録後、反映されるまで少し時間がかかります（数分〜数時間ほど）

まずはvercel.appのアドレスのまま試して、本格的に運用したくなったら独自ドメインという流れがおすすめです。

7. SEO対策について

「v0で作ったサイトは、検索で見つけてもらえるの?」と気になる方もいるでしょう。

v0が作るのはNext.jsという仕組みのコードです。

検索エンジンが中身を読み取りやすく、表示も速いため、SEOには向いています。

ただし、v0は「見た目」を作るのが目的なので、SEOに必要な設定までは自動では入りません。

とはいえ、基本的な対策ならプロンプトで可能です。

「ページにタイトルとメタディスクリプションを設定して、画像にalt、OGPを追加して」

と伝えれば入れてくれるので、コードを書く必要はありません。（※OGPの画像は自分で用意）

さらに細かく調整したい場合だけ、Cursorなどでコードを編集します。

また、商品紹介や店舗案内などを別ページに分けた複数ページ構成の方が、ページごとに検索で拾われやすくSEOには有利です。

そして最終的に順位を決めるのは中身なので、店名・地域・商品の特徴など、検索されそうな言葉で具体的に書き込むことが大事です。

8. Vercelで公開する際の注意点

手軽にサイトを公開できるv0ですが、公開する際にはいくつか注意点があります。

機密情報を載せない 公開したサイトは、URLを知られると誰でも見られる状態になります。個人情報や機密情報は絶対に載せないようにしてください。
無料プランは商用利用できない Vercelの無料プランは個人の非商用利用向けなので、実際にお店の本番サイトとして公開する場合は、有料プラン（Pro）を利用します。あるいは、商用利用が無料のCloudflare Pagesなどを使うかです。「作って公開できるか試してみる」という段階なら、無料のままで問題ありません。
掲載内容を十分に確認する AIが作った内容には、間違いが含まれることがあります。公開する前に、店名・価格・営業時間などの情報や、リンクがきちんと動くかを、細かくチェックしましょう。
画像を差し替える サンプル画像は仮のものです。実際に公開するときは、自分で撮った写真や商用利用が許可された画像に差し替えましょう。ネット上の画像を無断で使うと、著作権を侵害する場合があるので注意です。
公開をやめたいときは 無料プランには、公開から非公開へ切り替える機能がありません。公開をやめるにはサイトを削除します。 Vercelの画面でプロジェクトの「…」（三点リーダー）から「Settings」をクリック。最下部の「Delete Project」をクリックします。確認のために指定された文字を入力し「Delete Project」をクリックします。 v0側のデータは残っているので、再度公開も可能です。

v0を使えば、自然な言葉で指示するだけでプロ並みのサイトを作り、そのままインターネットに公開できます。

細かな調整は必要ですが「AIでここまでできるのか！」と驚くような体験ができるので試してみてはいかがでしょうか。