はじめに
こんにちは、AI transformation(AX)の荒井（@yusaku_0426）です。
本記事では、先日社内で開催した v0 ハッカソンの様子について紹介します。
v0 ハッカソン実施の背景
「v0」はNext.jsの開発元であるVercel社が提供するサービスで、ReactベースのUIを自然言語で対話しながら生成することが可能です。shadcn/uiやTailwindを使用して、瞬時にUIを構築できる画期的なツールです。
AIソリューションの技術発展は非常に速く、業務へのインパクトは実際に使ってみないと分からないことが多いです。v0も非常に魅力的なツールであるため、Algomaticメンバーの間でも「本当に使いやすいのか？」「どこまでの機能が実装可能か？」「実際の開発現場でどの程度有用か？」といった疑問が次々と浮かびました。
これらの疑問に答えるため、またクライアントへの提案（PoCなど）に活用できるように、v0の可能性と限界を実際に体感するため、v0ハッカソンを開催することにしました。
ハッカソンの概要
スケジュール
1日目:
- ハッカソンの目的と進め方の説明
- 環境構築チェック & v0の簡単な説明
- アイデア出し & 作るアプリ決め
- アプリ（フロントエンド）構築
2日目:
- アプリ（フロントエンド）構築（続き）
- アプリシェア（2分プレゼン・3分QA）
- 学び振り返り（できること・できないことなどをFigmaで共有）
環境構築
特別な環境構築は必要なく、参加者はhttps://v0.dev/chatにアクセスするだけで開発を始められました。
アプリ決め
Figmaを使用してアイデア出しを行い、実現可能性と効果（ワクワク感）を軸に整理し、各参加者が作るアプリを決定しました。
開発したアプリケーションのご紹介
ハッカソンで開発されたアプリケーションの一部をご紹介します：
1. ハッカソン告知LP（小木曽）
- 直面していた業務課題: ハッカソン告知のためのLPサイトが必要
- アプリケーション概要: レスポンシブに対応したLPサイトの構築
- 技術的特徴:
- 非エンジニアデザイナーでも直感的にレイアウトを組めることが可能で、履歴機能を活用しやすく開発プロセスの透明性を確保
- (今回の場合、FigmaやTailwindのサンプルを使用した方が早そうだった)
作成したLPのファーストビュー
2. 受託開発ダッシュボード（山中）
- 直面していた業務課題: 複数プロジェクトの複数エンジニアをマネジメントする必要があり、人力では限界が来ていた
- アプリケーション概要: 案件・人材の可視化、進捗状況確認、開発状況の要約、MTG設定、自動タスク割り振りなどの機能を持つダッシュボード
- 技術的特徴:
- 各種プラットフォーム（Slack, Notion, Github）から情報を集約し、一元管理するUIを整備
- Human As Function Callingの実現を目指し、AIがタスクの難度に応じて自律的に対応やメンバーへのタスク割り振りを行う
- LLMを活用して、GitHubのコミットやSlackの発言を要約し進捗を可視化
人員ごとに案件の進捗状況が可視化出来る
3. 商談録画分析ツール（末國）
- 直面していた業務課題: クライアントから商談録画をもらって分析する業務の負担が大きい
- アプリケーション概要: 録画データの再生、文字起こしの閲覧、文字起こしをプロンプトに入れたLLMとのチャット機能
- 技術的特徴:
- v0でデザインが決まったら、ローカルのNext.jsに移動して動画再生とチャット機能を実装
- Vercel AI SDKを利用し、文字起こしデータをプロンプトに与えたLLMとのチャットが可能に
文字起こしをプロンプトに入れてLLMとのチャットが可能
【デモ画面】*動画と文字起こし部分はダミーを表示しています↓
その他
上記以外にもいくつかアプリケーションやデモを開発しました。
| アプリ名 | 業務課題 | ソリューション |
|---|---|---|
| webメディア | スクラッチでWebメディアを作ると工数 & お金がかかる | 記事一覧/詳細、サインアップ/ログイン、SNSシェア機能を有するメディアサイト |
| SEOダッシュボード | SEOメディアの進捗共有を簡易化したい | 評価指標と生データを盛り込んだダッシュボード |
v0ハッカソンを通じて得た学び
良かった点
- プロンプトでレイアウトを組める
- 履歴が残り、過去に戻りやすい
- 非エンジニアでも一定の成果物を出力できる
- 簡易なプロトタイプ作成に向いている
- サクッと60点くらいのデザインが可能
- ローカルに落としやすい
改善点・課題
- バージョン増加でコード生成が省略され、エラーが発生することがある
- 複数ページを生成できない
- チャットベースでのUI作成は慣れるまで難しい
- プロダクションレベルのLPサイトやアプリケーションには向かない
- コンポーネントの分割をより細かくしてほしい
- デザインのスタイリッシュさよりコンポーネントの使いやすさが重要
- フロントエンドやデザインの知識がないとクオリティの高い成果物を作るのは難しい
総論
今回のハッカソンでは、v0を活用したプロトタイピングやUI作成のプロセスにおいて、その「高速かつ直感的な操作性」を体感し、参加者それぞれが3時間以内という短期間でプロトタイプを完成させることができました。また、開発スピードの飛躍的な向上を実現するだけでなく、非エンジニアでも一定の成果物を出力できる利便性を踏まえると、v0が汎用的なプロトタイプ開発における強力なツールであることを改めて確認することができました。
一方で、v0だけでは対応しきれないケースも存在します。例えば、複雑なアプリケーションの開発やプロダクションレベルの品質を求められる場合、チャットインターフェースでのコード生成では細かな制御が難しく、複数ページや高度なデザインを実装するためには、専門知識や細かなカスタマイズが必要です。このため、実現したい成果物の内容によっては、v0だけで完結するのが難しい場合があることもわかりました。
参加者からは、「UI作成はスムーズで直感的だったが、複雑な要件には多少なりともドメイン知識が必要であり、場合によっては直接コードを書くことも必要」という意見が多く聞かれ、特にエラーハンドリングや複数ページに関する実装については、今後の機能改善を期待していきたいという認識でまとまりました。
このように、専門知識を要する部分は依然として存在するため、v0をはじめとしたAIコード生成ツールにおいては、引き続きフロントエンジニアやデザイナーの知識、経験が力を発揮します。
おわりに
Algomaticでは、ハッカソンを通じて得た知見を活かしつつ、v0以外にも様々な生成AIツールを積極的に取り入れ、効率的な開発体制とそれに伴う最適なソリューション提供を目指していきます。 最新の生成AI技術を柔軟に活用したプロダクト・サービス開発に興味がある方は、下記リンクからカジュアル面談の応募ができるのでぜひお話ししましょう！
