toridori base webをv0で爆速で作った話

v0を用いてtoridori base webを爆速で作り、その使い勝手についてのスライドです。
Web版がないのはもったいない、モバイルWebでも使えるようにしたい、v0 課金する言い訳がほしい、という背景で作ってみました！

Transcript

1. toridori base webをv0で 爆速で作った話 (作ってない) 開発部 佐藤
2. © 2024 toridori inc. 2 ローカルサーバー起動してるのでよかったら 開いてみてください
3. 目次 01 背景 02 どのように爆速で開発した? 03 学び
4. 目次 01 背景 02 どのように爆速で開発した 03 学び
5. © 2024 toridori inc. 5 背景 筆者の状況 toridori baseの全体的な仕様を把握す る必要ができた。 ちなみに、私はtoridori baseは 完全に理解している
6. © 2024 toridori inc. 6 背景 フロントエンドエンジニアとして Web版がないのはもったいない モバイルWebでも使えるようにしたい v0 課金する言い訳がほしい！
7. © 2024 toridori inc. 7 背景 よし開発しよう
8. 目次 01 背景 02 どのように爆速で開発した 03 学び
9. © 2024 toridori inc. 9 どのように爆速で開発した toridori base webのイメージ toridori base appのライト版 公開中のキャンペーン閲覧できる 運営からのお知らせなどを閲覧できる キャンペーン応募などのコア機能は、あえて実装しない あくまで、アプリ導線サイト
10. © 2024 toridori inc. 10 どのように爆速で開発した 技術選定 Next.js (App Router) shadcn/ui インフラ構築はなし
11. © 2024 toridori inc. 11 V0でコンポーネント を作成していく
12. © 2024 toridori inc. 12
13. © 2024 toridori inc. 13 作成できたら、生成 されたnpx コマンド をコピー
14. © 2024 toridori inc. 14 ターミナルで実行す る
15. © 2024 toridori inc. 15 後はよしなにコン ポーネントを使用す る
16. © 2024 toridori inc. 16 V0でコン ポーネン ト生成 v0でコン ポーネン トを調整 コンポー ネント反 映
17. © 2024 toridori inc. 17
18. © 2024 toridori inc. 18
19. © 2024 toridori inc. 19
20. 目次 01 背景 02 どのように爆速で開発した 03 学び
21. © 2024 toridori inc. 21 学び v0のコツがわかった 既存のUIをリプレースしたいときは、要件を一度文章 化する。が文章化も面倒なので、生成AIを使用して画像 から要件を文章化させる。 こうすることで、既存の実装に縛られないUI設計がで きた
22. © 2024 toridori inc. 22 学び 次やりたいこと、誰かにやってほしいこと お気に入りや、お知らせの箇所のモック実装をやめる キャンペーンをアプリで開くボタンのダイナミックリンク対応 エンドポイントをOpenAPIで誰か定義してほしい
23. © 2024 toridori inc. 23
24. © 2024 toridori inc. 24 v0でマーケのやりとり画面を リプレースしてみた
25. © 2024 toridori inc. 25
26. © 2024 toridori inc. 26 v0でリニューアル やりとりの履歴とチャット機 能が統合され、時系列で確認 できるようにしました