Daily UI #001 「Sign UP」新規登録画面
こんにちは、ゆうきです
Daily UI 1日目のお題「Sign UP（サインアップ）」についてまとめていきます。
前回は、課題を進める上で業種のお題シートを活用する方法についてお話しました。
制作の流れ
お題に関連する業種を選択
シートを使って引き当てた業種は「音楽・芸能・映画・テレビ」となりました。
「サインアップ」に関連するものということで、「動画配信サブスクアプリ」の新規登録画面のUIデザインを作成していきます。
簡易的なペルソナ設定
まずはChatGPTを使い、アプリを利用するユーザーの簡易的なペルソナを作成しました。
名前：鈴木健太郎
年齢：21歳
職業：大学生
映画が好きで、空いた時間はサブスクで映画やドラマを観てます。
将来は映画監督を目指してるよ！！
アプリ登録の新規画面で求めるもの
①ソーシャルログイン
SNSを頻繁に利用しているので、自分のアカウントを使って簡単にログインできると嬉しい
②新規ユーザー向けの簡単な登録手続き
登録手続きが簡単でストレスなく完了できると良い
手続きが複雑なアプリにはあまり時間を費やしたくない
動画サブスクアプリの調査
最初にユーザー数の多い人気のサブスクアプリを調査しました。
ダウンロードからアカウント登録・完了までのプロセスを確認した上で、共通しているパーツやアプリ内カラーなどを調査し、デザインの作成に入って行きます。
今回調査したアプリは下記になります。
- ネットフリックス
- Hulu
- FOD
- ディズニープラス
- Spotify
UIデザインを作成
調査したアプリを参考にデザインの作成に入って行きます。
動画配信サブスクアプリの多くが背景色が黒色つまりダークモードをデフォルトにしているパターンが多かったので、模倣して背景色は黒色にしています。
※注. 本来ワイヤーフレームの作成を行った上でデザインを行った方が良いのですが、WFの作成だけで半日かかりそうなので、省略しています！！
トップページ
「サインアップ」のお題でトップページ？
ニー⚪︎で時間があるのだよ
その画面に至るまでのプロセスはなるべくデザインします。
「デザイン力をつける」という背景もありますが、ユーザビリティを最小限考えて取り組むのであれば、ユーザーがサインアップするまでに至った過程を簡単に考えるのもありです！！
言語切り替え機能
プルダウンメニューで実装することで、拡張性が高く言語の増減時に対応しやすくなります。
UIの観点から表示するラベルにはそれぞれの言語を表記するようにしています。
- 英語 → English
- 中国語 → 简体中文 / 繁體中文
- 韓国語 → 한국어
ソーシャルログイン機能
ペルソナが求めていた「①ソーシャルログイン」「②新規ユーザー向けの簡単な登録手続き」を解決する方法としてソーシャルログイン機能を実装しています。
登録において新しいIDやパスワードを登録する必要がないので、SNSのアカウントを持っているユーザーから気軽に登録することができます。
ソーシャルログインで一番利用率の高いSNSがLINEということでボタンの並び順もトップに配置し、次に2番目に利用率の多いGoogleアカウントを配置しています。
新規登録
お題のメインである新規登録画面のUIデザインです。
「メールアドレス登録画面」「情報登録画面」の画面をそれぞれ作成しました。
認証コード
ネットフリックス以外の動画サブスクにはメールアドレスから認証コードを送るパターンが多くみられました。
認証コードは一時的に発行されるパスワードのようなもので、メールアドレスの誤登録や不正登録を防ぐためのセキュリティ措置です
なぜ動画アプリに認証コードが多いのか、
- セキュリティの向上
- アカウント共有の防止
- 契約の遵守
- 収益の確保
これらの観点が理由として挙げられるようです。（注. 個人の見解となります）
コンポーネント機能を活用して実際のイメージを作成してみました。
ステップバーとプロセス文言
登録フローをステップバーと文言で案内しています。
「登録完了までもう少しです！」「これでアカウント登録は完了です！」のようにユーザーに語りかけるような文言が多用されていました。
・ユーザーがサービスに親近感を感じる
・親近感を与えることで登録のストレスを軽減する
・親しみやすい印象を与えることで、ブランドのポジティブなイメージを築くことができる
ということなのでしょうか？
まとめ
初挑戦したDaily UI 1回目のまとめです。
- 言語切り替え機能のラベルにはそれぞれの言語を表記する
- 登録を簡単にするためソーシャルログイン機能を持たせる
- ステップバーと文言は登録フローやお問い合わせフォームでは実装すべし
- お題以外で関連するページを作成するとプロセスが繋がり構成を考えやすくなる
Daily UI #001 「Sign UP」新規登録画面 プロトタイプはこちら ↓ ↓
初回となる今回は制作に5時間以上はかかりました笑
トップページからの遷移を含めたことにより、デザインの制作に時間がかかりすぎたことが原因ですが、学びとなるので良しとします！
これからDaily UIの制作記事を投稿していきますので、また次回ご覧いただけますと幸いです！
最後までご覧いただきありがとうございました！
