1. プロジェクト概要
化粧品メーカーの販売代理店（ディーラー）向けに、モバイルファーストの受注管理Webアプリケーションを新規開発。従来の電話・メールベースの受注プロセスを、セキュアなWebシステムに置き換えました。
2. 課題と背景
クライアント企業では、数十名のディーラーからの注文を電話・メールで受け付けており、以下の課題を抱えていました。
- 手作業による転記ミス: 電話注文の聞き間違い、メール内容の手動入力によるヒューマンエラー
- 会員ランク別の価格計算: 5段階の割引率が存在し、手計算での見積もりが煩雑
- 注文記録の散在: メール・電話・FAXと注文チャネルがバラバラで、集計に時間がかかる
- ディーラー側の不便さ: 営業時間内にしか注文できず、注文控えも紙ベース
3. アプローチ
「ディーラーが迷わず使える」をコンセプトに、最小限のステップで注文完了できるUIを設計。バックエンドには既存の業務フローを活かし、Google Sheetsをデータベースとして活用することで、導入ハードルを最小化しました。
4. 施策内容（実装機能）
PIN認証によるシンプルログイン
- 4桁PINコードによるディーラー認証（ID・パスワード管理不要）
- 会員ランク（5段階割引率）の自動適用
- HTTP-Only Cookie＋セッション管理によるセキュア設計
モバイルファーストの注文画面
- 商品カード形式のUI、数量入力は＋/−ボタンでタップ操作に最適化
- リアルタイム価格計算（割引率自動反映、消費税10%/8%の自動判別）
- 注文確認画面で税率別の内訳を明示
PDF帳票の自動生成
- 注文完了と同時に、A4フォーマットの注文書PDFをワンタップでダウンロード
- 複数ページ対応、印刷にも適したレイアウト
メール自動通知
- 注文確定時に本部担当者へ即時メール送信（Resend API）
- 注文内容・金額・ディーラー名を一覧形式で通知
Google Sheetsによるデータ一元管理
- ディーラーマスタ（名前・PIN）と注文履歴をGoogle Sheetsで管理
- 既存の集計ワークフローをそのまま活用可能
アプリ内操作マニュアル
- 6ステップのビジュアルガイド、スマホ画面モックアップ付き
- FAQ付きで、ディーラーからの問い合わせを予防
5. 技術スタック
- フロントエンド: Next.js (App Router) + TypeScript + Tailwind CSS
- 認証: PIN認証 + HTTP-Only Cookie（24時間有効）
- データ: Google Sheets API v4（サービスアカウント認証）
- PDF生成: html2canvas + jsPDF（クライアントサイド処理）
- メール: Resend API
- デプロイ: Vercel
6. プロジェクト成果
定量成果
- 注文プロセス: 電話→手入力→確認の数十分 → 3タップ・約1分で完了
- 転記ミス: ゼロ化（手入力工程の完全排除）
- 開発期間: 約2週間で本番稼働
定性成果
- 24時間注文可能: ディーラーが営業時間外でも自由に発注
- 注文控えのデジタル化: PDF帳票により紙の管理が不要に
- 導入障壁の最小化: Google Sheetsベースのため、特別なシステム教育が不要
7. 今後の展望
在庫管理機能の追加、定期注文（サブスクリプション）対応、売上分析ダッシュボードの構築を検討中。
8. お問い合わせ
業務システムのDX化にご興味のある方は、ぜひご相談ください。
ステップアウトマーケティング合同会社 Email: info@step-out.jp