音声でお酒を記録できるアプリ「SAKE BOARD」をリリースしました
私はお酒が弱くだいたい3杯も飲めば酔っ払い、飲んだお酒の名前をすっかり忘れてしまいます。
過去にUntappedというアプリでお酒を記録していましたが、海外のアプリ(英語のみ)なので酔っ払った頭には負担が重く、何よりキーボードを打ってお酒を探すというのが面倒で仕方ありませんでした。
下の画像がUntappedを起動して検索するまでにユーザーが見る画面です。
たったの２つの画面を見ただけなのに、すごくお腹いっぱいになります。
文字が小さく、情報量も多いのでどこに目をやればいいのか理解するのに少し時間を要します。
そこで「登録が簡単でシンプルであること」を意識して作ったお酒の記録アプリがSAKE BOARDです。
音声と5タップで記録をつけることができ、画面上からは余計な情報を全て削ぎ落としています。
UX設計とこだわったポイント
SAKE BOARDでは「お酒を注文してから受け取るまでの待ち時間を使ってお酒を登録し、飲んだ際に美味しかったらレイティングを変更する。」という使用方法を想定しています。
そのために意識したポイントは2つ です。
ポイント1: レイティングのデフォルトは0
Untappedではデフォルトが5です。
「飲んだ後に感想を細かく記録する」ことを想定されているUntappedに対し、SAKE BOARDは「注文した時点で一旦記録」がしやすくあるべきと考えデフォルト値を0にしました。
一度レイティングを1以上にしたら0にはできませんが (そう評価したいお酒に出会うこともあるかもしれませんが) 新規登録時にはレイティング0での記録を許容しています。
ポイント2: 編集しやすい画面設計
「編集のしやすさ」にまず必要なのが編集までのタップ数です。
また、編集画面までの導線となるボタンをプライマリー(最重要ボタン)として置き、導線の見つけやすくすることで編集のしやすさに繋げています。
TIPS: ボタンの優先度
Material Design では下記のようにボタンに重み付けがあり、その重み付けによって画面における使用回数や使用箇所に一定の制限やルールがあります。
最重要ボタンは画面に1つであることが原則とされ、ピラミッドはユーザーにして欲しい行動の優先順位に比例します。
プラットフォームの時流
大きなスマホ端末での操作しやすさ
今回はナブボタンを使わず、操作するボタンを極力画面下に配置することを意識しました。
これについてはTHE GUILDのGoさんが素晴らしい記事を書かれています。
しかし、残念ながら現状SAKE BOARDは画面下半分で操作を完結することができません。※1
今後改善したいです。
※1 シミュレーターではスワイプが効くのに実機ではスワイプができない!!💦
音声検索の使い勝手
音声検索で懸念されるのは「入力したい言葉を認識してもらえず、全然検索として使えない」ということが起きること。
そこで検索のヒット率を高めるべく、algoliaという検索ツールを使用しました。
SAKE BOARDではFirebaseを使用しています。
しかし、FirebseではLIKE検索や全文検索には対応しておらず、できるのは前方一致検索のみでした。
そこでalgoliaを使って全文検索を実装し、カテゴリや酒造名に加え、読み間違えや難しいお酒の名前は漢字一字で検索できるように調節を行いました。
algoliaはFirebaseの公式ドキュメントで使用を推奨しているサービスなので安心して使うことができました。
機能の引き算
Untappedを利用していた際、私はお酒の画像も一緒に記録していました。
しかし、その理由を思い返すと「画像登録の項目があったので入力項目を埋めるために画像を添付していた」だけでした。
登録時の入力項目が多いと、それが必須項目ではないとはいえ「なんとなく入れた方が良いのではないか」という念に駆られてしまう心理があります。
そうなると自分が本当に必要と思っていない手間を毎回行うことになります。
こういう小さな負担は蓄積し、アプリを離脱する原因にもなりえます。
様々なアプリで画像添付機能があるために「画像が記録できることは最低限抑えるべき機能」と考えがちですが、本当にこのアプリに必要なのか考えた結果、SAKE BOARDでは画像添付は削りました。
その分、登録の際の速度向上に繋がり、将来的にはFirebaseのストレージよりも検索精度の向上のためにお金を使いたいと思っています。
アプリのブランディング
作りたいものが明確でシンプルであることはとても大切なことです。
今回は難しいことは考えず、どんなアプリなのか。特徴はなんなのかをそれぞれ一言で明確に説明できた時点できることを目指しました。
また、デザインについてはPinterestで参考にしたいアプリをストックし、良いところを真似させてもらうことでデザインにかける工数を削減しました。
画面はFigmaで作成し、レビュワー(旦那)に共有して意見をもらいました。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
難しいことをしているわけではないのですが、こんなに機能がシンプルなアプリでも気を遣うポイントはたくさんあって、UXの基礎の小テストを解いているような気持ちでアプリを作りました。
2月3日時点、Android版のみリリースしております。
下記からDLできます🥂
※ iOS版は検証端末を購入後、リリースします。
技術書典6で本を出します！
4月14日に行われる技術書典6にて、このnoteで紹介した音声検索アプリの作り方を書いた本を出します。(当選すれば...!!)
React Nativeを触ったことはあるけど、ネイティブモジュールの組み込みを通してもう一歩ネイティブの知識をつけたいという方向けです。
ネイティブモジュールを扱うとCocoaPodsやGradleを使うことになりますが、それができるようになればExpoに頼らず好きなモジュールを使うことができ、アプリの幅が広がります。
※ アプリに広告を貼りたい場合はネイティブモジュールの知識が必須になってきます。
これから4月まで毎週頑張って作り上げるつもりですので、興味がある方は是非当日会場で本を手に取ってみていただけると嬉しいです📚
最後に
・エンジニアだけどUX強くなりたい
・スポーツが好き
・個人開発が好き
というクラスタの人と繋がりたいです！
現在UX勉強コミュニティを画策しています。
(良いコミュニティがあればコメントにて教えてください🙏✨)
今絶賛 ( 自称一番イケてる ) スポーツスタートアップで働いています。
事業拡大に伴い仲間を絶賛募集中です。
個人開発を楽しんでいる人たちと切磋琢磨したいです。
どれかしら該当する方は是非気軽に絡んでもらえると嬉しいです。🐾
最後まで読んでくださり、ありがとうございました🐾
心理学・脳科学の観点からUXを学ぶ(株)Link SportsのUXエンジニア。メインはReact Nativeでモバイルアプリのフロントの開発。