アーティストデジタルトレーディングカード マーケットプレイス
アーティストのデジタルトレーディングカードを販売するマーケットプレイスを開発。
課題
音楽ファンがアーティストとの接点を持ち続ける手段が限られていた。 ライブやグッズ以外に「所有」できるデジタルコンテンツが少なく、ファンのエンゲージメントを高める新しい仕組みが求められていた。
ソリューション
Next.js 16 + React 19 の最新技術を活用し、アーティストのデジタルトレーディングカードを販売するモバイルファーストのマーケットプレイスを開発。 レアリティ別のCSSエフェクト（ホログラム・スパークル）や、購入者限定エクスクルーシブコンテンツ機能を実装。
成果
固定費ほぼゼロでMVP運用開始。3段階のレアリティカード自動生成システムを構築
チーム
1 member, 1 month
設計・実装・運用
役割
要件定義から設計、実装、運用まで全てを担当。
ビジュアル・フレームの2層構造設計やStripe決済連携、RLSによるセキュリティ設計をリード。
技術スタック
主要機能
カードビジュアルとフレームの2層構造: 管理画面からビジュアルを1つ作成すると、3段階のレアリティ（NORMAL / RARE / SUPER_RARE）カードを自動生成
レアリティ別CSSエフェクト: ホログラム・スパークルなどを純CSSで実装し、外部ライブラリ不要
購入者限定エクスクルーシブコンテンツ: ライブ映像・未公開音源などを購入者のみに提供
Stripe Checkout決済: Webhook署名検証・サーバーサイド金額決定・冪等性保証による安全な決済
PostgreSQL FOR UPDATEロックによるアトミックな在庫管理でシリアルNo.重複を防止
モバイルファーストUI: 3:4アスペクト比の実物トレカ感・固定BottomNav・44x44pxタッチターゲット
工夫点
ビジュアル×フレーム分離設計
コンテンツ（アーティスト画像・楽曲名）とデザイン（フレーム枠・エフェクト）を分離し、フレームの追加・シーズン限定カードの対応をコード側で柔軟に管理可能にした。
RLSによるデータ保護
全テーブルでRow Level Securityを有効化し、購入者のみがエクスクルーシブコンテンツを閲覧できるポリシーをDB層で強制。
固定費ゼロのアーキテクチャ
Vercel + Supabase Free + Stripe従量課金の組み合わせにより、初期固定費ほぼゼロでMVP運用を実現。