DailyUI #001 ~Sign up~

1日目のお題はSign up画面。
twitterでDailyUIをやっている人たちを見てスマホアプリの画面作っている人が多かったのでとりあえず作成してみました。しかも英語。
using: Figma
date: 2022/01/26(wed.)

イメージ

とりあえず何が必要になるのか考えました。
■ 瞑想アプリ
■ 青、緑系のカラー（リラックスとかスッキリなイメージ）
■最初にSign upとLoginの選択肢があり、Sign upボタンから遷移した後の画面

その他必要な要件

ざっくりワイヤーを引きまして、、手書きで。
この汚さどうにかならなかったのかと誰かツッコんでやってください。

■ ロゴ / タイトル
■ ユーザー名
■ メールアドレス
■ パスワード
■ Sign upボタン
■ twitter / google / facebookでの登録
■ アカウントがある場合はログインへの動線

手書きでざっくりワイヤー

これを元にFigmaでデザインを作成して行きました。

考慮した部分

メールアドレスだけでなく、SNSの情報を用いての登録が出来る仕様にしたところ
▶︎ LINEアカウントで登録出来るものも増えているので、場合によってはそれがあっても良さそう

あえてSign inでなくLoginにしたところ
▶︎ 言葉が似ていてどちらなのかわかりづらいので別の単語を選んだ

背景をグラデーションにした
▶︎ 瞑想アプリを想定したのでグラデーションで色味を変えることによって普段とは違う状態（マインドフルネス）へ移行する様子を表現した

懸念点

フォームのラベルがないため、わかりづらい
▶︎ placeholderに項目名を内包したためラベルを省いたが、入力時にわかりづらいのではないかと思った

入力条件がわからない
▶︎ パスワードが何文字以上なのか、使えるものは何なのか（半角英数字のみなど）を明記してあげた方が丁寧だと思った

次回に続く、、、！