正月休みにVercel v0を試してみたのでその記録です。Vercel v0はUIのプロトタイピングに適したAIツールです。
サンプルとして図書館の貸出システムの画面作りを試してみました。具体的な操作方法はここでは割愛します。
まずは失敗作から。
v0を初めて使ったのですが、最初は次のようなプロンプトを入力して一発で作成をさせました。
図書館の総合貸出管理システムを構築したいと考えています。
貸出・返却予定の本の登録・削除や利用者情報の管理ができるシステムが必要です。
本の返却期限が過ぎると、システムから延滞通知が送信されます。
利用者は本の貸出・返却時に利用者カードを提示します。
司書は利用者カードを読み取り、貸出時に本に貼付されたバーコードから
書籍情報を読み取って利用者の貸出情報に登録し、返却時にも書籍情報を
読み取って貸出情報から削除します。
新規登録時には、本にバーコードを貼付し、図書館の蔵書マスタに情報を登録します。
(実際は英文にしてから投入)
結果、こんな画面になってしまいました。
意図は伝わっているようなのですが、UIとしては使えないです・・
以下、作戦を変えてやり直した結果です。
はじめにメニューを作る
一般的な図書貸出管理のWebシステムを作りたいです。
図書の貸出管理では主に3つの管理作業が必要です。
1. 利用者管理
2. 蔵書管理
3. 貸出管理
4. 返却管理
5. 延滞管理
これらはいずれも図書館の職員によって操作されます。
以上の管理を行うために、1～5の各管理画面を用意します。
トップページは各管理画面へのリンクを集めたメニュー画面とします。
これでメニュー画面を作りました（見た目は気に入らないので後で直しました。後述）
各画面を作っていく
次に、メニューに表示された各画面を作っていきます。
ここでのポイントは業務的な情報も伝えつつ、ある程度UIについての希望も伝えることです。
例としては、
この一覧の左端にはチェックボックスがあり、返却する書籍を選択できるようになっています。
などです。
以下、各画面を作ったときの入力と画面を載せます。
利用者管理
利用者管理では、利用者の住所、氏名、メールアドレスの情報を登録し、利用者番号を採番します。
利用者には利用者番号をバーコード化した利用者カードを発行します。
蔵書管理
蔵書管理では蔵書書籍の情報を管理します。書籍名、ISBN番号、著者、出版社、発行年月の情報を登録し、
蔵書番号を採番します。蔵書には蔵書番号をバーコード化したラベルを書籍の表紙に添付します。
貸出管理
貸出管理では利用者番号をバーコードスキャンで読み取り、その番号で貸し出している書籍の情報を
検索します。結果は貸出書籍の一覧として表示されます。
この一覧画面に貸出登録というボタンがあり、それを押すと蔵書番号を入力できるポップアップが
表示されます。そこで蔵書番号を手入力することもできますし、蔵書に添付されているバーコードを
スキャンすることでも登録ができます。ポップアップでは追加ボタンを押すと貸出一覧に行が追加
されます。保存ボタンを押すことで、貸出情報が更新されます。この時自動で返却期限が登録されます。
返却期限は書籍貸出日から3週間後となっています。
サンプルデータの追加
画面はできましたが挙動が確認できないのでサンプルデータを入れさせました（v0ではデータベースを持っているわけではないので、利用者管理や蔵書管理でデータを入れてもそのデータを貸出管理では使えません）。
貸出管理のサンプルデータを追加してください
このようにユーザーIDを指定すると貸し出している書籍が表示される様子が分かります。面白いことに、ここでサンプルデータを入れさせたことでなのか、返却管理や延滞管理では何も指示しなくてもサンプルデータが入った状態で画面が出来上がりました。
返却管理
ここでは先に書いたようにUIについて具体的な注文を付けています。
返却管理でも利用者番号をバーコードスキャンで読み取り、その番号で貸し出している書籍の
情報を検索します。結果は貸出書籍の一覧として表示されます。この一覧の左端には
チェックボックスがあり、返却する書籍を選択できるようになっています。チェックを入れて
返却ボタンを押すことで書籍の返却が完了します。
延滞管理
延滞管理では利用者番号ごとに返却期限を過ぎている貸出書籍の一覧を表示します。
また、延滞のある利用者には返却までの毎日午前8時にメールで延滞があることを自動で通知します
（自動通知なので通知を飛ばすための画面はありません）
最後はメニュー画面の修正
v0では具体的に指示を出すことで、画面のデザインも変更することができます。
BEFORE:
トップのメニュー画面では、各メニュー項目を縦に並べ、各メニューボタンの色を
グレーに統一してください。
AFTER:
こんな感じでUIのプロトタイピングをコーディングレスでできるようになります。
これでお客様とだいたいの画面遷移やワイヤフレームを握って本格的なUI開発に取り組むことで、齟齬の少ないUI開発が可能になると考えられます。デザインの修正も追加でプロンプトを与えるだけでできるので、修正コストが小さいです。これはUI開発にとって大きな前進になるのではと考えられます。
以上、v0体験談でした。
仲間を募集しています！
ARIではエンジニア・ITコンサルタント・PM職全方位で仲間を募集しております。
カジュアル面談、随時受付中です！
ご興味ある方はこちらをご覧ください。