v0を使用してデザインセンスのない自分のGUIを向上させてみる！！

最近Web系で働かれているUIデザイナー、それをコードに落とし込むエンジニアの中でv0が流行っていますね！

v0では自分がイメージしているGUIについてのプロンプトを投げると、それを実現するためのコードをそのコードを動かしたときのプレビューと共にレスポンスしてくれる生成AIです。
自分はReactは絶賛勉強中でまだまだ分からない点が多く、コード補助の部分ではまだまだ活躍してもらってる感じはありませんが、GUIの発想を膨らませるのにはとてもいい！(コードの話はまた今度・・・・・)
というわけで今回はv0を使って最も基本的なGUIの一つであるボタン(広義の意味)について考えてみたのでそれを共有したいと思います。今回はボタンを押すと、ある画像の色を変えることが出来るようなGUIを様々な形でUnityを使って作成してみたのでそれを紹介していきます。

・プルダウン

色の名前をプルダウンに追加しておいてユーザーに押してもらうことで色を変化させるというものです。
例えば以下のようなUIが考えられますね。

Unity標準のプルダウン機能を使用すればこんな感じ。
これは最悪ですね.....。まず英語がわからない人には何のことかさっぱりわからないですし、そもそも見た目もあまりよくありませんね・・・・。
少し工夫してみます。

もしプルダウンで実装するならこれくらいはすべきだと思います。これなら英語がわからなくても色自体を理解することはできます。アクセシビリティだけ考えるならこれだけでもいいと思いますが、ユーザビリティ的にはどうでしょうか？
なんかちょっとダサい・・・・・。
他にもGUIを考えてみます。

・カラーパレット風の表現

たとえば以下の画像のようなカラーパレットを作成してみました。

例えばこんな感じでパレットを置いて、変更したい色の上をクリックすることで色を適用するようなものです。こちらはとてもアクセシビリティの高いデザインで基本的にはどんな人でも直感的にどの色になるかを理解することが出来ます。ただこの色のついた正方形をボタンとして認識できるかどうかは別問題です。

少し工夫してみます！

ボタンをホバーしている際にボタンを少し大きくすることでなんとなくクリックできるような感じが出てきます。また、下に色の名前を出すことで少しリッチな表現ができます。

クリックしている最中は少し小さくすることでスイッチ特有の押し込みを再現します。

クリックを実施したらボタンを元に戻して色を変更します。

このように、ボタンの上にカーソルが乗った際に大きくしたり、下にテキストを出すことでよりボタンっぽい表現ができますし、何と言ってもおしゃれですよね！

実際の動画

回り道をしてしまいましたが、このようなおしゃれかつ分かりやすい表現、デザイナーではない僕には思いつくはずもないわけです。そんなアイデア部分のお手伝いをしてくれるのがv0です！クライアントの中には

「エンジニアベースのデザインでお願いします！！！！！！」(困る......。)

なんてクライアントもいるわけでその中でも少し凝ったGUIが作成できるとお互いハッピーですよね・・・・！