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

こんにちは、スーギーです！
さっそくデザイン中の思考を文字にしていきたいと思います。

今回デザインを作成する画面は投稿フィード画面です！SNSアプリでは核となる画面ですので気合をいれてデザインしていきます🔥🔥🔥

UIリサーチ

リサーチを行なったアプリは…
・Twitter
・stand.fm
・Spotify
・Voicy
以上の4つになります。
今回の画面ではオブジェクトが投稿(音声)というのは決まっているのでオブジェクト指向UIのフレームワークに当てはめて考察しました！

◆Twitter
表示情報(プロパティ）
・アイコン
・名前
・ユーザーネーム
・時間
・ツイート文

アクション
・コメント
・リツイート
・いいね
・シェア

気づいた点
The SNSって感じの王道感！誰が何を発信しているかが明確で、コメント数やいいね数なども見え、そのツイートの注目度が一眼でわかる。
「•••」内のメニューも、興味なし/フォロー解除/リスト追加・解除/ミュート/ブロック/報告とSNSには全て必要なアクションのように感じた。

◆stand.fm
表示情報(プロパティ）
・ジャケット（アイコン）
・タイトル
・名前
・再生時間

アクション
・詳細へ

気づいた点
こちらはシンプルな構成でフィード（フォロー中）画面のカードでは再生は不可。アクションは詳細への移動のみ。
今回作成する画面のUIとしては物足りなさを感じる🤔

◆Spotify（ポッドキャスト）
表示情報(プロパティ）
・ジャケット
・タイトル
・キャプション
・時間
・再生時間

アクション
・お気に入り
・ダウンロード
・シェア
・再生

気づいた点
音楽アプリだけあってフィード画面のリストに再生ボタンが配置してあり、詳細画面へ移動しなくても視聴することができる。
「•••」内のメニューは、ダウンロード/再生済み/エピソード/プレイリスト追加/シェアと、こちらはSNSの機能としては必要無いように感じる。

◆Voicy
表示情報(プロパティ）
・アイコン
・タイトル
・名前
・時間
・再生時間
・再生数
・いいね数

アクション
・再生
・詳細へ
・ライブラリ追加

気づいた点
音声メディアだけあって今回必要なってきそうなプロパティが一番そろてっているように感じた。どのくらい再生されているかが分かるようにアイコンの周りをぐるって囲んでいるUI（正式名称何て言うんだろコレ？）も非常に良いと感じた！

UIデザインの方向性

UIリサーチの結果、今回作成する「音声SNSアプリ」投稿フィードUIに必要なプロパティとアクションを抽出。

表示情報(プロパティ）
・アイコン
・名前
・タイトル
・時間
・収録時間
・いいね数

アクション
・コメント
・いいね
・再生
・シェア

上記のようにUIとして必要な要素をまとめてみました！
SNSである以上、アイコン/名前/時間/いいね数は必須。音声を投稿しているので再生時間の表示もあった方が良い。
しかしこれだけではどのような音声を発信しているのか試聴するまで全くわからない！そのためタイトルも表示した方がユーザーが興味のある投稿に辿り着きやすいのでは？という考えに至りました。

アクション導線は音声の再生に加え、ユーザー同士コミュニケーションが取れるよう一般的なSNSと同じ、コメント/いいね/シェアを採用。

ボトムナビゲーション
・ホーム
・検索
・音声投稿
・通知
・アカウント
上記の5つを選定。
音楽アプリやラジオアプリでは無いので、ライブラリやマイリスト的なメニューはボトムナビゲーションには必要ないと考えました。お気に入りの保存はTwitterやInstagramのようにアカウント画面から確認できる想定です！

UIラフスケッチ

我ながら味のあるラフスケッチ！笑
カードタイプでスケッチしてみましたが、実際にカードにするかリスト形式にするかはFigmaで実際にデザインを組みながら検討したいと思います！

今回も拙い記事を最後までお読みくださりありがとうございます🙏✨
次回も頑張って書きますのでよろしくお願いいたします😌