やっぱりv0が好き

v0によるUI生成事例と他社AIとの比較など

Transcript

1. やっぱりv0が好き JapanVercelUserGroupMeetup#1 v0⁨によるUI生成事例と他社AIとの比較など
2. 大橋 有理 Ohashi Yuri GMOメイクショップ株式会社 デザイナー 2004年にWeb業界に入り、デザインを軸足とし てディレクションなども行う。前職がEC関連の会 社でデザインをしていたこともあり、2019年から GMOメイクショップ⁩にて社内のクリエイティブ全 般に携わる。 https://x.com/YuriOhashi_des
3. 目次 v0を使ってUIの参考にした事例 v0の優れていると思うところ（比較） iPhoneアプリを使ってみて
4. 前提 今からお話する事例などはすべてFree Planでのお話です （機能制限アリ） デザイナー目線での内容です
5. Case 01 オンラインショップの決済ページ 自社プロダクトの決済画面をリニューアルするに あたり、条件が複雑な場合のUIサンプルを生成。 それを元にベースのデザインを調整し、実際の画 面に反映。 v0を使ってUIの参考にした事例
6. プロンプト 以下の要件を満たすUIを作ってください。 オンラインショップの注文内容を確認する画面で以下が表示されている。 ・注文者情報 　 └メイク太郎 　 　 080-2222-3333 　 　 oohashi@makeshop.co.jp ・お届け先 　 └〒151-0028 　 　 　 東京都渋谷区桜丘町26-1セルリアンタワー ・商品情報 　 └デザインTシャツ（サイズ：L、カラー：ブラック） （サイズ：M、カラー：ホワイト）（サイズ：S、カラー：レッド） ・配送方法 　 　 3商品にそれぞれ配送方法とお届け日時が初期値で指定してあるが変更もできる。 　 └デザインTシャツ（サイズ：L、カラー：ブラック）はヤマト運輸 　 ※お届け日時指定：2025年9月12日　 午前中 　 └デザインTシャツ（サイズ：M、カラー：ホワイト）はゆうパック 　 ※お届け日時指定：2025年9月12日　 午前中 　 └デザインTシャツ（サイズ：S、カラー：レッド）は変更できない 　 ※お届け日時指定：2025年9月12日　 午前中 ・支払い方法 　 └クレジットカード（VISA） ・合計金額 　 └3,300円 v0を使ってUIの参考にした事例
7. Case 02 社内用の振込管理画面 社内用の管理画面。要件や各ページの要素につい てはスプレッドシートにまとまっていたものの、 全く想像がつかなかったためv0を利用。 管理画面を使う人物や用途、各ページで行える動 作を要件（プロンプト）としてv0に読み込ませた ところ想像以上のクオリティで生成された。 v0を使ってUIの参考にした事例
8. プロンプト 管理者が売上を店子に分配して振り込む画面を作成しています。 以下の要件を満たす画面を作ってほしいです。 承認対象振込データの表示 承認時に必要な情報を表示（加盟店基本情報、明細、照合結果、手数料各種等） 承認者・承認日時・承認ステータス表示 メールによる2FA認証 v0を使ってUIの参考にした事例
9. Case 03 ノーコードエディタの参考に Design Systemなどをカスタマイズして、メンズ アパレルのオンラインショップデザインを作成。 その際に「Design」モードで各要素を直接編集で きたり、Design Systemの要素（色やシャドウ、 角丸など）も編集できたので自社のデザインエ ディタ開発のヒントに。 v0を使ってUIの参考にした事例
10. v0を使ってUIの参考にした事例 以下がノーコードで編集可能 ・テーマカラー ・フォント ・角丸の半径 ・シャドウ ・各要素のテキスト編集
11. v0の良いところ ノーコード編集ができて動作も軽い Design System がプリセットである（カスタマイズもできる） デザインがリアルで実用的に使えるレベル
12. 他ツールとの比較 v0、Google Stitch、Lovart、Lovableの4つで 生成精度や使い勝手を比較してみました。
13. 比較した際のプロンプト ここ数年のデザイントレンド（GoogleやAppleなどのデザイントーン）に習って、 オンラインショップの決済画面のデザインを5パターン作ってください。要件は添付の内容でお願いします。 注文情報表示：商品名・画像・価格・数量、軽減税率注記、数量変更・削除が可能。 注文者情報入力：氏名・住所・メールなど入力＋変更ボタン、バリデーション・自動住所補完対応。 お届け先選択：「同じ／別住所」切り替え、別住所選択時は入力フォーム表示。 配送方法・日時指定：配送業者選択、日付・時間帯の指定入力。 クーポン入力：クーポン入力＋適用ボタン、リアルタイム検証、1枚のみ使用可能。 支払い方法選択：複数支払い手段、手数料表示、モーダルや別画面で詳細入力。 金額表示：商品小計・送料・手数料・ポイント利用などの明細、合計金額と獲得ポイントを強調。 UI構成：ステップナビ・見出し整理、入力しやすいフォーム、主ボタンと補助ボタンの明確化。 UX改善：住所自動補完、入力データ保存、確認ダイアログ、アクセシビリティ対応、リアルタイムエラー。 注文確定：固定配置の確定ボタン、二重クリック防止、規約同意チェック必須。 他ツールとの比較
14. 他ツールとの比較
15. デザイン、コード 画面上でノーコード編集可能、レスポンシブ対応。 デザイン、コード 部分的にチャットで編集可能。デザインをFigmaへインポートできるのは好感。 ※デザインが1パターン デザインのみ ※デザインの精度が低く、実用レベルではないものも含む デザイン、コード 画面上でノーコード編集できるが動作が重い、レスポンシブ対応。 ※デザインの精度が低く、実用レベルではないものも含む 他ツールとの比較
16. iOSアプリも使ってみる 2025年10月にiOSアプリが出たので使ってみました。 iOSアプリを使ってみた
17. 実機確認がラク PCと同様に使えます。 生成したらそのままスマートフォンで実機確 認ができるので、各要素のサイズや操作感な どのイメージがつきやすいです。 iOSアプリを使ってみた
18. アプリも公開してみた https://v0-modern-ui-design-delta-five.vercel.app/ アプリも公開してみた 入力した名前を印鑑のデザインにするアプリ。 日本語、英語に対応。英語名は漢字に変換して反映。 例：Smith　 →　 隅須 ※Figma Makeで作ったものをv0でも作ってみました Hankonizer
19. まとめ（おさらい） デザインが良い（そのまま使える） ノーコード編集ができてDesign Systemもカスタマイズ可能 他ツールと比較しても優れている部分が多い
20. やっぱり v0 が好き ありがとうございました！