Gamification UI Kit by Trophy

Trophy の Gamification UI Kit とは？

Trophy の Gamification UI Kit は、shadcn/ui と Tailwind CSS を基盤にしたゲーミフィケーション UI コンポーネントのオープンソースライブラリです。ストリーク、実績、ランキング、ポイント、進捗表示など、一般的なエンゲージメントパターンに対応した React コンポーネントをそのまま使えます。

このキットは、各パターンを一から組み立てずに、すぐ使えるゲーミフィケーション UI を必要とする React や Next.js アプリケーションを作る開発者向けに設計されています。コンポーネントはコードベース内にあり、カスタマイズ可能なため、チームはレイアウト、スタイル、挙動を既存のプロダクトデザインシステムに合わせて調整できます。

主な機能

• React 向けのオープンソースゲーミフィケーションコンポーネントで、各パターンを手作業で作らずにエンゲージメント UI を追加しやすい。
• ストリークカード、カレンダー、バッジなど、継続性を時系列で示すストリーク用コンポーネント。
• バッジ、カード、グリッド、リスト、アンロック状態など、マイルストーンの追跡や報酬表示に使える実績コンポーネント。
• ランキング、表彰台、カードなど、他者比較や順位表示に使えるランキングコンポーネント。
• バッジ、報酬、ブースト、チャート、タイムラインなど、進行や報酬システムに使えるポイント・レベル用コンポーネント。
• shadcn/ui と Tailwind CSS 上に構築されており、開発者にとってなじみやすいスタイリングとコンポーネント基盤を提供する。
• 追加依存関係なしのワンコマンド CLI インストール。
• コンポーネントがプロジェクトのコードベースにコピーされるため、完全にカスタマイズ可能。

Trophy の Gamification UI Kit の使い方

開発者は、提供される CLI ワークフローで必要なコンポーネントをインストールすることから始めます。その後、React コンポーネントをプロジェクトにコピーし、スタイル、レイアウト、挙動をプロダクトに合わせてカスタマイズします。

一般的な実装では、ストリークの追跡、実績のアンロック、ランキングなどのゲーミフィケーション UI を 1 つ以上追加し、それらをアプリ独自のユーザー行動データやポイントデータに接続します。

ユースケース

• 日次または週次の継続利用を促すために、ストリーク追跡を追加するプロダクトチーム。
• オンボーディング進捗、タスク完了、機能マイルストーンの実績を表示したい SaaS アプリ。
• ユーザーや参加者間の順位を示すランキングが必要なコミュニティプラットフォームや学習プロダクト。
• ポイントベースの報酬システムで、進捗チャート、レベルのタイムライン、ブースト指標が必要なアプリ。
• 各インタラクション状態をゼロから設計せずに、再利用可能なゲーミフィケーション UI を求める React や Next.js 開発者。

FAQ

Gamification UI Kit by Trophy はオープンソースですか？
はい。ソースではオープンソースで MIT ライセンスとされています。

どのフレームワークを使っていますか？
shadcn/ui と Tailwind CSS 上に構築されており、ソースでは React コンポーネントライブラリとして紹介されています。

カスタマイズできますか？
はい。コンポーネントはコードベースにコピーされるため、スタイル、レイアウト、挙動を製品に合わせて調整できます。

ストリークとバッジだけが含まれますか？
いいえ。ソースには、ランキング、ポイント、レベル、実績グリッド、アンロック状態、チャート、タイムラインも含まれています。

代替案

• React でゲーミフィケーション UI をゼロから作る: 最大限の制御が可能ですが、各コンポーネント、状態、インタラクションを自分で設計・実装する必要があります。
• 別の React コンポーネントライブラリを使う: 汎用 UI ライブラリはレイアウトやコントロールに役立ちますが、通常はゲーミフィケーション特有のパターンをすぐには提供しません。
• デザインシステム優先のアプローチを採用する: チームは独自の社内ゲーミフィケーションコンポーネントを作ってプロプライエタリなシステムに合わせられますが、その分デザインと実装の工数が増えます。
• ホスト型ゲーミフィケーションプラットフォームを使う: プラットフォームによっては UI だけでなくバックエンドロジックやダッシュボードも提供しますが、Trophy のキットは再利用可能なフロントエンドコンポーネントに重点を置いています。