最新情報をお届けします！
2017年12月、約3年ぶりに実名グルメサービス『Retty』iOS版アプリがリニューアルした。6ヶ月間、プロトタイプを繰り返した壮絶な日々。そこには「もっとRettyらしい体験」を実現するために並々ならぬ情熱があった。緻密なデザインに込めた思い、Rettyのビジョンをプロダクトに宿すまでのプロセスとは？
［記事ハイライト］
・デザイナー 山本麻友美が『Retty』iOS版のリニューアルに込めた思い
・サービス理解を深めるために、アウトプットの「量」を重視する
・重ねたミーティングは1000回以上。「Rettyらしい体験」を追求する怒涛の日々
・“オススメ度アイコン”を刷新。必ずユーザー調査で根拠を得ていく
・「きちんと伝わる」のために、画面の構成要素すべてに意図を
・サービスの「アイデンティティ」はちゃんとプロダクトに反映されている？
・さらにBESTなお店が見つかる体験を生み出すために
2017年12月、約3年ぶりに実名グルメサービス『Retty』iOSアプリがフルリニューアルをした。今回お話を伺ったのは、同社アプリチームでデザイナーを務める山本さんだ。彼女はHCD認定資格（*）の持ち主で、Retty入社前はWeb制作会社でアートディレクターとして約10年間ウデを磨いてきた。
山本さんは、入社後すぐにiOSアプリのリニューアルという重要なミッションに参加。彼女はプロジェクトメンバーの中核として数多くのプロトタイプを作成。約6ヶ月で、重ねたディスカッションは、小さなものも含めて1000以上に及んだ。そして考え抜いた緻密なデザインでプロジェクトに大きな貢献を果たしたという。
会社の命運を左右するような重要なミッションに、デザイナーがどのようにコミットしていくべきか。。グルメアプリに限らず、いかに実現したいビジョンをプロダクトへと落とし込めるか。山本さんの活躍、そして並々ならぬ情熱とこだわりに迫ってみよう。
（*）HCD認定…https://www.hcdnet.org
人間中心設計プロセスを実践できる専門家としての認定される制度。使いにくいプロダクトやサービスに対して、人間中心設計・ユーザビリティの活動における「知識」や「能力」が認定される。
山本さんが入社すぐに携わることになったのが『Retty』iOSアプリのリニューアル。会社の命運を握るといってもいい重要ミッションだ。チームは、代表／チーフデザイナー／プランナー、そして山本さんの4人という構成。リニューアルにおけるコンセプトワークから担う少数精鋭チーム。その時の心境を山本さんはこう振り返る。
「デザイナーとして、代表をはじめ、意思決定者のもとで働けるのはすごく貴重ですよね。事前の面接で聞いていたものの…まさか入社すぐに代表と同じチームだったのは驚きました。ミッションもこれからのRettyを左右する、新しい価値を生み出すというもの。入社したばかりとは言え、しっかりコミットしたいという思いが強くありましたね。」
ただ、入社したばかりだと、他のメンバーに比べるとサービス理解ははるかに足りない状態。それでもプロジェクトは前へと進む。その「差」を彼女はどのようにして埋めていったのだろう。
「はじめからアウトプットを細かく繰り返していきました。とにかく多くのフィードバックをもらう。そうすることでサービスへの理解を深めていくようにしました」
彼女が実践したのは「考えてから走る」ではなく、「走りながら考える」ということ。しかもその速度は「全速力」だ。
「ものすごいスピードでプロジェクトが進んでいたので、私もインプットだけに時間をかけるわけにはいきませんでした。そこで、ひたすらアウトプットを出し続けて。当然、キャッチアップが足りないので、はじめのアウトプットはクオリティは低いことも。それをわかった上で、チームメンバーたちに正面からガンガン体当たりしていくような感じでしたね」
そしてプロジェクトはさらにスピードをあげて進んでいく。たとえば、午前に作成したプロトタイプについて午後に打ち合わせ。修正したものを夕方にアップし、議論するといった怒涛の日々も。なぜ、こういった進め方になったのだろう。
「ディスカッションしながらデザインを詰めていく、素早くアウトプットする。私自身がこういったプロセスで精度をあげていくことを得意としていることもあります。こういった進め方をすることで、とにかく議論が前へと進みやすいんですよね。作る、そして壊す。これは前職、クライアントワークでの経験が活きていると思います」
こうしてiOSリニューアルのもととなるコンセプトモックのデザインが完成していった。併せて「〆切」に対する捉え方も重要だったと振り返る。
「意外とおろそかになりがちなのが〆切だと思います。特に自社サービスの場合、調整が可能なケースもあります。ただ、プロジェクトを前へと進めるために〆切を必ず守っていく。ミーティングまでに絶対に作り上げるんだといった気持ちで打ち込んでいました」
このようにして「もっとRettyらしい体験」を実現していくためのプロジェクトが本格稼働。重ねたディスカッションは、小さなものも含め、じつに1000回以上にも及んだという。
作成した最終的なプロダクトモックの画面。
実際はこの5倍の画面数を作成している。
何十回とプロトタイピングを繰り返していくなかで見えてきた方向性。それは、見た目の変更だけでなく、Rettyが実現したいビジョンをデザインに込めていくというもの。
「今回のリニューアルでは“人のオススメからお店が見つかる体験をより高める”という目的がありました」
たとえば、お店の“オススメ度”を表現するアイコンについても、強いこだわりが。
「オススメ度アイコンの意図も、ちゃんと伝わるものにしていく。ここも重要なポイントになりました。従来、オススメ度を表現するアイコンは“顔”がモチーフでした。ただ、度合いを表現する上ではあまり使用しないデザイン。ユーザーのみなさんにきちんと意図が伝わっていないのではないか？という疑問がありました。これもプロトタイピングを繰り返すなかで見えてきた課題だったんです」
従来のオススメ度のアイコン。顔の表示で度合いを表現していた。
そこで、山本さんは、約200人へのユーザーアンケートを実施。その結果から「アイコンの意図が伝わっていない」という現実を明らかにしていった。
こうしてアプリのリニューアルと併せて「オススメ度アイコン」も新たなデザインへ。検討していく上で大事だった軸は2つ。
「1つは誰もが直感的に理解できるモチーフかどうか。もう１つはオススメ度合いが正しく伝わるか。この2つの軸をベースに、アイコンのデザインを検討していきました」
はじめに実行したのはモチーフの検討だ。
「直感的に理解できるモチーフとは何か。要素分解していくと、世の中に浸透していて、認知度が高い記号であること。そして、国やマーケットが違っても展開できるスケーラビリティも考慮していきました」
ラフデザインはその数は数十種類にも及んだそうだ。
「たとえば、従来の顔型モチーフで表情の差を強めたものからメダル型、リボン型まで、あらゆるパターンを検討を進めました。制作したアイコンからいくつかピックアップし、これもユーザーアンケートで検証。最終的に採用することにしたのが、スターのパターンです」
上記が新しくなったオススメ度アイコンだ。
このアイコンには、徹底的にロジカルに考え抜かれた結果が詰まっている。
そして、作成中だったiOSアプリの画面に当てはめながらアイコンを調整していく―。
「アイコンそのものはとても小さいけれど、オススメ度を示す重要なもの。そこで視覚的にはっきりと違いを出すために、スターの数にあわせて色とサイズに変化をつけていきました。これは作成途中のiOSアプリの画面に当てはめながら、デザインを詰めていって。でもまた画面全体が微妙に変わることもありますし、大変なところでしたね。全体のバランスを見ながら、意図が伝わるか、何度も検証をしていきました」
つまり、アイコンと画面、画面を構成するすべて要素が噛み合ってはじめて機能するデザインになっていくということ。
「アイコンだけを変えても、きちんと伝わる状態とはいえません。全体の統一感、操作性を踏まえたUI、コンテンツが引き立つ色…すべての要素・パーツとのバランスや狙いを踏まえて決定していったんです。つまり“お店をオススメするモジュール”全体として、きちんと伝わるようにデザインしていく。なので、モジュール内の要素それぞれも細かく検討を重ねました」
リニューアル後のオススメ投稿のモジュール。
アイコンのみならず、きちんと伝わるように細部までデザインのこだわりが見える。
なぜ、ここまで”オススメ度アイコン”ひとつにこだわり抜いたのか。
「アイコンは、Rettyが目指す『信頼できる人のオススメから自分にBESTなお店が見つかる』世界を実現する、重要な要素のひとつなんですよね。お店がどれくらいオススメなのか、直感的に伝える役割を果たしています。視覚的にオススメ度合いを伝えることができる。むしろ一番といっていいほどこだわるべきポイントだったと思っています」
そこにあったのは、グルメアプリにかかわらず、あらゆるサービスに共通する「アイデンティティをプロダクトへといかに落とし込むか」という大切さ。この時、山本さんが大切だと考えているのが『伝える』と『伝わる』を緻密にデザインしていくこと。
「まずは提供したい価値、大切な想いが何か。自分たちのアイデンティティがなにか。それが、Rettyの場合は『信頼できる人のオススメから自分にBESTなお店が見つかる』でした。だからアイコンも“オススメをきちんと伝えることができる”と”オススメ内容がきちんと伝わる”という両方を実現する。『伝える』と『伝わる』を緻密にデザインすることが大切なのだと思います」
最後にもうひとつ、リニューアルで実装されたユニークな機能について紹介して締めくくりたい。それは「改善」ではなく、新しい価値を生み出すための実験的な取り組みだという。
「私たちが今回実装したなかに“みつかる”という機能があります。自分から能動的にお店をさがす体験だけではなく、受動的にお店がみつかる体験をつくることができないかと考えました。自分の位置情報から表示される料理の写真からお店をさがす体験をこの「みつかる」機能で実現しようとしています」
この機能はデザイナー中心でコンセプトから画面までデザインし、その制作過程ではエンジニアやプランナーともディスカッションをもとに実装されていったという。
「しかし、この機能はまだスタートしたばかりです。これからもっとユーザーのみなさんに使ってもらえる機能になるようブラッシュアップを重ねていく予定です。機械学習なども取り入れるなど実験的な取り組みも行っていきながら、お店が見つかる新しい体験を実現したいと思っています」
今回、山本さんにお話を伺ったなかで見えてきたこと。それは、デザインしているのは「見た目」ではなく、Rettyが目指す体験であるということ。その実現のために、プロトタイプを何度も繰り返し、細部まで徹底的に検討を行なっていた。いかにユーザー体験を向上させるために、こだわり抜けるか。サービスのアイデンティティをデザインに落とし込めるか。デザイナーにとって重要な姿勢を垣間見ることができた。ぜひ参考にしてみてもらいたい。
※掲載時から内容を一部修正しています。（2017年2月27日 CAREER HACK編集部）
文 ＝ まっさん
4月から新社会人となるみなさんに、仕事にとって大切なこと、役立つ体験談などをお届けします。どんなに活躍している人もはじめはみんな新人。新たなスタートラインに立つ時、壁にぶつかったとき、ぜひこれらの記事を参考にしてみてください！
経営者たちの「現在に至るまでの困難＝ハードシングス」をテーマにした連載特集。HARD THINGS STORY（リーダーたちの迷いと決断）と題し、経営者たちが経験したさまざまな壁、困難、そして試練に迫ります。
Notionナシでは生きられない！そんなNotionを愛する人々、チームのケースをお届け。
