[BONOの課題] 作業用音声SNS「Kachit」

BONOはUIとUXデザインを学べるオンラインコミュニティです。課題への取り組みやメンターからのフィードバックを通じて、実践的なデザインスキルを身につけることができます。

BONOの課題「音声SNS」の制作過程をまとめた記事です。

noteでは詳細に書いていますので、お時間のある方は以下をご覧ください。

色々あって迷走してしまい、完成まで2ヶ月ほどかかりました。デザインの改善点はまだあると思うので、時間がある時に修正していこうと思っています。

制作期間：実質2ヶ月ほど

使用ツール：Figma, Illustrator

今回の課題はビジュアルの作成が主となるので、画面の情報の置き場所やつなぎ方を整える設計や、ユーザーインタビューはあまり考慮せず作成しています。

背景

音声SNSを日常的に使用したことがなかったため、どういうものを作成しようか悩んでいました。調査をしている中で、Clubhouseで黙々と作業する人をつなぐ使い方をしているという記事を見かけ、作業のやる気が出るような音声SNSを作成しようと感じました。

定義

ターゲットは、やらないといけないこと（受験勉強や資格勉強）から目を背けて行動できない人です。

コンセプトとしては、勉強を後回しにしている人がアプリを通じて短時間でも勉強しスキルアップする、いわゆるやる気スイッチ的なものを想定しています。そこから、やる気スイッチを押す要素をイメージしてアプリ名をKachit（カチット）にしました。

デザインシステム

フォントはヒラギノ角ゴシックで10〜20pxのテキストスタイルを登録し、本文は主に14pxを使用しています。

カラーは焚き火の灯りのような温かさをイメージし、孤独に勉強するユーザーが一人じゃないと感じられる安心感を演出するため、オレンジをメインカラーにしました。

ムードボード

フォント

カラー

作成手順

講座内容は以下

プロトタイプ

DAY1 :「新規登録」UIをデザイン

当初は1画面1〜2設定を目安に新規登録画面を作成していましたが、やる気がないユーザーにとって設定の多さはそれだけで学習を諦める理由になります。本アプリではユーザーのやる気を温存するため、あえて登録ステップを簡易的にしました。

参考：Voicy, Stand.fm, Tiimoの新規設定画面

DAY2 :「フィード」UIをデザイン

既存の音声SNSの多くは録音されたコンテンツを消費する形ですが、本アプリで解決したいのは作業する際のやる気スイッチが欲しいという気持ちと、誰かの気配を感じながらの作業体験です。録音では得られない、今この瞬間に誰かが頑張っているという連帯感を重視し、ライブ配信をメインとした構造にしました。

ライブ配信のメリットを活かしつつ、あえて時間を区切るという制約を設けています。ダラダラと続く配信は参加する際に迷いを生むため、終わりがある安心感をUIの核に据えました。残り時間を可視化することで、今この瞬間だけは作業を行おうという心理的スイッチを入りやすくしています。

配信の名称はXのスペースをイメージしてスペースとし、投稿デザインのパターン出しもXを参考にしたものを作成しました。残り時間の表現方法は色々と検討した結果、クラウドファンディングの達成度バーを参考にしたデザインにしました。

参考：Xのスペース, Stand.fm, Spoon, Radiotalk, Studycast, Campfire

以下パターン出し

DAY3 :「投稿の入力」UIをデザイン

投稿の新規作成と詳細画面を作成しています。当初はXのスペースを参考にしたデザインにしましたが、新規投稿のUIには時間制限などもう少し決まり的なものを設定した方がいいと感じました。

制限時間の要素を動画のようなUIに落とし込むのは難しいと感じ、投稿後のUIはタイマーのように作り直しました。これは、作業と休憩を一定時間で区切るポモドーロ・テクニックを採用しているアプリの多くがタイマーを大きく表示していることから着想を得ています。

また、辛い勉強や作業を楽しくする仕掛けとして、スペースが終わる際に連続学習記録と励ましの言葉を表示するUIを追加しました。スマホゲームの連続ログイン記録や、学習アプリDuolingoの連続学習記録から着想を得ています。

参考：

新規投稿〜投稿詳細：Xのスペース, 時計のタイマー機能, Forest, Radiotalk（新規投稿はFigmamakeで案出し）

連続学習記録：Duolingo, StudyCast, abceed

DAY4〜DAY6

検索する、通知、マイページ〜設定のページを作成しました。既存のUIを参考にしながら作成し、実機でデザインの評価と検証を行い修正していきました。

通知のページでは通知欄のパターン出しを行い、誰がどのように何をしたのかが分かりやすいXの通知を参考にした案を採用しました。

まとめ

完成まで2ヶ月ほどかかった理由ですが、実は1回音声SNSのUIを作成していたものの、作りに納得がいかず1からやり直した経緯があります。

ビジュアルだけで良いという課題内容だったにもかかわらず、やりたいことを詰め込みすぎて迷走してしまったこと、最初に作成したUIがバックグラウンド再生のできない形式だったこと、全体的に見た目だけのデザインになり使いやすさが微妙だったことなどが理由として挙げられます。あわせて、完璧を求めすぎていた部分もあったと感じています。

まだ改善できる箇所はありますが、修正を続けるとさらに時間がかかりそうなため、一旦こちらで手を止めています。

もう少し手が空いたら、こちらのデザインも手を加えていきたいです。