Real You
技術と開発

学生3人のチームで作った Real You を、どう作ったか・誰が作ったかの視点でまとめました。

実装のこだわり

Frontend 体験のつくりかた

  • 構えさせない導線 「テストを受けている」と意識させない流れ。ゲームに集中しているうちに、自然な行動が引き出されます。
  • 迷わない操作感 次に何をすればいいかが一目でわかる画面設計。誰でも最後まで迷わずプレイできます。
  • 結果を見たくなる演出 診断結果はキャラ名やチャートで分かりやすく。思わずシェアしたくなる見せ方にしています。

Backend 独自 5 軸スコアリング

  1. 01
    行動データを集める クリック回数・反応時間・迷いなど、ゲーム中の無意識の操作を記録します。
  2. 02
    独自の 5 軸でスコア化 集めた行動データを 0〜100 に正規化し、5 つの軸ごとに点数化。各ゲームの結果を統合します。
  3. 03
    自己申告とのギャップを出す 事前アンケート(自己申告)と、行動から出た実測スコアを比較。ズレの大きさを可視化します。
診断する 5 つの軸
  • 01 慎重さ 大胆 ↔ 慎重
  • 02 冷静さ 感情的 ↔ 冷静
  • 03 論理性 直感的 ↔ 論理的
  • 04 協調性 自己主張 ↔ 協調
  • 05 積極性 受動的 ↔ 積極的

自己申告との一致度を % で算出し、「自分が思う自分」とのズレを数値で示します。

技術スタック

技術を尖らせることより、プロダクトの本質を磨くことを優先。チームでアイデアを出し合いながら作りました。

各技術をタップすると公式ドキュメントが開きます。

システム構成

システム構成図(ユーザー → Vercel → Render → Supabase)
インフラ / プラットフォーム
こだわり

フロントエンドとバックエンドを通して TypeScript で型を共有し、API の食い違いを防いでいます。

今後の展望