V0入門 AIによる画面デザイン、UI の自動生成 株式会社福岡情報ビジネスセンター OT勉強会資料

アジェンダ v0とは v0の使い方 料金体系 v0の活用方法、アイデア 2

v0とは 対話形式でコード、デザインの自動生成することが可能なサービス • 自然言語によるデザイン作成 • 生成されるコードはNext.js(React), Tailwind CSSとshadcn/ui • 生成したコードを取得、共有可能 • モバイルのデザインも可 3

v0の使い方 https://v0.dev/chat GitHubアカウントやEmailアドレスでSign Up

何を作るか決めよう Business • マスタ管理 - ユーザ一覧画面 • ログイン画面 • 商品一覧 • 商品詳細 • 注文画面 • メニュー、ヘッダ • アンケートフォーム • 企業のランディングページ Application • 計算機アプリ • カレンダーアプリ • TODOアプリ • ダッシュボード • チャート表示 • 売り上げランキング • 自己紹介ページ • etc... 5

デザインテーマも決めよう • モダン（Modern） • シンプルで洗練されている近代的なデザイン • シンプル（Simple） • 必要最小限の要素だけで構成されるデザイン • ミニマル（Minimal） • 極限まで要素を削ぎ落としたデザイン • シック（Chic） • 洗練された上品なデザイン • ゴージャス（Gorgeous） • 豪華で派手なデザイン • ナチュラル（Natural） • 自然素材や自然の色合いを活かしたデザイン • エレガント（Elegant） • 洗練されていて気品のあるデザイン • モノクロ • 白黒または単色でまとめられたデザイン • ポップ • 明るくカラフルで、エネルギッシュなデザイン • カラフル • レトロ • カジュアル • フォーマル 6 ※メインカラーも決めよう

プロンプトを入力してデザインを生成しよう 7 ※画像添付も可能

追加で依頼する 位置を変更してください Xxxxを削除してください Xxxxを追加してください Xxxxをプルダウンに変更してください ヘッダの色が適用されていません(修正してください) csvダウンロードボタンを追加してください ヘッダと左側にメニューも追加してください タイトルをXxxxに変更してください 8

9

10

11

12

13

ソースコードを取得、共有する 右上のメニューより • Add to Codebase:ローカルで動作するコードを取得できる • Fork:現在の状態から新しくデザインを作成すつ • Share:誰でも参照できる共有リンクを生成する ※共有したデザインを確認してみる 14

ソースをダウンロードしてローカルで動かす 右上のメニューAdd to Codebaseより npx shadcn@latest add https://v0.dev/chat/b/xxxx cd app npm I npm run dev http://localhost:3000/ ※Nodeのインストールが必須 15

履歴から前回のデザインに戻る 16 左のメニューより • Add to Codebase:ローカルで動作するコードを取得できる • Fork:現在の状態から新しくデザインを作成すつ • Share:誰でも参照できる共有リンクを生成する

料金体系について

料金体系について Free $0/月 200クレジット/月 Premium $20/月 5000クレジット/月 クレジットの追加購入 18 クレジットとは？ • 初回の生成は30クレジット • その後の各生成、変更には10クレジット ※無料プランだと生成+変更3,4回で3画面程度

v0の活用方法、アイデア

v0の活用方法、アイデア 1 提案時、要件定義時のモックアップデザイン、チーム間でのイメージ共有 Excelで作った画面よりもイメージしやすくスムースに話が進められるはず 20

v0の活用方法、アイデア 2 取得したコードを実際のサービス、プロダクトに組み込めるか否か → Next.js * Tailwand * shadcn/uiに対応するには元々使用していた場合を除いて置き 換える or 新規開発時に導入する必要がある。少し勇気がいる。 • Reactは使用しているけどNext.jsじゃないしTailwandもshadcn/ui使用していない。 • Tailwand使用しているけどVue • jQuery派 • etc... Vue対応予定 → つまりまだ対応していない 21

22

ChatGPTを経由することで 様々なコードへ変換、対応可能 23

Thank you 24