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

今回で4回目の記事になります！
日記嫌いだった私ですが3日坊主の壁を越えました！！

では早速UIデザイン作成の内容を記事にまとめていきたいと思います。

●FIgmaデータはこちら
https://www.figma.com/file/gHOGz29ZZhwZDfuEqmhLXm/DailyUI-SNS%E3%82%A2%E3%83%97%E3%83%AA?node-id=148%3A2867

●プロトタイプはこちら
https://www.figma.com/proto/gHOGz29ZZhwZDfuEqmhLXm/DailyUI-SNS%E3%82%A2%E3%83%97%E3%83%AA?page-id=148%3A2867&node-id=181%3A4671&viewport=241%2C48%2C0.18&scaling=scale-down&starting-point-node-id=148%3A2922

画面の構成

前回の類似アプリのUIリサーチの末、下記のように構成とカードのUIを決めました。

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

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

ボトムナビゲーション
・ホーム
・検索
・音声投稿
・通知
・アカウント

カードUIのラフスケッチ

これらを元にFigmaでデザインを進めていきました。

構成の変更

Figmaで実際にUIをデザインしていて気づいたのですが、今回想定のアプリでは投稿を検索できるようになっています。
しかし前回考えたカードの表示情報では検索でヒットさせるための要素が少ないと感じました。「アカウント名」や「投稿タイトル」くらいでしか検索出来なくなってしまいます。

そこで、「投稿タイトル」→「投稿文」に、カードに表示する情報を変更しました。理由は以下の2つです！

・文字が多くなるので検索でヒットする対象になるワードをたくさん書ける
・ハッシュタグの記載ができる。

これで検索対象になる情報を増やせると考えました。

デザインで意識したポイント

・アイコンをやや大きく表示
投稿が「音声」であるため、よりその人の声を聞いているような体験をユーザーにしてもらいたいと考え、他のSNSアプリよりアイコンを大きくしました。

・再生中のインジケーターをアイコンの周りに配置
アイコンの周りをクルッと回るタイプのインジケーター（語彙力💦）を採用しました。理由は同上ですが、アイコンに注目してほしいためです。

・ヘッダーに「再生順」のボタンを配置
こちらはVoicyを参考にしました。画面操作をしなくても自動で聞き流しができた方が便利だと考え、再生中の投稿が終了したらその投稿から前を再生していくか、後を再生していくかを決めれるボタンです。

・投稿ボタンのUI
今回の画面でメインとなるアクションが「再生ボタン」と「投稿ボタン」になるのですが、最初はTwitterのように画面右下にFABとして「投稿ボタン」を配置しようと考えましたが、「再生ボタン」と位置が被る…
色を変更しようかと考えましたが、今回は「投稿ボタン」をボトムナビゲーションに配置するパターンを採用しました！
しかしただ配置するだけだと目立たず、ユーザーを迷わせてしまうので、センターに配置し、他の要素よりも目立つようにデザインしました！

出来上がった画面

メインアクションの「再生ボタン」「投稿ボタン」ともに目立たせ、アイコンにも注目してもらうことで、より本人の音声を感じてもらえるデザインにしました！（実際はロゴや風景画のアイコンもあるとは思いますが…🤫）

投稿文はアイコンを大きめにしたこともあり3行ほど見えるようになってます。

まとめ・懸念点

UI的には自分のイメージ通りのデザインになりましたが、「投稿タイトル」→「投稿文」とした事で、投稿の手軽さがなくなったかなと感じました🤔
実際この辺りはユーザーインタビューが必要かと思いますが、今回は一旦次の画面に進みます！

ここまで閲覧ありがとうございました！
それではまた次回🙋‍♂️