daisyUIでマッチングアプリのUIをつくってみた

すきなUIライブラリの話をしているときに、知り合いからdaisyUIというものを教えてもらいました<br> かわいくて面白そうだったのでこちらを使って架空のマッチングアプリのUIを作ってみました

daisyUIとは

daisyUIとはTailwind製のコンポーネントライブラリです
https://daisyui.com/<br> SNSっぽいコンポーネントがいろいろ用意されていて、自分で作ったらちょっと面倒なコンポーネントも一言で記述できます<br> daisyUIで足りない部分はTailwindを書いて補っていきます

今回作ったもの

女性の友達作りマッチングアプリ「Cloudy」というものを作ってみました
Githubリポジトリはこちら<br>

コンセプト

既存のマッチングアプリは恋愛に寄っているものが多く、純粋な友達をつくるマッチングアプリはまだ少ないという課題感から生まれました<br> ターゲットは男友達は多いんだけど同性の友達が少なめなサブカル女子です。マッチングしたときに会う場所はシーシャバーを想定しています(Cloudyと提携しているシーシャバーに行けばちょっと安くなるみたいな)<br> マネタイズはCloudyの利用は基本無料で、Cloudyと提携しているシーシャバーでマッチした人が実際に会ったらシーシャ屋さんからマージンをいただくイメージです

つくった画面

トップ画面

制作時間: 2h<br> トップ画面はよくあるマッチングアプリと同じ感じで、ユーザーのカードが表示され、LIKEするかパスするかのボタンがあります。

チャット一覧画面

制作時間: 0.5h<br> チャットの一覧画面は2つのセクションに分かれていて、上側がマッチした人、下側がすでにチャットをしたことがある人になっています。上側は横にスクロールでき、下側は縦にスクロールできます

チャット画面

制作時間: 0.5h<br> チャット画面は特に説明することはありません。送信ボタンをreact-iconsを使ってちょっとかわいくしました

プロフィール入力画面

制作時間: 1.5h<br> プロフィール入力はアイコン、ユーザー名、性別、アプリの使用目的などを入力できます。どれもdaisyUIのコンポーネントを使っており、すぐに実装できました。女性限定のサービスなので、性別の選択肢は女性かどうかをグラデーションで選べるようにしました

daisyUIを使ってみた感想

4画面を5hくらいで作れました。自分で実装するとちょっと面倒なコンポーネントも5秒で実装できる体験はよかったです<br> Tailwindを使うプロジェクトで、デザインにこだわらずにサクッとかわいいものを作りたいというときにすごい良いと思いました<br> ただ、個人的にはTailwindはhtmlが汚れるのでそもそもあまり好きではないので、個人で使うことはなさそうです🥲<br> 面白そうなUIライブラリがあったらまたなにか作ってみようと思います