タイマーUIを4分割！Reactで動く着せ替えゲームUI設計

導入

タイマー機能の見た目をユーザーが自由に着せ替えられたら面白いと思いませんか？ 自社プロジェクトの TokStop では、単なる実用ツールではなく、ゲームのように楽しめる「デトックスタイマー」の開発に取り組んでいます。 本記事では、タイマーUIを4つのスロットに分解し、ガチャやポイントで手に入れたコスメティックパーツを動的に差し替え可能にする「ゲームUIアーキテクチャ」の設計手法を解説します。

解決したい課題：テーマ追加のたびにコピペが発生する

初期のプロトタイプでは、タイマーの見た目を1つの巨大なReactコンポーネントとして実装していました。しかし、これでは新しいテーマを追加するたびにコンポーネント全体をコピペすることになり、コードの重複とメンテナンスコストが爆発してしまいました。 また、ユーザーが「針の先端だけを変えたい」「文字盤だけをクラシックにしたい」といった、細かいカスタマイズ（loadout）に対応できないという致命的な課題もありました。

試行錯誤と失敗：ハードコードから動的レジストリへの転換

開発初期のプロンプトと、そこからの失敗・改善プロセスを紹介します。

失敗した初期プロンプト

「タイマーの見た目を切り替えられるReactコンポーネントを作って。テーマAとテーマBを出し分けたい」

この指示では、AIは単純な if-else や switch 文による条件分岐で、巨大なコンポーネントを丸ごと切り替えるコードを生成してしまいました。これではテーマが増えるたびに条件分岐が肥大化します。

改善したプロンプト

「タイマーUIを dial（時計盤・トラック・目盛り）, progress（進行ライン）, tip（先端マーカー）, display（時間表示）の4スロットに分割し、それぞれを独立したReactコンポーネントとして登録・動的ロードできる設計にして。また、ユーザーの装備データ（loadout）とパーツIDを解決する仕組みも考慮して」

このプロンプトにより、拡張性と柔軟性に優れた「4スロット部位システム」の骨組みが完成しました。

実装の工夫：4スロット部位システムとコスメティックカタログ

私たちはタイマーUIを以下の4つのパーツスロットに分解しました。

1. dial (時計盤・トラック・目盛り)
2. progress (進行ライン)
3. tip (先端マーカー)
4. display (時間表示)

デフォルトでは dial_standard_v1 や progress_arc_butt_v1 といった基本パーツが割り当てられます。 新パーツを追加する手順は極めてシンプルです。

• components/detox-timer/parts/ にReactコンポーネントを作成
• register-defaults.ts でコンポーネントを登録
• cosmetics-catalog.ts に収集アイテム（ガチャやポイントで獲得可能）として定義

これにより、マイナーチェンジ（例: dial_standard_v2）や、有料プラン向けの特別なタイマーテーマ、アバターパーツの追加が、既存のタイマーロジックを一切汚さずに実現できるようになりました。

また、パーツIDの解決には resolveEquippedDetoxTimerLoadout と registerDetoxTimerPart を介することで、ユーザーの装備データとプレビュー表示のズレを防いでいます。

完成物の評価と今後の展望

この4スロット部位システムにより、UIの着せ替え機能が驚くほどスムーズに実装できるようになりました。デザインの追加が開発のボトルネックにならず、ノンデザイナーでも新しいパーツ定義を追加できる設計です。 他の開発実績や試行錯誤のプロセスは、制作ログ一覧 からもご覧いただけます。ぜひ、あなたのアプリでもゲームライクなUIカスタマイズを導入してみてください。