パスワード再設定関連のページの UI 作成 - Githubissues

Mayumi-Nakabayashi / withTone

2 stars 0 forks source link

パスワード再設定関連のページの UI 作成 #6

Closed ken-ty closed 1 year ago

ken-ty commented 1 year ago

やりたかったこと

パスワード再発行ページ, パスワード再発行確認ページのレイアウト作成.

やったこと

Figma に沿って UI を作成した. Figma がとりあえず文言置いた, くらいに見えたので, 細かいレイアウトや文言はよしなに調整しました. https://gyazo.com/f14a77d57fcbb8e0b868e3d10962dacd

調整箇所

タイトルは Login の "Welcome Back" と同じスタイルにした.
文言全般, 左揃えにした.
パスワード再発行ページの文言だけだと, メアドを送信したらどうなるか, が書かれていなかったのでユーザー目線不親切だと思ったので, 「再設定用のメールを送信します。」の文言を追加した。それに合わせて、パスワード再発行確認ページの文言を調整した.
パスワード再発行確認ページの「10 秒後にログインページに戻ります。」について、別になくても困らない機能なので削除した。個人的にwebぽくて, ないほうがシンプルになると判断した.
パスワード再発行確認ページの「パスワードを再発行しました。」は,ユーザーの好みのパスワードを設定できる想定挙動と一致しないので削除した.

ken-ty commented 1 year ago

@Mayumi-Nakabayashi さんから meet でいただいたデザイン指摘箇所、上記終わったらマージの約束で承認もらった

文字は変更した内容でOK
タイトルどっちも消そう
メアド入力フォームとメアドの文字近い、余白感大事
ボタンの色変える

ken-ty commented 1 year ago

タイトルは取ったら画面の締まりがなくなった。再度まゆみさんに相談し、 1 タイトルあり https://gyazo.com/17083b59ca78707fd9b44d32ff26e7a5 2 タイトルなし https://gyazo.com/2e29f8005933d9617c2b90e9b1a5db66 3 figma https://gyazo.com/41173bc668f3a4d1cbb60246653b15ab なら 1 が良いということで, タイトルは取らない。