新サービスで意識すべきポイントは? 「TIPSTAR」から紐解く、0→1のUI/UX設計

新サービスで意識すべきポイントは? 「TIPSTAR」から紐解く、0→1のUI/UX設計
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 ゲームやアプリなど、さまざまなプロダクトの開発・運営を行っているミクシィ。本連載では、各プロダクトに携わるデザイナーが、そのUIやUXの裏側について解説します。第2回で取りあげるのは、2020年6月にリリースした「TIPSTAR(ティップスター)」です。

 はじめまして。株式会社ミクシィでUIデザイナーをしている吉秋です。

 今回は、2020年6月にリリースした「TIPSTAR(ティップスター)」のUI/UXデザインの事例をもとに、新サービスのUI/UXを設計するうえで意識すべき点などについて紹介したいと思います。

 そもそも「TIPSTAR」とは、競輪やオートレースのネット投票を基本無料で楽しむことができるアプリです。

 モデルやアイドル、お笑い芸人などのタレントが競輪やオートレースを楽しむ様子を365日配信していたり、アプリ上で実際に車券を購入したりすることができます。また、無料でベットする(賭ける)こともでき、的中しポイントを集めるとガチャを引くことも可能です。ほかにも、ライブ配信者や一般ユーザーの予想を公開しており、その予想内容に自分の予想を合わせる「のっかりベット」機能を搭載しています。

TIPSTARのUI/UX設計

 では、そんなTIPSTARのUI/UX設計について見ていきましょう。今回は、おもに次の2点のコンセプトを達成できるよう制作しました。

1.気軽に楽しめる

TIPSTARでは、ソーシャルゲームのようにアイコンを多用し、賑やかでワクワクするようなビジュアルのUIデザインを採用しました。

ですが、このグラフィックに至るまでにはさまざまな案があり、開発当初はソーシャルゲームらしさを全面に押し出したデザインではありませんでした。

たとえばニュースアプリやフリマアプリといったシンプルなグラフィックの案や、SNSアプリのように、シンプルでありながら、色使いやボタン、アイコンにエンタメ要素を取り入れた案などもありました。

一方、TIPSTARでは、いままで競輪やオートレースに触れたことがない人たちをメインターゲットにしていたため、詳しくない人でも気軽に遊びやすくするため、ソーシャルゲームにおいて一般的な「フリー・トゥ・プレー」を導入。基本的には無料で楽しんでもらうために、ゲームセンターのメダルゲームのような無料でベットできる機能を搭載しています。このほかにも「ランク」、「ガチャ」、「ミッション」といったソーシャルゲームではおなじみの機能もあります。

こうしたサービスの特徴を活かし、誰もが親しみを持って気軽に楽しんでもらえるよう、ソーシャルゲームをイメージしたUI設計にしました。

ソーシャルゲームのようなUIデザインを採用。
ソーシャルゲームのようなUIデザインを採用。
フリー・トゥ・プレー(画面左のメダルを使って無料でプレイが可能)
フリー・トゥ・プレー(画面左のメダルを使って無料でプレイが可能)
ランク
ランク

2.コミュニケーションが活発になる

TIPSTARは「共遊型スポーツベッティングサービス」と銘打っています。なかでも同様のベッティングサービスと大きな差別化をしているのが、友人と一緒に楽しめるサービスであること。そのため、友人と一緒に楽しんでもらう体験を提供することも、重要なコンセプトのひとつでした。そこでコミュニケーションを促進するべく、マルチプレイ機能や招待機能、スタンプ機能を実装しています。

※この続きは、会員の方のみお読みいただけます(登録無料)。