ユーザーからの「ただの絵文字に見える」を乗り越えて--Rettyアプリのアイコンに隠されたデザイナーたちの奮闘

実名のユーザー投稿型グルメサービス「Retty」

司会者：最後、山本さんお願いします。

山本麻友美氏（以下、山本）：Rettyの山本と申します。今日は、「Retty流世界の描き方～大きなビジョンを緻密にデザイン～」というお話をさせていただこうと思います。どうぞよろしくお願いします。

（会場拍手）

まず、私の自己紹介をさせていただこうと思います。Rettyのデザイナーの山本麻友美と申します。数年前にHCD-Netの人間中心設計のスペシャリストを取得しまして、業務の中にHCDのプロセスを取り入れながら、日々仕事をしております。

これまでWeb制作会社で10年間、アートディレクターとして活動してきました。昨年6月にRettyにジョインいたしまして、今はiOSとAndroid、両方を開発するアプリチームのデザイナーとして活動しています。

話の本題に入る前に、Rettyのサービスについて少しご説明させていただこうと思います。この中で、「Rettyを使ったことがあるよ」っていう方、どれくらいいらっしゃるでしょうか。

（会場挙手）

あっ、すごい。うれしいです。ありがとうございます。これから、よりがんばっていこうと思います。ありがとうございます。

Rettyについて改めてご紹介させていただくと、実名のユーザー投稿型グルメサービスで、Webとアプリの両方でサービスを展開しております。2017年5月に月間利用者数は3,000万人を突破しました。昨年12月にiOSアプリをリニューアルいたしました。私はこのリニューアルに、メインデザイナーとして関わっておりました。

このiOSアプリリニューアルの目的は大きく2つありました。1つは、プラットフォームの再構築です。以前のアプリは2015年にリリースしたものだったので、この先さらにグロースしていくために、技術的にも情報設計的にもベースを新しく構築する必要がありました。

2つ目は、「もっとRettyらしい体験」を作り上げることです。今日はこちらについて、お話をさせていただこうと思います。

「BESTなお店が見つかる体験」を向上させる

まず、Rettyのビジョンについて。Rettyは、「食を通じて世界の人々をHappyに」というビジョンを掲げております。この写真は、オフィスの受付にある黒板を撮影してきたものです。自分にぴったりのお店を探したいユーザーさんと、自分のお店のファンを増やしたいお店、その両方がHappyになる世界を実現したい、と私たちは考えています。

Rettyは、「Recommend」と「Happy」の造語でできた名前です。人のオススメによって人々を、すなわちユーザーさんとお店の両方を幸せにする、という思いが込められています。

そのビジョンを実現するため、Rettyのサービスでは「『自分が信頼できる人のオススメ』から自分にとってBESTなお店が見つかる体験」を目指しています。今回のリニューアルの目的である「もっとRettyらしい体験を」というのは、この「BESTなお店が見つかる体験」を向上させることが重要なミッションでした。

Rettyには、たくさんのオススメの声が集まっています。例えば、餃子好きの友人がオススメする餃子のお店、グルメの達人がオススメする渋谷のお店、好みが似ている人がオススメするバー、などなど。Rettyに集まっているのは、生の「オススメの想い」です。

これはお店だけでなく、例えば、「ここのお店は絶品だよ！」という想い。「渋谷ならここは外せないよ！」という想い。「ここのバー、最高だったよ！」という想い。それぞれのユーザーさんの素直な生の想いを、お店を探しているユーザーさんにきちんと伝えたい。それがRettyの目指している、「『自分が信頼できる人のオススメ』から自分にとってBESTなお店が見つかる体験」につながります。

「オススメの想い」がきちんと伝わるようにするには、考えることがたくさんあります。例えばこれは、以前のアプリのオススメ投稿のモジュールなんですけれども、「写真をもっと魅力的に見せるにはどうすればいいのか」「もっとオススメが伝わるテキストの位置はどこがいいか」など、1つのモジュールをとっても、考えなければならないことがたくさんあります。

その中でも、オレンジ色の枠で表示している「オススメ度アイコン」は、Rettyの「オススメを伝える」という世界観において非常に重要な役割を持っています。モジュールの中では小さな要素なのですが、伝えるという意味では大きな効果を生み出します。iOSアプリのリニューアルと合わせて、このアイコンのデザインも検討を行いました。

今日は、このオススメ度アイコンのデザインのプロセスを通じて、どのように「Rettyらしい体験」をデザインしていったかをお話ししたいと思います。

「オススメ度アイコン」が重要な理由

まず、なぜこのアイコンが重要なのか。このアイコンが、「オススメの想い」をストレートに表現する重要な役割を担っているからです。一般的にアイコンは、意味を視覚的に伝えるものとして使用されていると思います。Rettyのオススメ度アイコンは、行ったお店がどのくらいオススメなのかをアイコンで表現しています。

アイコンがあることで、投稿する人はオススメ度合いを伝えやすくなり、お店を探している人はそれを直感的に理解することができます。視覚的で簡単にオススメ度合いを伝えられるアイコンは、「信頼できる人の『オススメ』からお店を探す」というRettyのサービスコンセプトを構成する重要な要素であるとともに、Rettyのアイデンティティを表現する1つにもなっています。

以前のアイコンは、顔の表情でオススメ度を表現していました。しかし、顔の表情の変化は非常に繊細な違いです。また、度合いを表すアイコンとしては、あまり見慣れないデザインでした。これって本当に、「オススメする人の想いがシンプルかつストレートに表現できているのか」「ユーザーさんに正しく伝わっているのか」という2点から、まずはこのアイコンのデザインに関して調査することにしました。

そこで、200人にユーザーアンケートを行いました。「このモチーフにはどんな意味があると思いますか？」。回答結果はこのようになりました。

「殿堂ではないが、いま、がんばっているお店！」「ユーザーの活動量かと思った」「ただの絵文字に見える」「不明」「王様」……などなど、「オススメの想い」が正しく伝わっていないことがわかりました。

もう1つ質問をしてみました。「それぞれの（アイコンの）オススメ度合いを、10段階で評価してください」。

こちらの回答結果は、このようなかたちです。回答結果のグラフを見ると、それぞれのアイコンのオススメ度合いがかぶっていて、度合いが正しく伝わっていないということがわかりました。

Rettyの重要なアイコンも、「オススメする人の想い」がきちんとユーザーさんに伝わっていないということがわかりました。これではRettyが目指す「『自分が信頼できる人のオススメ』から自分にとってBESTなお店が見つかる体験」が、実現しにくくなってしまいます。

世の中の浸透度とスケールのしやすさから、スターマークを採用

そこで、「オススメする想い」が伝わるアイコンとはどういうものなのかを、概念的・論理的に考えて、答えを導き出していきました。1つは、誰もが直感的にわかるモチーフかどうか。もう1つは、オススメの度合いがわかる、「度合い感」が伝わるかどうか。この2軸で、アイコンのデザインを検討していきました。

これまで、いろんなモチーフを検討してきました。例えば画面に映っている、このようなアイコンたちです。これらのモチーフでヒアリングを行ったんですけれども、残念ながらどれも直感的には伝わりにくい、という結果が得られました。

いろいろなモチーフを検討した結果、最終的にスターマークを採用することにしました。スターマークを採用した理由は、1つ目は世の中の浸透度です。国内だけでなくグローバルで展開するサービスでも、序列に関するモチーフにスターを使っているケースが多くあります。そのため認知度が高く、よく検索するユーザー層にもわかりやすい、ということがあります。

2つ目に、スケールのしやすさです。年齢・性別・文化などに影響しないモチーフなので、国やマーケットが違っても適用しやすく、デザインの汎用度も高いことが挙げられます。この2点の観点で、モチーフはスターに決定しました。

次に度合い感についてですが、度合い感を表現する手法として、数や濃度、サイズや深度、面積などがあると思います。今回はオススメ度合いをデザインするにあたって、手法としては数と濃度とサイズを使って、視覚的に度合いを表現しました。

スターの数を物理的に増減させることによって、度合いを視覚的に、かつ直感的に伝えることができます。ただし、アイコン自体はとても小さいものなので、ぱっと見での違いをより強調させる必要があります。そこで、濃度とサイズでの差をプラスすることによって、視覚的にはっきりと度合いの差を表現することができます。

また、ユーザーさんの「オススメする想い」をアイコン化するために、オススメ度合いを伝える言葉をセットにしてアイコンをデザインしました。オススメ度アイコンは約50パターンほど作成し、その中から10パターンほどピックアップして、ユーザーアンケートを実施しました。

デザインとリニューアルを行った結果、来店率が約20パーセントアップ

だいたい同じ、200人くらいのアンケートを実施しました。この調査を行ったのは、オススメ度合いがきちんと、意図どおりにユーザーさんに伝わっているかどうかを客観的に確認するためです。

そして、オススメ度アイコンのデザインはこのようになりました。スターをモチーフに使用して、度合いの表現を星の数と色、サイズで表現して、ぱっと見での違いをはっきりさせました。そして想いが伝わる言葉をセットにして、アイコンとして仕上げました。

ちなみに、3段階の今までのオススメ度に加えて、上位のオススメ度として「BEST！！」を追加して、最終的に4段階のオススメ度アイコンになりました。2016年まで年末企画として、年間のベストを選出していたコンテンツがあったんですけれども、それを通年で利用できる機能として新たに追加しました。

「Excellent！」よりも強いオススメ度を表現できるようになって、自分にとってベストなお店を伝えやすく、人のベストなお店が伝わりやすくなりました。

こちらは、新しいアプリのオススメ投稿のモジュールです。今まで説明したオススメ度アイコンは、吹き出し型でユーザー画像とセットにすることで、「その人がオススメしている」ということをより伝わりやすくレイアウトしています。

しかし、オススメ度アイコンを変えただけでは、「オススメの想い」をしっかり伝えるデザインにはなりません。例えばこのモジュールですが、オススメ度とコメントの一体感を出すことでオススメ内容を伝わりやすくするとか、写真を大きく、枚数も増やしてオススメの臨場感を強めるなど、いくつもの細かい検討をした結果が詰まっています。

このモジュールの要素1つ1つも、今お話ししたアイコンの検討と同じく、調査やヒアリング、デザインのパターンをいくつも検討して作り上げられています。

そしてこのようにデザインをしてiOSアプリをリニューアルした結果、数値的な結果として来店率（注：Rettyでお店を検索した人が実際にお店を訪問する率）が昨対比、約20パーセントアップしました。ほかの施策もあるため、オススメ度アイコンのデザインを変えたことだけが要因というわけではありませんが、1つの要因として結果に寄与できたと感じています。

リニューアル後は想像以上にポジティブな意見が多かった

また、オススメ度アイコンのここまで大きなデザイン変更は、サービス開始から初めてのことでした。変更に対する不満の声があるのでは、と懸念をしていたんですけれども、リリース後ネガティブな意見はほぼ出てきませんでした。

もちろんしっかり事前告知などをして、ユーザーさんを驚かせることのないようリリースの準備を行ってきてはいたんですけれども、きちんと「Rettyらしい体験」として、ユーザーさんに受け入れられるデザインができたのではないかと感じています。

またリニューアル後、ユーザーさんから多数のポジティブな声もいただきました。フルリニューアルなので、ネガティブな意見が出やすい傾向があると思うんですけれども、想像以上にポジティブな声が多く届いたことに驚いて、そしてとてもうれしく感じました。

いただいたユーザーさんからの声を少し紹介すると、「アプリのUIがすごくよくなってる」「フォローしてる人の投稿の見やすさ」「投稿しやすさとか」など。

あと、「見やすいし、動作がサクサクしていて使いやすい。行きたいお店集めが捗る」「写真をたくさん見られるようにデザイン変更されたので楽しい」など、Rettyでのお店探しがさらにいい体験へと進化したことを実感しました。

まとめですが、今回のリニューアルの目的である「もっとRettyらしい体験を」というのは、イコール「『自分が信頼できる人のオススメ』から自分にとってBESTなお店が見つかる体験」をしっかりデザインすることが重要でした。

デザインしたことがこのように、数値やユーザーさんの声として、目に見えるかたちでフィードバックがもらえたことは、デザイナーとして、体験のデザインがしっかりできたというやりがいを感じています。

そしてこのリニューアルをやり遂げるために、デザイナーとして心がけたこと。それは、「『伝える』と『伝わる』を緻密にデザインすること」です。想いをきちんと「伝える」ことができ、想いがきちんと「伝わる」。その両方が実現できなければ、「『自分が信頼できる人のオススメ』から自分にとってBESTなお店が見つかる体験」を作ることはできません。

今回はオススメ度アイコンのデザインを通じて、「伝える」と「伝わる」デザインのプロセスをお話ししましたが、それはデザインしたことのほんの一部でしかありません。