はじめに
こんにちは。フェアリーデバイセズ プロダクト開発部の神谷です。
業務では自社サービス LINKLET や CWS API、その他 THINKLET 関連プロダクトの PM（プロジェクトマネージャー）を担当しています。
私が抱えていたプロトタイプ作成とデザイン管理の悩み
プロダクト開発を進めていると、機能のアイデアをどう伝えるかで悩むことがあります。
LINKLET などの開発では、実現したい機能のイメージをテキストとしてまとめるだけでなく、画面のワイヤフレームなどを作成してエンジニアと共有することが多々あります。既存の機能を改善する場合は、既存画面のスクリーンショットを撮影し、Google Slides などを用いて改修ポイントをまとめて資料化することが多いです。
一方で、新しいプロダクトやこれまでにない画面を設計する際には、Dribbble や競合サービスを調べ、Adobe XD、Figma、Prott などのデザインツールを使って UI モックアップやワイヤーフレームを作成してきました。
しかし、こうしたツールを使っていく中で、次の2つの課題を強く感じていました。
課題 ① アイデアを形にするまでの時間と手間
Google Slides のような静的ツールでは、動きのイメージを伝えきれません。
かといって、その動きを文章化したり、UI モックツールでアニメーションまで作り込むのは非常に手間がかかります。さらに、もともとデザインが好きなこともあり、つい細部に凝ってしまうため、特に新規開発ではプロトタイプ作成に多くの時間を費やしてしまう傾向がありました。
結果として、「早く試したいのに作り込みに時間を取られる」という本末転倒な状況が生まれていました。
課題 ② モックと実装の乖離によるメンテナンスコスト
デザインツールで作成したモックは、実装が進むと実際の UI との乖離が発生します。また、開発サイクルを回すうちにそれが広がり、モックのメンテナンスが追いつかなくなります。
結果として、「モックの更新作業」が行われなくなるため、機能追加などする際は新たに別のツールを使ってワイヤーフレームを作成するなど無駄な作業が発生していました。
私が重視していること
これらの課題を整理していて感じたのは、 「完璧なデザイン管理」を目指すことが必ずしも正解ではない ということです。弊社のプロダクトは、実際にリリースして使ってもらう中で改善点が見えてくることも多く、UI を変える機会も少なくありません。
そのため、重要なのは「デザインツールの内容をそのまま実装に落とし込むこと」でも、「デザインとの乖離をなくすこと」でもなく、 「作りたいものを整理した上で、頭の中にある動作や雰囲気のイメージをチームメンバーに素早く伝えること」 です。
私が作るデザインは「絶対」ではなく、方向性を共有するためのプロトタイプにすぎません。
つまり、 “イメージを共有するための道具”としてのプロトタイプ があれば十分だと考えています。
AI を使ってアイディアを形にし、チームへ手軽に共有できないか？
プロトタイプの目的が「完璧な管理」ではなく「チームで方向性を共有すること」だと気づいてから、次に考えたのは、アイデアを生み出して形にし、チームへ共有するまでのプロセスをもっと効率化できないか？ ということでした。
文章や静的な資料では動きや雰囲気が伝わりにくく、UI モックを作り込もうとすればどうしても時間がかかります。このジレンマを AI によって解消できないか探ってみることにしました。
そこで今回試してみたのが、Vercel の v0 です。
本記事では、v0 を使ってプロトタイプを作成した具体的な手順と、 当初の悩みをどこまで解消できたかや、v0 の活用例 をお話しします。
v0 でキー設定アプリケーションのプロトタイプを作ってみる
今回は、弊社で開発しているウェアラブルデバイス THINKLET の キー設定アプリケーション を試作してみることにしました。
THINKLET には 3 つのボタンがあり、このボタンアクションは開発者側で自由に変更できます。ボタンアクションの変更方法は THINKLET開発者ポータルの キーコンフィグページに記載されています。ただ、私のような非エンジニアからすると少々ハードルが高いと考え、この設定を GUI で行える「キー設定アプリ」のプロトタイプを作成することにしました。
※ この記事で扱うプロトタイプのスコープは UI モックであり、デバイスやバックエンドとの連携はスコープ外です。
最初の指示出し
パブリックに公開しているドキュメントを指定し、ざっくりとやりたいことを v0 にお願いしてみました。
v0 への指示
以下ウェアラブルデバイスにおける、とある機能のモックサイトを作りたいです。
https://mimi.fairydevices.jp/technology/device/thinklet/とある機能というのは「デバイスにある3 つのキーに対して設定をする機能」です。
それぞれのボタンに対して、ダブルクリック・シングルクリックなどで特定のアプリを起動させることが可能なのですが、その設定には adb を利用するなどが必要となるため、GUI 経由で設定できるようにしたく、そのためのモックが欲しいです。
v0 への指示
キー操作における動作仕様は以下を想定としてください。
https://fairydevicesrd.github.io/thinklet.app.developer/docs/keyConfig/
しばらく待つと、私のコメントを汲んで v0 が設計と実装を行ってくれます。
デザインなどの細かな指定をしない場合、公式ドキュメントによると React + Tailwind + shadcn/ui で出力されるとのことです。詳細については v0 の Docs に記載があります。Prompt という章にある Text Prompting を読んで指示するとより良い出力が得られそうですが、今回はそれは読まずに進めていきます。
まずはこんな画面が出来上がりました。
2 〜 4 回目の指示出し
先ほどの画面だと、「キー1」「キー2」がデバイスのどのボタンを指しているのかが分かりません。デバイスのどのボタンに対応するのかが直感的に分かるよう、デザインへの変更と、ワーディングの調整を依頼しました。
また、私の指示があまりにも雑であったことから、今回は機能を絞り込み、ボタンを短く押した時（シングルクリック）の設定のみをサポートするよう依頼してみました。クリックという言い方は本来的には適切ではないですが、v0 とのやりとりでは気にせずコミュニケーションします。
v0 への指示
これだと該当デバイスのどのキーを指しているか[キー1]という表現だけでは分からないです。
どこを指しているか分かるようにするための、イメージ画像が挿入できるよう UI 調整をしてください。
v0 への指示
ダブルクリックが大変そうなので、シングルクリックのみサポートしたいです。
ただ、ユーザで作った任意のアプリも起動できるような機能も用意したいので実装してください。
上記のようなやりとりを何往復かして、機能に対する説明文も工夫してもらい、出力はこんな感じになりました。
5 回目くらいの指示出しで、UI をもう少し改善
ここまでで、なんとなくそれっぽい画面・機能になりました。
ユーザーがカスタマイズできる機能も作りましたが、入力フォームが分かりづらいので改善をしてもらいます。
v0 への指示
入力フォームが視覚的に分かりづらいため、背景色を変えるなどして、分かるようにしてください。
最後にもう少しだけ UI を改善
ここまでくると、仮で置いていた画像を変更するだけで、よりリアルになりそうです。最後に、仮画像を差し替える UI 改善をチャレンジしてみることにしました。THINKLET 開発者ポータルに掲載している画像を元に指示を出します。
v0 への指示
ファンクションキーのキー 1、2、3は画像の①、②、③に対応します。
[キー位置]としている場所に、前述の情報をふまえて画像を挿入するなどしてください。
これに対する実行結果が以下です。
v0 は画像編集ツールではありませんが、これだと流石に分かりづらいので画像の加工を求めてみます。
v0 への指示
中央に文字を重ねてしまうと分かりづらいかも。
画像を加工できないの？キー1の場合は、画像の①の色だけ別の色に変えるとかして画像だけで分かりやすさを向上できると良さそう
以下がその結果ですが、最初の出力よりはだいぶ分かりやすくなりました。
画像の中に画像が存在しているところはツッコミどころかもしれませんが、雑な指示をうまく落とし込んでくれています。キー設定アプリケーションが何か、より伝わりやすくなった気がしますね。
完成
最終的にもう少しだけ調整をして、このような形になりました。
ここまで 11 回 v0 と会話していただけです。 今回、画面左側に表示する内容は指示出しをしていません。よってデバイスの仕様について、正しくない情報も含まれていますが、全体としてはだいぶそれっぽいものができました。
v0 を使ってみて見えたこと
今回の取り組みを通じて、要件やデザインを厳密に詰めなくても、十分実用レベルの成果物を得られることを実感しました。
また、使ってみて感じたのは、「完成度よりスピードが価値になる」ということでした。v0 で作ったものが多少ラフでも、動作イメージがあるだけで営業やエンジニアと議論が早く進みます。「モックを作る」ために使うというより、「考えを可視化して共有する」ツールとして最適であると感じました。
v0 で解決できたこと／できなかったこと
✅ 解決できたこと： アイデア検証とコミュニケーションスピードの向上
これまで UI モックを作る際は、Dribbble でデザインを探したり、テンプレートやデザイン本を参考にしながら形を整えていました。最近は Gemini にアイディアの相談をすることもありましたが、結局それを UI モックツールや Google Slides でまとめていたので手間でした。
v0 では、その手間をすべて取っ払い、ラフな指示を繰り返すだけでイメージを即座に形にできるようになりました。さらに、Team 機能 を使えば、メンバーを招待してプロトタイプを共有できます。[1]
「アイデアを形にするまでの時間と手間」が大幅に削減されるだけでなく、「アイデアを出す → デザインを作る → チームに共有する」という一連の流れを v0 内で完結できるのは魅力的です。
実際、PO（プロダクトオーナー）にプロトタイプを見せて「このイメージで進めますね」とその場で合意する場面もありました。また、エンジニアとの議論では「こうでもない」「ああでもない」と出た案をそのまま v0 に反映し、生成結果を見ながら一緒に方向性をすり合わせることもありました。議論と試作が同時に進む体験はこれまでにないものでした。
⚠️ 解決できなかったこと： 継続的なデザイン管理の難しさ
今回、そもそも課題 ② に対するアプローチをしていません。ただ、継続的なデザイン管理ツールとして v0 を使うのは不向きのように感じました。
v0 ではソースコードのダウンロードもできますし、GitHub との連携機能もあれば、ボタンポチーで Vercel を利用したホスティングも可能です。
キャンペーンサイトなど一定期間運用するページならば多少 UI を途中で変えても v0 で全て完結できると考えますが、v0 で生成したソースからプロダクトコードに置き換え、それをまた v0 に取り込んでといった双方向運用は不向きで、当初の課題（メンテナンスの手間）は結局解消しきれないものと思います。
そこで、私は v0 を「継続的にモックを維持管理するツール」ではなく、必要に応じて生成し直す、要件整理や仕様検討のための その場限りの使い捨てプロトタイピングツール として割り切って使う運用にしました。この考え方によって乖離を防ぐため時間を費やすこともなくなります。
これは、当初の課題を「解決した」というより、 課題そのものから解放された というほうが近い感覚です。
💡 その他の留意点
v0 は使い捨てプロトタイピングツールとして非常に優秀ですが、運用面では次のような特徴もあります。
指示出しをしてから出力を確認できるようになるまでが長い
今回のように機能単体ではなく、複数の機能が絡む Web プロダクトのプロトタイピングに v0 を使うと、どうしても出力までに時間がかかります。これは、v0 が私の指示を受けて設計し、コードを生成し、ビルドしてデプロイするというプロセスを経るためです。特に、影響範囲の大きな指示や、複数の機能を包含したプロトタイピングを行う場合は、当たり前ですが画面に反映されるまでの待ち時間が長くなります。
また、細かな指示を出さないと page.tsx に全てを詰め込んでいく傾向があるので、ディレクトリ構成やコンポーネントの切り方、ダミーデータの件数などは指示すると良さそうです。
会話が長く続くと、先祖返りしてしまう
生成 AI あるあるですが、やりとりが長期化すると古い指示が切り落とされ、先祖返りする頻度が上がりました。
別件で v0 を利用していた時のことですが、生成結果を待っている間に別の作業を行い、ふと v0 を覗いた際に、全てのデザインが刷新されている時があり、思わず叫びそうになりました。プロジェクトの構成などもまるっと変わってしまうので、一度に複数の指示をしない、またはやりとりが長期化しそうな場合はフォークして別の会話として新規に開始するといった対応をとるようにしています。
v0 を利用する場合は、プロトタイピングとして大まかなデザインや機能のイメージをラフに作るくらいにとどめ、細部の調整は実際にエンジニアと行うのが良さそうです。しかし、AI との対話を通じて、デザインのアイデアを形にしていくプロセス自体は楽しいので、雑な指示で何が生成されるのかはいつも楽しみです。
私が実践する v0 の具体的な活用シーン
実際の業務では、私は以下のような場面で v0 を活用しています。
- 要件やデザインのイメージが固まっており、それを形にして PO や開発チームへ動きのあるデザインとして共有したいとき
- 実現イメージがまだ曖昧な段階で、既存プロダクトの画面や機能を参考にしながら、アイディアを元に AI から提案をもらいたいとき
- 複数のデザインパターンを短時間で比較・検討したいとき
いずれも「使い捨て」のプロトタイプなので、アイデアごとに新しい会話を立ち上げることが多く、気づくと左側のサイドナビに会話がずらっと並んでしまいます。どこで何を試していたか分からなくなることもありますが、最近はフォルダ機能も強化されたため、今後はより整理しやすくなりそうです。
おわりに
v0 は、 「アイデア検証とコミュニケーションスピードの向上」 に特化した 「使い捨てプロトタイピングツール」 として非常に有効だと強く思います。
特に初期開発や新規画面を伴う検討段階では、「まず形にして共有する」という文化を支えてくれます。
もし同じような課題を抱えている方がいたら、ぜひ一度試してみてください。
-
Teams 機能の利用は 2025 年 10 月時点でユーザごとに月 10 ドルかかります。 ↩︎
Discussion