100 App Team Blog

半径100メートルのユーザーと気軽に匿名チャットができるアプリ「100(ワンハンドレッド)」のなかのひとたちによるテック x UI/UXデザイン x 企画あれこれブログ。プロダクトをグロースさせる試行錯誤の日々を記録。

「はじめてアプリを触る」ときのこと

こんにちは!

ロックミー インターン(デザイナー)のmomokoです。

プロジェクトの中では、100アプリのUI設計を中心に、UX全体について考えたりしています。

 

f:id:momo_rockme:20190108173516p:plain

 

2018年12月、新しく世の中へ放たれていった「100」。

それから新しい仲間が増えたり、新しい機能のことを考えたり、

開発チームは「新しい」ことをたくさんやっています。

 

そんな新鮮さあふれる空気感のなかで、私たちが一体どのようなプロセスで

開発をおこなっているのか、少しでもお伝えしたく

「100 App Team Blog」を開設するに至りました。

 

 

これは、このブログの記念すべき「はじめての記事」。

今回は「はじめて」にちなんで、

100アプリにおいてユーザーの皆様が「はじめて触る部分」について

お話したいと思います。

 

 

◆ はじめて触る部分だからこそ楽しさを伝えたい「チュートリアル

 

実は、ドロワーメニューの「スタッフロール」というページには、私たちがどのような思いでこのアプリを作ったかが書かれています(もう読みましたか?)。

 

そこにも書かれているように、開発チームが目指したのは

「場の空気を一緒に楽しみながらおしゃべりできる、公園のような気楽なアプリ」。

 

 

もう記憶にはないかもしれませんが、小さい頃、知らない子と公園で遊んだり会話したりしている時、私たちはきっとワクワクしていたはずです。

 

100はきっとそんなワクワクを取り戻せるアプリになるはず!

そんなことを考えながら、鼻息を荒げて開発してきました。

 

ただこのアプリは、ユーザーの方々に使っていただけなればまったく意味のないものになってしまいます。

 

じゃあ、多くの人に使ってもらうにはどうしたらいいでしょうか?

…はじめて触る人たちに、「楽しい!」を感じてもらわないといけない!

 

ということで、チュートリアル部分の設計をがんばる必要があったのです。

 

 

◆ どうアプローチしたか

 

わたしは2018年の9月からプロジェクトに参加させていただいたのですが、

それまではエンジニアインターンのjyoさんと、プロデューサーの小林さんの2人でプロダクトを作っていました。

 

なので、わたしの初めての仕事は「いままで2人が作ってきたUIを、さらにパワーアップさせること」でした。 

つまりは、わたしが方向性を間違えば、「いままで2人が作ってきたものをぶち壊す」ことにもなりかねないということ。

 

プロジェクトの意向を全力でキャッチアップしつつ、さらによいものにすることを心がけながら、作業を行いました。

 

 

◆ Before

f:id:momo_rockme:20190108180648p:plain

 

旧UIでは、チャットボット形式でアプリの機能・使い方についての説明を行っていました。

 

画面をタップすることでロボットの発言が送信される仕様になっていましたが、

上の画像を見ても分かる通り、画面全体が “ 文章がち ” になってしまい、

「もしかしたら全ての文章を読む前に、ユーザーは飽きてしまうかもしれない」という懸念がありました。


そのため、アプリの使い方がユーザーにうまく伝わらない可能性が挙げられ、改善が必要であると判断しました。

 

◆ After

チュートリアル部分に存在したそんな課題を、どのように解決したか…

 

f:id:momo_rockme:20190108174418p:plain

 

実際のチャット画面にマスクをかけつつ、

実際にユーザーに触ってもらうことで操作方法を知ってもらう設計にしました。

 

「百聞は一見に如かず」とは太古から囁かれるもので、

「文章で分かりづらければ、実際にやってもらうのがよいのではないか?」と考えました。

 

実際の画面に触れながら覚えてもらうのが一番よいのではないかと仮定したのです。

 

 

また、このチュートリアルのUIを作る上で参考にしたのが、海外発信のスマホゲーム。

 

みなさんは体験したことがあるでしょうか?

海外のスマホゲームって、ユーザーがチュートリアルをクリアしていくたびに、「Great!」「Excellent!」「Perfect!」…などなど、かなり褒めてくれるのです。

 

褒められて嫌な気持ちになる人はいないですし、はじめて触る人たちに「楽しい!」を感じてもらう、という点で100とも整合性があると感じたので、

 

f:id:momo_rockme:20190108182218p:plain

 

こんなふうに取り入れてみました。

 

 

◆ 改善点

 

とはいっても、100をリリースしたタイミングで、

みなさまから様々なフィードバックをいただき、チュートリアル部分に関してもたくさんの改善点が浮き彫りになっているのが現状です。

 

100は、受け取ったリアクションによって

自分が評価づけられていくというシステムをとっているのですが、

そういった部分をチュートリアルで未だ触れることができていませんし、「マスクが取れるタイミング、かかるタイミングが掴みづらい」といったご指摘もいただいています。

 

そういった部分も含めて、長期的にUXを向上させていけるように、

日々課題発見・改善を進めていきます。

 

 

とりあえず、初回のブログはここまでです。

またお会いしましょう!

 

momoko