課題
全国1,000店舗強で使われているモバイルオーダーシステムは、10年ほど前にリリースされたものでした。画面の読み込みが遅く、細かな不具合が山積し、注文までの操作にも迷いやすい状態で、アプリのレビューでも使い勝手の低さを強く指摘されていました。
また、クーポン施策の拡充ができておらず、システム側の対応が追いつかないという課題もありました。
提案と担当
PL/Tech Leadとして要件定義から参画しました。UI/UXの議論を重ね、Figmaで起こされた画面イメージをもとに画面設計とアーキテクチャ設計に入り、実装まで完遂しました。
- 要件定義(注文の流れ、クーポンの適用ルールの整理)
- UI設計(画面遷移とコンポーネント設計)
- アーキテクチャ設計(Webフロントとモバイルアプリの役割分担、API連携)
- コード実装・テスト(Claude Code)
- セキュリティの担保・脆弱性対応
- MA設計(GA4/GTM/Firebase Analytics/Braze/AppsFlyer)
- ディープリンク設計
開発内容
Webフロント(Next.js)とモバイルアプリ(Flutter)をゼロから構築しました。外部システムとの連携が非常に多いサービスだったため、連携要件の遵守と組み込みを慎重に行いました。
クーポンは条件の組み合わせで増えていくため、施策を追加しても画面側の改修が最小限で済む作りにしました。テストケースも相当な数になりました。
決済はクレジットカード決済とQR決済の双方に対応し、Web・アプリのどちらでも行えるようにしています。これらの決済シーケンスの実装も担当しました。
2026年9月後半から個人情報漏洩のニュースが相次いだこともあり、脆弱性対応も厳密に行っています。AIによる審査に加えて外部の審査も受け、Webアプリケーションだけでなくスマホアプリのセキュリティ対策も実装しました。
この案件は、AIを前提にした開発フローで進めています。コーディング規約・設計上の制約・テスト方針を先に文書化し、AIが毎回同じ形でコードを書けるようにしました。そのうえで、コードを1行ずつレビューして止めるより、まず動くものを出して確かめる「ship first」の考え方を取っています。画面の部品はStorybookで振る舞いを確かめ、サーバーとのやり取りは決めた設計の型に沿って書かせ、条件の多い部分はテストで確かめます。人は要件と品質に責任を持ち、実装の速さはAIで出す、という分担です。
体制
当社からは最大4名(パートナー含む)が参加しています。プロジェクト全体は約20名で、お客様側のチームと役割を分けて進めています。
成果と現在
2026年11月初旬に、フルリニューアルを完了しました。フェーズ1を終え、2027年度の施策を順次議論しながら、フェーズ2以降も継続して担当しています。