自己紹介
ユアスタンド株式会社のプロダクトマネージャー、髙原です。
企画趣旨
生成AIを使ったサービス開発を題材に100日連続で記事を書こうシリーズ19日目。
これは2025/06/09に該当する記事です。
今回の取り組み
まえおき
巷で噂のv0に先鞭をつけます。
モチベーション
v0は、これまで当ブログでも取り上げてきたGoogle AI Studioのビルド機能とほぼ同じです。
違いがあるとすれば、Google AI Studioは隙あらばGeminiを使うコード(有料👿)を仕込んでくることですね。v0にはそういったAIを組み込むような暗黙的な仕様はありません。
v0
サインアップ
お馴染みの各種手段でサインアップできます。
非エンジニアの方でもメールアドレスやGoogleアカウントでログインできますね！
- メールアドレス
- Googleアカウント
- GitHubアカウント
- GitLabアカウント
- BitBucketアカウント
ただし、生成されたソースコードの管理を考えるとGitHubなりのアカウントを作っておくのがオススメです。ソースコード管理なんてしねェ！なんていう剛の者は読み飛ばしてください。
トップ画面
生成AIサービスでよく見られるデザイン。
ChatGPT、Claude、Manus、Codex、といった数々のサービスがこのデザインを採用しています。万国共通なんですね。
プロンプティング
今回は下記でやってみます。
# Summaly
シンプルなEV充電アプリをデザインする。
# Requirements
- シンプルで直感的なUI
- 夏を感じさせるデザイン
- 少ないタップ数で要求事項を実現
# 要件
- 充電開始/終了をスワイプで実現。開始は左から右、終了は右から左。
- お気に入り登録されている充電スタンドがデフォルトで選択状態になっている。
# 画面に関する事項
## 画面遷移
- 充電画面
- 設定画面
この2画面のみ。互いに行き来できる。
## 充電画面
- 充電中を示すUI
- 充電開始してからの時間経過を時分秒で表す
- 充電したkWhを表す
- EVに接続された充電ケーブルと、ケーブルが繋がる充電器をリアルなイラストを表示
## 設定画面
- お気に入りの充電スタンドを管理するUI
- サインアウトのボタン類
# その他事項
- サービス名を付与すること。AIが考案してよい。
シンプルな響きだが奥深い、幻想的なネーミングにすること。
生成風景
いつ…動くぞ！*
がんばれー！ブイゼロー！
注文通りにスマホアプリっぽいものができました。
画面下部のトグルボタンを押すことで設定画面と充電画面を行き来できます。
特筆すべきシンプル性ですね。
まだまだUIがシンプルすぎたりイラストが物足りなかったりしますが、たたき台としては十分です。
発展形
- 連携先のFigmaでデザインを編集可能です。Figmaもプロンプティングに対応したので、よしなにやってくれそう。機会があればそちらも検証します。
- v0で生成したデザインはVercelへデプロイし、インターネットへ公開可能です。
- 同様にGitHubのリポジトリへシームレスにソースコードを保存可能です。
あとがき
とりあえず動くものをサッと作るには最適かもしれません。もちろんプロンプティングを重ねることでどんどんブラッシュアップできます。
なおv0はとっくにネット上で話題になってたので、私は全然先鞭ではないです。
次回
未定ですが、何かやります。
Discussion