ウェブサービス ／ 購入型クラウドファンディング
推しビト
推し色を選ぶと、
客席の光が染まる。
架空の運営会社を題材にした、購入型のクラウドファンディングです。トップで8色から推し色を選ぶと、OffscreenCanvasとWorkerで描く客席のペンライトが一斉に色を変えます。応援したい相手が決まっている人を想定し、サポーター・実行者・審査担当・運営者の四つの立場を切り替えられるようにしました。
作品を開く架空の運営会社を題材にした自主制作です。決済・通知・発送は模擬で、実際の課金や送金は行いません。
客席の光で、
応援の熱量を見せる。
支援の合計額を数字だけで示すのではなく、客席に灯るペンライトの本数と振れ幅で伝えることを軸にしました。支援者が増えるほど光が増え、達成率に応じて振りが大きくなり、目標を超えると一斉に点灯します。
入口は「本日のセットリスト」と推しの顔のタイルで、募集方式（All-in／All-or-Nothing）と発送予定月を金額より先に見せています。
濃紺の舞台に、
券種のようなリターンを並べる。
夜の紺を土台に、選んだ推し色をアクセントとして全体に反映します。見出しはDela Gothic Oneの太いゴシックで組み、企画詳細では4:5の縦長画像を左に固定し、右にリターンをチケットの券種のように並べました。
ヘッダーは左の半券に今の役割（例 サポーター席）を示し、ミシン目と半円の切り欠きでナビゲーションと区切っています。
チップで絞り、
審査と決済を別の立場が担う。
企画一覧はカテゴリと募集方式のチップで即座に絞り込め、締切・支援者数・新着・達成率で並び替えられます。企画詳細では募集方式、課金のタイミング、発送予定月、プロジェクト状態を本文より前に置きました。
運営の画面は募集終了から送金までを4段階で示し、審査担当はこの決済操作を行えません。四者の権限を分けることで、承認と送金を別の目が確かめる形にしています。
推し色の選択を、
そのまま上部に残す。
スマートフォンでは推し色の8色を2段のグリッドに組み替え、その下へコピーと客席のペンライトを縦に積みます。役割の切り替えはヘッダーのプルダウンにまとめ、常に1回のタップで選べる位置にあります。
制作情報
- 種別
- 自主制作・架空サービス
- 制作範囲
- 企画・設計・デザイン・実装
- 使用技術
- TypeScript / React / Next.js
Prisma / Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン
