前の記事でGeminiでのコード生成を紹介しましたが、試した結果あまりよいのができなかったという人もいるかもしれません。

なぜなら、GeminiはWebデザイン専用ツールではないため、見た目の仕上がりが安定しにくいからです。

そこでぜひ試してほしいのが、「v0（ブイゼロ）」というAIツールです。v0は最初からきれいに整うように作られているので、コードを書かずに安定して美しいサイトを作れます。

使ったことがない方のために、2回に分けてv0の概要と使い方を紹介します。

1. v0とは？

v0は、アメリカのVercel社が提供しているAIツールです。

作りたいサイトを言葉で伝えると、React／Next.jsという仕組みのコードを自動で生成し、おしゃれなUIを作ってくれます。

デザインの土台に「Tailwind CSS」「shadcn/ui」という定番のツールを使っているので、最初から完成度の高い見た目になりやすいのが特長です。

もともとは「v0.dev」というアドレスでしたが、現在は「v0.app」にリニューアルされています。

▲ノーコードでおしゃれなサイトを作れる「v0」

2. v0で何ができるの？

v0は、「こんなサイトを作って」と言葉で伝えるだけで、プロのデザイナーが作ったような画面を自動で組み立ててくれます。主にできることは次の3つです。

• おしゃれなUI（見た目）を自動生成：ボタンやフォーム、商品カードなど、今風で洗練されたデザインを最初から作ってくれます。
• 複数ページの作成：ボタンやフォームといった単体のパーツだけでなく、トップページからお問い合わせページまで、複数のページがつながったサイト全体を作れます。
• プレビューと一発公開：AIが作った画面をその場で動かしてプレビューでき、ボタンひとつでネット上に公開（デプロイ）できます。

3. 料金システム

v0は無料で使い始められますが、利用量に応じた有料プランも用意されています。

無料プラン（Free）は$0で、毎月$5分の無料クレジットがもらえます。

Vercelへの公開やGitHub連携も使えますが、1日に送れるメッセージは7件までという制限があります。まずはお試しに、という人向けです。

有料プランは、チーム向けの「Team」が月$30（1ユーザーあたり）から。

さらに上位の「Business」（月$100／ユーザー）や、大企業向けの「Enterprise」（個別見積もり）があります。制限が緩和されて、使えるクレジットも増えます。

※料金やプランの内容は頻繁に変わるため、最新情報は必ず公式サイト（v0.app/pricing）で確認してください。

4. モデルの選び方（Mini / Pro / Max）

v0では、タスクの難しさに合わせてAIのモデルを切り替えられます。賢いモデルほどクレジットを多く消費するので、使い分けがコツです。

v0 Mini（軽量・低コスト） ちょっとした文字の修正や、シンプルなデザイン変更向け。クレジットの消費が少なく、動きも速いので、無料枠を節約したいときにおすすめです。

v0 Pro（標準） 新しいページを作るときや、一般的な機能を追加するとき向け。デザインの綺麗さとコストのバランスが最も優れていて、基本的にはこれを選べば間違いありません。

v0 Max（高性能） 複雑な仕組みや、最高のデザインを狙うとき向け。とても賢いですが、クレジットを多く消費します。ここぞという大仕事のときに使います。

このほか、Maxを高速にした「v0 Max Fast」もありますが、消費が大きいので無料枠での利用には注意が必要です。

迷ったら、まずはProを選ぶのがおすすめです。

5. GeminiやCursorとの違い

「v0は、Geminiとは何が違うの?」と思う方もいるでしょう。

Geminiは、HTML/CSSのコードを作ってくれるツールです。できあがったファイルは自分で保存し、サーバーにアップロードしてネットに公開します。

一方、v0は画面（サイトの見た目）そのものを作り、そのままネットに公開までできるツールです。動くサイトを手早く作りたいときに向いています。 簡単な編集はv0の中でもできますが、コードを細かくカスタマイズしたい場合は、開発ツールを併用すると便利です。

また、よく併用されるツールにCursorがあります。Cursorは、自分のパソコン上でコードをAIと一緒に編集できるツールです。「v0で土台をパッと作り、Cursorでこだわって仕上げる」という組み合わせ方ができます。

どれもAIを使ったツールですが、それぞれ得意分野や使う目的が違います。

6. 使うときの注意点

とても便利なv0ですが、初心者が最初につまずきやすいポイントがいくつかあります。

• 出力されるコードが「HTML」ではない

ひとつめは、出力されるのが「React（Next.js）」という仕組みのコードだということです。

HTMLファイルとは違い、ダウンロードしてダブルクリックでブラウザで開いたり、レンタルサーバーにアップロードしたりするだけでは表示できません。

表示や確認をするには、v0の画面上でプレビューするか、Vercelなどのサーバー環境に公開（デプロイ）する必要があります。

• 商用利用の制限

二つめは、公開に関する制限です。無料でVercelに公開したサイトは、基本的に「非商用（趣味やテスト用）」向けとなります。

作ったサイトでお金を稼いだり、ビジネス用のサイトにする場合は、v0やVercelの有料プランにするか、コードをダウンロードして「Cloudflare Pages」などの商用利用が無料で可能なサービスを利用する必要があります。

・AI学習をオフにする

デフォルトでは、入力したデータや生成されたデータがAIの学習に利用される可能性があります。Vercelのアカウント設定画面（https://vercel.com/account/settings）「Setting→General」にアクセスし、v0と同じアカウントでログインします。「Data Preferences」をオフにして「Save」をクリックです。

7. v0はこんな人におすすめ

• デザインに自信がないけれど、今風でかっこいいサイトを作りたい人
• 難しいプログラムの初期設定を飛ばして、とにかく早く形にしたい人
• 自分で作ったアイデアを、他の人にURLでサッと見せたい人

自分の言葉で指示するだけで、ここまでできるのがv0の魅力です。

実際の作り方は、次の記事で紹介します。