会員登録ページ - UIデザインチェックリスト
こんにちは。デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社のデザインチーム、ナンシー🙋🏻♀️です。
crage社内には、デザインを作りながら確認するためのUIチェックリストが存在します。
各案件によって柔軟に対応するため、いつでもこのリストを正しいとはせず、あくまで指針として用意しています。
今回は、「会員登録ページ」のチェックリストをご紹介します。 ※2023年4月13日更新
▼テキストフィールドのUIチェックリストはこちら
▼ログインページのUIチェックリストはこちら
✅ チェックリスト
会員登録のタイミングに合わせたコミュニケーションができているか
その会員登録はどのタイミングで表示されるものですか？必要に応じて、コミュニケーションを変更しましょう。
たとえば、下記はnoteの例です。header内の会員登録ボタンを押下した場合と、有料記事内の購入するボタンを押下した場合の画面です。
メッセージが異なる他、画面遷移なのか、モーダルで表示されるのか、UIにも違いがあります。
ゲスト状態での利用を検討する必要はあるか
サービスによっては、会員登録ではなく、ゲスト状態で後続のフローに進む方が、ユーザーにとって親切な場合があります。会員登録が必要か、一度検討してみましょう！
また、iPhoneアプリなどの場合、全ての機能で会員登録を必須にするとリジェクトになる可能性もあるため、気をつけましょう。
登録の形式や方法についても検討しましょう
登録の形式や項目などは、このようなものがあります。
パターン１：メールアドレス + パスワード など
パターン２：仮会員登録を利用するなど 疎通があるパターン
パターン３：電話番号（SMS）を利用するパターン
企業もしくはサービスのロゴはあるか
これから何のサービスに登録しようとしているのか視覚的に理解しやすくするためです。
タイトルはつけているか
会員登録ページと、ログインページはそっくりであることがあります。
また、先程のnoteの事例などであれば、すでに会員登録済のユーザーにとっては「ログインするページ」と思い込んでしまうこともあります。
ログインしたいのに、そのまま新規登録にすすみ、メールアドレスとパスワードを入力してから気がつく…というのは悲しいです。
見出しの他にボタンの置き方や、ボタン内のラベルで、より新規登録画面であることを示すこともできます。工夫してみましょう✨
会員登録すると何ができるのか説明をしているか
会員登録ページに遷移する前に、登録することで得られる素敵な体験を十分に説明している場合は不要です。必要な情報を最小限に、サクッと登録に進めるようにしましょう。
私たちがいつでも意識しておきたいのは、「会員登録はとってもめんどうくさい」ということです。
なので、その「めんどう」なことを通り抜けた先に、どんな素敵なことが待っているのかは、きちんと説明して、登録後の素敵な体験を想像してもらえるようにしましょう💫
登録時の入力項目は最小限となっているか
会員登録は「めんどう」なのです。いつでもこれを忘れてはいけません。
ユーザーが登録時に入力情報を誤ってしまうこと防ぐため…という気持ちもわかりますが、2回入力いただく以外に、誤りを防ぐ方法はありませんか？
「登録」ボタンを押下した後に、モーダルで本当に入力のアカウントで問題ないか、ユーザーに確認してみるのもいいかもしれません。
また、そもそも、入力ミスは、実際にどのくらいの頻度で起きるものでしょうか。
登録後から変更することも可能です。2回入力が本当に必要であるか、検討してみましょう。
アカウント名やパスワードの2回入力は不要
入力誤りを防ぐために、アカウント名やパスワードを2回入力するような導線もありますが、基本的に不要です。
まず、誤る確率はものすごく高いでしょうか。もし誤ったとしても、あとから変更することはできます。
また、ユーザーに登録する以前に確認してもらうとしても、ユーザーに手間をかけない、他の方法があるはずです。
例えば、登録ボタンを押下後に、「mail@example.com で登録します。よろしいですか？」といったメッセージを添えた確認モーダルを表示するなどです。
パスワードに関しては、各入力フィールド毎に、入力に問題がないか、バリデーションにひっかからないか、ユーザーにフィードバックを返してあげるとよいかもしれません。
その項目が必須入力なのか、任意項目なのか分かるようになっているか
スキップしてよい項目はスキップしてしまいたいのです。ユーザーはいつもこの気持ちであることを忘れないでください。また、任意項目にするのであれば、その項目を登録時に設置する必要があるのかも検討してください。
場合により、パーソナライズ設定導線に項目自体を移動することも検討してください。
パーソナライズ設定を行う導線は、サービスにより、会員登録の前にも後にもくる可能性があります。
アカウント名のインプット要素はあるか
一意の情報のもののうち、ID、メールアドレス、電話番号 等、要件によって入れるべき内容が変わります。「メールアドレス もしくは 電話番号」といった時もあります。
提案しつつ、PMと開発に確認してください。
入力したパスワードを「＊（アスタリスク）」に置き換えているか
実は画面をこっそり覗き込まれていた…というユースケースはほぼ無いと思います。
しかし、ユーザーの不安をなくすために、また、過去に入力されたパスワードが、入力補助機能によって「＊（アスタリスク）」表記されたときにパッと見でパスワードであることが理解できるように、アイコン的な意味合いも込めてパスワードは見えないようにしておきましょう。
パスワードを可視化できるようになっているか
パスワードを表示する機能は持っておきましょう。なぜなら、パスワードを強化することがユーザーに求められている中で、強化されたパスワードは入力ミスされる可能性が高いからです。
ユーザーが送信ボタンを押下する前に誤りがないか確認できるようにしておきましよう。
その際、可視化の機能はチェックボックスで用意するほうが無難です。
「表示」「非表示」の目のアイコンは、パスワードを入力する前に表示設定にしておきたいユーザーにとって、「アイコンを押下すると、表示されるのか、非表示になるのか」不明確だからです。
パスワード作成のルールは説明しているか
せっかくパスワードを作成した後に、エラーを返した挙げ句、「実はこんなルールがありまして…」という説明をするのは、悲しいです。
あらかじめ、パスワード作成のルールはユーザーが理解できるように説明するようにしましょう。
バリデーションにひっかかる場合は即時エラーを表示しているか
いざ「登録」…! エラーです…なんて、悲しい体験をユーザーにさせていはいけません。
バリデーションにひっかかる場合は即時修正してほしい旨、ユーザーにフィードバックを返しましょう。
ペースト可能になっているか
時々、ペーストできないサイトに出くわします。これは2つの意味合いであまりいい体験ではありません。
いつも利用できる挙動(ペースト)が、実施できなかったこと。想像していなかったイレギュラーな挙動は、ユーザーに負担をかけます。ユーザーがいつも通りに自分のデバイスを使えるようにしましょう。
強力なパスワードにすればするほど、コピー・アンド・ペーストすることが想像できます。ペーストができないとなると、ユーザーは簡単なパスワードを利用したくなってしまいます。
プレースホルダーテキストがユーザー入力のサポートになっているか
テキスト入力時、プレースホルダーは消えます。プレースホルダーをラベルの代替にしないよう注意しましょう。プレースホルダーが消えてしまうと、何を入力すればよいかわからなくなる…なんて状態は悲しいです。確認画面がない導線の場合は、ユーザーは入力内容を削除しない限り、入力内容が正しいかどうか分からなくなります。
プレースホルダーによってユーザービリティが左右されることは多いと思います。
必要に応じて、フローティングラベルや、ラベルやプレースホルダーとは別に、Hint textやSupporting textなどを利用することを検討しましょう。
なお、Apple Human Interface Guidelinesでは、Material DesignのSupporting textのような項目はなく、プレースホルダーのように、テキストフィールド上に設置することをガイドの中で示しています。
画像引用：Text fields – Material Design 3
ローディング画面を用意しているか
会員登録の処理には時間がかかることもあります。
画面が動かないままだと、本当に登録されているのかな？とユーザーは不安になります。結果、何度も登録ボタンを押下させてしまうかもしれません。
押下後、登録処理が進んでいることが見た目でわかるようにしましょう。
✨オプション
ソーシャルログインを検討する
アカウント / パスワードを入力するより、アクション数が少なく、パスワード忘れも防止できるため、ユーザーにとって楽です。
ソーシャルログインにおいて、なにを利用すべきか迷ったら、一般的な利用状況を確認しましょう。
参考：ソーシャルログイン利用状況調査2022｜ソーシャルログイン / ID連携の導入・実装支援サービス「ソーシャルPLUS」
また、各アカウントのログインボタンは、ガイドラインが存在することが多いです。確認するようにしましょう。
Yahoo! JAPAN：Yahoo! JAPAN IDログインボタン デザインガイドライン - Yahoo!デベロッパーネットワーク
Google：ログインにおけるブランドの取り扱いガイドライン | Google Identity Platform | Google Developers
Facebook：ユーザーエクスペリエンス設計 - Facebookログイン
Twitter（とくになし。ロゴのガイドライン参照。）：Twitterについて | Twitterロゴ、ブランドガイドライン、ツイートツール
料金プランの紹介
まずは無料で利用できることを説明できてもよさそうですよね✨
可能であれば、登録ボタンまで含めて1画面に収める
なんの項目を入力しなくてはいけないのか、ユーザーが会員登録画面に遷移した際にわかるようにすると、ユーザーの頭の切り替え、心の準備ができますよね。
ボタンまでは1画面に収まっていれば、ボタン = 登録のゴール であるので、何が必要なのか、ユーザーによってより親切に伝えることができます。
パーソナライズできる登録を検討する
SNSや学習サービスなど、ユーザーのニーズに沿った情報を提供するサービスの場合、登録時点でユーザーの興味・状態の情報があると、登録直後の体験が素敵ですよね。
パーソナライズに関する登録は、アカウントやパスワードといった必ず必要な情報の前に登録する、後に登録する、どちらのコミュニケーションもありえます。
ターゲットユーザーの気持ちやユースケース、サービス提供側の要件や要望に沿って、どのタイミングでユーザーとコミュニケーションをとるかは、検討してみましょう。
なお、パーソナライズ登録は、あくまでも任意で問題ない情報のことが多いです。そのため、登録自体をスキップできるようにしましょう。
また、パーソナライズ登録だからこそ、慎重に吟味して登録したいユーザーも多いはずなので、ステップ形式の登録にするのであれば、必ず戻る挙動を入れるようにしましょう。戻るユースケースが少ないとしても、「戻る」ボタンがあるだけで、安心できるものです。
ステップ形式の登録を検討する
可能であれば1画面に収まるようにしたいところですが、サービスに応じて1画面で収められないこともあると思います。その際はステップ形式を検討しましょう。
ステップ形式にする場合の注意点はいくつかあります。
注意点
何ステップあり、今何ステップ目なのか、進捗がわかるようにすること
前の画面に戻ることができるようにすること。
その際、何を入力する画面に戻れるのかわかるようになっていると、より親切です。直前のステップではなく、何ステップも前に戻るようなユースケースもあるためです。（サービスにもよりますが）最後に一連のステップで何を入力したかわかるよう、確認画面を用意すること。変更したい場合はスムーズに変更できるような導線を設けること。
ステップ形式のUIをいくつかご紹介します。
UIパターン
パターン１：「次へ」押下で横にスライドしていくUI
パターン２：「次へ」押下で下に項目が追加されていくUI
パターン３：LINEなどのようなチャットのようなUI
📃 画面例
note
サイトはこちら：https://note.com/signup
サイトはこちら：https://ja-jp.facebook.com/reg/
📝 参考記事や本
🗣 よもやまばなし
初めて作成するフォームであることが多い
デザインする画面の中で初めてデザインするフォームであることが多いと思います。
コンポーネントとして、以下を会員登録画面作成時に決めておくと、後続がスムーズです✨
ラベルを上に設置するのか、横に設置するのか、フローティングラベルにするのか
レスポンシブになった際に、どのようになるのか
各項目名はどのような名称にするのか
各項目に対するプレースホルダーどうするのか
各ステータスのデザインはどのようになるのか
🔖 他のデザインチェックリストはマガジンから
crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください！
新たな才能、求めています。
デザインチームのページはこちらから
この記事が気に入ったらサポートをしてみませんか？