株式会社Myca様のTCGサービスにおいて、「アプリ内に独自ECを実装したい」という要望を受け、WebViewを活用したアプリ内ECの設計・実装を支援しました。
WebViewを採用することで、アプリ内で完結する購買体験を提供しつつ、同一の仕組みをWebにも展開できる構成とし、「アプリ内＋Web」の両対応を実現しています。
背景
アプリ内で購入まで完結できる導線は、ユーザーの離脱を抑え、購買体験をなめらかにする上で重要です。
一方で、ECを新規に構築する場合、既存の販売チャネルや運用フロー、在庫・決済・認証といった周辺要素との整合性を取りながら、段階的に移行・拡張できる設計が求められます。
課題
- アプリ内で購入まで完結する導線を整備し、ユーザー体験とCVを改善したい
- WebView採用により「アプリ内＋Web」双方に展開できるEC基盤を構築したい
- POS・ユーザーアプリと連携し、店舗の出品／ユーザーの購入フローをシームレスにしたい
- 既存ECサイトの運用・在庫・販売チャネルを活かしつつ、連携・移行できる構成が必要
- 認証・決済・不正対策を含め、運用前提のセキュリティを確保したい
支援内容
- アプリ内EC（WebView）の設計・実装支援
- WebView採用による「アプリ内＋Web」両対応のEC構築
- POS・アプリと連携した出品／購入フローの実装支援
- 店舗側：POSから即出品できる仕組みの構築
- ユーザー側：アプリから購入まで完結する導線の整備
- 既存ECサイトとの連携機構の設計・実装支援
- セキュリティ対策（認証・決済・不正対策等）
- CV向上を目的としたツール導入・UI/デザイン改善の継続支援
成果
本プロジェクトでは、WebViewを活用してアプリ内に独自EC機能を構築し、ユーザーがアプリ内で購入まで完結できる購買体験を実現しました。さらに同一の仕組みをWebにも展開できる構成とすることで、アプリとWebの両方で一貫したEC体験を提供しています。
また、当社がPOSレジとユーザーアプリの開発支援も並行して行っている体制を活かし、各プロダクト間を連携する仕組みも整備しました。店舗側はPOSからスムーズに商品を出品でき、ユーザー側はアプリ上で商品選択から購入まで完結できるため、店舗運用の効率化とユーザー体験の向上の両面に貢献しています。
決済面では、外部決済サービスと連携し、アプリ内で安全かつスムーズに支払いが完了する決済フローを構築しました。これにより、ユーザーは購入時のストレスを抑えて取引でき、店舗側も決済確認や売上管理を効率的に行える設計となっています。
加えて、認証・決済・不正対策を含むセキュリティ面の対策を実施し、運用全体を前提とした安全性を確保しました。さらに既存ECサイトとも連携できる仕組みを構築することで、現在の運用・在庫・販売チャネルを活かしながら段階的に移行・拡張できる設計としています。
現在も継続支援として、購買体験の向上とCV改善を目的に、各種ツール導入やUI/デザイン改修にも携わっています。
開発期間
継続中
技術スタック
- 言語：TypeScript / JavaScript / Node.js / Python
- フレームワーク／実行基盤：Next.js（App Router）/ React / Node.js / Prisma
- UI / CSS：Material-UI（MUI）/ Emotion / sx properties / MUI X Data Grid
- データベース・キャッシュ：MySQL / Redis / ElastiCache
- 認証・決済：認証基盤（例：NextAuth）/ 外部決済サービス連携
- クラウド：AWS
担当範囲
アプリ内EC（WebView）の設計・実装、POS・アプリ連携による出品／購入フロー構築、既存EC連携の設計・実装、セキュリティ対策（認証・決済・不正対策等）、CV向上を目的としたツール導入・UI/デザイン改善支援
