Vercel v0でTodoアプリを作りながら学ぶ、基本機能と使い方

こんにちは、豊島です。

はじめに

v0はVercelが提供するテキストや画像からWebアプリケーションを生成できるAIツールです。
本記事では実際にTodoアプリケーションを作りながら、その機能を画像中心に解説します。（※2025年9月時点）

基本機能 Enhance Prompt〜アプリケーション作成まで

v0の初期画面

右上のメニューから言語を切り替え可能です。

早速Todoアプリを作っていきます。

せっかくなのでEnhance Prompt機能を使ってみます。
Enhance Prompt機能は入力したプロンプトを元に「言わずともよしなにやってほしいな〜」ということを補完してくれる機能です。

Enhanced Prompt前

todoアプリケーションを作成したいです

Enhanced Prompt後

Develop a comprehensive Next.js todo application that allows users to create, edit, and delete tasks. The application should feature a user-friendly interface with a clear layout for displaying tasks, including options to mark them as completed. Implement a filtering system to view tasks based on their status (all, active, completed) and ensure that the application supports user authentication for personalized task management. Additionally, consider incorporating local storage for saving tasks, enabling users to access their todo list across sessions. Aim for a responsive design that provides an optimal experience on both desktop and mobile devices.

日本語訳

包括的なNext.js Todoアプリケーションを開発し、ユーザーがタスクの作成、編集、削除を行えるようにします。アプリケーションは、タスクを表示するための明確なレイアウトを備えたユーザーフレンドリーなインターフェースを特徴とし、完了済みとしてマークするオプションを含める必要があります。ステータス（すべて、アクティブ、完了済み）に基づいてタスクを表示するフィルタリングシステムを実装し、パーソナライズされたタスク管理のためのユーザー認証をサポートするようにします。さらに、タスクを保存するためのローカルストレージの組み込みを検討し、ユーザーがセッションを超えてTodoリストにアクセスできるようにします。デスクトップとモバイルデバイスの両方で最適な体験を提供するレスポンシブデザインを目指してください。

そのまま入力して続けます。

v0は8月末に大規模アップデートがあり、エージェント機能が追加されました。
使っていて強く感じる特徴は、依頼したタスクを分解して可視化してくれる点です。今なにをしようとしているのか。次になにをするのか。これがひと目で分かるようになりました。

着々とタスクを進めています

左側のチャットを「チャット画面」、右側を「プレビュー画面」として解説を続けていきます（※公式の呼称ではありません）

今回はサクッと動作を確認したいため、プロンプトに記載していた認証機能を削除しておきます

（なにを思考してタスクを進めているかも確認できます）

完了したようです。
ちなみにコードの差分チェックはプレビュー画面のアイコンから確認できます。

アプリケーションが確認できました！
早速タスクを入力してみます

タスクを作成できました

もちろん編集も可能です

追加でいくつかタスクを作ってみました。

・・・このタスク、どうやって完了にするんだ・・・？

と思ったのでv0に聞いてみます。

どうやらチェックボックスがあるようです。

ここでDesign Modeを利用してみましょう
チャット画面の入力フォーム近くにある「Design」ボタンを押すと左側のチャット画面が「Design Mode（デザインモード）」に切り替わります

Design Modeだと右側プレビュー画面の要素を選択できるようになり、チェックボックスを見つけることができました。

ここで要素の色や大きさを細かい単位を編集できます。ついでに分かるように色を変えておきます。

生成AI（主にテキスト指示）でUIを修正するとき「ここを変えてほしくなかったんだよな...」という経験があると思います。
v0はこのDesign Modeから細かい調整が可能な点と、以下のようにファイル単位でLock（プロンプトの変更を受けない）が可能です。

色を変えたことでタスクを完了することができました！

以上のように、v0はテキスト（や今回は紹介しなかったですが、画像）から静的なWebページだけでなく、動きのあるWebアプリケーションを生成できます。

UI調整 Design Mode/Design System

途中で出てきたDesign Modeを詳しく見ていきます。

先ほどの色選択のところではデフォルトで選択できるパレットに加え、

Tailwind(スタイリングで利用しているライブラリ)から利用できるパレットが選べたり、

好きな色を選択することができます

次にDesign Systemを見ていきます

ここでは全体で使われている色をテーマ形式で変更することができます
「Soft Pop」の例

「Doom 64」の例

つづいてNew Design Systemを確認してみます

ここでは事前に用意されたワイヤーフレームを元にカラーパレットを確認、編集することができます
ワイヤーフレーム Cardの例

ダッシュボードの例

認証画面の例

ここからダークモードが確認できたりします

ちなみにダークモードはDesign Modeの右上のアイコンから切り替えることもできます

以上のようにDesign SystemはUIを直感的、視覚的に編集することができます。
詳しく知りたい方はこちら

バージョン管理 変更履歴/GitHub連携

v0はチャットで変更が行われた単位でバージョンを更新していきます。
今は認証機能のオミット+色の変更でv2(edited)に変わっています。

ここから元のバージョンへ戻すこともできます
試しにVersion 1を選択すると

最初の状態に戻りました

GitHub連携について

バージョンの話が出たので、GitHub連携の紹介をします

右上のGitHubアイコンを押すと

リポジトリを作成するダイアログが出てきます

Create Repositoryからリポジトリを作成できました

アクティブブランチを設定します

これで設定完了です！
対象のブランチに対して変更をpush, pull, PR作成(GitHubの画面に移ります)など基本的なGit操作をv0上で完結することができます。

今はv0からリポジトリを作成することしかできませんが、既存のリポジトリをv0から開くことができる機能を開発中とのことです...！とても楽しみです。

共有機能

右上の共有ボタンからチャットの履歴を含めた内容を公開するレベルを選択できます。（リンクを知っている全ての人、リンクに関わらず全ての人）
TeamまたはEnterpriseプランを利用している場合は、Team内限定の共有もできます。さらに同じチャットをリアルタイムで一緒に編集することも可能です。
v0を中心にエンジニアだけでなく、PMやデザイナー、セールスの方々とコラボレーションしながら開発を進めることができます。

デプロイ機能

v0で作成したアプリケーションはデプロイすることで世界へ公開することができます。

右上のデプロイボタンから、Publish to Productionでデプロイします。

説明については割愛しますが、デプロイ後にVercelでデプロイ内容を確認することができます。（これはまた別の機会に解説します）

Vercelの画面

その他Tips

閲覧保護機能

今までv0はデプロイ後にBasic認証のようなものはなかったのですが（自前の実装が必要だった）、
Password Protection機能を使うことで簡易的なパスワード設定が可能になりました。
右上の歯車アイコンからPassword Protectionを選択することで、

パスワードの設定が可能です。

ナレッジ機能

右上の歯車アイコンからKnowledgeを選択すると、

プロジェクトで適用したいルール（例えばコーポレートカラーやライブラリ）を予め指定しておくことで、わざわざプロンプトに含める必要がなくなります。
これはプロジェクト単位、ユーザー単位で設定することができます。

まとめ

実際にアプリケーションを作成する流れに沿ってv0の基本的な機能について解説しました。

今回紹介したTodoアプリはあくまで基本的なサンプルですが、応用範囲は広いと考えています。
例えば、

• プロトタイプを素早く作成
  • デザインやレイアウトの初期検討に活用できる
• 社内業務アプリのUIモックを作成
  • エンジニア、デザイナー、PM、セールスがリアルタイムで修正しながら開発を進めることができる
• コンポーネント単位での生成と検証
  • UIコンポーネントを作成 → Webページやアプリケーションへ持ち込む

このようにv0は「最初の一歩を素早く形にする」ための強力な武器となると思っています。
この記事がどなたかの参考になれば幸いです。