V0勉強会

v0は、自然言語を用いた対話形式でコードやデザインを自動生成できる革新的なサービスです。Next.js（React）、Tailwind CSS、shadcn/uiを活用した高品質なコードを生成し、取得や共有が可能です。さらに、モバイル対応のデザイン作成にも対応しています。

# アジェンダ
- v0とは：対話形式でコードやデザインを自動生成するサービスの概要
- v0の使い方：基本的な操作方法の紹介
- 料金体系：利用可能なプランとその詳細
- v0の活用方法、アイデア：実際の利用例や応用方法の提案

Transcript

1. V0入門 AIによる画面デザイン、UI の自動生成 株式会社福岡情報ビジネスセンター OT勉強会資料
2. アジェンダ v0とは v0の使い方 料金体系 v0の活用方法、アイデア 2
3. v0とは 対話形式でコード、デザインの自動生成することが可能なサービス • 自然言語によるデザイン作成 • 生成されるコードはNext.js(React), Tailwind CSSとshadcn/ui • 生成したコードを取得、共有可能 • モバイルのデザインも可 3
4. v0の使い方 https://v0.dev/chat GitHubアカウントやEmailアドレスでSign Up
5. 何を作るか決めよう Business • マスタ管理 - ユーザ一覧画面 • ログイン画面 • 商品一覧 • 商品詳細 • 注文画面 • メニュー、ヘッダ • アンケートフォーム • 企業のランディングページ Application • 計算機アプリ • カレンダーアプリ • TODOアプリ • ダッシュボード • チャート表示 • 売り上げランキング • 自己紹介ページ • etc... 5
6. デザインテーマも決めよう • モダン（Modern） • シンプルで洗練されている近代的なデザイン • シンプル（Simple） • 必要最小限の要素だけで構成されるデザイン • ミニマル（Minimal） • 極限まで要素を削ぎ落としたデザイン • シック（Chic） • 洗練された上品なデザイン • ゴージャス（Gorgeous） • 豪華で派手なデザイン • ナチュラル（Natural） • 自然素材や自然の色合いを活かしたデザイン • エレガント（Elegant） • 洗練されていて気品のあるデザイン • モノクロ • 白黒または単色でまとめられたデザイン • ポップ • 明るくカラフルで、エネルギッシュなデザイン • カラフル • レトロ • カジュアル • フォーマル 6 ※メインカラーも決めよう
7. プロンプトを入力してデザインを生成しよう 7 ※画像添付も可能
8. 追加で依頼する 位置を変更してください Xxxxを削除してください Xxxxを追加してください Xxxxをプルダウンに変更してください ヘッダの色が適用されていません(修正してください) csvダウンロードボタンを追加してください ヘッダと左側にメニューも追加してください タイトルをXxxxに変更してください 8
14. ソースコードを取得、共有する 右上のメニューより • Add to Codebase:ローカルで動作するコードを取得できる • Fork:現在の状態から新しくデザインを作成すつ • Share:誰でも参照できる共有リンクを生成する ※共有したデザインを確認してみる 14
15. ソースをダウンロードしてローカルで動かす 右上のメニュー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. 履歴から前回のデザインに戻る 16 左のメニューより • Add to Codebase:ローカルで動作するコードを取得できる • Fork:現在の状態から新しくデザインを作成すつ • Share:誰でも参照できる共有リンクを生成する
17. 料金体系について
18. 料金体系について Free $0/月 200クレジット/月 Premium $20/月 5000クレジット/月 クレジットの追加購入 18 クレジットとは？ • 初回の生成は30クレジット • その後の各生成、変更には10クレジット ※無料プランだと生成+変更3,4回で3画面程度
19. v0の活用方法、アイデア
20. v0の活用方法、アイデア 1 提案時、要件定義時のモックアップデザイン、チーム間でのイメージ共有 Excelで作った画面よりもイメージしやすくスムースに話が進められるはず 20
21. v0の活用方法、アイデア 2 取得したコードを実際のサービス、プロダクトに組み込めるか否か → Next.js * Tailwand * shadcn/uiに対応するには元々使用していた場合を除いて置き 換える or 新規開発時に導入する必要がある。少し勇気がいる。 • Reactは使用しているけどNext.jsじゃないしTailwandもshadcn/ui使用していない。 • Tailwand使用しているけどVue • jQuery派 • etc... Vue対応予定 → つまりまだ対応していない 21
23. ChatGPTを経由することで 様々なコードへ変換、対応可能 23
24. Thank you 24