【お試し記事】v0を使ってWebサイトを作ってみよう
【お試し記事】v0を使ってWebサイトを作ってみよう
2026/7/20

今回は無料お試し記事として、「v0」というサービスを使って超お手軽にWebサイトを公開してみる手順を紹介します。

ぜひここでAIを使った開発のすごさを体験してみましょう!

v0とは

v0(ブイゼロ)は、Webサイトを作成することに特化したAIツールで、日本語の指示だけでWebサイトが作れて、ボタン一つで公開できる という特徴を持ったサービスです。

他にもWebサイトが作れるAIツールがあるのですが、

  • Webサイト作成に特化していて、リアルタイムでプレビューが見れる
  • 操作が簡単で、公開もボタン一つでできる
  • ソースコード(プログラム)のダウンロードができる
  • 無料で十分使える

といった特徴があるため、今回はv0を選んでみました!

公開までの流れ

ステップ1: アカウント作成

まずは、アカウント作成から始めます。 v0.app にアクセスしましょう。

画面右上の「Sign up」からアカウント作成画面に進んでください。

v0 Top

アカウント作成画面に遷移するので、任意の方法でアカウント作成をお願いします。

Sign up for v0

アカウント作成とログインが完了したらTOPが以下のような画面に変化します。画面中央の入力欄に指示を行うことでサイトを作成していきます。

v0 Top ログイン後

ステップ2: 日本語で指示をして送信

それでは実際に作ってほしいサイトの内容を指示してみましょう。内容はお任せですが、例えば以下のようなサイトはシンプルな構成なため、少ないやり取りで作ることができます。

  • 自分の自己紹介用サイト
  • 会社やビジネスのホームページ
  • SNSのリンク集サイト
  • 簡単なクイズやゲームができるサイト

今回は以下のように指示をしてみました。ちなみに、頭の中に具体的なイメージがある場合は、そちらを細かく伝えてあげることで、より自分のイメージに使いものが最初から出来上がりやすいです。

AIプログラミング学習コミュニティの紹介を行うサイトを作成してください

すぐに試したい方は、下のプロンプトをコピーして v0 の入力欄に貼ってみましょう。

v0に貼るサンプル指示
私の自己紹介サイトを作ってください。
・セクション: プロフィール / できること / SNSリンク / お問い合わせ
・配色: 明るく親しみやすい印象
・スマホでも見やすいデザイン
まずはシンプルな構成で作ってください。

【2025年10月補足】 最初の指示を行うとこのようなダイアログが出る可能性があります。 いったんは最小限の挙動だけ確認できれば大丈夫なので「Got it」を押して閉じていただいてOKです。

画像

しばらく待つとこのように指示した内容に沿ったサイトの見た目が作成されます。この時点ではプレビュー状態なので、まだサイトは公開されていません。

プレビュー画面

ステップ3: 内容を確認して修正指示

生成されたサイトに調整が必要な場合は、左下のテキストエリアから追加で指示を行えます。

例えば今回AI作ってもらったサイトではログインボタンがあるのですが不要だったので、消してもらうよう指示してみます。左下の入力欄に修正してほしい内容を入力してEnterを押してみましょう。

ログイン機能は不要なので削除してください。

画面左側で色々と変更が行われたあと、画面右側で変更内容が反映されるはずです。たまにこの時点でエラーが出ることがあるのですが、その場合は続けて エラーが出てるので直してください のような指示を行うと良いです。

修正対応

このようなことを繰り返して、自分の理想のサイトになるよう修正を行っていくだけでOKです!

(補足)クレジットに注意

サイトを新規に作成したり、修正を加えるたびにクレジットと呼ばれる「AIとのやり取りに使える回数」が減っていきます。画面右上のプロフィールアイコンをクリックして、「Monthly credits」という欄を確認してみましょう。

クレジットの確認方法

無料アカウントでは初期クレジットが「5」付与された状態でスタートするのですが、そこから少し減った数字が表示されるはずです。あまり細かい修正を繰り返しすぎると、このクレジットがどんどん減っていくのでたまに確認しながら進めていきましょう。

月をまたぐとリセットされるので、うまくやりくりしていけば無料のまま使い続けることも全然可能です。

ステップ4: 公開

最後にv0上で作成したサイトの公開方法について紹介します。

画面右上の「Publish」から「Publish to Production」をクリックしてみてください。

Publish

しばらく右上の「Publish」ボタンの部分がぐるぐるしているので待ちましょう。ポップアップは一度閉じてしまっても大丈夫で、「Publish」ボタンを押せば再度開くことが可能です。

Publishing...

1~2分ほど待って、ポップアップ画面上に「Visit Site」と書かれたボタンが表示されたら公開完了です!このボタンを押してサイトにアクセスしてみましょう。

Visit Site

別のページが開かれ先ほど作成したサイトが表示されているはずです。このURLを他の人に教えてあげればすでに誰でも見れる状態になっています。

公開サイト

ちなみに今回作成したサイトはこちらです。 https://v0-ai-programming-community-vert.vercel.app/

ステップ5: 公開オプションについて

先ほどの例ではそのまま公開しましたが、いくつかのオプションがあるので紹介していきます。

公開オプション

① URLの変更

こちらは公開するURLを変更する設定です。https://●●.vercel.app という形式は決まっているので、先頭の●●の部分を他のサイトと重複しない形で指定することができます。

画像

② 公開オプションの設定(有料プラン)

サイトの公開オプションを以下の2パターンで変更可能です。ただし、こちらは有料プランのみの機能なのでデフォルトでは「誰でも閲覧可能」という状態になります。

  • Public : 誰でも閲覧可能
  • Password Protected : 閲覧にパスワード入力が必要

公開オプション

③ アクセス状況の分析

「Analytics」というボタンを押すと、サイトのアクセスの状況を確認できる画面に遷移します。

よくあるサイト分析ツールと同じで、合計のアクセス数、どのページが見られているか、どこ経由でサイトに訪れたかの情報を確認することができます。

画像

やってみよう

ここまでの流れを、実際に手を動かして体験してみましょう。

作ったサイトを提出しよう

v0 で作って公開したサイトのURLを提出しましょう。提出した作品はみんなの制作ギャラリーに並びます。あなたの「初めて公開したサイト」をぜひシェアしてください!

提出するにはログインが必要です。ログインすると成果物をギャラリーに公開できます。

みんなの提出

まだ提出がありません。最初の1人になろう!