こんにちは。
6月は学校の課題がいっぱい出ていてやや密なスケジュールです。
でも、なんとか自主的な勉強（特にUI・UX）も進めたいと思っています。
前々から紹介しているUI・UXの学習コミュニティBONOの、「ビジュアル基礎」シリーズの最終ゴールとして
「音声SNS」のUIを1日に1シーンずつ制作するというものがあります。
全部で6シーン（6日分）なので、1日1シーンやって随時、制作物と振り返りを載せていきますね。
＃1 新規登録のUI
お題と要件
お題スライドはこちら。
要件は以下です。
- Eメール、パスワード、利用規約を表示する
- 既存登録者に向けてログインの導線を用意する
前提
肝心の音声SNSのコンテンツ部分（メイン画面）がどんなものなのかは特に指示がなかったのですが
ほかの講義の動画で見た感じ、Twitterのメイン画面にかなり近い感じなのかなと思っています。
（ツイートの各投稿に音声ファイルが添付されているようなイメージ）
また、「音声のみ」でつながるという機能から、サービスの立ち位置として
- 効率的に情報収集したい多忙な人（耳で聞きながら別のことをしたい人）
- 誰かの声を聞いて温かみやつながりを感じたい不安な人
の2パターンが考えられるかなと。
1は、一世を風靡した「Clubhouse」のようなイメージです。
2は、音声ライブ配信の「Spoon」などのイメージですね。（私は使ったことがないのですが、「寝落ち通話したいならSpoon」みたいな広告を見たことがあります）
今回は、アプリの詳細の情報は与えられていないので
勝手に2の「Spoon」っぽいイメージでつくりました。
私も学校生活が始まってから、丸一日外出せず誰とも話さない日があったりするんですが
そういう日の深夜、なんとなく孤独や不安を感じて眠れなくなったりして。
声とか口調ってその人らしさが表れる部分なので、そういうさみしいときに誰かが語りかけてくれるのを聞いたら少し安心できるんじゃないかな？というニーズを想定しています。
制作物
上記のお題のもと、類似SNSとして主にTwitterとTikTokを参考にしながら私が作成したのがこちらです。
サービス名は適当です。
メインカラーは、優しさや落ち着きが感じられるような青みグリーンにしました。
制作過程
TwitterとTikTokの新規登録UIを見ながら、使いやすいと思ったほうに都度合わせる形で設計していきました。
具体的には以下です。
- 最初の画面（外部アプリと連携するかどうかを選ぶ場面）はTwitterのほうがシンプルで見やすいと思ったのでそちらを採用。
- 実際に必要事項を記入していく画面は、1項目入れるごとに画面が遷移するTikTokのほうが画面が見やすいし、気が散らないと思ったのでそちらを採用。
この、内容入力画面が複数ページに渡っているほうがいいのかどうかは、けっこう意見がわかれるところなのかもな…という気もします。
私は1項目1ページのほうが、そのページ内で行うタスクが少ない分、気楽に感じるんですけど
全体像（何ページ続くのか）が見えない分イライラすることもあるだろうな〜と思います。あと、ページが増えるからコーディングの手間も増える…ってことですよね？たぶん。
なので、その改善として、実際のTikTokのUIにはなかったページネーション？（グレーの●をページ数分並べて、ページ全体の数と現在地がわかるようにする）をつけました。
ページタイトルのすぐ下に入れるスタイルをあんまり見たことがないのでちょっと変かなと思いつつ、
画面下部に入れると入力時にはキーボードで隠れちゃうなぁという葛藤があり、いったん上に入れています。
あと、ページタイトルもTikTokでは「登録」、Twitterでは「アカウントを作成」となっていて
「アカウントを作成」のほうがわかりやすいと思ったのでそちらに倣っています。
一方でこれも、「アカウントを作成」では文章が長すぎて直感的にわかりづらい、という意見もあるのかもです。
2つのアプリを見比べると、いろいろな考え方の差異が感じられて面白かったです。
お手本との比較
BONOで公開されているお手本と比較してみたのですが（スクショは控えます）、
どうやらつくるのは一番最初の1ページのみでよかったっぽいです。各項目の入力画面はお手本に入ってませんでした。
一番最初のページに関して、学んだことは
- iOSはAppleと連携してログインする選択肢が必須である
- アクションしてほしいボタンをできる限り目立たせる
- 一番目立たせたいボタンはテーマカラー背景＋白抜き文字が基本 ※コントラスト比に注意
- 本文テキストの色も真っ黒ではなく、青みや赤みなどの加わった少しニュアンスのある黒にするとブランドならではの雰囲気が出る
ということでした。
色に関して、本文テキストの色を真っ黒にしないことに加えて
あえて背景色を白以外にすることでカルチャーっぽさ（テックっぽくない、柔らかい雰囲気）が出るというのが特に新たな発見でした。
今回の音声SNSの私なりのコンセプトを踏まえると、背景を白以外にするのもよかったかもしれません。
あと、調べてみたらメインカラーと白抜き文字のコントラスト比がアクセシビリティ的な基準を満たしていませんでした…。
もうちょっと明度か彩度を落としたほうがよさそうです。
考えることは無数にありますね…。
難しいけど面白いです。
2日目以降もがんばっていきます！
