PDCAガチャ

https://github.com/AliceWonerfulWorld/Progate_PDCAGatya

TypeScript

JavaScript

PDCAを回してガチャを回す

ウオミー

そらいろ

いぶき

アリス

推しアイデア

PDCAを回す➡ガチャを回すに結び付けた

作った背景

継続して嬉しい事といえばタスクの消費ができると嬉しいよね! てことでPDCAサイクルを回してガチャを回せばタスクも進むしガチャのドーパミンも出せる

推し技術

convex ハッカソンで使ってるの見たことないから

プロジェクト詳細

作るもの

PDCAガチャ

アイデア案 PDCAを回すたびにガチャを回せるようになる 今回のテーマが「ひと夏の狂気〜究極の『継続』を生み出せ」 ということで継続すると嬉しい物➡やることが終わると嬉しいね➡PDCAが回るとやることが進むね➡回すところからガチャもくっつけよう 昨今話題の集中力が持たないドパガキでもPDCAを回すのが継続できるように作成

設計思想

思想として「頑張らせるのではなくやめさせない」というのがあり、 PDCAを回して報酬を得る形式のものではあるが評価するのはタスクの達成率より「振り返って次の行動につなげることができたか」というテーマの「継続」を意識した設計で作っています Todoリストの様にやること整理ではなく、継続して何かを行っていくためのプロダクトです

技術スタック

フロントエンド  :React+Vite UI周りの調整   :Tailwind CSS バックエンド・DB :Convex 認証       :Clerk + Google OAuth デプロイ     :Vercel テスト      :Vitest + convex-test CI        :GitHubActions 3Dモデル :Brender Hyper3DRodin

機能

PDCA ガチャ ガチャのコレクション 達成履歴/プレイヤーのレベルアップ 称号/相棒設定など

デモ動画

PDCA ホーム画面が以下の画面でここからPDCAを回します image image 達成/継続してほしいので一度始めたPDCAを達成した後に他のPDCAに切り替えられます

ガチャ ガチャを引いた時の演出 ガチャ動画

コレクション image 高レアの二体は3Dモデルを実装してゲームでよくあるビューイング的なのを作ってます 実際にガチャで引けた人だけが見れる仕様(写真はデバッグでの画面) image ↓引けないとみれないためデバッグ用で別撮りした動画です 3Dモデル操作動画

Hyper3D Rodin・・・Blenderで3Dモデルを作れるAI

https://hyper3d.ai/workspace/rodin?lang=ja 2Dでの画像を一枚投げるだけで三面図とか準備しなくてもちゃんと3Dモデルが作られる

チュートリアル

結構ハッカソンあるあるで作ったやつ説明受けないと使い方わからないってのがあるのですが、チュートリアルを時間ないので簡易的なのですが作成してみました ログインなどをせずとも仮の状態で実際に触ってみることができます image

Riveを使ったアニメーション

image

結構ハードル高いものと思って触っていなかったのですがMCP経由でさわれて見た目も良くなりそうです クリックするとにんじゃわんこが跳ねるよかわいいね

https://zenn.dev/udos/articles/rive-mcp-no-editor-tool

挑戦すること(個人

いぶき

フロントエンドを触ることが多かったから今までほとんど触ってないインフラに触れる

そらいろ

綺麗なコード・構成を意識したい...な

アリス

実務でも通用するような、設計を意識した開発をしてみようと思う(セキュリティ周りとか)

ウオミー

1機能をこだわって作る(UI / UX)

絶望のチームスケジュール

うおみー

8/27~8/29 ハックツハッカソンdipカップ -> 8/30 飛行機で東京へ...内定者懇親会で2日目おらず

いぶき

8/27~8/29 ハッカソンdipカップ -> dipで疲弊して2日目を迎える

アリス

8/28 幕張でライブ -> 8/29 朝映画 -> 夜有明アリーナでライブ -> 8/30 絶望の二日目

そらいろ

8/29までインターン

こんな中でも時間作って二日で動いたのでチームワークの賜物です

ウオミー

@KOU050223