v0とは？使い方・料金・Webサイトを作る手順をわかりやすく解説

昨今、Web開発の手間を大幅に減らせるサービスとして注目されているのが、Vercelが提供するAI開発ツール「v0」です。
本記事では、v0の基本的な機能や料金体系を紹介した上で、日本語のプロンプトでカフェのWebサイトを作成・公開する手順を実践形式で解説します。

v0とは？AIでWebサイトやアプリを作れるVercelのサービス

v0は、Vercelが提供するAIを活用したWeb開発プラットフォームです。
作成したいWebサイトやアプリのイメージを文章で伝えると、AIがその内容をもとにUI（ユーザーインターフェース）やプログラムのコードを生成してくれます。

提供元のVercelは、Webサイトやアプリを公開するためのホスティングサービスを運営している企業で、Webフレームワーク「Next.js」の開発元としても知られています。

一般的なWeb開発では、開発者が自分でコードを書き、画面のレイアウトやデザインを調整していく必要があります。
一方、v0では、最初のコード生成からデザインの調整、機能の追加までをAIとの対話を通じて進められます。

また、単純なWebページだけでなく、データベースや外部サービスと連携するWebアプリケーションの開発にも対応しています。
v0は、アイデアを素早く形にしたい人や、開発の初期段階でプロトタイプを作成したい人などに適したサービスです。

v0でできること

v0では、主に次のような作業を行えます。

AIによるWebサイト・アプリの生成

作成したいものの目的や必要な機能、デザインのイメージなどを文章で入力することで、AIがWebサイトやアプリのコードを生成します。
文章だけでなく、参考画像や画面のイメージをもとにUIを生成することも可能です。

AIとの対話によるデザイン・機能の修正

最初に生成されたWebサイトがイメージと異なる場合は、チャット形式で追加の指示を出すことで修正できます。
一度に完成形を作る必要はなく、プレビューを確認しながら少しずつ調整できます。

コードの確認・直接編集

v0では、AIが生成したコードを確認することもできます。
生成されたコードは実際のWeb開発に利用できるもので、必要に応じて自分で編集したり、GitHubと連携して管理したりできます。

v0は、Next.jsやReact、TypeScript、Tailwind CSSなどの技術を中心にWebアプリケーションを生成します。
そのため、生成されたコードをベースに、一般的な開発環境でさらに開発を進めることも可能です。

Vercelへのデプロイ・公開

v0はVercelと連携しているため、作成したWebサイトをそのままVercelにデプロイできます。
単なるコード生成ツールに留まらず、Webサイトやアプリの作成から公開までをまとめて支援するサービスとなっています。

料金と無料プランでできる範囲

v0には無料プランと有料プランが用意されています。
2026年11月時点で、公式料金ページに掲載されている主なプランは次のとおりです。

※料金は米ドル表記で、税金は別途かかります。
※料金や利用条件は変更される可能性があるため、最新の情報は公式サイトでご確認ください。

無料プランでも、以下の基本的な機能は利用可能です。

• AIによるWebサイトやアプリの生成
• Design Modeによる視覚的なデザイン編集
• GitHubとの連携
• Vercelへのデプロイ

特に、無料プランでもWebサイトの生成から公開まで試せる点は大きなメリットです。

ただし、無料プランには1日7メッセージという利用上限があり、AIによる生成や修正を繰り返すと、利用可能な範囲に達する場合があります。
また、生成処理にはクレジットが関係するため、複雑な開発や大規模な修正を行う場合は注意が必要です。

初めてv0を使う場合や、小規模なWebサイトを試作する程度であれば、まずは無料プランから始めるとよいでしょう。
一方、継続的に開発したい場合や、複雑なアプリケーションを作成したい場合は、有料プランも検討してみてください。

v0を使う準備（ログインと画面の見方）

v0を使い始める前に、ログイン方法と基本画面の見方を確認しておきましょう。
v0はブラウザ上で動作するサービスのため、ソフトのインストールや開発環境の構築は必要ありません。

Vercelアカウントでv0にログインする

まずは、v0の公式サイトにアクセスします。

v0には、Vercelアカウントを使ってログインします。
Vercelアカウントを既に作成したことがある方は、そのアカウントでログインできます。
作成時にGoogleやGitHubなどで認証した場合は、同じ方法でログイン可能です。

アカウントが未作成の場合は、画面下部の「Sign Up」から作成画面に移り、任意の認証方法でアカウントを作成してください。

v0の基本画面の見方

v0にログインすると、以下のHome画面が表示されます。

新しくWebサイトやアプリを作成する場合は、画面中央のプロンプト入力欄に作りたいものの内容を入力して送信することで作成を開始できます。
作成済みのプロジェクトや、中断したチャットを再開して編集したい場合は、左側のメニューにある「Drafts」や「Projects」から選択可能です。

v0では、プロジェクト単位で開発内容を管理でき、同じプロジェクトに複数のチャットを関連付けることもできます。
作成したWebサイトを継続的に修正したい場合は、プロジェクトを整理しておくと便利です。

【実践】日本語プロンプトでカフェのWebサイトを作る

ここからは、実際にv0を使ってWebサイトを作成してみましょう。
今回は、架空のカフェ「Cafe Lumiere」を題材に、店舗の紹介やメニュー、アクセス情報などを掲載したWebサイトを作成します。

プログラミングの知識がなくても進められるように、最初のプロンプト入力からプレビューの確認、デザインの修正、コードの確認まで順番に解説します。

プロンプトを入力してサイトを生成する

まずはv0にログインし、新しいチャットを開始します。
画面中央にあるプロンプト入力欄に、作成したいWebサイトの内容を入力しましょう。

今回は、カフェの店舗紹介サイトを作成するため、次のようなプロンプトを使用します。
v0は日本語の指示にも対応しているので、作りたいサイトの内容をそのまま日本語で書けばOKです。

お洒落で落ち着いた雰囲気のカフェのWebサイトを作成してください。
店舗名は「Cafe Lumiere」です。

以下の内容を掲載してください。

・トップページ
　店舗名とキャッチコピーを大きく表示する
　カフェの雰囲気が伝わるメイン画像を配置する

・コンセプト
　店舗の特徴やこだわりを紹介する

・メニュー
　コーヒー、紅茶、スイーツなどを画像付きで紹介する
　それぞれの商品名と価格を表示する

・店舗情報
　営業時間、住所、定休日を掲載する

・アクセス
　店舗へのアクセス方法を紹介する

・お問い合わせ
　お問い合わせボタンを設置する

デザインは、ベージュやブラウンを基調としたナチュラルで温かみのある雰囲気にしてください。

お洒落で落ち着いた雰囲気のカフェのWebサイトを作成してください。
店舗名は「Cafe Lumiere」です。

以下の内容を掲載してください。

・トップページ
　店舗名とキャッチコピーを大きく表示する
　カフェの雰囲気が伝わるメイン画像を配置する

・コンセプト
　店舗の特徴やこだわりを紹介する

・メニュー
　コーヒー、紅茶、スイーツなどを画像付きで紹介する
　それぞれの商品名と価格を表示する

・店舗情報
　営業時間、住所、定休日を掲載する

・アクセス
　店舗へのアクセス方法を紹介する

・お問い合わせ
　お問い合わせボタンを設置する

デザインは、ベージュやブラウンを基調としたナチュラルで温かみのある雰囲気にしてください。

プロンプトでは、店舗名や掲載したいページの内容、デザインの雰囲気などを箇条書きで具体的に伝えています。
プロンプトの書き方のコツは、記事後半のプロンプト作成ツールもあわせて参考にしてください。

送信するとAIによるコードの生成が始まり、完了すると以下のように画面上にプレビューが表示されます。
今回の例では、生成が完了するまでに約3分かかりました。
作成したWebサイトやアプリの動作は、このプレビュー画面で確認できます。

プレビューで仕上がりを確認する

Webサイトの生成が完了し、プレビュー画面が表示されたら、実際の仕上がりを確認しましょう。
主に、次のポイントをチェックします。

AIが生成した画像や文章は、必ずしも事前に想定していたイメージと合致するとは限りません。
気になる部分があれば、次に紹介する方法で修正しましょう。

また、Webサイトはパソコンだけでなく、スマートフォンから閲覧されることも想定する必要があります。
プレビュー画面のデバイス切り替え機能を使い、スマートフォンでの表示も確認しておきましょう。

ボタンやリンクがある場合は、実際にクリックして動作を確かめておくと安心です。

追加の指示でサイトを修正する

最初に生成されたWebサイトがイメージと異なる場合は、チャットエリアから追加のプロンプトを送信して修正できます。
変更したい部分と具体的な内容を伝えることで、AIが既存のWebサイトを修正してくれます。

今回は、背景の色調とヘッダーの動きを変更するため、次のプロンプトを送信しました。

全体の色調をホワイトベースに変更してください。
ナチュラルで温かみのある雰囲気を残しながら、背景のトーンを淡い色を中心にまとめてください。

スクロール時に上部メニューが隠れないように、ヘッダーを固定するよう変更してください。

全体の色調をホワイトベースに変更してください。
ナチュラルで温かみのある雰囲気を残しながら、背景のトーンを淡い色を中心にまとめてください。

スクロール時に上部メニューが隠れないように、ヘッダーを固定するよう変更してください。

修正後は再びプレビューを確認し、意図した内容になっているかチェックしましょう。
画像の例では、背景が白〜淡いアイボリー中心のトーンに変わり、スクロールしてもヘッダーが上部に残るようになっています。

なお、一度に多くの変更を指示すると、意図しない部分まで変更されることがあります。
ヘッダーやメニューなど、対象を絞って指示を出すと、変更内容を確認しやすくなります。

Design Modeで文字や色を直接修正する

v0には、生成したWebサイトのデザインを視覚的に調整できる「Design Mode」が用意されています。
通常のチャットでは、変更したい内容を文章で説明する必要がありますが、Design Modeではプレビュー上の要素を直接選択して編集できます。

プレビュー画面右上の「Edit」をクリックし、編集したい要素を選択すると、右側のパネルでフォントや文字サイズなどを調整できます。

Design Modeでは、主に以下の内容を調整できます。

• 文字の大きさやフォント
• 文字色や背景色
• 要素の配置や余白
• ボタンのデザイン
• コンテンツのサイズやスタイル

チャットで細かな変更を何度も依頼するよりも、プレビューを見ながら直接調整した方が効率的なケースもあります。
ただし、最新のプレビュー環境を使用する必要があるなど、Design Modeを利用するには一定の条件があるため、注意が必要です。

生成されたコードを確認・編集する

v0では、AIが生成したWebサイトのプログラムを直接確認・編集することもできます。
画面上部のタブを「App Preview」から「Code」に切り替えると、プロジェクト内のファイル一覧やソースコードを確認できます。

画像の例では、トップページの内容が「app/page.tsx」というファイルに記述されており、メニュー名や価格などのテキストもコードの中で確認できます。

プログラミングの知識がある場合は、直接コードを書き換えることで、AIへの指示だけでは難しい細かな調整も行えます。
また、コードエディターには構文の色分けや検索機能なども用意されています。

【実践】完成したサイトを公開する

Webサイトが完成したら、インターネット上に公開してみましょう。
v0では、GitHubとの連携やサーバーの準備をしなくても、ボタン操作だけで公開できます。

Publishでvercel.appのURLに公開する

Webサイトのデザインや内容が完成したら、Vercelにデプロイして公開します。
デプロイとは、作成したWebサイトやアプリケーションをサーバーに配置し、インターネット上からアクセスできる状態にすることです。

v0では、画面右上にある「Publish」ボタンから公開作業を進められます。
公開範囲（Visibility）やドメインを確認してから「Publish」をクリックすると、デプロイが開始されます。

ドメインには「〇〇.vercel.app」形式のURLが割り当てられ、画像の例では「cafe-lumiere-sigma.vercel.app」となっています。
初回公開の場合は、デプロイの設定前にプロジェクトの作成が行われます。
また、公開範囲は利用プランや設定によって選択肢が異なる場合があるため、注意が必要です。

デプロイが無事に完了すると、WebサイトにアクセスするためのURLが発行されます。
ブラウザで該当のURLにアクセスし、動作に問題がないかを再度確認しておきましょう。

v0のプレビュー画面で表示できていても、公開環境ではエラーが発生する場合があります。
そのため、公開後の動作確認も重要です。

修正内容を公開サイトに反映する

Webサイトは、一度公開したら終わりではありません。
実際に表示を確認してみると、文章やレイアウトを変更したくなったり、画像を差し替えたくなったりする場合があります。
また、サイトを継続的に運営する場合は、状況に応じて機能の追加や内容の修正が必要になることもあります。

v0では、公開後もチャットやコード編集を通じてWebサイトを修正できます。
修正が終わったら、画面右上の「Publish」をクリックしてデプロイ設定を開き、「Update」ボタンを押しましょう。
再度デプロイが行われ、修正内容がサイトに反映されます。

新しいデプロイが完了すると、既存の公開URLに修正内容が反映されます。
下の画像は、トップページのキャッチコピーを「やさしい余白を。」から「やさしい時間を。」に修正して反映した例です。
サイトにアクセスし、変更内容が正常に反映されていればOKです。

v0をうまく使うコツと注意点

v0は、自然言語による指示だけでWebサイトやアプリを作成できる便利なサービスですが、必ずしも最初から理想どおりの成果物が生成されるとは限りません。
効率よく開発を進めるためには、以下のポイントを押さえておくことが大切です。

プロンプトは具体的に記述する

v0をうまく活用するために重要なのが、プロンプトの内容です。
AIにプロンプトを送る際は、次のような情報を含めてより具体的に指示すると効果的です。

• Webサイトの目的
• 想定する閲覧者
• 必要なページやコンテンツ
• 使用したい色やデザイン
• 画像やボタンの配置
• スマートフォンへの対応

また、参考となるWebサイトや画像がある場合は、それらを提示することでイメージを共有しやすくなります。

以下のツールでは、項目を入力・選択するだけで、これらの情報を盛り込んだv0向けのプロンプトを作成できます。

大きな機能は段階的に追加する

複雑なWebサイトやアプリを作成する場合は、最初からすべての機能を実装しようとしないことも重要です。
一度のプロンプトで多くの機能をまとめて指示すると、意図しない実装や不具合が発生する可能性があります。

そのため、デザインの調整、機能の追加、データベースとの連携といったように、段階を細かく分けて開発すると、効率的に作業を進められます。
小さな単位で開発することで、問題が発生した場合も原因を特定しやすくなります。

AIが生成したコードを必ず確認する

AIによって生成されたコードの内容が、必ずしも正しいとは限りません。
特に、複雑な処理や外部サービスとの連携を行う場合は、意図しない実装やセキュリティ上の問題が含まれる可能性があります。

生成したコードをそのまま本番環境で利用するのではなく、コードレビューや動作確認を行うようにしましょう。

生成された画像や文章の権利・正確性を確認する

Webサイトに掲載する画像や文章などもAIによって生成できますが、必ずしも実際の情報と一致するとは限りません。
特に商用目的で利用する場合は、必ず事前に内容を確認し、必要があれば正しい情報に差し替えるようにしましょう。

今回のカフェサイトでも、住所や営業時間はAIが作成したサンプル情報のため、実際に使う場合は本物の店舗情報に置き換える必要があります。
また、画像やロゴなどを利用する場合は、利用条件や著作権にも注意が必要です。

各プランの利用制限を意識する

利用するプランごとに、AIへのメッセージ送信回数やクレジットの利用制限が設定されています。
特に無料プランでは、無駄なやり取りを減らすために、必要な情報を整理してからプロンプトを送ることが大切です。

v0に関するよくある質問

v0はプログラミング初心者でも使えますか？

はい。
v0は自然言語による指示からWebサイトやアプリを生成できるため、プログラミング初心者でも利用できます。
基本的なWebサイトであれば、コードを直接書かなくても、プロンプトの入力やDesign Modeによる編集で作成可能です。

ただし、複雑な機能の実装や不具合の修正、セキュリティ対策などを行う場合は、プログラミングの知識が必要になることもあります。

日本語のプロンプトにも対応していますか？

はい。
日本語で指示を入力してWebサイトやアプリを生成できます。
本記事で紹介したカフェのWebサイトも、すべて日本語のプロンプトで作成しています。

v0で作成したWebサイトは商用利用できますか？

商用目的のWebサイトを開発することは可能です。
ただし、v0やVercelの利用規約に加えて、使用する画像や外部ライブラリなどのライセンスも確認する必要があります。

v0で作成したWebサイトをVercel以外で公開できますか？

はい、可能です。
v0で生成したコードは一般的なWeb開発で利用できるコードのため、コードをエクスポートしてローカル環境に取り込み、別のホスティングサービスにデプロイすることもできます。

ただし、Next.jsなどのフレームワークや、利用している外部サービスの構成によっては、公開先に合わせた設定変更が必要になります。
Vercelとの連携を前提とした機能が含まれることもあるため、別のサービスを利用する場合は注意してください。

v0と通常のプログラミングによる開発は何が違いますか？

大きな違いは、コードを書く作業をAIに任せられる点です。
開発する内容によっては、コーディングを一切行うことなくWebサイトを作成することもできます。

ただし、プログラミングが完全に不要になるわけではなく、細かな仕様の調整や複雑な機能を実装する際には、コーディングが必要となるケースもあります。

まとめ

v0は、自然言語による指示からコードを生成できるだけでなく、Design Modeによる視覚的な編集や、コードの直接編集にも対応しています。
本記事のポイントは以下のとおりです。

• v0は、日本語の指示からWebサイトやアプリのコードを生成できるVercelのAI開発ツール
• 無料プランでも、サイトの生成からVercelへの公開まで試せる（1日7メッセージまで）
• 修正は「追加のプロンプト」「Design Mode」「コードの直接編集」の3通りで行える
• 公開後も「Publish」→「Update」で修正内容を公開サイトに反映できる

まずは無料プランで簡単なWebサイトを作成し、AIによる開発の便利さを体験してみるとよいでしょう。

ITスキルの習得方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。