2025年8月5日に、MIXIが運営する競輪・オートレース投票サービス『TIPSTAR（ティップスター）』のサービスリニューアルを行いました。
このリニューアルは、構想を含め約2年の期間をかけて実施しました。その中で、TIPSTAR事業部とデザイン本部のデザイナーが連携して、TIPSTARが目指す体験の再設計、UIとデザインシステムの刷新を行いました。
今回はそのプロセスをまとめたいと思います。
TIPSTARは、2020年にリリースした、競輪・オートレースの予想・観戦・投票が楽しめるライブ観戦SNSサービスです。競輪・オートレースを知らない人でも、仲間とコミュニケーションを取りながら競技を楽しめる新感覚のエンタメ体験を提供しています。
今回のサービスリニューアルの背景には、大きく分けて2つの狙いがありました。
1. 目指す体験の再構築
TIPSTARは、公営競技に詳しいユーザーの予想と同じものに投票できる「のっかり」機能や、レースの感想を友だちと一緒に共有し楽しめる「フィード」など、独自のコミュニティ・SNS機能を展開してきました。これにより、従来は1人で楽しむことが主流だったレース体験を、仲間と一緒に盛り上がれる体験へと進化させています。
サービスを運営する中で、「TIPSTARが目指すソーシャルベッティング体験」をより明確に言語化・可視化し、UI/UXにしっかりと落とし込んでいく必要性を感じるようになりました。
2. デザインシステムと開発フレームワークの刷新
UI/UXの改善に加えて、今後のプロダクト開発・運用を見据えたデザインシステムや開発フレームワークの刷新も重要な課題でした。
新機能の追加や改善は活発に進められてきた一方で、デザインや開発の基盤整備は十分に取り組めず、根本的な課題解決に踏み込めない状況が続いていました。開発生産性を高めるためにも、リニューアルを機に抜本的な見直しに取り組む必要があるとチーム全体で判断しました。
実は、初めから「サービス全体をリニューアルする」という明確な方針があったわけではありません。
きっかけは、当時のプロダクトオーナーから、TIPSTARのUI/UX改善について相談を受けたことでした。
それに対して話し合いを重ねる中で、「TIPSTARが目指すソーシャルベッティング体験」を改めて言語化・可視化してUI/UXに反映していく必要性や、その過程でデザインシステムと開発フレームワークの刷新を行う必要があるということが明らかになっていきました。
このような経緯から、最終的には事業部全体を巻き込んだリニューアルへと発展していきました。
ここからは、その過程でデザイナーとして注力した3つの取り組みをご紹介します。
TIPSTARとして目指す体験の言語化・可視化
コンセプトを意識したUI/UX刷新
デザインシステムの構築
上記の通り、本プロジェクトはUI/UX改善の相談をきっかけに始まりました。
まずはデザイナー間で、現行UIにおける「使いづらさ」や「見づらさ」といった課題を洗い出し、プロトタイプを通じて改善の方向性を探っていきました。
その中で、一部の画面だけを対象にトンマナや情報設計を調整するだけでは足りず、サービス全体を一貫して整える必要があることに気づきました。
そこで、TIPSTARとして中長期的に実現したい体験を改めて設計し、それに基づいてデザインの方向性を固める必要があるのではないかと、当時のプロダクトオーナーに提案をしました。
さらに、体験設計を見直すためには、デザイナーだけでなく事業部全体で「TIPSTARとして目指す体験とは何か」の共通認識を持つことが必要であるとの考えに至りました。
そこで、企画や開発を含む事業部メンバーを交えて、改修に向けた共通認識を揃えるためのワークショップを実施しました。
全4回にわたるワークショップでは、まず各メンバーがTIPSTARに対して抱いている想いや考えをヒアリングし、それらをキーワードとして抽出・グルーピングを行いました。さらに、それを全員が共感できるフレーズへと落とし込み、リニューアルコンセプトとしてまとめました。
このリニューアルコンセプトは、その後の体験設計や開発優先度の判断軸としても活用され、チーム全体が迷わず意思決定を進めていくための指針となりました。
さらに、定義したコンセプトをもとに、TIPSTARにおける理想的なユーザー体験を整理しました。アウトプットとしては、ジャーニーマップやユーザー体験のサイクルを、下図のように可視化しました。
企画・デザイン・開発といった部門の垣根を越えてワークショップに取り組んできたことで、このようなTIPSTARとして目指したい体験への共通認識をスムーズに持てるようになりました。
また、この体験を実現するためには、UI/UXの改善にとどまらず、将来的なプロダクト運用を見据えたデザインシステムや開発フレームワークの刷新が必要であるという認識が共有され、最終的にリニューアルに踏み切る意思決定がなされました。
本格的にプロジェクトが始動してからは、策定したコンセプトやジャーニーマップに基づき、デザイン制作を進めました。
最終的にはすべての画面を刷新し、特に注力すべき画面は優先度を整理した上で、チーム内で分担して制作しました。
ここからは、その中でも特に工夫を凝らしたデザインの一部をご紹介します。
HOME画面は、TIPSTARを訪れたユーザーが最初に目にする重要な画面です。そのため、初めて利用するユーザーでも、コアアクションの一つである「投票」までスムーズにたどり着けるよう、使いやすさと見やすさの両立を目指しました。
従来はフィード機能を大きく表示し、本日開催されるレースは目立たないレイアウトとなっていました。しかし、TIPSTARの持つ「ベッティングサービスらしさ」と「ソーシャルサービスらしさ」のバランスを踏まえて情報設計を見直しました。
その結果、レース投票とのっかり投票を中心に据えた構成へと変更しました。また、HOME画面に限らず、カラー・フォント・アイコンといったスタイル全体を刷新することで、シンプルで視認性の高いUIを実現しました。
サービス内のトンマナには、ユーザー体験サイクルで定義した「冷静」と「熱狂」という考え方を反映しています。
従来は、ベッティングに伴うドキドキ感や、ユーザー同士で共有しながら盛り上がっていく高揚感を重視し、サービス全体に比較的派手で賑やかなトンマナを採用していました。
しかし、実際のユーザー体験を踏まえると、出走表を見ながら冷静に予想を立てる場面と、レースが始まって熱狂する場面では、ユーザーの心理状態が異なります。
そこでUIにおいても、予想を組み立てる場面では落ち着いたトーンと分かりやすい情報設計を重視し、的中演出など感情が最も高まる場面ではインパクトのある演出を取り入れるなど、シーンごとにメリハリをつけた表現を取り入れました。
UI/UXの改善を進める上で、必要不可欠だったのがデザインシステムの構築です。
これまでも、カラーやフォント、コンポーネントなどをまとめたデザインシステムは存在していましたが、主にデザイナーが中心となって運用していたため、実装との連携において課題を感じていました。
そこで今回のリニューアルでは、エンジニアとも密に連携しながら、スタイルやコンポーネントの設計を一から見直しました。デザインと実装のギャップを埋め、プロダクト全体の一貫したユーザー体験を支える、実装しやすく、運用にも適したデザインシステムの構築を目指しています。
デザインシステム構築の過程で重視していたのは、チーム全体でデザインシステムへの理解を深め、継続的に運用できる状態を整えることでした。
デザインシステムは、単にコンポーネントライブラリとして存在するだけでは十分とはいえません。重要なのは、その意義や運用方針がチーム内で共通認識となっていること、そして、デザインと開発といった職種の垣根を越えて密に連携しながら活用されることです。
デザインシステムを扱えるチームへと成長することも、今回のプロジェクトにおいて重要なテーマでした。
そのため、具体的には以下のような取り組みを行っていきました。
MIXIデザイン本部から、デザインシステムの構築・運用に豊富な経験を持つメンバーがプロジェクトに参画し、チームをリード
TIPSTARデザイングループ内で、デザインシステムの考え方や運用方針などを学ぶためのワークショップを実施
毎週、エンジニアとデザイナーが集まり、デザインシステムの構築方針について実装面での確認や意見交換を行う場を設け、チーム間のコミュニケーションを活性化
このようなプロセスを経て、2025年8月5日にTIPSTARのリニューアルを公開することができました。今後もユーザーの皆様からの声を真摯に受け取りながら、改善を続けていきたいと思います。
リニューアルの取り組みにより、開発フレームワークの刷新とデザインシステムの整備が進み、コード量はほぼ半分になり、新機能の開発やレビューがスムーズに進むようになりました。ビルドやUI確認にかかる時間も、これまでの数分かかっていたものが数十秒に短縮され、開発の流れが大きく効率化しました。
その上、属人化した体制を見直したことで、誰でも再現でき、長く使い続けられる拡張性の高い基盤を整えることができました。AIも活用し、実装やエラー対応にかかる時間を削減しました。その結果、最新技術を取り込みながらUX検証のスピードアップと、チーム全体の開発体験向上を同時に実現しています。
さらに、サービスとして目指す体験への共通認識を深め、デザインシステムの運用を含めた開発プロセスの改善にもつながりました。その結果、チームとしての変化も生まれています。メンバーからは以下のような声が上がっています。
今回のプロジェクトは、当初はUI/UXの改善を目的とした相談からスタートしました。しかし次第に、目指すべきユーザー体験の再設計や、デザインシステム・開発フレームワークの刷新へと発展し、最終的にはサービス全体のリニューアルへと範囲を広げ、約2年をかけて取り組むことになりました。
その過程で、サービス全体のリニューアルに踏み切る意思決定からリリースまでのプロセスを、デザイナーの提案から事業部全体で協力して実現まで繋げられたことは大きな経験でした。日々のやり取りを通じて最後まで一緒に走り切ってくれたメンバーの存在が支えとなり、心から感謝しています。
また、プロジェクトを通じて「TIPSTARをどのようなサービスへと進化させていくのか」という共通認識が生まれ、チーム間のコミュニケーションが活発になったことも、大きな前進だったと感じています。
今後は、このプロジェクトで築いた土台をもとに、TIPSTARをより多くのユーザーに楽しんでもらえるサービスへと、さらに飛躍させていきたいと考えています。