買い物xゲームで、“ハマる”をデザイン。 Yahoo!ショッピング「お買い物クエスト」。

こんにちは！　Yahoo!ショッピングデザインチームの田中です。
昨年リリースされましたYahoo!ショッピングの新機能「お買い物クエスト」についてご紹介します。

お買い物クエストとは

みなさん、Yahoo!ショッピングのアプリに、「お買い物クエスト」という機能があることはご存じでしょうか？
お買い物クエストとは、お買い物に関するミッションをクリアするとレベルが上がったり、ランキング上位を目指して豪華なクーポンを獲得できるような機能で、ゲーミフィケーション要素を組み合わせた機能です。
ゲームの“ハマってしまう”を、ECにも取り込むことで、Yahoo!ショッピングおなじみの“お得”以外でも、アプリを開いてもらうきっかけをつくりたいと思いました。
2019年9月からのテスト版の提供開始以来、約70万人が参加するなど、好評を得ています。

ゲームから学んだ“ハマる”UX

ゲームには、ついハマってしまう仕掛けがたくさん施されています。
私はゲーム制作の経験がなかったので、まずはとにかく人気ゲームの共通点を探し、成功事例を調査しました。

1.“ハマる”ためのUX設計

人気ゲームたちのルールを体系化していくと、全体の体験の流れには、大きく“アクション”、“リアクション”、“コレクション”の3つが共通していることに気がつきました。
この3つのフレームを元に、お買い物クエストのゲーム設計を行っていきました。

• アクション: お買い物に関するミッションをクリア
• リアクション: クリアすると経験値がもらえてランキングに反映
• コレクション: キャラクターカードや称号バッジ、クーポンを集める

2.ハマる心理

みなさんの中には、実際にゲームにハマり、つい熱中してやめられなくなったり、課金をした経験がある方がいるのではないでしょうか。
ゲームの多くは、行動心理を活用して、ついハマってしまう要素が組み込まれています。
そこからヒントをもらい、お買い物クエストにも活用しているので、一部ご紹介します。

• キャラクターカードを集めたいという収集心
• ランキングで、上位にランクインしたいという競争心
• 称号バッジを他人に自慢したい承認欲求
• ログインボーナスを失いたくないための継続

3.UI、ビジュアル設計

見せ方で重要視したことは、大きく2つあります。
1つ目はわかりやすさです。
「お買い物クエスト」のUIは、普段担当しているECのデザインとは色が異なり、複雑なルールをユーザーに誤認なく伝えることが大変でした。

その中でも、特に苦労したのがホーム画面です。
当初は、ショッピングサイトに寄せたUIで作成していましたが（下記デザイン変遷の左から3段階目まで）、実は開発に入ろうというタイミングで、大きなデザイン変更の決断をしました。

理由は、実際にYahoo!ショッピングをご利用いただいている一部のお客様へ、プロトタイプを作成して触っていただいたところ、「使ってみたいと思うか」、「遊び方について理解できたか」、「ランキング上位を狙いたいと思うか」など、質問に対して、良い結果が得られなかったからです。
そこで、お客様からいただいたコメントを元に、改善していきました。

<主な改善点>

• 背景をつけることで、キャラクターの世界観を演出
• 訪れてまず何をしたらいいかを理解してもらうため、情報量を減らしメインのボタンを設置
• “お買い物ミッション”ではなく“お買い物ミッションを見に行く”にするなど、一つ一つの文言の見直し

2つ目は、“かわいさ”です。
ヤフー公式キャラクターのけんさくとえんじんに登場してもらいました。
“ハマる”を作る上で、親しみやすさや愛着は大事な要素です。
ゲームを進めていくと、さまざまなポーズのキャラクターカードを獲得することができ、自分のホーム画面のキャラクターをカスタマイズできるのがポイントです。
かわいいキャラクターをモチベーションに、継続してお買い物クエストを使っていただいている方も多いと思います。

このように、UX設計からビジュアルに落とし込むまでの各フェーズで、“ハマる”エッセンスを取り込み、「お買い物クエスト」が完成しました。
その結果、Yahoo!ショッピングアプリのCVRが上がり、大きな流通効果を産むことができました。

終わりに

現在もお買い物クエストは、高い継続率で多くの人に使っていただいています。
飽きてしまわないよう、Yahoo!ショッピングでのキャンペーンに合わせて、さまざまなイベントなども検討中です。
今後も、改善を続けて参りますので、よろしくお願いいたします。