【UI/UXデザイン】 音声SNSアプリ 『コエログ』 制作記録 #2

こんにちは、かむと申します🐿️
現在、BONOというコミュニティでUIUXデザインの学び直しをしています！

音声SNSの主要なUI画面を作るという課題の制作過程を3回に分けて発信しています。こちらはその2回目です。
今回からいよいよUI制作へ入ります！

1回目の記事はこちら👇

↑プロトタイプを見たい方は目次の ★完成！ をご覧ください🙏

前回のおさらい：コンセプト

前回考えたコンセプトをもとにUIを制作するので、おさらいとして改めて共有します。詳細は前回記事をご覧ください🙏

このアプリに抱いてほしい印象（アプリの人格）は以下イメージです。
これらコンセプトやイメージを意識しつつUIを制作していきます！

STEP1. 新規登録UI

1つ目の課題は、「新規登録UI」。要件は以下の通りです。

課題の範囲は一画面なので要件で挙げられている要素は限定的ですが、今回はアプリ利用開始までの一連のUIを制作しました。
ということで、まずはリサーチ！

1-1. リサーチ

普段色々なアプリを使ってはいますが、新規登録の流れなどは意識せずに使っていました。そこで、SNSを中心に複数のアプリの新規登録の流れを調べました。（画像が小さくてすみません🙏）

複数のアプリの一連の流れを見ていくことで、新規登録時に必要な要素や登録の流れが見えてきました。

新規登録時に必要な要素としては、主に以下の6要素が含まれます。（★は必須）

１、アカウント情報 ★
ログインに必要な情報。必須だがソーシャルログインをすれば入力を省略できる。

• メールアドレス/電話番号（ID）

• パスワード

• ソーシャルログイン（Google, Apple IDなど）

２、本人認証
アカウント作成する際に、本当に本人かどうかをSMSやメール認証で確認する手順。（余談ですが私もアカウント乗っ取りされたことがあるので、ユーザーとしてはこういった認証がないと今のご時世とても不安）

３、規約同意 ★
各種規約への同意。利用時に守ってもらうことなので利用開始時に同意をもらう動線が必要。

４、プロフィール情報
ユーザー同士で交流する際に必要な情報の設定。利用開始時に登録させるパターンと、利用開始して任意のタイミングで入力してもらうパターンがある。

• ユーザー名

• プロフィール画像 など

５、パーソナライズ情報
ユーザーの嗜好を予め把握することで、コンテンツをパーソナライズするための情報と思われる。
気になる人のフォローまでを必須とするアプリもあり（例：X）

• 気になるカテゴリ、トピック

• 気になるインフルエンサーをフォロー

• 生年月日

６、オンボーディング
ユーザーに操作を慣れさせるためアクションを誘導する。
TikTokは他のアプリとは異なり、規約同意やカテゴリ選択の後、アカウント情報を登録させずに動画視聴のオンボーディングに遷移。その後ユーザーがアクションを起こすタイミングで初めてログイン手順へ入る点で独特。

大まかな要素や動線は掴めたのでいったんリサーチはひと段落し、制作に入っていきます✊

1-2. UI制作（新規登録・ログイン画面）

まず初めに、アプリを開いた時のはじめの画面を検討します。
要件に沿い、メールアドレスの入力動線とログインしたい人への動線を含めることとします。
上記に加え、個人的にもお世話になることが多いソーシャルログインの動線を設置することにします。

ソーシャルログイン

ソーシャルログインが使えるサービスはたくさんありますが、コミュニケーションツールとして日本人に一般的なLINEと、多くの人がどちらかのアカウントを持っているであろうGoogle、Appleの3つにします。

3社のデザインガイドラインを確認の上、アイコンとテキストのボタンを配置する案とアイコンのみを配置する案の2案を作成しました。

上の画像からわかるように、私はアイコンのみを配置する案を採用しました。
理由は画面のしてのシンプルさを優先したのと、各社デザインガイドラインの制約によってデザインが制限されるためです。

各社のガイドラインによると、新規登録ボタンに使ってよい文言やデザインに制限があります。各社ガイドラインに違反しない形を検討し、全ボタンで言葉を統一するなら「〜で続ける」あたりなら使えそうですが、あまり直感的ではありません。また、ビジュアル的にもボタンの圧迫感が強く、アプリのイメージ的にもシンプルにしたかったので、テキストを省略したアイコン案を採用しました。
外部サービスの要素を使用する際の留意点を知ることができました。

ログイン画面への動線

ログイン画面への動線は、すでにボタンが4つあるので、ボタンにするとうるさく感じるため、テキストにリンクをつけ遷移させるデザインにしました。

利用規約への動線

利用規約への動線は、「登録したら各規約に同意したこととみなします」という旨と共にリンクを置いておくパターンもありますが、このアプリは「安心感」を大切にしたいので、確認が必要な規約への動線はしっかり提示したく、Voicyのように 登録を進めるボタンを押した段階でモーダルを表示し、明確に確認する形式を採用しました。

1-3. UI制作（登録情報の入力）

続いて、メールアドレスから登録を進める場合の登録情報の入力UIに進みます。

リサーチを振り返ると、必要事項の登録UIは、XやInstagram、TikTokは一つの画面では一項目の入力しかさせず、1画面=1ステップになっています。
他方、Airbnbやnoteなどは複数の入力項目を1画面上に並べて表示させるUIでした。

実際に触ってみると、それぞれのメリットデメリットを感じました。簡単にまとめるとこんな感じです👇

このアプリは全体を通してシンプルで分かりやすいUIにしたいので「1画面1ステップ型」が合いそうです。

ただ、あと何ステップで完了するかわからないデメリットは個人的に結構ストレスを感じたので改善したいです。そこで、他のUIもリサーチして、こんなUIにしてみました👇

1画面1ステップ型で感じた「現在地がわからない問題」に対しては、画面上部にプログレスバーを配置することで、登録完了までの道のりを表現しました。これでユーザーはいつ終わるかわからない不安を与えずに登録を進めてもらえます。

必要なアクションは簡潔に示しつつ、パスワードの制約などはテキストで補足しユーザーが迷わないようにしました。
1画面1ステップにすることで画面に余白ができ、補足テキストを入れても圧迫感を感じない副次効果がありました。

アカウント情報以外の項目はなるべく削ぎ落とし、ユーザーの利用開始時の入力負担を最小限に抑えました。
気になるタグ例の表示は、新規ユーザーのパーソナライズの役割と共に、このSNSの空気感を伝えたり利用時の投稿イメージをしてもらうという点でオンボーディング的な意味合いも兼ねています。

エラー時の挙動

エラー時は慣習的にエラーだと伝わりやすい赤色で囲み、エラー原因をテキストで明確に伝えます。

★完成！

作成したUIのプロトタイプがこちらです👇

STEP2. フィードUI

続いて、フィード画面のUIを作成します。SNSにおいてユーザーが最も長く見る画面ではないでしょうか。要件は以下の通りです。

2-1. リサーチ

こちらもまずリサーチしていきます。ただ、“ Twitter（現X）のようなイメージ ” という要件なので基本的にXを参考にしていきます。

Xは、ページ上部にタブを配置し、フィード表示の切り口を切り替えられるようになっています。Xの他、stand.fmやvoicyなども同様のタブがあり、一般的に受け入れられそうです。
なのでこのアプリでもフォローした人の投稿だけを見られるタブを作ることにします。

投稿動線の位置は、右下にFAB（Floating Action Button）を配置するパターンや ボトムナビゲーションに含めるパターンがありました。
ここはナビゲーションの内容や投稿内容とのバランスを見て検討します。

音声の部分はLINEの音声メッセージのデザインが参考にできそうです。この音声SNSは「短尺のコンテンツ」「日常を中心とした投稿」を前提に考えているので、ふき出しのようなデザインがアプリイメージに合っていました。
LINEをベースに補完できるようなデザインをPinterestを中心に探しました。

リアクションについて、Xは「いいね」だけですが、この音声SNSでは他のユーザーとの交流も気軽にできるようにしたいと考えると、slackのスタンプ機能が参考になると思いました。
スタンプであれば、コメントほどの手間がなく「いいね」より多様なリアクションを示せるのでこのアプリに合いそうです。

2-2. UI制作（投稿内容のUI）

これらリサーチをもとに投稿内容のデザインを考えていきます。
まずはXの投稿内容の要素を洗い出してみます。

これらを全て盛り込むのではなく、これをベースに音声SNSのコンセプトに照らして調整し、このような形にまとめました👇

コンテンツ内容

AirChatの前例（前回記事で触れています）を活かして、あくまで音声がメインであることを意識しました。

• 音声を一番上（アカウント名の直下）に配置

• テキストは数行の分量に制限し、補足的な役割とする

• 画像の添付はなし

音声は検索ができないため、そこを補完する要素としてハッシュタグを採用しました。ユーザーが任意のタグを追加することでタグ検索で見つけてもらえる設計にしています。

音声の自動再生

これはデザインで表現できない仕様面の話ですが、音声の再生が終わったら、自動でフィード内の次の投稿の音声を再生するのをデフォルト設定として想定しています。
理由は、音声の長さを数分内の短尺で考えているため、自動で次を再生しないとユーザーが何度も再生ボタンを押す手間が発生するためです。

リアクション

リアクションはほぼslackのデザインや挙動を参考にしました。ただslackは絵文字やカスタム絵文字を追加できる一方で、このアプリでは6種類の絵文字に絞りました。
こうすることで、リアクションのバリエーションを与えつつ種類が多すぎて迷わないようバランスをとっています。

ナビゲーション・投稿動線

ナビゲーションについて、どこに何を配置するかは結構悩みました。

必要な要素を洗い出し、大まかに全体の構成を考えた上で
触る頻度が多いと想定される「ホーム」「さがす」をフッターへ、
少し優先度が低い「お知らせ」「マイページ」をヘッダーに配置しました。
設定は更に触れる頻度が少ないはずなので、マイページ内で表示することにします。

投稿の音声再生ボタンを右側に配置するデザインになったため、同じく画面右側にFABで投稿ボタンを配置するのではなく、ボトムナビゲーションの中心に配置しました。

★完成！

作成したUIのプロトタイプがこちらです👇
一つ目の投稿を再生→停止→リアクションをするところまでです。

2-3. 反省点：再生中のコンテンツの固定表示

これはこの課題を終えて振り返っている段階で気づいた反省点です。

制作時は、再生中の音声の色を変えればどの投稿が再生中かパッと見てわかるので再生中の固定表示はなくてもOKと思っていましたが、例えば再生中の音声を止めたいと思った時に、わざわざそこまで戻らないといけません。

これはユーザーにとって面倒なので、再生中の音声はボトムナビゲーションの直上に固定表示して、停止や関連アクションが取れるような要素を追加する必要があると感じています。

思えばどの音声SNSにも大抵そういった表示がありました。なのでリサーチ時点での分析不足だと反省しています😣
今後は共通して存在する要素について「なぜこのように配置されるのか」をきちんと考えた上で要否を判断しようと思います。

現時点ではこの修正までできていないですが、全体をブラッシュアップした際には改善の記録として追記などしようと思います💪

STEP3. 投稿作成UI

この記事最後のお題は『投稿作成UI』です！
要件はこちらです👇

音声の添付ができるということは、ユーザーの動きとしては 
①音声の録音  ②その他の情報を入力  ③投稿を実行
という流れになると思うので、それを意識しながらリサーチしていきます。

3-1. リサーチ

音声録音UI

まずは、音声SNSやPinterestで音声録音のUIを調べました。
UIとしては大きく3パターン見つかりました。

1. レコーダーを意識したUI

   1. リアルのレコーダーでの録音体験に寄せたUI。音声を録音中は波形などがインタラクションとして表示される

2. マイクに向かって話すことを意識したUI

   1. マイクのイラストが中心にあるデザインが多く、リアルでマイクに向かって話す体験を意識していると思われる

3. 限りなくシンプルにしたUI（LINE）

   1. 録音に関するボタンのみで表現する非常にシンプルなデザイン。

   2. 画面全体ではなく、一部で表示。

   3. 録音中は録音ボタンの周りに同心円上に波形がインタラクションとして表示される

比較して感じたことですが、レコーダーのUIは、録音前に少し身構えた状態になりやすいんじゃないかと思いました。「レコーディングする」という環境の変化を擬似的にUIで表現しているためかなと感じます。

ただ、コンセプト設計時に想定した「気づきや感情をリラックスした状態・環境で録音する」体験と照らし合わせるとレコーダー型のように身構えてしまう見た目は合わないように思います。
マイク型はレコーダー型より身構えずに録れそうですが、それならLINEのようにシンプルに振ったUIの方がユーザーにとって気軽かもしれません。

投稿入力UI

投稿入力のUIをリサーチしていくと、「ライトに投稿できる」という点ではXやTikTokのUIが洗練されている印象を受けました。これら2つのアプリの投稿UIには共通する部分が多いです。

• フィードに近い配置にすることで投稿をイメージしやすい

  • 特にXではそれが意識されているように感じます。

• オプション設定でもなるべく画面を切り替えない（ボトムシートの活用）

  • 作成途中の内容を後ろに見せて「投稿作成中」というモードから意識を離さない工夫だと感じました。

  • TikTokでも「場所」以外の設定はボトムシートによる表示でした。

• 投稿ボタンは右上に配置

  • あえて押しづらい箇所に置くことで、誤って押してしまうことを防ぐ意図があると思われます。（TikTokはキーボードを非表示にすると下に移動しますが）

3-2. UI制作（音声録音UI）

では、音声録音のUIから作っていきます！
作るにあたって「録音とその他の投稿入力画面を同じ画面内に配置するか、分けるか」という観点があります。
どちらも作って比較検討してもよいのですが、今回のアプリでは

• 音声添付は必須（にしたい）

• ユーザーを迷わせないシンプルなUIを目指す

というアプリの前提をふまえると、音声録音と投稿入力を別の画面に分けることで音声録音のステップを必ず通り、各画面の情報量は減らせるので、今回は両者を別画面に分けることにします。
リサーチ結果を参考に、このような形にまとめました👇

• 背景色も変えて録音モードへ

  • 基本的に背景は白にしていますが、録音中のみ背景に色をつけることで「録音するモード」に切りかわったと意識づけさせます。

• 録音をゆるやかに後押し

  • 普段音声を録音する機会はあまりなく、尻込みしてしまう人もいると思うのでその気持ちをゆるやかに後押しするメッセージを表示します。

• 気構えずに話せるような画面表示

  • 画面中心はマイクではなくプロフィール画像にしました。

  • 音声に応じて円が広がる自然なインタラクションで、ちゃんと音を拾えているという安心感を与えます。

• 残り時間を直感的に伝える

  • 円形のプログレスバーで録音時間を表示することで「あとどのくらい録音できるか」を伝えています。

  • 録音時間は最大2分間としました。本来はユーザーテストなどして検討するのが良さそうですが今回そのステップはないので決めうちです🙊

• シンプルで迷わない動線設計

  • ボタンの数は場面ごとに最小限に抑え、補足テキストをつけてユーザーが迷わないよう設計しました。配置や大きさはLINEを参考にしています。

3-3. UI制作（投稿入力UI）

録音が終わった後の投稿入力ページは、XとTikTokのUIを参考に作成しました。

フィードと同様の配置

フィードのUIと同じ配置にすることで、投稿のビジュアルに近い状態で投稿内容を作成できます。

タグをつける

タグもかんたんに追加できるように、投稿入力画面に主な候補をいくつか表示してタップで追加できるようにしました。他のタグをつける場合は、詳細画面で自由入力と候補選択の2方向から追加できるようにしました。

公開設定オプション設定

このアプリのコンセプトの軸は「声で日記をつける」体験であり、投稿によっては自分だけ見られる（聞ける）ようにしたいので、公開範囲の設定オプションを追加しました。
Xのようにボトムシートで選択肢を表示します。

投稿時のインタラクション

投稿を完了した時に、アプリから応答がないと投稿できたのかユーザーが不安になるため、アクションに対する応答のバーを表示して投稿完了を伝えます。

★完成！

作成したUIのプロトタイプがこちらです👇
録音ボタンを押す→音声録音（9秒間）→テキスト、タグを追加して投稿するところまでとなります。

3-4. あるといいかも：録音画面でのタグ検索

ひと通り作った後に改めてユーザーの動きを想像して思ったのですが、
音声録音をする前にタグを見たいケースがあるのではないかと思いました。

• 明確に話すことが定まってない時（タグから話題を拾いたい）

• 話そうとしている内容に合うタグを先に探したい

そう思うと、録音画面上でハッシュタグを検索できたり追加できる動線があればユーザーは「話すことがないから録音に進めない」という状態から抜け出せて、継続的に音声投稿しやすくなるかもしれません。

実際、radiotalkでは録音画面上で「ランダムにお題を提供」する機能が存在します。radiotalkは『自分のラジオ番組を持とう』という感じのコンセプトなので、話題探しが重要なのだと思います。

このアプリはコンセプトに沿うと自分の日常で起きたこと（≒日記）のシェアが主なので、録音を始める時点で話す内容が決まっているはずですが、より他者との交流に目を向け、話題の幅を広げたいというニーズもあるかもしれません。
こちらのUIは作っていませんが、改善案として浮かんだので記録しておきます💡

とても長くなってしましたが、今回はここでひと段落🍵
次の記事に続きます！
ここまでお読みいただき、ありがとうございました😌🙏