はじめに
自分は正直デザインが苦手です...。
なので個人開発で画面のイメージを作ってみたものの、パワーポイントでただ図形をはっつけたような悩ましいもので「なんとかならないものか」と頭を抱えていました。
そんな時に色々調べてく中で出会ったのが、VercelのAIツール「v0」。
なんとなく試してみたら、いい感じになったのでデザイン苦手な人でも大丈夫ですよってことで記事にしようと思いました！
v0とは
Next.jsを開発しているVercel社で開発されたAIツールです。
自然言語でUIないしはコードを生成してくれます。
いい感じにしてもらう画面とその概要
まずは、僕がfigmaで作った、こちらの壊滅的なデザインをご覧ください笑
以下のイメージで画面を作りましたが、ここからv0にいい感じにしてもらおうと思います。
コンセプト
身近にふと感じた些細な幸せを気軽に記録できる日記アプリ。
ユーザーの「心がほっこりした」という瞬間を増やしたい。
機能の概要
以下のような画面、機能を想定して作りました。
- ホーム画面
- 褒めてくれるキャラクターが常駐している
- 記録した日記の数を月ごとに換算して表示してくれる
- 日記追加のボタンもある
- 日記追加画面
- 日記を記録する画面(ただし、ホーム画面に集約できそうなので今回は対象外にします)
- 一覧画面
- カレンダーをクリックすると過去に記録した日記を閲覧できる
- 設定画面
- まだ固まってないが、テーマ変更などをイメージしている
いい感じにしてもらう
僕のデザインに引っ張られないよう、キャプチャは添付しないで行い、力量を確かめます笑
あくまで「いい感じに」になることを目的としているので今回はある程度よさげだったらOKにします。
ホーム画面
まずはホーム画面から、以下のように聞いてみます。
日記アプリのホーム画面を作成してください。 以下の要素を含めてください：
・一番上のカードには「今月の幸せメモリ」というタイトルで記録した数が表示
・真ん中にユーザーを褒めてくれるキャラクター（画面内に常に表示される仮想キャラクターのような存在）
・下には「小さな幸せを記録する」という文言のボタン
・デザインの雰囲気は「薄いピンクで温かみのあるモダンなUI」にしてください。
・スマホライクな画面
するとこんな感じになりました。最初よりはよさそう、、、
もう少し、かわいくシンプルな感じにしてもらいます。
いい感じになりました！
日記追加
「小さな幸せを記録する」ボタンから日記追加のダイアログのデザインもしてもらいます。
以下で聞いてみます。
「小さな幸せを記録する」ボタンをクリックしたら、日記追加のダイアログを出すようにしたいです。
その際以下の要素を入れてください
・気分を絵文字で選択できる
・画像をアップロードする欄がある
いい感じのを作ってくれました！
しかも、ものの数分で実際に動くものも作るという...恐ろしや
一覧画面
同じように一覧画面も作ってもらいます。
聞いた内容↓
日記アプリの一覧画面を作成してください。 以下の要素を含めてください：
・一番上にはカレンダーが表示
・カレンダーの日付をクリックするとカレンダーの下に記録した日記のカードが表示
・カードをクリックすると詳細を見れる
ほぼ自分のイメージ通りに作ってくれました。
なんか怖くなってきました...笑
設定画面
最後は設定画面を作ってもらいましょう。
こちらはあまり固めてなかったのであえてふんわりした感じで聞いてみます笑
日記アプリの一覧画面を作成してください。
テーマの変更のほかにまだ案がないのでいい感じの設定があれば適宜追加してください。
なんかいい感じにしてますね笑
ところどころ動いてないところもありますが十分すぎるくらいやっちゃってます。
iPhoneの「設定」のUIに近い感じです。
最後に
画面を「いい感じにしてもらおう」と思ってv0に頼んでみたところ、なんと実装まで含めてコード生成してくれる優れものでした。
しかも、ディレクトリ構成込みでNext.js（App Router構成）＋TypeScript＋Tailwind CSSのソースコードを生成してくれるうえ、そのままVercelにデプロイすることもできます。
正直、ちょっとしたアプリならほぼAIだけで開発できてしまいそうな勢いです。
「イメージはあるけど、いざデザインに起こすとうまくいかない…」という人は、UIデザインの壁打ち相手として使うのもおすすめですし、プロトタイプをまずv0に作ってもらい、そのあとで自分好みに改良するといった使い方も十分アリだと思います。