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