🧠

他モック生成AIサービスの検討

2025/10/15に公開

 前回のおさらい前回、AIを使ったモック作成にブレイクスルーを感じた。

AIを使う前提として、下記のような開発フローを見出した。
要件定義
AI（Figma）でデザイン生成
足りない機能、観点をAIへ指摘
指摘を繰り返して、理想のデザインを構築
コンポーネント設計
VSCodeで実装

 他のデザイン生成AIサービス（v0 by Vercel）v0というVercelのAIデザインサービスが巷で有名(？)らしい。
Vercelは以前、Reactで作成したメモ帳アプリ(https://portforio-hazel.vercel.app/)のデプロイで使用したことがある。

アカウント作成の必要もないし結構評価が高いっぽい。
Figma sitesと比較して、より品質が良く開発支援機能の手厚いものを選びたいところだ。
今回は下記の条件で比較してみる。
要件定義は同じものを使用する
最低限の品質保証のため、プロンプトの先頭で下記の文を追加

「１週間の献立計画と買い物リスト管理を行うアプリを作成したい」

「デザインやカラーはモダン、コンテンツ幅は画面サイズごとに一般的なものを適用して」
デザイン性、カラー、機能性を主観で判断

 ログイン・新規登録画面 (※v0は出力なし)

Figma sites ログイン画面


Figma sites 新規登録画面
インプットとしてログイン画面と新規登録画面についても実装するように指示したが、v0の方は実装されなかった。

 週間プラン画面

Figma sites


v0 by Vercel
まず、ナビゲーションバーのタイトルやアイコンはほぼほぼ同じ作りになった。

Figmaの方が丸角でデザインとしては好み。
週間プラン画面は結構異なる実装となった。

Figmaはプルダウンから選択していく形式だが、v0はタイル状のボタンになった。

v0の方は、レシピ名が長いと折り返しで見づらくなりそう。

あと表っぽさが強くてあんまりデザイン的によくない。

 レシピ画面



Figma sites




v0 by Vercel
レシピ画面はv０の方がよさそう。

レシピ詳細画面の見やすさや修正の手軽さもv０優勢。

 買い物リスト画面

Figma sites


v0 by Vercel
v０はチェック済みアイテムの削除ボタンや購入進捗グラフなどが実装されている。

一方Figma sitesは要件定義に実直に従っている印象。

 比較結果ログイン・新規登録画面の実装と献立プラン画面のデザインはFigma、それ以外はv０が優勢だった。

要件定義が同じものとあって、どちらの実装も類似点やデザインが非常に似通っていたが、機能面で大きく差があった。
デザインはFigmaの領分、Webアプリの機能としてはv０の領分、というようなメリデメがあるような気がした。
本来はもっと厳格に比較条件を決めて客観的に比較すべきなんだろうけど、今回の目的は今後使用するAIサービスのゆるゆる選定なので許してください。
ちなみに、v０ではチャットの他にDesignやVars（変数）などかなり開発寄りの支援機能が用意されているので、フルに開発機能を利用するのであればv０の方がおすすめできそう。
v０ならコマンドを１つ実行すればコードベースに実装したコードを追加できるようなので、UIを作りこんでそのまま使うのに非常に役に立ちそう。

Figmaはフリープランだとトークン数制限があることを考慮しても、無料使い放題（多分）のv０をメインで使用するサービスとして使っていこうと思う。

 最後に今回使用した要件定義はGeminiに要求（何を達成できるアプリにしたいか）を投げて壁打ちしながら作ったおかげで、従来の初心者が取りこぼすような要件も掬うことができた。

以前はAIと人間で役割を分担して開発していくものだと思っていたが、多分すべてのフェーズで人間主体でAIの補助を受ける、並走開発が必須になるんじゃないかと思った。
今後は下記の開発フローになるんじゃないかな
要求・企画：人間（何を達成したいか）
要件定義：人間×AI（要求を満たす機能・非機能の定義）
デザイン生成：AI×人間（デザインの生成と修正）
コンポーネント設計：多分人間×AI
実装：多分人間×AI
Figmaとv０で相見積もりができたので、より見やすい・使いやすいようにデザイン改善の指示をして、開発を進めていきたい。