音声SNSアプリのUIデザイン制作

今回音声SNSアプリを制作いたしました。

• プロジェクト内容：自主制作

• 担当：UIビジュアルの作成

• 期間：1ヶ月

本作品は、音声SNSアプリを想定したUIデザインを通して、ビジュアル基礎・遷移フローの習得のために実施した自主制作となります。それぞれ機能ごとにDay1〜Day6に分け、各機能の画面を作成したプロセスも含め公開しています。

【完成形】作成したUIデザインはこちら

プロトタイプ

UI アプリデザイン　プロトタイプ

【Day1】新規登録画面

完成した登録画面はこちら↓

＜意識したポイント＞

• 基本的なデザインルールの統一（フォームの高さや余白の統一など）

• エラーの時に赤い縁を用いることで知らせる。

• 最小限の工程でアカウント作成できるように設計いたしました。
  また、基本的には手間のかからないGoogleアカウントやAppleアカウントで作成できるようにしました。

【Day2】投稿フィード画面

採用したフィード画面はこちら（初期デザイン・改善後のデザイン）↓

リサーチ段階で参考にしたのはTwitter,VOICE,stand.fm,Voicyです。初期のものは再生ボタンを右端に配置する・再生ボタンの色をメインカラーにすることで音声SNSを強調した意図があったのですが、フィードバックで・音声SNSなのですが、「文字が主体」になっています ・再生しづらそうな見た目にも見えます ＝音声を主体にした形にUIを作るべきだったかなと思います！とのご指摘をいただいたので再生ボタンが主となる投稿画面に変更いたしました。

【Day3】投稿入力画面 & フロー

< 意識したポイント >

• 投稿の部分では投稿ボタンを下部に固定数することで、ユーザーさんが簡単に投稿する方法がわかるよう設計しました。

• そして録音するときも今何をしたらいいかをユーザーさんに文字で説明してアクションをわかりやすく明記しました。

• 投稿するときは音声＋文字＋カテゴリーにしました。カテゴリーはユーザーさんが直接見ることができるというよりAIが判別してユーザーさんごとにおすすめのコンテンツを検索で表示するためにこの機能を追加しました。

【Day4】投稿の検索画面

完成した検索画面とフローはこちら↓

< 意識したポイント >

• 音声SNSなので検索がTwitterなどに比べて、主体的な検索より能動的な検索になるという仮説をたてハッシュタグやカテゴリーなどでの検索機能を主体とした検索画面にいたしました。

• カテゴリーの項目から検索した時のみ検索後のUIを変更しております。理由といたしまして、カテゴリーから検索したらそのカテゴリーのユーザーは表示しなくても良いのではと考えたからです。

• 基本的な検索機能の挙動を実装しました。

【Day5 & 6】通知・設定画面

完成した通知・設定画面はこちら↓

< 意識したポイント >

• アイコンを用いることでユーザーさんにわかりやすく理解できるようにしました。

• 通知はリアクションとフォローという投稿とユーザー視点の2軸に分けることを意識しました。

• 設定は基本的なiOSのスタイルを使用しました。

ご覧いただきありがとうございました。