Voislet
「Voislet」は、“評価されるための発信”から人々を解放することをテーマにした音声SNSです。 コンセプト設計から情報設計、トンマナ設計、UIデザイン、スタイルガイド作成までを一貫して担当しました。 課題テーマをベースにしつつ、実際のプロダクト開発を想定した実践的なUI/UX設計を行なっています。
- iOSアプリ
- リサーチ
- コンセプト定義
- 情報設計
- ビジュアルデザイン
プロジェクト概要
- カテゴリー：iOSアプリケーション
- 制作種別：自主制作
- 担当領域：コンセプト設計、要件定義、情報設計、UI設計
- 使用ツール：Figma
- 制作期間：3週間
どんなアプリか？
Voisletは、「評価されるための発信」から人々を解放する音声SNSです。 本アプリでは、日々の小さな気づきや思考を、文字より自然な“声”で気軽に残すことができます。 また、いいねやフォロワーといった数値的な承認要素を排除し、誰かに見せるためではなく、自分のために話すという新しいSNS体験を提供しています。
このアプリの主なターゲットは、SNSの空気感や他者評価に疲れを感じている20〜30代の社会人層。 特に「発信はしたいけれど、文章を書くのはハードルが高い」「誰かの反応を気にせず、自分の考えを整理したい」と感じる人たちを想定しています。
プロトタイプ
VoisletのFigmaファイルはこちら
コンセプト探索、情報設計、UI設計を公開しています
設計プロセス
設計プロセスは以下の手順で進めました。
1. コンセプト探索フェーズ
1-1. 課題仮説
出発点は、「日々の小さな気づきを、もっと気軽に声で残せたら」という直感でした。文字中心のSNS（Xやnote）では整った発信が求められがちで、思考の断片を気軽にアウトプットする場がない。一方で、音声での投稿なら、誰かと喋る感覚で気軽に日々の体験などをアウトプットできるのではないか。また、いいねやフォロワーなどの評価、攻撃的なコメントなどを気にして、気軽に発信できないという課題があるのでは？と考えました。 したがって、「気づきや考えを声で気軽に残せる場所がないことが、人々の“発信したい”という自然な衝動を抑えている」という課題仮説を立てました。
1-2. 競合リサーチ
既存の音声サービス（Voicy、stand.fm、Radiotalkなど）を分析すると、どれも“番組配信型”や“ライブ会話型”に寄っており、「評価されることを前提としない、短い音声のアウトプット体験」が存在しないことが分かりました。 そこでVoisletでは、評価から解放された自由な発信を軸に、「自分のために話すSNS」という新しい方向性を定義しました。
1-3. コアコンセプトの定義
次に、サービスの大まかな方向性を定めるため、暫定的なコアコンセプトを定義しました。
＊ペルソナ設計やユーザーリサーチが終わった段階でさらに具体化する。
誰のため？(Who)：日々の学びや気づきを気軽にアウトプットしたい人。SNSでの反応や評価に疲れている人。文字での発信はハードルが高いと感じる人。
何を提供する？(What)：「短い音声を残す」という新しいアウトプット手段。誰にも評価されずに、自分の声を記録・共有できる場所。
なぜ必要？(Why)：既存のSNSは評価や比較が強く、自由な発信を妨げている。文字や記事はハードルが高く、気軽さが失われている。声なら自然で、思考の整理にもつながる。
いつ使う？(When)：読んだ本の感想や、日々の学びや体験を残したいとき。思考を整理したい時。
どう実現する？(How)：短い音声投稿、タイトル＋タグによる投稿。いいね、フォロワー、コメントを排除して、心理的安全性を確保。
1-4. ペルソナ設計
次に、ユーザー理解と課題の深掘りを行うため、ペルソナ設計を行いました。
1-5. ユーザーインタビュー
ユーザーインタビューでは、SNSにおける発信行動と心理的ハードルを中心に調査を行いました。
- 目的：SNSでの発信行動における心理的課題と、音声発信に対する印象・モチベーションを把握する
- 対象者：20~30代の社会人6名(男女比3:3)、うち3名はnote, Xなどで情報発信経験あり、3名は閲覧専用または低頻度投稿者
- 手法：インタビューおよび行動観察
- 調査期間：2025年9月
主な質問項目は以下。
- 普段どんな時にSNSを使うか
- 投稿したいと思う瞬間はどんな時？逆にしたくない時は？
- SNSを使っていて疲れた、気を遣った経験はあるか
- 声で話すのと文字で書くのでは、どんな気持ちの違いがあるか
- SNSでのいいね数やフォロワー数は気になるか
- 誰かに自分の考えを共有したいと思うのはどんな時か
- 投稿した後にどんな反応があると嬉しいか
- 音声で投稿できるSNSがあったら使いたいと思うか、その理由は
インタビューの結果をまとめたものが以下。
1-6. 価値命題の定義
以上の内容から、本サービスが提供する価値について整理しました。まず、Voisletが提供する価値は、機能的・情緒的・社会的の3つの観点から整理できます。
機能的価値
- 短い音声（30〜90秒）で日常の気づきや学び、思考を簡単に記録・共有できる
- フォロワー、いいね、コメントのない環境で、気軽にアウトプットが可能
情緒的価値
- 「誰かに見せるためではなく、自分のために話す」という安心感を得られる
- 発信が“プレッシャー”ではなく、“癒し”や“自己整理”の時間になる
社会的価値
- 批判・比較・競争に支配されたSNS文化からの脱却
- 「発信＝競争」ではなく、「発信＝共鳴・内省」という新しい発信文化を生み出す
また、独自の価値構造とペイン・ゲインを整理したものが以下。
解決策と体験設計
ここまでで課題と方向性が定まったので、具体的な提供機能について検討しました。
2-1. ユーザーフロー
まず、ユーザー体験の流れを検討し、フローと必要な機能について整理しました。
2-2. 必要機能の洗い出し
作成したユーザーフローを参考に、フェーズを以下の5段階に整理し、必要な機能等を洗い出しました。
2-3. 情報設計・要件定義
アプリは「ホーム」「見つける」「投稿」「マイページ」の4セクションで構成。録音・投稿体験を最短フローにしつつ、思考ログとしての“声のジャーナル”機能を備えています。
2-4. ワイヤーフレーム作成
ワイヤーフレームでは、UIの見た目よりも「情報の構造」と「ユーザーフロー」を整理することに重点を置きました。 今回は、細かなボタン配置や配色といったビジュアル要素は意識せず、「どの画面にどんな情報を置くか」「ユーザーがどの順序で行動するか」という体験設計の骨格を明確にすることを目的としています。
設計のベースには、前段で作成した階層図と要件定義を置き、そこに競合サービス（stand.fmやVoicyなど）の画面遷移を参考にしながら、 ユーザーが“話す→投稿する→聴く→振り返る”という一連の流れをできるだけ少ない操作で完結できる構成を検討しました。
特に意識したのは、インタラクションコストの最小化です。録音や投稿、再生といった主要行動をワンタップで行えるよう、情報量を必要最小限に絞り込み、ユーザーが迷わず目的の操作に辿り着ける動線を意識しています。
3. UIデザイン
3-1. トンマナ設計
トンマナ設計では、まずサービス全体のブランドコンセプトを言語的に整理するところから始めました。目的は「見た目の統一」ではなく、ユーザーが感じる空気感や情緒の軸を明確にすることです。 初期段階では、Voisletというサービスが「どんな文脈で」「どんな感情を生み出す存在であるか」を言葉で定義しました。 サービスの立ち位置は「評価されるための発信から解放する音声SNS」。そこから導いたキーワードは「静けさ」「解放」「思考」「内省」等。
次に、この方向性を視覚的に検証するため、ムードボードを作成しました。 言語で定義した感情キーワードをもとに、色・形・質感・動きに関するイメージを大量に収集し、感情面・印象面に整理していきました。
その過程で大まかなビジュアルの方向性を以下の通りに定めました。
- 色相：青、または緑系統で、静けさを感じさせるトーン
- 彩度・コントラスト：低めに設定し、情報過多にならない落ち着いた印象に
- 形状：角を削った曲線や角丸を使用
- 質感：透明感や水面のような質感で、声の波紋を暗示
- 余白：圧迫感をなくすため、広くとる
- 動き：緩やかで静かなアニメーション
最終的に、定義した方向性を検証するため、複数のUI例を収集して比較。 ワイヤーフレームで設計した主要画面に対して、各トンマナ（主に配色や質感）を当てはめ、“どのデザインがもっともコンセプトに沿うか”を検証しました。
比較の結果、青系を基調にした低コントラストな配色を採用。そこに合わせて、タイポグラフィー・エレベーション・余白バランスを決定しました。
なお、これらはこの段階で決め切るのではなく、ビジュアルデザインを進めながら何度も改良を重ね、余白や文字サイズ、影の深さなどをプロトタイプ上で検証しながらブラッシュアップしています。
3-2. ビジュアルデザイン
定義したトンマナをもとに、ワイヤーフレームで設計した構造をハイファイなUIへと落とし込みました。 この段階では、色・余白・タイポグラフィー・エレベーションといったビジュアル要素を具体化し、「静けさ」「透明感」「穏やかさ」というブランドトーンをUI全体で再現することを目指しました。
ワイヤーフレームでは情報構造の整理を優先していたため、ビジュアル段階では、要素同士の間隔やサイズ感、影の深さ、文字のウェイトなどを一つひとつ見直し、ユーザーが無意識に“落ち着き”を感じられる視覚的リズムを意識してブラッシュアップしています。
細部のUI表現に関しては、stand.fmやVoicyなどの既存サービスのUIを参照し、音声メディアとしての使いやすさや操作感を学びつつ、Voislet独自の世界観（評価のないSNSとしての“静的な安心感”）に合わせて調整しました。
3-3. スタイルガイド作成
ハイファイなUIが完成した段階で（正確には、UI作成と並行して）、デザインの一貫性と保守性を高めるためのスタイルガイドを整備しました。 具体的には、スペーシング（余白ルール）、配色、タイポグラフィー、コンポーネント構造、エレベーション、角丸などを体系的に整理し、どの画面でも同じトーン＆マナーでデザインを展開できるように設計しています。
また、各UIパーツをFigmaコンポーネント化し、再利用やバリエーション管理がしやすい設計にすることで、将来的に画面が増えた場合でも、スムーズに拡張・修正できるよう配慮しています。 この工程を通じて、単なるUIデザインではなく、「体験の一貫性を支えるデザインシステム」としてVoisletのデザインを体系化しました。
まとめ
今回のVoisletの制作では、「音声SNS」というテーマを通じて、UI設計の枠を超えた体験設計の重要性を改めて実感しました。 単に画面を作るのではなく、ユーザーがどんな気持ちでアプリを開き、どういう心理変化を経て離脱・再訪するのかを想像しながら、一つひとつのデザイン判断を積み上げていくプロセスは非常に学びが多いものでした。
反省点と今後の課題
一方で、リサーチ面に関しては課題が残りました。今回のユーザーインタビューはサンプル数や抽出条件が限られており、得られたインサイトに偏りや主観性が残る可能性があります。 より信頼性の高い調査を行うには、属性の異なるユーザー層を幅広く抽出し、行動観察や定量的データを組み合わせるなど、リサーチ手法の精度を高める必要があると感じています。
また、今回はプロトタイプの検証をUIレベルで留めており、実際のプロダクトに近い再現度でユーザーテストを行えていない点も課題です。 より完成度の高いインタラクションを含むプロトタイプを制作し、それを用いて実際のユーザーに触ってもらうことで、設計意図と実際の使用感のギャップを可視化できたはずだと感じています。
さらに、今回はSNSとしては比較的シンプルな構造を扱ったため、複雑なフローや多機能な情報設計を要するプロダクトにおいて、同様に“ストレスのない体験”を提供できるかは、今後の大きなテーマです。 今後は、より多層的な情報構造を持つアプリを題材に、UXリサーチと情報設計の両面で精度を高めていきたいと考えています。
VoisletのFigmaファイルはこちら
「Voislet」は、“評価されるための発信”から人々を解放することをテーマにした音声SNSです。