【UI/UXデザイン】 音声SNSアプリ 『コエログ』 制作記録 #3
こんにちは、かむと申します🐿️
現在、BONOというコミュニティでUIUXデザインの学び直しをしています！
音声SNSの主要なUI画面を作るという課題の制作過程を3回に分けて発信しています。こちらはその3回目です。
今回はUI制作の後編とまとめの回となります！
前回の記事はこちら👇
↑プロトタイプを見たい方は目次の ★完成！ をご覧ください🙏
前々回のおさらい：コンセプト
前々回考えたコンセプトをもとに制作するので、改めて共有します。詳細はこちらの記事をご覧ください🙏
このアプリに抱いてほしい印象（アプリの人格）は以下イメージです。
これらイメージやコンセプトを意識しながらUIを制作していきます！
安心感 落ち着き 包容力 前向き 成長
リラックス 着飾らない かんたん
STEP4. さがす画面UI
4つめのお題は「他の人の投稿を探す」画面のUIです！
お題の要件は以下の通りです👇
- フィードを検索できるページ
- ボトムナビゲーションでフィード画面と行き来ができる
- 検索フォームを配置
- 検索前の画面もつくる
今回は一度リサーチ→UI制作をしたものの制作したUIがどうもしっくり来ず、もう1周リサーチ→UI制作のサイクルをまわしました。
なのでこれまでのまとめ方と変わりますが、サイクルごとにまとめます！
4-1. さがす画面UI（サイクル1周目）
リサーチは色々見た上で、Stand.fmとXを中心に確認しました。
いずれも探すページに遷移すると、まず ①おすすめを並べて表示するページ があり、検索バーを押すと②検索入力モードの画面 になり、そこの入力に応じて ③検索後の画面 が表示されるといった構成になっていました。
検索は投稿、タグ、アカウントなど、複数の軸での検索を一挙にできるようになっています。他のアプリも同様の設計が多いので、検索の標準的な動きとして踏襲することにします。
リサーチを経て、全体的にstand.fmのUIを参考にして作った探す画面UIがこちらです👇
この音声アプリでは「タグ」「ユーザー」「投稿（ログ と表現）」が検索の軸となるので、その3軸で検索・探せる体験を意識しました。
特に悩んだのがさがすページの初期表示です。情報量が多いので、変に目立つ要素がないか、削れる要素はないか、見せたい要素が見えているか、などを考えながら調整を重ねました。
当時はここまで制作して次の課題に進んだのですが、どうも納得がいきません…。納得がいかないポイントは以下の2点。
さがす画面の初期表示の情報量が多すぎる
アプリ全体を通して「ユーザーに迷わせない」ことを意識してきましたが、現状のUIは1画面の情報量やできることが多すぎて悩ませてしまうと感じました。
タグの表示デザインが統一されてない
検索前と後で、タグのデザインが変わるので、ユーザーが同じものと認識しにくいように感じます。検索前の画面では省スペース、検索後は一覧のしやすさを優先してそれぞれのUIにした（stand.fmを触ってそう感じ、そのまま採用しました）のですが、プロトタイプを触ってやはりわかりづらいと感じました。
どうしてもここは改善したく、このnoteを書く段階で再度サイクルを回しました！
このデザインをもとに、2周目のサイクルに突入します🔥
4-2. さがす画面UI（サイクル2周目）
現状のデザインに対する解決策が自分で思いつかなかったので、再びリサーチをしました。
色々探した結果、radiotalkのUIが今抱えている問題の解決につながりそうです💡
さがすページで初めからタブ表示で検索軸ごとに分けることで、1画面上の情報を減らせる
検索前と後でタブ配下の内容だけが変わるので、各要素のデザインは統一されたものとなる
ということで、radiotalkのUIを参考にして調整版を作成しました！
「さがす」画面はタグで検索軸ごとに情報を切り分け
タグがメインの探す軸になる想定のため、タグをタブの初期表示に
デザイン検討のサイクルをもう1回まわすことでUIが結構変わりました。ver.2が正解とも言えないですが、持っていた課題感は改善できたのでコンセプトや体験を意識してブラッシュアップできたのではないかと思います。
作ったデザインを振り返り改善サイクルをまわすことの大事さを学べました◎
★完成！
作成したUIのプロトタイプがこちらです👇
（前回記事を読んでいただいた方からアドバイスいただき、今回はGIF画像にで共有してみます！GIF変換の影響なのか、少し色味が異なります🙏）
STEP5. 通知画面UI
続いてのお題は通知画面UIです。
お題の要件は以下の通りです👇
- フィード投稿に対する通知の一覧ページ
-「いいね」「コメント」「フォロー」の通知を表示
5-1. リサーチ
通知画面のリサーチは、私自身がSNSをほぼ利用してないというハンデを背負っており（？）かなり厳しかったのですが、かろうじてInstagram、Facebookは通知のバリエーションの表示をリサーチできました。
（個人情報が多いのでリサーチ画面のスクショは割愛します🙏）
以下、UI制作の参考になると感じた点です。
未読の通知を背景色を変えて差別化
プロフィールアイコン、アクションのアイコンを活用
「誰」の「どんなアクション」かをテキストを読まずにわかるようにする
通知画面から関連アクションをとれる動線を配置
例：ユーザーからのフォロー通知→フォローバック
5-2. UI制作（お知らせ画面UI）
リサーチをもとに作成したUIがこちらです👇
ページ名は「通知」ではなくより親しみやすい「お知らせ」としました。
各通知の構成は基本的にFacebookやInstagramの通知を参考にし、通知内の要素の配置は何パターンか制作した上でバランスを見て決めました。
一部このアプリの工夫として、コメント通知からも直接リアクションができるようにしました。都度詳細へ移動するよりもタップ数を減らせるため、気軽にリアクションを返せる体験につながると考えたためです。
また、リアクション後は「アクション済み」と表示することでどこまでアクションができているかを把握できるようにしました。
★完成！
作成したUIのプロトタイプがこちらです👇
こちらも少し色味が変わっていますが挙動イメージとしてご覧ください🙏
STEP6. 設定画面UI
最後のお題は設定画面のUIです。お題の要件は以下です。
- 使っているスマホOSの設定画面を参考に設定画面をつくる
今回は、OSの設定画面を参考にする、という指定なのでOS画面を参考に制作していきます。
＊OSのスタイル準拠で作ると実装が楽になるので、アプリごとの独自性をそこまで出す必要がない設定画面ではOS準拠のデザインを作ってみよう、という意図とのことです！
6-1. リサーチ
設定画面
私はAndroidスマホ端末を持っているので、今回はAndroidの設定画面のUIを参考にします。
私は常時ダークモードで使っていたのでライトモードにした時にびっくりしたのですが、Material Design 3のカラーシステムは「ダイナミックカラー」を採用しており、ユーザーが設定した壁紙や入っているアプリ内の色から抽出された色からカラーパレットが作られ、ユーザーごとに独自のカラーになります。
私は黄色でした。ま、眩しい…🙈（→ 慣れました。慣れればかわいい）
ダイナミックカラーをアプリのデザインに活用するのはなかなかハードルが高そうですね。採用しているアプリがあれば触ってみたい🧐
実機のほか、Figmaで公開されているデザインキットも参考に、設定UIのデザインを検討します。
お題は設定画面ですが、私は設定画面の動線をマイページ上に置く想定のため、せっかくなのでマイページも一緒に作ります。なのでこちらもリサーチします。
InstagramやYoutubeが参考にできそうです。（今回もスクショは割愛いたします🙏）
6-2. UI制作（マイページ・設定画面UI）
リサーチを経て作成したマイページおよび設定画面UIがこちらです👇
設定動線はマイページのヘッダーに配置しました。
AndroidOSに準拠した設定画面
OSの設定画面にならい、大分類ごとに各メニューをまとめ、設定は各詳細ページに潜ってもらう設計としました。角丸や境界線、各要素の余白などはMaterial Design Kitを参考に整えました。
その上で、背景色や使用するアイコンをアプリ全体の体裁と揃えることで全体のデザインともかけ離れないように調整しました。
マイページ
このアプリのコンセプトは声の日記帳を意識しているので、マイページには自分の投稿をふり返りやすい仕組みが必要だと考えました。
その仕組みとして、保存した記事をまとめる「保存リスト」という概念を採用しました。これはYoutubeの「動画を保存する」体験を参考にしています。
投稿を保存する動線は今回デザインに起こしていませんが、
① 保存したい投稿のブックマークアイコンを押す
② 保存リスト一覧を表示
③ 保存先を選ぶ or 保存するリストを新規作成
という流れで投稿をマイページに保存するイメージです。
自分や他のユーザーの投稿を保存リストを自由に作って保存できれば過去の投稿をふり返りやすくなると思います。また、保存リストを任意で公開できれば他ユーザーに対するおすすめリストを作成することもできます。
保存リストの他に、他ユーザーとの交流窓口としてのDM動線を配置しました。
その他細々と検討をしたした過程は下記画像をご覧ください👇
★完成！
作成したUIのプロトタイプがこちらです👇
6-3. あるとよさそう：投稿時の保存先指定
マイページのUIをまとめながら感じたことですが、自分の投稿を保存リストで管理したい人にとって、投稿後ではなくて投稿作成時に保存先を指定できる方が手間が減ってよさそうです。
投稿入力UIの制作時には保存リストを想定していなかったので作ったUIには当然入っていないです。全体のUIを考えた後で改めて各UIや体験を見直す必要があることを実感しました。
今後さらにブラッシュアップする際に検討します💪
まとめ： 学んだこと
最後に、この一連の課題を通しての学びをまとめます！
１、リサーチの重要性
同業種のUIを複数リサーチすることで、多くに共通するUIや、標準的なUI・動線のパターンが見えてきました。
また逆にリサーチが足りなければ、より最適なUIに気付けない場合もあります。
また、普段から触っているプロダクトがあれば「このプロダクトのこの部分のUI応用できるかも💡」というアイディアが浮かんでくることがあるので、普段から色々なプロダクトに触れておくことで自分に引き出しを溜めていくことも大事だと改めて感じました。
２、UIのバリエーション作成・検討
これは学びというより、反省点です。
今回ははじめにしっかりコンセプトを考えて臨んだので、頭の中で割とイメージができている部分もあり、リサーチの段階で「これは方向と合わない」と切り捨てていく場面がありました。ですが、本来は複数パターンのUIを作ってプロトタイプを比較検討することで、リサーチしただけでは想像できていなかった、より良いデザインに至ることもあると思います。
何種類もUIを作成するのに時間がかかるのは間違いないので、制作スピードを上げることはもちろん、AIもうまく活用できればUI案のパターン出しの作成・検討をスピーディーにしていけそうです。今後チャレンジしていきたいと思います！
３、作ったものを見返す
実は、この記事を作るために各お題の制作物を改めて見ると、気になる箇所が目につき、多少修正しながら記事にまとめていました。
作成時は「これが良いだろう」と熱中して作りますが、例えば他作業をした後や翌日など、一度頭を切り替えた後に制作物を見返すことがブラッシュアップには重要です。時間を置いて見直すことで、より客観的な視点を持て、作成中は気づかなかった点にも気づけると感じました。
今回のシリーズはここで終わりです！
3回にわたり読んでいただき、誠にありがとうございました😌🙏
