エンジニアが語る v0 活用術 — Anti-Fraud チームの UI レビュー最前線

こんにちは、UPSIDER Anti-Fraud チームでエンジニアをしている Sally です。最近、社内ツールの UI プロトタイプを高速に回すために Vercel v0 を本格導入しました。従来は 「デザイナーが Figma でデザイン → デザインレビュー → デザイン FIX 後に実装」 という 3 ステップでしたが、いまは エンジニアが v0 で UI プロトタイプを生成し、“動く画面を触りながら議論” という 1 アクションに集約できています。

本記事では Preview Mode を軸にした v0 の使い方、導入して見えてきたメリット・ハマりどころを エンジニア視点 で共有します。

v0 とは？

Tailwind CSS + shadcn/ui ベースの React コードを自然言語プロンプトで自動生成
生成アプリは Preview Mode（ホスティング込み）で即公開
IDE・localhost 不要、Slack に URL を貼るだけでチームレビュー開始

画像 #1 — v0 のチャット画面と Preview Mode (架空のプロジェクト)

導入背景 — 「デザイナーのリソースが確保できなくてもエンジニア主導で UI を設計する」

観点	従来（Figma）	v0 導入後
画面試作リードタイム	0.5〜1 人日	30〜60 分
UI レビューの質	静的キャプチャ中心	本番同等の操作感
レビュー体験	コメント往復が多い	URL クリック → その場で操作・口頭合意
デザイナー工数	毎タスク必須	必要なタイミングだけ相談

UPSIDERでは日々新規サービス、新規機能の開発が行われており、デザイナーのリソースが逼迫しがちです。v0導入の主な目的は「デザイナーが不在でも前に進める選択肢を持つ」こと。デザイナーが入れるときは UI のブラッシュアップをお願いし、入れないときはエンジニアだけでUIプロトタイプを作成する——そんなハイブリッド運用ができるようになりました。

使い方ステップ

要件を文章でまとめて v0 のチャット欄に貼り付け、「この要件を満たす画面を生成して」と依頼
生成後に 共有設定 を ON にし、Preview URL をレビュー担当に共有
自然言語でフィードバック を送ると即再生成。差分をその場で確認。
フィードバックループを高速回転 — 生成 → 共有 → 修正を数分スパンで繰り返し、完成度を高める

工夫点 — ステータス別デモ画面をワンクリックで

UI レビューを円滑にするため、本番実装では存在しない「リンク集用トップ画面」を用意しました。

ステータスごとに 1 画面ずつデモを生成（例：Pending／In Review／Flagged／Approved … 計 6 画面）
トップ画面に リンクカードを並べ、各デモへワンクリック遷移
レビュアーは 「今は Approved 状態だけ見たい」 といったピンポイント確認が可能

この“リンク集トップ”のおかげで、ステータス別レビューの手間が大幅に軽減しました。

良かった点

1. Preview Mode が“そのまま UI レビュー環境”

staging 待ちゼロ、リンク一本で UX を共有 -「想像していた動きと違う」を限りなくゼロへ

2. レビューのコミュニケーションコストが激減

Figma のコメントでのやり取りが不要に
ステークホルダー（BizDev／QA／CS など）が 自分で触って判断 → 口頭で Go / No-Go
その結果、レビュー所要時間が大幅に短縮

3. Fork 機能で “指摘” より “提案” が増える

レビュアーが Fork してプロンプトを追記 → 修正案を即作成
細かい指摘がコードレスで示せるので ニュアンスの行き違いゼロ

困った点 & 回避策

1. Preview Mode 非対応ライブラリの壁

一部ライブラリ（例：@mui/x-date-pickers ）は Preview Mode でビルドできず表示ができませんでした。今回は「Preview 確認が最優先」だったため、Preview Modeで使用できるライブラリを優先し、v0 で生成 → shadcnで既存コードにimport→ Claude Code で希望ライブラリ、コンポーネントでリファクタリング → 本番実装、という迂回ルートで解決しました。