Daily UI （音声SNSアプリ）DAY1-1

こんにちはスギモトです！（SNS等ではスーギーと名乗らせてもらってます）2022年の抱負はUI/UXのスキルを尖らせることです✨
そのため、普段の気づきや学びを少しづつnoteにまとめていきたいと思います！
学生の頃、一番嫌いな宿題は日記や感想文でした…（今もだけど）
読みづらい所も多々あると思いますがご容赦ください🙏

それではさっそく、カイクンさんの運営されているコミュニティBONOでの学び、アウトプットを綴っていきたいと思います！
音声SNSアプリの新規登録画面UIのフローです。

UIリサーチ

今回参考にしたアプリは、
・Airbnb
・voicy
以上の2つです。

TwitterとInstagramはすでに利用しているので登録画面がみれませんでした。（見る方法があるのかな？今度質問してみよう🤔）
TikTokは生年月日の入力時に「あなたは利用条件を満たしていないようです。お試しいただきありがとうご…」と弾かれました（疎外感…)

◆Airbnb
登録導線は下記の項目
・国
・電話番号
・メールアドレスでログイン
・Appleで続ける
・Googleに進む
・Facebookに進む

気づいた点
・アプリタイトルやロゴの表示無く、いきなり登録導線
・ラベルが入力フォームの中にある！そのためプレイスホルダーは無し
選択するとラベルが小さくなり、入力文字の上に表示される。
(これ初めて見たけど良いなと思いました！)
・「メールアドレスでログイン」がSNS連携と同じ見た目なので、既存ユーザーはログインする時に一瞬迷いそう…
・新規登録の際の入力項目が多い。（国、本名、電話番号、生年月日、などなど）気軽に登録という感じではない。旅行アプリだからしょうがないか…

◆voicy
登録導線は下記の項目
・Googleで簡単スタート
・Appleで続ける
・Facebookで簡単スタート
・Twitterで簡単スタート
・メールアドレスで登録
・アカウントお持ちの方はログイン

気づいた点
・こちらはアプリのタイトルやロゴがある。
・「会員登録は1分で完了」と、登録が簡単であることをアピール
・SNS連携が一番上に来ており、他SNSでアカウントを持っているユーザーは楽に登録へ進める。
・アカウント作成も、名前/メールアドレス/パスワードの3つだけなので気軽に始められる。名前(ニックネーム)という所も良い。
・ラベルとプレイスホルダーが同じ…これならプレイスホルダーいらないような気がする。
・SNS連携ボタンの余白が小さめなのが少し気になる…

共通の疑問点

・なぜAppleだけ「続ける」の表記なのか？iPhoneだからなのかもしれないが「Appleで進む」や「…で簡単スタート」でも良いような気がする。
・SNS連携のボタンの順序はどのようにして決めているのか？

こんどコミュニティで質問してみよう🤔

UIデザインの方向性

二つのアプリをリサーチした結果、今回は主にvoicyの登録画面を参考にUIデザインを進めていこうと思う。

理由は…
・登録が簡単でハードルが引くい
・アプリタイトルやロゴの表示があった方がこれからアプリを始めるワクワク感がある。
が大きな理由。
加えてAirbnbの入力フォームや余白感など良いところは取り入れていく。

UIデザインのラフスケッチ

今回Twitterは競合に当たるかなと考え登録導線から外しました。
このラフを元にFigmaでデザインを仕上げていきたいと思います。
（改めてみると字汚ったな💦）

次回はUIデザインの過程をまとめていきます。

ここまで読んでくれたそこのあたな、本当に本当にありがとうございました！