こらぼ♡りずむ！

https://github.com/nulab/hackz-hackathon-2602

―

GitHub

AWS

Terraform

VSCode

じぶんの"かお"でダンス！ガチャであつめる着せ替えゲーム

もっさん

uraranbon

Ryoya Tamura

kenshiro fujita

推しアイデア

「こらぼりずむ」であこがれのアイドルに大変身！じぶんの"かお"を3Dモデルにはりつけたら、ステージのはじまりだよ✨

作った背景

「カードをかざすワクワクを届けたい！」という想いから、NFCタグをつかった『こらぼりずむ』が誕生しました✨

推し技術

Amazon Rekognition による顔検出❣️ Amazon Nova Canvas による画像生成🌟 AIフル活用の開発💓

プロジェクト詳細

image

🎀 こらぼりずむ！ 〜自撮り×オシャレ変身プロダクト〜

「あこがれのアイドルに、じぶんで変身！」 NFCカードをかざすワクワクと、自撮り写真が3Dモデルになる。 懐かしのあのオシャレ魔女ゲームをオマージュした、ダンスバトル体験プロダクトです。

🌟 プロダクト体験

来場者はNFCカードを手に取り、3つのステップでアイドル体験を楽しめます。

スキャン & 自撮り

自分のスマホでNFCカードを読み取り、自撮り写真をアップロード！

image

運命のガチャ

全16種類のファッションアイテムからコーデを決定！ S〜SSRまであるよ！

image

image

ファッションコーデ

ガチャでゲットしたアイテムを、自分のキャラクターに反映しよう！

image

🚀 「未来のコラボレーションをつくる」こだわりポイント（Nulab Values）

Try First: AIネイティブな爆速開発

短期間での実装と検証を最大化するため、AIコーディングエージェント（Claude Code） をフル活用。

  • チーム内で .claude/skills を共有し、プロンプトの揺らぎを最小化。
  • エージェントによる並列開発により、リアルタイム通信（Socket.IO）と複雑な3D演出の統合を短期間で実現しました。

誰もほとんど触ったことのない3Dモデリングになぜか初挑戦！ 既存のスキル資産を放棄してチャレンジしました。

Love Differences: 個性が輝くコラボレーション

「みんな違ってみんないい」を体験に昇華。

  • 来場者それぞれの“かお”と、ガチャで手に入る多様な衣装が組み合わさることで、世界に一つだけのステージが生まれます。
  • 開発・運営・参加者、それぞれの立場が交差する「体験の多様性」を設計しました。

それぞれが持つ関心やスキルをリスペクトしつつ挑戦

Goal Oriented: 「一体感」を生む体験設計

「会場全体を盛り上げる」というゴールに向け、機能をあえて厳選。

  • DynamoDB + S3 + Socket.IO による低遅延な連携。
  • 迷わない導線設計で、誰でも一瞬でアイドルになれる「体験の完成度」を追求しました。

🛠 技術スタック

「最新技術を、安定した基盤で」構築したモダンなモノレポ構成です。

ランタイム / ビルド

Bun 1.3.9 / Turbo (monorepo)

フロントエンド

React 19 / Vite / TanStack Router / Tailwind CSS 4

バックエンド

Hono / tRPC

DB / ストレージ

DynamoDB / S3

AI

AWS Bedrock

Lint / Format

oxlint / oxfmt / secretlint / lefthook

開発支援 (AI)

Claude Code (Skills / Plugins)

[Android Device]      [User's Phone]       [Projector]
 NFC Scan + Admin  <-> Gacha + Photo UP <-> Dance Video
  (admin app)         (mobile app)        (projector app)
      |                    |                    |
                        [Server]
                  DynamoDB / S3 / Bedrock

🏗 システム構成

デバイス・アプリ連携
  • [Admin App] (Android): NFCスキャンによるある程度セキュアなユーザー管理
  • [User App] (Mobile): ガチャ演出・写真アップロード
  • [Projector App] (Display): イベントサブスクリプションによるリアルタイムなダンス映像配信

📂 モノレポ構成（apps & packages）

 
apps/
  admin/       … NFC 読み取り・管理画面
  mobile/      … 来場者向けスマホ画面
  projector/   … プロジェクター投影画面
packages/
  server/      … バックエンド
  shared/      … 共有型定義・Socket イベント・定数
  tsconfig/    … 共有 TypeScript 設定

🧱 インフラ

インフラ担当者以外も気軽にインフラストラクチャ構成の変更を試せるように、定義はTerraform を用いてコードで管理しました。 CI/CD は Github Actions を使用しました。

クライアント画面を CloudFormation で配信することにより、高速でストレスが少ないページ遷移を実現しています。

image

ヌーラボチームのメンバー

image

もっさん

@mossann_t