【Tips】新規登録画面のデザインで気を付けること3つ

こんにちは！PLAY THE DESIGNERメンター兼SNS担当おかちゃん ( @okbchyk ) です🐧Twitterで紹介したTipsをnoteでもご紹介💁‍♀️
今回は「新規登録画面」についてです👀

デザインの基本が詰まった新規登録画面

新規登録画面はデザインで考えることが多い画面。メインの画面ではないけれど、ユーザーが1番最初に見る画面なのでしっかり考えてデザインしたいところ。トレーニングにオススメな画面でもあります！

今回は、新規登録画面のデザインで気を付けること3つをまとめてみました。

1. 要件を把握する

まずは、新規登録画面でできることをしっかり洗い出します👀 例えば⬇️

- メールアドレス・パスワードを入力する
- パスワードは確認のため2回入力
- メールアドレス宛に確認のメールを送信
- 登録済のユーザーはメールアドレス・パスワードでログインできる

他社アプリを参考にして、何ができたらOKか、要件を洗い出してみてください！

2. ワイヤーを書いて、破綻のないデザインにする

気がつくと、新規登録のための画面だけで10枚を超えていることが...！😱
ユーザーが新規登録時に辿るフローを手書きワイヤーで先に書き起こしておくことで、破綻しないデザインへの近道になります。

手書きワイヤーは慣れてくるとスキップしがち。でも、実はとても重要なので、書く癖をつけることをオススメします🙌

3. テキストフィールドのパターンを洗い出す

テキストフィールドを使用する場合、考えないといけないパターンが4つあります📝

1. 空っぽの状態(empty)
2. テキストフィールドを選択し、文字を数個入力した状態
3. 大量の文字を入力した状態
4. エラー状態

ゼロ（空っぽ）・ワン（数個）・インフィニティ（∞）の考え方で、すべてのパターンを作ってみてください！以外なところでデザインが破綻していること、多いんです👀