アーティストデジタルトレーディングカード マーケットプレイス

アーティストのデジタルトレーディングカードを販売するマーケットプレイスを開発。

課題

音楽ファンがアーティストとの接点を持ち続ける手段が限られていた。 ライブやグッズ以外に「所有」できるデジタルコンテンツが少なく、ファンのエンゲージメントを高める新しい仕組みが求められていた。

ソリューション

アーティストのデジタルトレーディングカードを販売する、モバイルファーストのマーケットプレイスを開発。 カード画像とフレームを分けて管理し、レアリティ別の演出、購入者限定コンテンツ、Stripe決済まで実装した。

成果

固定費ほぼゼロでMVP運用を開始し、3段階のレアリティカード作成フローを構築

チーム

1 member, 2 months

設計・実装・運用

役割

商品設計、管理画面、決済、在庫管理、購入者向け画面を担当。

ビジュアル・フレームの2層構造、Stripe決済連携、RLSによる閲覧制御を担当。

技術スタック

FrontendNext.js / React / TypeScript
StylingTailwind CSS
Auth / DBSupabase / PostgreSQL / Auth / Storage / RLS
PaymentStripe (Checkout Session / Webhook)
HostingVercel

主要機能

01

カードビジュアルとフレームの2層構造: 管理画面から1つのビジュアルを登録し、3段階のレアリティ(NORMAL / RARE / SUPER_RARE)へ展開

02

レアリティ別CSSエフェクト: ホログラム・スパークルなどを純CSSで実装し、外部ライブラリ不要

03

購入者限定エクスクルーシブコンテンツ: ライブ映像・未公開音源などを購入者のみに提供

04

Stripe Checkout決済: Webhook署名検証・サーバーサイド金額決定・冪等性保証による安全な決済

05

PostgreSQL FOR UPDATEロックによるアトミックな在庫管理でシリアルNo.重複を防止

06

モバイルファーストUI: 3:4アスペクト比の実物トレカ感・固定BottomNav・44x44pxタッチターゲット

注力した点

ビジュアル×フレーム分離設計

コンテンツ(アーティスト画像・楽曲名)とデザイン(フレーム枠・エフェクト)を分離し、フレームの追加・シーズン限定カードの対応をコード側で柔軟に管理可能にした。

RLSによるデータ保護

全テーブルでRow Level Securityを有効化し、購入者のみがエクスクルーシブコンテンツを閲覧できるポリシーをDB層で強制。

固定費を抑えた構成

Vercel + Supabase Free + Stripe従量課金を組み合わせ、MVP段階の固定費をほぼゼロに抑えました。