【AIで爆速UI開発！】Vercel_v0 を使ってみた

Transcript

1. AIで爆速UI開発！ Vercel v0 2025.05.25 株式会社アドシード 平野 雄己
2. 平野 雄己
3. ゆうき
4. 何者？ • 2024年7月〜 エンジニア ◦ 介護職（埼玉県川口市） → 印刷会社の営業（東京都墨田区） ◦ Ruby（Rails）→ PHP（Laravel） • 株式会社アドシード • 2025年2月〜 新潟
6. AI 時代のポジショニング戦略
7. 「AIを使う／使わない」ではなく 「AIに頼る」でもなく 「AIと伴走する」
8. • 技術面 ◦ AIが作ったものに対して「レビューができる」 ◦ AIが作ったものに対して「良し悪しが判断できる」 ◦ AIが作ったものに対して「品質が担保できる」 • 提案面 ◦ AIを駆使して爆速提案 ◦ その場でお客様の意見を聞きつつ改変 ◦ お客様の要望をよりクリアに引き出す AI 時代のポジショニング戦略
9. 爆速制作＆爆速提案「 Vercel v0」
10. • AI 搭載 • 爆速webアプリ制作 • 爆速UI開発 • 爆速デプロイ • Next.jsの開発会社 • https://v0.dev/ AI駆動型UI開発「Vercel v0」（ブイゼロ） http://next.js
11. • 1クリックで自動的に ビルド＆デプロイ完了！ 「Vercel」の機能のおかげで 1クリックデプロイが可能 http://next.js
12. Vercel v0 の特徴！ • 自然言語で手軽に UIを生成可能 ◦ 自然言語（日本語 OK）のみで手軽に UIを生成できる！ • UIのベースは Shadcn UI とTailwind CSSのライブラリ・フレームワーク ◦ 最初から整った UIコンポーネントの活用が可能！ • React / Next.jsとの高い互換性 ◦ v0によって生成されたコンポーネントは ReactとNext.jsに簡単に統合可能！
13. お客様への提案時・要件定義フェーズで活躍 • お客様の要望をリアルタイムで形にしながらヒアリング • よりクリアで具体的な要件・要望を引き出す！ • 提案時のUIデザインの大幅コストカットにも （デザイナーに頼まなくていいので）
14. もちろん実際の UI開発にも • 「とりあえずブログ作ってみる」とか • 「とりあえずポートフォリオ作ってみる」とか • 「とりあえず採用サイト作ってみる」とか • とりあえずやってみよ、ってときの強い味方
15. 今後は “今後、生成 AIモデルの進化に伴い、 v0の機能はさらに拡張され、より複雑な インタラクションやアニメーションの生成、さらにはバックエンド連携までを カバー する総合的な開発環境へと進化していく可能性があります。 Vercel v0の活用により、競争力の向上や顧客満足度の増加が期待できます。 ” https://ai-market.jp/services/what-vercel-v0/#anav15
16. 株式会社アドシード • 開発企業 （SES・受託・自社） • 東京・新潟・福島に支社 • 大きいアパホテルの近く • 未経験採用に強し！ • 経験者の方大募集中！ • 公式HP • Wantedly