読み込み中...

Web · 完了

ドーパミンガチャ

「ドーパミンが出る行為」をレアリティ付きのカードとして排出するスマホ向けネタガチャアプリ。10連・100連・コレクション・カード画像のシェアまでブラウザだけで完結

デモを開く

期間: 2026年7月 – 2026年7月
分野: Web
所属: 趣味（個人・チーム）
状態: 完了

1 / 3

概要

「ドーパミンが出る行為」45種をN〜URのカードにした、スマホ向けのシングルページアプリを開発しました。
報酬の強さ・即効性・コスト・後悔しやすさから算出する独自指標「ドパ指数」の順位でレアリティを決め、重み付き抽選で排出します。
10連・100連の天井、SSR以上確定チケット、コレクションと全種コンプ時の演出を実装しています。
サーバーもログインもなく、進行状況はlocalStorageに保存します。

アーキテクチャ

Vercel
画面・演出GSAP / Canvas
抽選・天井・コレクションチケットのロジック
シェアカード生成Canvas
Xの投稿画面未対応環境の代替
Web Share API

React 19 + TypeScript + ViteのSPAで、Vercelにデプロイしています。
演出はGSAPとCanvas（渦・パーティクル）で構成し、抽選・天井・コレクション・チケットのロジックは画面から分離しています。
シェア用のカード画像はCanvasで生成してWeb Share APIに渡し、使えない環境ではXの投稿画面に切り替えます。
prefers-reduced-motionが有効な場合は演出を省略します。

技術的挑戦

課題ガチャ演出の作り込み解決GSAPのタイムラインとCanvasで引き・確定・UR演出を構成し、prefers-reduced-motionでは演出を省略
課題レアリティの決め方解決独自指標「ドパ指数」の順位で枚数を割り当て、重み付き抽選と10連・100連の天井を実装
課題遊び続けてもらう仕組み解決所持枚数に応じた10連・100連・確定チケットの解放と解放通知
課題SNSでのシェア解決CanvasでTCG風のカード画像を描画してWeb Share APIに渡し、使えない環境ではXの投稿画面に切り替え