「お買い物クエスト」で毎日アプリを開きたくなる　Yahoo!ショッピングにゲームを追加した理由

Yahoo!ショッピングのデザイナー3年目

亀岡瑠璃氏：私からはYahoo!ショピングの新機能についてお話しします。新機能といってもけっこう前からありますけど、「お買い物クエスト」の取り組みについて共有します。よろしくお願いします。

自己紹介です。私の名前は、亀岡瑠璃と申します。今年で3年目になります。Yahoo!ショッピングのデザインをずっとやっていて、詳しい内容としては、検索とか販促のUIとかのグラフィックデザインをやっています。

私からは2つトピックを紹介します。「お買い物クエスト」の紹介と、その中でデザイナーが何をしているのかをちょっと紹介したいと思います。よろしくお願いします。

Yahoo!ショッピングならではの新機能「お買い物クエスト」

まずは、「お買い物クエスト」について紹介します。

「お買い物クエストとはなんぞや？」ということですが、Yahoo!ショッピングにあるミニゲームのことです。ここ（「お買い物ミッションを見に行く」ボタン）からミッションにとべるんですが、このミッションをクリアして、経験値を貯めて「けんさくくん」をカスタマイズする、というゲームです。

ミッションとは何かというと、Yahoo!ショッピングならではのミッションになっています。

例えば商品を検索したときに、その検索結果を100件にする。他には、左側にクイズのスクリーンショットを貼っていますが、PayPayモールのキャッチコピーはどっちでしょう？とか。これだとAですかね。クリアすると、経験値がもらえます。

そして、経験値が貯まると、レベルアップできます。レベルアップすると、着せかえキャラクターがゲットできます。

着せかえキャラクターカードは、今はたぶん100種類以上あると思うので、ぜひぜひ遊んでみてください。今だと、スタンプや背景もカスタマイズできるようになっていて、自分だけのオリジナル「けんさくくん」ができたりするので、ぜひ遊んでみてください。

Twitterで「お買い物クエスト」って検索すると、かわいくカスタマイズしている「けんさくくん」を見かけます。それがけっこう自分もうれしいので、ぜひTwitterでお知らせしてもらえればと思います。

もう1つ、「お買い物クエスト」にはランキングというのがあって、これはかなりYahoo!ショッピングならではの特徴的な機能だと思います。

このランキングは毎月開催されていて、その月に獲得した経験値の合計でランクが決まります。上位にランクインすると、実際にお買い物で使えるクーポンが獲得できるという、ほかのゲームにはなかなかない要素で、けっこうおもしろいところかな、と思っています。

もう1つ、ガチャという機能があります。これはもっと手軽にクーポンを狙える機能です。

ミッションにチケットが紐づいていて、それをクリアするとチケットが獲得できます。そのチケットが貯まるとガチャが引けるようになって、ガチャを回すと、例えばクーポンがもらえたり、まとまった経験値がもらえてランキングで有利になったり、着せかえキャラクターも獲得できたりします。

ほかにも、ログインボーナスや、称号バッチなど、いろんな機能が入っていますので、ぜひ遊んでみてください。

「お買い物クエスト」でアプリを立ち上げるきっかけに

では、「お買い物クエスト」内でのデザイナーの取り組みについて、紹介したいと思います。

まずは「お買い物クエスト」を、Yahoo!ショッピングに導入した経緯からお話しします。

今、けっこうすごい幅で、いろいろなゲームアプリがありますが、その手軽さがゆえに、幅広い人が使っていると思っています。そういったゲームをYahoo!ショッピングにもってくることで、アプリに何度も来てもらえるきっかけづくりや、お得を知ってもらう顧客育成の側面があると思っています。

それで言うと、先ほどのクイズだったり、Yahoo!ショッピングに関するミッションだったりは、Yahoo!ショッピングのお得を知ってもらうものにもつながると思います。ガチャや、毎日もらえるログインボーナスは、毎日Yahoo!ショッピングに来るきっかけづくりになると思っています。

ほかのECアプリで、なにかゲームを入れている例がないかなと思って探しました。これは他社事例になりますが、「Lazada」という東南アジアのECアプリには、町をつくるゲームが、ミニゲームとして入っています。ほかにもいろいろな種類のゲームが入っていたんですけど、ちょっとこれを紹介します。

ゲームとしては、「CLASH of CLANS」にけっこう近いと思いますが、ほかの町に行って、ダイヤを奪ってくることができます。これも、なにかタスクをクリアしていくものだったり、2時間限定のシールドがあったりするんですけど、これらは来てもらうきっかけづくりになると思います。

初めてのオールリモート案件で横断的な情報共有が実現

今回は、2020年5月にリリースしたガチャについても、ちょっと紹介します。これはアプリに来てもらうきっかけづくりとして始まりました。

これは、私にとって初めてのオールリモートでの案件でした。リモートする中で、デザインの取り組み方が以前と少し変わったと感じることがあったので、ちょっと共有したいと思います。

まず、デザインを始めるときに、企画とエンジニアとデザイナー（私）の3人だけでミーティングしました。以前から3人で話す機会はあったのですが、そのときは、大きな画面にSketchやデザインモックを映して、共有することが多かったです。

内容は、実装に関するものだったり、細かい仕様だったり、あとはビジュアル面を決める際に、関連画像を共有したりして決めていきました。

オフラインからオンラインに変わったときに、すごく地味なアップデートではあるんですが、すごくよかったなと感じることが1つありました。Sketchの画面を共有しながら進めることができたことです。各個人の画面にデザインモックの画像があることで、より細かい確認ができたと思っています。

映しながらリアルタイムで自分が編集、更新という作業を繰り返しました。この作業は、長い時は1時間を少し越すこともあったんですけど、そのあとの手戻りも少なくて、結果的に早かったと思っています。

そのときのデザインモックを持ってきました。左がデザインモックで、右が現行のデザインです。ぜんぜん違うものに変わっていった内容について細かく見ていこうと思います。

まずはプレミアムガチャとノーマルガチャのバナー部分ですね。これはエンジニアの方から、ここをアニメーションにしてもっと魅力的にできます、という話をいただきました。それで、現状はアニメーションになっています。

もう1つは「☆5」とかのレア度の見せ方ですね。この間にも何個もモックはあったんですけど、プロジェクトに投げてアンケートを取り、その中で、やっぱり「これよりもっと魅力的に見せたいよね」とか「報酬をもっと魅力的なものに見せたいよね」ということで、こちら側に変わっています。

お買い物クエストは、けっこうフラットなデザインが多いので、それに沿って左側にしていましたが、確かに右側のほうがすごく魅力的に感じますよね。ということで、アップデートをしています。

チケットのところもだいぶ変わっています。ここは最初、共通部分としてもっていたのですが、今では、プレミアムチケットであればプレミアムガチャのところに、ノーマルチケットであればノーマルガチャのところに置いています。

これは、UI的にも目線の移動が少なくてとてもいいんですけど、もう1つ企画意図があって、ファーストビュー内にノーマルガチャの内容までが入るデザインになっています。

1人でデザインしていたら、なかなかこういうアップデートはできなかったと思っています。ここが、共有できてすごくよかったと思っている部分です。ほかにも魅力的に見せるために、ガチャを引くときのアニメーションに、何回か修正を入れました。

いい組織の条件は職種を問わず「コラボレーション」できること

この案件を通して、オンラインに限らず重要だなと思ったキーワードが、「コラボレーション」です。職種問わずに参加できることにすごくメリットを感じました。

今あるツールでも、例えばFigmaの説明には、「the collaborative interface design tool」とあり、Adobe XDの機能の説明にも、「Real-time collaboration with Coediting」とあります。（両方とも）「Collaboration」というキーワードを使っていて、やはり「コラボレーション」は欠かすことのできない要素なんだなと感じています。

自分が実際こういうふうに案件を進めてみて感じたメリットは、やっぱり手戻りが少ないぶん、早いことです。また、プロジェクト内で、どういう議論がされたのかがみんなわかっている状態で進んでいくので、納得感が強いと思います。笹尾さんのプレゼンにも、けっこう通じるところがあると思って聞いていました。

オンラインのデザインであっても、オフラインのデザインであっても、コラボレーションができる組織は、すごくいい組織だと感じています。

ここからは自分の考えです。デザイナーは、活躍できるベクトルがいろいろな方向にあると思います。そのうちの1つとして、コラボレーションするために、例えばプロジェクト内をよりオープンなデザイン業務にしたり、ファシリテートしたり、また参加の障壁となるものを取り除いていったりなど、そういうことをするのも1つのベクトルかなと感じています。

今回は突然オールリモートになったことで、偶発的にこういう動き方ができたんですけど、これからはもっと意識的にできると思っています。

組織がさらなるアップデートをして、それによってサービスもアップデートして、そこからデザイナーとしていいサービスづくりに貢献できたらなと思っています。日々精進しながら、がんばっていこうと思っています。

これで発表を終わります。ありがとうございました。