『共遊型ベッティングサービス TIPSTAR』の世界観を実現するために─特有のUIを採用するアプリ開発の裏側に迫る
『共遊型ベッティングサービス』として、ベッティングを主軸にさまざまな機能を提供するTIPSTAR。アプリ内にいくつかゲーム要素を取り入れるなど、そのUIは独自性の高いものになっています。
今回お送りするのは、そんなTIPSTARのiOS/Androidアプリ開発を担う、3名のエンジニアへのインタビュー。彼らが育むチームのカルチャーから、独自性の高いUIとの付き合い方等の開発の特徴、そしてTIPSTARのアプリ開発はどんな方に向いているか？などについて聞きました。
寺田（写真左）：携帯電話のゲームアプリ開発を経験し、2008年のiPhone 3G登場時よりiOSアプリ開発に携わり始める。ミクシィ（現MIXI）には2016年2月に入社し、複数事業でiOSアプリ開発を担当した後、2019年にTIPSTARにジョイン。
山田（写真中央）：2015年にミクシィ（現MIXI）に新卒入社。複数事業でAndroid開発やアプリ開発チームのリーダを経験し、2019年にTIPSTARへジョイン。TIPSTARではAndroid開発のテックリード兼 iOS, Android, Web開発を行うクライアントチームのリーダーを担う。
真田（写真右）：複数社でiOSアプリ開発をメインにAndroid, API, Webフロントエンドなど様々な開発に従事し、2022年1月にミクシィ（現MIXI）に入社。minimoでAndroidアプリ開発を担当した後TIPSTARにジョインし、現在はiOSアプリ開発を担当。
経験豊富なアプリ開発エンジニアが集うチーム
━━まずは、チーム構成について教えていただけますか。
山田：部署としては、Androidエンジニア4名、iOSエンジニア4名、Webエンジニア2名、Unityエンジニア1名の計11名のチームになっています。ただ、実際には各プラットフォームごとに分かれて仕事を進めることが多いです。
━━チーム内では、どのようにコミュニケーションをとられていますか？開発に詰まった時などのことも教えてください。
山田：今は全員が揃って出社することは中々ないので、仕事に必要なコミュニケーションはオンラインで完結するようにしてますね。
真田：開発で詰まった時のことですが、実は技術的に困って誰かに相談することがあまりなくて。二つの選択肢があるがどちらが良いか？くらいの軽い相談は雑談的にSlackチャンネルにポストしたり、ハドルで聞いたりしています。
寺田：たしかに、技術的に困って相談することはあまりないですね。相談するにしても、大体自分の中で答えを持っていることが多いですよね。
━━なんと、そうなんですね。基本的に、開発では困らないということでしょうか…？
真田：デザインが上がってきた時点で、実装が難しそうなものがあれば調整してもらっています。そのため、実装する段階で困ることが少ないという感じです。
山田：そのやり方が上手くまわっているのは、経験のなせる技ですよね。
━━経験を積んだからこそ、という感じがしますね。Androidの方はどうでしょう？
山田：Androidも割とベテランが揃っているので、開発で困る場面はそう多くないと思います。
ちなみに、Androidのメンバーの特色で言うと、新しい技術を取り入れる時は勉強会を開くことが多いです。たとえば、現在Jetpack Composeの導入を計画しているので、最近ではその勉強会を開きました。
“TIPSTAR特有のUI” 、そのアプリ開発の裏側とは
━━チームの雰囲気やカルチャーについて、もう少し教えてください。
真田：カルチャーというほどでは無いかもしれませんが、最近はアプリストアのレビューを気にする空気が生まれてきています。アプリストアのレビューが流れるチャンネルを作ったことで、メンバー間でどのようにアプリを改善すべきかの会話が生まれ、レビューへ返信するようになりました。
山田：事業部全体のメンバーが見ているので、職種を超えたコミュニケーションのきっかけにもなっていますよね。
━━ひとり一人が、より一層ユーザー体験向上について考えるようになったんですね。他にもありますか？
山田：デザイン含む仕様書がきっちり揃っているので、誰でも開発に入りやすい環境だと思います。経緯としては、TIPSTARは機能が多く情報が散らかってきたので、きちんと仕様書に残すようになりました。
━━「TIPSTARは機能が多い」とのことですが、UIも特殊な作りになっていますよね。。
真田：ヒューマンインターフェイスガイドラインは最低限抑えつつ、そこにとらわれすぎない作りになっていると思います。
寺田：ガイドラインからは、かなり逸脱してますよね。TIPSTARのコンセプトは”共遊型ベッティングサービス”です。”共遊型”という言葉から読み取れるように、ゲームのような体験の提供を重要視しているため、TIPSTAR特有のUIになっています。実際、すごろくやガチャなどのミニゲーム的な機能が備わっていて、その辺りの実装にはUnityが使われていたりします。
━━サービスのコンセプトに沿った結果なんですね。UIがTIPSTAR特有のつくりになっていることで、苦労されることはないのでしょうか。
山田：やはり、技術的なハードルは高いと感じます。演出として度々サウンドエフェクトやアニメーションを用いるのですが、ネイティブ側で実装することもあるので、大変なこともありますね。
あとは、世界観を表現するためにUIパーツのカスタマイズを行うことも多いです。例えばボタンは一色で塗りつぶして終わりではなく、TIPSTARでは色や効果を複数重ねてデザインされています。こういった独自のデザインは標準SDKに用意されていないので、カスタマイズが必要になります。
寺田：ここ10年ほどの、フラットデザインのトレンドを全て無視するようなUIになっていますね。なので、プラットフォームが用意してくれているパーツは、そのままだとほとんど使えなくて。
真田：一つひとつのパーツが作り込まれていると思います。ボタン以外にも、ナビゲーションバーのデザインも割と独特なので、実装は少し複雑ですね。
━━世界観を表現するために、色々と工夫されているんですね。
新しい技術の導入にあたり、抱えている課題
━━iOS、Android開発それぞれで、現在課題に感じていることについて教えてください。
真田：iOS開発側では、RxSwiftへの依存をなんとかしたいです。SwiftUIやSwift Concurrencyの導入ハードルが下がってきて、TIPSTARでもそろそろ…と思っているのですが、RxSwiftに深く依存していることで導入が難しくなっています。
━━新しい技術の導入の妨げになっているんですね。SwiftUIの導入は、現在検討中ですか？
真田：少しずつ導入していきたいね、という話は出てきています。
寺田：ただ、既存のUIを全てSwiftUIに対応する場合、普段の開発業務と並行して進めるのは大変ですよね。全画面を一気に書き換えることは難しいので、どうしてもSwiftUIに切り替わっている画面とそうでない画面が混ざるタイミングが出てきます。そうした時に、メインの開発業務に混乱をきたさないように進める方法を模索中です。
真田：以前、別のサービスでAndroid開発に従事していた時に、似たような状況になりました。新しい技術への書き換え前後の画面が混在することで、割と困った記憶があるので、慎重に進めていきたいです。
━━Android開発側は、いかがでしょう？
山田：Android開発では、現在Jetpack Composeの導入を進めようとしています。先ほど、UIパーツをカスタマイズしていると話しましたが、これが曲者でして。これまでAndroid Viewでカスタマイズしていた実装を、Jetpack Composeでも同様に置き換えていく必要があるので、なかなか大変です。
真田：開発現場に共通の課題だと思いますが、新しい技術に置き換えないとこれから登場する便利な機能が使えないため、なんとか進めていきたいですね。
「普通のアプリ開発に飽きてきた」方におすすめの環境
━━最後に、どんな方がTIPSTARの開発チームで活躍できそうか聞かせてください。
寺田：その性質的にスタートアップ等ではなかなか難しい事業ですし、サービス内容的にも珍しいので、少し変わった事業に携わりたい方にとって良い環境だと思います。ギャンブルは特に好きじゃなくても、拒否反応さえなければ。
山田：技術的には、UIのカスタマイズ好きの方は楽しんでいただけるかもしれません。既にあるパーツを使うのではなく、作る側にまわれるので。
真田：レース映像の表示や認証に関しても、MIXI Mが今度SDKに対応するのでそれを使うみたいな話になっていて、そういった珍しい技術を触りたい方にとっては面白いかもしれないです。
━━サービス面でも技術面でも独自性が高いので、珍しいことをやってみたい方に向いていそうですね。
真田：そうですね。よくあるiOS開発には飽きてしまった、という方におすすめできるかも。
寺田：競輪って割とレガシーな業界なので、そういったレガシーなマーケットにアイデアをぶつけて、色々挑戦してみたいというモチベーションがあると尚いいかなと思います。
━━技術的にも事業的にも、様々なハードルを乗り越えて挑戦していきたい方に楽しんでいただけそうに感じました。それでは、ありがとうございました！
MIXIでは様々な事業やポジションで仲間を募集中です。
こちらの記事を読んでいただき、MIXIで働くことに興味を持ってくださった方がいましたら、ぜひ採用情報をご覧ください。MIXIエンジニアの公式X（旧：Twitter）でもMIXIで扱う技術やエンジニアに関する情報など、随時発信してますので、フォローしていただけると幸いです。
それでは、最後までお読みいただき、ありがとうございました！
