
Daily UI はじめます。(Day1)
みなさま、初めまして!
今日からデザインのアウトプットの場としてこのnoteを活用していきたいと思います。
テーマなどはDaily UIのものを使用しています。
それでは早速、初日の投稿です。
ステップ1, サインアップ画面に必要な要素を洗い出す
まず初めに、サインアップ画面にはどんな要素が必要かを考え、洗い出した結果以下のようになりました。
メールアドレス
パスワード
初めての場合、新規登録
二回目以降の場合はログイン
Gmail, Facebook, twitterと紐付けたログイン用のボタン
ログインするアプリのタイトル
ここでひとつ疑問に思ったこと🤔
スマホでwebサイトを見ていて、とあるアプリにリンクが飛んだのちに、「ログイン」や「登録」を求められた経験はありませんか?
「ログインせずにそのまま見ることができたらいいのに…」とか
「今はこの情報にアクセスしたいけど、今後多分使わないから登録はしたくないな…」とか。
ログインや登録が手間だなぁと思った結果、情報に辿り着かなかったりユーザーが離脱してしまう瞬間って、多いのではないかなと思いました。
確かに、アプリ側からしたら、ユーザーを増やすいい機会になるかもしれないし、ログインしてみてもらった方が見やすくユーザーにとって優しい画面かもしれない。
でも、その過程でユーザーに不満が生まれたり、離脱してしまう原因を生み出しているならば、省略したりログインせずにある程度見やすい画面を設計するべきなのでは?と感じました。
ステップ2, アプリを仮定して、トンマナを設定する
話を戻して、二つ目にしたことはログイン画面のトンマナを決めることです。今回はログイン画面のみ作成なので身近な友人をペルソナに設定してトンマナを決めました。
19歳 女子大学生
都内のキャンパスに通う
カフェでアルバイト

ステップ3, UI画面を制作する
最後に、本題となるUI画面の制作をします。

制作を終えて
今回作ってみて感じたことは
トンマナを決めてもどこに何色をどれくらい配置するか迷った。
フォントに関する知識が浅く、タイトル部分に何を使用するか迷ってしまった。
改善点として
メインカラー、サブカラーなど優先順位をつけて、配色してみる
フォントの持つイメージや歴史に関して勉強する!
次回より良いデザインができるように頑張ります!
最後まで読んでいただきありがとうございました!💌