プロジェクト概要
「アイドル現場で楽しめるカメラアプリ」をコンセプトに、撮影した写真の上に推しがその場で直接ラクガキ・サインしてくれる体験を提供するプロダクト。プロダクトの心臓部にあたる「描画 (落書き) モジュール」をフルスクラッチで実装し、ファンと推しの間の限られた時間で破綻なく動くことに振り切りました。
課題
従来のチェキは「現場で撮って終わり」「フィルム代と保管のコスト」「失くしやすい」という課題がありました。デジタルでありながらチェキの体験価値 (推しがその場で関与できる、世界に 1 枚) を保つ UX が必要でした。特に「アイドルが自分のスマホで自然に描ける」という体験を作るためには、既製の描画ライブラリでは UX が届かず、描画エンジンそのものを自分たちで作る選択をしました。
解決方針
描画モジュールは既製ライブラリに頼らず、Canvas API ベースでフルスクラッチで設計。筆圧 / 速度に応じた線の補間、ジェスチャ操作、取り消し履歴、レイヤー合成、最終画像のエクスポートまでをすべて自前で実装し、ストレスなく書ける UX を作り込みました。フロントは Expo × React Native で iOS / Android、Web 版は Next.js を同じモノレポで構築。決済 (Stripe)、出荷オペ (注文管理画面) まで自社で内製しています。
アーキテクチャ
- Mobile: Expo (React Native) — iOS / Android
- Web: Next.js (App Router)
- 描画モジュール: Canvas ベースでフルスクラッチ実装 (筆圧補間 / 履歴 / レイヤー合成)
- Backend: Firebase Functions + Firestore + Storage + Auth
- Payments: Stripe (月額サブスク + カードプリント注文)
- Ops 管理: Refine + Ant Design + BigQuery + Supabase + ClickPost CSV 連携
成果・特徴
- iOS / Android / Web を 1 チームで開発・運用し、UI とロジックを最大限共有
- 描画モジュールを内製したことで、ブランドごとのカスタマイズ要望に柔軟対応できる構造に
- App Store / Google Play の申請・審査対応まで包括的に担当し、短期間で公開
ハイライト
落書きモジュールをフルスクラッチ実装
既製ライブラリではアイドルの「サインを書く」UX に届かなかったため、描画エンジンを独自設計。筆圧・線の補間・取り消し・レイヤー合成まで自前で実装しました。
カードプリント注文を内製
アプリ内のカードプリント注文 → 決済 → PDF 注文書 → 配送オペまで、Stripe と Firebase を組み合わせて一気通貫で実装。
サブスク + 単発課金の収益化設計
月額サブスク (ポカログ等) と単発のカードプリント注文の 2 軸を、同じ Stripe アカウントで運用できる形に整理。
