v0、100%使いこなせていますか？

v0はフロントエンドだけのものではない

v0、便利ですよね。私もFigmaの画像をスクショしてv0に渡して使っていました。ただ、最近フロントエンド以外の仕事でv0を使い大きな効率化を挙げることができました。今回は、そのご紹介になります。

mermaidと組み合わせて使おう

まずは、Claudeでもなんでも良いのですが、mermaidでユーザーフロー図を作ります。今回は試しに、観葉植物在庫管理システムを作りたいとします。このときの形式はmermaidを使うようにしてください。理由は、そのほうがv0に正確に理解してもらいやすいためです。
このようなフロー図が出力されました。

mermaidはこちらです

flowchart TD
    Start([開始]) --> Login[ログイン画面]
    Login --> Auth{認証}
    Auth -->|成功| Dashboard[ダッシュボード]
    Auth -->|失敗| LoginError[ログインエラー]
    LoginError --> Login
    
    Dashboard --> ViewInventory[在庫一覧表示]
    Dashboard --> AddPlant[植物登録]
    
    ViewInventory --> Filter[フィルター/検索]
    ViewInventory --> Sort[ソート]
    ViewInventory --> SelectPlant[植物選択]
    
    SelectPlant --> PlantDetails[植物詳細]
    PlantDetails --> EditPlant[植物情報編集]
    PlantDetails --> DeletePlant[植物削除]
    PlantDetails --> RecordCare[お手入れ記録]
    
    AddPlant --> InputDetails[植物情報入力]
    InputDetails --> UploadImage[画像アップロード]
    UploadImage --> SavePlant[保存]
    SavePlant --> ViewInventory
    
    RecordCare --> CareHistory[お手入れ履歴]
    EditPlant --> SaveChanges[変更保存]
    SaveChanges --> PlantDetails
    
    DeletePlant --> ConfirmDelete{削除確認}
    ConfirmDelete -->|はい| RemovePlant[削除実行]
    ConfirmDelete -->|いいえ| PlantDetails
    RemovePlant --> ViewInventory
    
    Filter --> ViewInventory
    Sort --> ViewInventory

v0にmermaidを投げる

v0にmermaidを投げて画面を作ってもらいます。
作ってもらった結果がこちらです。https://v0.dev/chat/ui-xfPXRDDIxhc

スクショも貼り付けておきます。

上流こそ自動レベルが高いツールを使おう

今回挙げたv0もそうですし、Bolt.new、Lovableなど、書けば勝手に作ってくれる系のAIツールは上流にこそフィットすると思いました。なぜなら、デザインを介さずモックを作ることで顧客が実際のシステムの使用感を体感できるからです。結果的に手戻りが少なくなり、要件定義・デザイン・コーディングの工数を大幅に減らすことにつながります。上流はそこまで厳密な動作を求められていないため、現在の不完全な生成AI技術と相性が良いといった側面もあります。ぜひ積極的に活用したいものです。