もえぴ的Trousse UIレビュー

# もえぴ的Trousse UIレビュー ## Trousse trousse.oskt.us ## 理大祭で触ってみて感じたこと - 配色が良い色合いからターゲットは女性ユーザーなのかなと感じさせられるような色合いで、色もかなり少なく絞られていて良かった。 - かなりアニメーションに凝ってるなーと感じたハンバーガーメニューを開いたときの動きがとても好き。 - ハンバーガーメニューに項目突っ込みすぎハンバーガーメニューを使うとまあよく起こるのですが、まあ色々ぶち込める分入れるものが増えてしまうんですよね～。ハンバーガーメニュー開いて下にスクロールしないと全部見れないくらい入ってるのはちょっと項目多い。「○○を追加」で項目分けするのでは無くてなんか別の方法を使った方が良い。 - フォントのweightが全体的に太すぎるこれは総じて感じたのだけどcolorを#000000にしていてかつfont-weightがかなり値が大きいせいでウザさを感じる。font-weightをこのままにしたいならcolorを例えばメインで使っている色を暗くした色(黒に近すぎない)を使うとかなり緩和されるし、#000000でいくならfont-weightの値を600とか700くらいにすればそれはそれで良い。てか普通のboldは700なのでそれ以上太いのは良くない。ここから下はかなりがっつり書いてるので心して読んでください。 - まず何のアプリか分からない多分理大祭に遊びに来た方は一番最初にWeb班のブースがあって結構多くの方が見てくれたと思うのだけど、隣のうどんgameのように「どんなアプリなのか」という説明が無かったのはかなり大きいかも。 - 使い方が分からない１つ目のと同じような事だけど、開いたところで何をすればいいか全く分からなかった。「コスメのWebアプリ」ということまでは仮に分かってもそこからの操作方法とかが何も無かったのはアプリを作るならやってはいけないこと。 - SELECT,FILTER,RESULTの機能がよく分からんもう総じて言ってること同じなんだけど、「SELECTを使うことで何が得られるのか」「FILTERを使うことで何が得られるのか」「RESULTはどんな情報が表示されるのか」が全く分からない。SELECTはコスメを選ぶのは写真があったから分かったけど、RESULTでは何が表示されるのか全く分からなかった。 ## 改善案 - アプリの説明や使用方法は必ずどこかに書く色んなアプリを使っていれば分かると思うけど、必ずどこかに使い方が書いてあるはず。なのでどこかに書くこと。ロゴ出てきてその下に「What is Trousse?」「How to use Trousse」みたいな感じで書いてあると良い。 - 機能の横にでもどんな機能なのか一言で明示する説明書きは長いと人間飽きるので一言でも良いからどんな機能なのか明示してあるとユーザーは「あ、この機能はこんなものなのね！」とすぐ分かる。ユーザーに考えさせてはいけない。 - 使用用途を明確に！！！ UIデザインをする上で最も大事なことなのだけど、「どんなユーザーが使うのか」を超具体的に考えるととても良くて例えば「25歳女性のリカコは都内の広告代理店の編集をしていて、流行にはとても敏感だから沢山コスメを買っているのだけど沢山ありすぎていつも同じものしか使えていない」みたいな。ペルソナっていうのだけどそれを具体的に考えると「何に困っていてどんな機能が欲しいのか」とかすべて明確になってくるので、まあ今回の理大祭でそこまで考えろとは言わないけど**ユーザーを明確にするのはとても重要**。 ## まとめ１年生が作ったとは思えぬくらいとてもアニメーションとか凝っていて本当にすごいなーと思いました。実際私はjs全く書けないし多分今回の理大祭でCSSは抜かれたんじゃ無いかと思います。だからこそUIデザインの重要性を感じて欲しくてこんな長ったらしいものを書きました。ここ最近はなぜかポスターやったり素材ばっか作ってるけど元はWeb班でjsを学んで結果挫折してデザインにのめり込んだ人間です。UIのことならコードは書けないけど少しはアドバイス出せると思うのでなんか聞きたかったら気軽に声かけてください。もえぴより ### P.S. デザインの沼にはまりたかったらいつでもはめます。てかロゴとか作りたくない？？？