← 納品物一覧に戻る画面設計書
バージョン: v1.0.0 | 作成日: 2026-03-18 | プロジェクト: 保険リーズマーケットプレイス
1. 文書管理情報
| 文書名 | 画面設計書 |
| バージョン | v1.0.0 |
| 作成日 | 2026-03-18 |
| プロジェクト | 保険リーズマーケットプレイス |
| 対象システム | Webアプリケーション(Next.js / React) |
| 対応デバイス | デスクトップ / タブレット / モバイル |
| UIフレームワーク | shadcn/ui + Tailwind CSS |
2. 画面一覧
本システムは合計20画面で構成される。各画面はロールベースのアクセス制御により、 ユーザーの権限に応じて表示可能な画面が制限される。
| 画面ID | 画面名 | URL | ロール | 概要 |
|---|
| SCR-001 | ログイン画面 | /login | 全ユーザー | メール/パスワード認証、パスワードリセット |
| SCR-002 | 新規登録画面 | /register | 未認証 | アカウント作成(メール・パスワード・氏名・電話番号) |
| SCR-003 | LP(リード取得) | /lp | 一般消費者 | 保険相談申込フォーム、SMS認証 |
| SCR-010 | 営業ダッシュボード | /dashboard | SALES_AGENT | 個人KPI表示、直近オークション、購入済みリード |
| SCR-011 | オークション一覧 | /auction | SALES_AGENT | アクティブオークション表示・フィルター・入札 |
| SCR-012 | 案件一覧 | /cases | SALES_AGENT | 購入済みリード管理・ステータスフィルター |
| SCR-013 | 案件詳細 | /cases/[id] | SALES_AGENT | 連絡記録・面談記録・返金申請 |
| SCR-014 | 設定 | /settings | SALES_AGENT | アカウント設定・請求先設定・通知設定 |
| SCR-020 | 法人ダッシュボード | /agency/dashboard | AGENCY_ADMIN | 組織KPI・メンバー成績・月次集計 |
| SCR-021 | メンバー管理 | /agency/members | AGENCY_ADMIN | 営業担当管理・招待・権限設定 |
| SCR-022 | 請求管理 | /agency/billing | AGENCY_ADMIN | 月次請求一覧・明細ダウンロード |
| SCR-030 | 管理ダッシュボード | /admin/dashboard | ADMIN | プラットフォームKPI・アラート |
| SCR-031 | リード管理 | /admin/leads | ADMIN | リード在庫管理・品質スコア確認 |
| SCR-032 | ユーザー管理 | /admin/users | ADMIN | ユーザー・代理店管理・アカウント停止 |
| SCR-033 | オークション管理 | /admin/auctions | ADMIN | ライブ・完了オークション・手動介入 |
| SCR-034 | A/Bテスト管理 | /admin/ab-tests | ADMIN | テスト設定・トラフィック配分・結果分析 |
| SCR-035 | 価格設定 | /admin/pricing | ADMIN | 価格ルール・カテゴリ乗数・地域係数 |
| SCR-036 | 配信管理 | /admin/delivery | ADMIN | 配信スケジュール・バッチ設定 |
| SCR-037 | 管理設定 | /admin/settings | ADMIN | システム設定・メール文面・通知設定 |
| SCR-038 | 請求・返金管理 | /admin/billing | ADMIN | 全請求・返金管理・支払い状況 |
ロール定義:
全ユーザー - 認証済み全ユーザー / 未認証 - ログインしていないユーザー / 一般消費者 - 保険相談を申し込む一般利用者 / SALES_AGENT - 保険営業担当者 / AGENCY_ADMIN - 代理店管理者 / ADMIN - プラットフォーム管理者
3. 画面遷移図
3.1 認証フロー
[ログイン画面]
│
├── メール/パスワード入力 → 認証API
│
├── 認証成功 → ロール判定
│ ├── SALES_AGENT → [営業ダッシュボード SCR-010]
│ ├── AGENCY_ADMIN → [法人ダッシュボード SCR-020]
│ └── ADMIN → [管理ダッシュボード SCR-030]
│
├── パスワードリセット → メール送信 → リセット画面
│
└── 新規登録リンク → [新規登録画面 SCR-002]
│
└── 登録完了 → [ログイン画面 SCR-001]3.2 営業フロー(SALES_AGENT)
[営業ダッシュボード SCR-010]
│
├──→ [オークション一覧 SCR-011]
│ │
│ ├── フィルター・検索
│ ├── 入札ダイアログ → 入札確認 → 入札完了
│ ├── 即時購入ダイアログ → 購入確認 → 購入完了
│ └── 落札通知 → [案件一覧 SCR-012]
│
├──→ [案件一覧 SCR-012]
│ │
│ └── 案件クリック → [案件詳細 SCR-013]
│ │
│ ├── ステータス更新
│ ├── 連絡記録追加
│ ├── 面談記録追加
│ └── 返金申請(条件充足時)
│
└──→ [設定 SCR-014]
├── アカウント情報編集
├── 請求先名義設定
└── 通知設定3.3 管理フロー(ADMIN)
[管理ダッシュボード SCR-030]
│
├──→ [リード管理 SCR-031] リード在庫・品質管理
├──→ [ユーザー管理 SCR-032] ユーザー・代理店CRUD
├──→ [オークション管理 SCR-033] ライブ監視・手動介入
├──→ [A/Bテスト管理 SCR-034] テスト設定・結果分析
├──→ [価格設定 SCR-035] 価格ルール・乗数設定
├──→ [配信管理 SCR-036] バッチ配信スケジュール
├──→ [管理設定 SCR-037] システム設定
└──→ [請求・返金管理 SCR-038] 請求・返金処理3.4 LPフロー(一般消費者)
[LP SCR-003]
│
├── Step 1: 基本情報入力(氏名・電話番号・メール)
├── Step 2: 詳細情報入力(保険カテゴリ・相談方法)
├── Step 3: SMS認証コード送信 → 6桁コード入力(10分有効)
│
├── 認証成功 → 完了画面(リード登録完了)
│ └── オークション自動開始
│
└── 認証失敗 → 再送信(最大3回)→ エラー画面4. 主要画面詳細仕様
4.1 SCR-003: LP(リード取得フォーム)
一般消費者が保険相談を申し込むためのランディングページ。マルチステップフォームで 必要情報を段階的に取得し、SMS認証によりリードの真正性を担保する。
必須入力項目(8項目)
| 項目名 | 入力形式 | バリデーション | 備考 |
|---|
| 氏名(漢字) | テキスト入力 | 必須・全角のみ | 姓と名を分割入力 |
| 電話番号 | テキスト入力 | 必須・090/080/070形式 | SMS認証に使用 |
| メールアドレス | テキスト入力 | 必須・RFC5322準拠 | 確認メール送信 |
| 年齢 | 数値入力 | 必須・1〜120の整数 | 保険カテゴリの参考情報 |
| 性別 | ラジオボタン | 必須 | 男性 / 女性 / その他 |
| 都道府県 | セレクトボックス | 必須 | 47都道府県から選択 |
| 保険カテゴリ | セレクトボックス | 必須 | 生命保険/医療保険/自動車保険/火災保険/その他 |
| 相談方法 | ラジオボタン | 必須 | 電話 / オンライン面談 / 対面 |
任意入力項目(8項目)
| 項目名 | 入力形式 | 備考 |
|---|
| 市区町村 | テキスト入力 | 地域フィルタリングに使用 |
| 住所(番地以降) | テキスト入力 | 対面相談時の参考 |
| 職業 | セレクトボックス | 会社員/自営業/公務員/主婦/学生/その他 |
| 年収 | セレクトボックス | 300万未満/300-500万/500-700万/700-1000万/1000万以上 |
| 家族人数 | 数値入力 | 1〜20 |
| 子供の有無 | ラジオボタン | あり / なし |
| 住居形態 | セレクトボックス | 持ち家(一戸建て)/持ち家(マンション)/賃貸/社宅 |
| 緊急度 | セレクトボックス | すぐに相談したい/1週間以内/1ヶ月以内/情報収集中 |
SMS認証仕様
| 項目 | 仕様 |
|---|
| 認証コード形式 | 数字6桁(ランダム生成) |
| 有効期限 | 送信から10分間 |
| 再送信 | 最大3回まで(60秒間隔) |
| 入力試行回数 | 最大5回まで(超過時は再送信が必要) |
| 送信先 | 入力された電話番号宛にSMS送信(Amazon SNS経由) |
リードスコア自動算出:入力項目の充実度に応じてリードスコア(0〜100)を自動計算する。 必須項目のみで50点、任意項目の入力数に応じて加点される。 スコアはオークション開始価格に影響する。
4.2 SCR-011: オークション一覧
営業担当者がアクティブなオークションを閲覧し、入札・即時購入を行う画面。 WebSocket接続によるリアルタイム更新で、価格と残り時間を常に最新状態で表示する。
フィルター項目
| フィルター | 入力形式 | 選択肢 |
|---|
| 保険カテゴリ | マルチセレクト | 生命保険/医療保険/自動車保険/火災保険/その他 |
| 価格帯 | レンジスライダー | 1,000円〜50,000円 |
| 地域 | マルチセレクト | 47都道府県(複数選択可) |
| ステータス | セレクトボックス | 入札受付中 / まもなく終了 / 即時購入可 |
| リードスコア | レンジスライダー | 0〜100 |
| ソート | セレクトボックス | 終了時間順/価格順/スコア順/入札数順 |
オークションカード表示要素
| 要素 | 表示内容 | 更新頻度 |
|---|
| 保険カテゴリ | バッジ表示(色分け) | 静的 |
| リードスコア | スコアバー(0〜100)+ 数値 | 静的 |
| 顧客属性概要 | 年齢・性別・地域(個人情報は非表示) | 静的 |
| 現在価格 | 現在の最高入札額(円表示) | リアルタイム(WebSocket) |
| 残り時間 | カウントダウンタイマー(HH:MM:SS) | リアルタイム(1秒更新) |
| 入札数 | 現在の入札件数 | リアルタイム(WebSocket) |
| 即時購入価格 | Buy Now価格(設定されている場合) | 静的 |
アクション
| アクション | トリガー | ダイアログ内容 |
|---|
| 入札 | 「入札する」ボタン | 入札金額入力(現在価格以上)、合計予算への影響表示、確認ボタン |
| 即時購入 | 「即時購入」ボタン | 購入金額確認、即時決済確認、クレジットカード選択、確認ボタン |
リアルタイム更新仕様:WebSocket接続により、以下のイベントをリアルタイムで受信する。
・bid:placed - 新規入札(価格・入札数更新)
・auction:closing - 残り5分通知(カード強調表示)
・auction:ended - オークション終了(カード非表示化)
・auction:new - 新規オークション追加
4.3 SCR-013: 案件詳細
購入済みリードの詳細情報を表示し、連絡記録・面談記録を管理する画面。 営業プロセスの進捗を追跡し、成約に至るまでの全アクティビティを記録する。
顧客情報表示
| 項目 | 表示条件 | 備考 |
|---|
| 氏名 | 購入後のみ | オークション中はマスク表示 |
| 電話番号 | 購入後のみ | ワンクリックで発信可能 |
| メールアドレス | 購入後のみ | ワンクリックでメーラー起動 |
| 住所 | 購入後のみ | 地図リンク付き |
| 年齢・性別 | 常時表示 | オークション時も表示 |
| 保険カテゴリ | 常時表示 | バッジ表示 |
| 相談方法(希望) | 常時表示 | 電話/オンライン/対面 |
| リードスコア | 常時表示 | スコアバー表示 |
ステータス管理
| ステータス | 表示色 | 説明 | 遷移先 |
|---|
| 新規 | 青 | リード購入直後 | 連絡中/辞退 |
| 連絡中 | 黄 | 初回コンタクト実施 | 面談調整中/連絡不通/辞退 |
| 連絡不通 | グレー | 3回以上連絡不通 | 連絡中/返金申請 |
| 面談調整中 | 紫 | 面談日時を調整中 | 面談済み/辞退 |
| 面談済み | 緑 | 面談実施完了 | 成約/継続/辞退 |
| 成約 | 濃緑 | 契約成立 | (終了) |
| 継続 | オレンジ | 検討中・フォロー必要 | 面談調整中/成約/辞退 |
| 辞退 | 赤 | 顧客辞退 | (終了) |
連絡記録
| フィールド | 入力形式 | 必須 | 備考 |
|---|
| 連絡方法 | セレクトボックス | 必須 | 電話 / メール / SMS |
| 連絡結果 | セレクトボックス | 必須 | 応答あり / 不在 / 留守電 / 拒否 |
| メモ | テキストエリア | 任意 | 最大500文字 |
| タイムスタンプ | 自動記録 | 自動 | 作成日時を自動付与 |
面談記録
| フィールド | 入力形式 | 必須 | 備考 |
|---|
| 面談日 | 日付ピッカー | 必須 | 過去・未来の日付を選択可 |
| 面談方法 | セレクトボックス | 必須 | 対面 / オンライン / 電話 |
| 結果 | セレクトボックス | 必須 | 成約 / 継続検討 / 辞退 |
| メモ | テキストエリア | 任意 | 面談内容の記録(最大1000文字) |
返金申請
返金申請の表示条件:連絡記録が3件以上登録され、かつすべての連絡結果が「不在」または「拒否」の場合にのみ 返金申請ボタンが表示される。返金申請には理由の記入(必須)が求められ、管理者が承認・却下を判断する。
4.4 SCR-030: 管理ダッシュボード
プラットフォーム管理者が全体のKPIを俯瞰的に確認する画面。 主要指標をカード形式で表示し、チャートで推移を可視化する。
KPIカード
| KPI | 表示内容 | 更新頻度 | 比較表示 |
|---|
| 月間リード数 | 当月の新規リード取得数 | リアルタイム | 前月比(%表示) |
| 月間オークション数 | 当月のオークション開催数 | リアルタイム | 前月比(%表示) |
| 成約率 | 成約数 / 購入リード数 (%) | 日次更新 | 前月比(pt表示) |
| 月間売上 | 当月のプラットフォーム売上合計 | リアルタイム | 前月比(%表示) |
| 平均落札価格 | 当月のオークション平均落札額 | 日次更新 | 前月比(%表示) |
| アクティブユーザー数 | 当月ログインユーザー数 | 日次更新 | 前月比(%表示) |
チャート
| チャート名 | チャート形式 | 表示データ | 期間切替 |
|---|
| リード取得推移 | 折れ線グラフ | 日別リード取得数 | 7日/30日/90日 |
| 売上推移 | 棒グラフ + 折れ線 | 日別売上(棒)+ 累計(線) | 7日/30日/90日 |
| カテゴリ別分布 | ドーナツチャート | 保険カテゴリ別リード割合 | 当月/全期間 |
| 地域別ヒートマップ | 日本地図 | 都道府県別リード数 | 当月/全期間 |
アラート通知
| アラート種別 | トリガー条件 | 重要度 |
|---|
| 未処理返金申請 | 返金申請が24時間以上未処理 | 高 |
| 予算超過通知 | 月間広告予算の80%到達 | 中 |
| オークション異常 | 入札なしオークションが30%超過 | 高 |
| リード品質低下 | 平均リードスコアが前月比20%以上低下 | 中 |
| システムエラー | API エラー率が5%超過 | 高 |
4.5 SCR-010: 営業ダッシュボード
営業担当者の個人パフォーマンスを表示する画面。購入リード数、成約率、 アクティブオークションのサマリーを一目で確認できる。
表示セクション
| セクション | 内容 | 表示形式 |
|---|
| 個人KPIサマリー | 月間購入数・成約率・利用金額 | カード形式(3列) |
| 直近のオークション | 入札中・まもなく終了の案件上位5件 | リスト形式 |
| 案件ステータス分布 | ステータス別の案件数 | 水平バーチャート |
| 最近の活動 | 連絡記録・面談記録の直近10件 | タイムライン形式 |
| お知らせ | システム通知・落札結果 | 通知リスト |
4.6 SCR-014: 設定
営業担当者のアカウント設定画面。課金は個人単位のため、請求先名義は利用者が任意に設定する。
設定タブ
| タブ | 設定項目 | 備考 |
|---|
| アカウント情報 | 氏名・メール・電話番号・パスワード変更 | メール変更時は再認証 |
| 請求先設定 | 請求先名義・住所・決済方法 | 課金は個人単位。名義は任意設定 |
| 通知設定 | メール通知ON/OFF・プッシュ通知ON/OFF | オークション通知・落札通知など |
| 対応エリア | 担当都道府県の選択(複数選択可) | オークション表示フィルタに反映 |
| 対応カテゴリ | 取り扱い保険カテゴリの選択 | オークション表示フィルタに反映 |
5. 共通コンポーネント仕様
5.1 Header
| 要素 | 説明 | 動作 |
|---|
| ロゴ | サービスロゴ(SVG) | クリックでダッシュボードに遷移 |
| グローバルナビ | ロール別メニュー項目 | アクティブページをハイライト |
| 通知ベル | 未読通知数をバッジ表示 | クリックで通知ドロップダウン表示 |
| ユーザーメニュー | アバター + 名前 | クリックでドロップダウン(設定・ログアウト) |
5.2 Sidebar
ロール別にメニュー項目を動的に生成する。アイコン + テキストの組み合わせで表示し、 折りたたみ可能。モバイルではハンバーガーメニューに切り替わる。
ロール別メニュー構成
| ロール | メニュー項目 |
|---|
| SALES_AGENT | ダッシュボード / オークション / 案件一覧 / 設定 |
| AGENCY_ADMIN | ダッシュボード / メンバー管理 / 請求管理 |
| ADMIN | ダッシュボード / リード管理 / ユーザー管理 / オークション管理 / A/Bテスト / 価格設定 / 配信管理 / 請求・返金 / 設定 |
5.3 Toast通知
| 種別 | 背景色 | アイコン | 自動非表示 | 使用例 |
|---|
| 成功(success) | 緑 (#10b981) | CheckCircle | 3秒 | 入札完了、保存完了 |
| エラー(error) | 赤 (#ef4444) | XCircle | 5秒 | 入札失敗、通信エラー |
| 警告(warning) | 黄 (#f59e0b) | AlertTriangle | 4秒 | 残高不足、期限切れ間近 |
| 情報(info) | 青 (#3b82f6) | Info | 3秒 | 新規オークション開始 |
5.4 ダイアログ
| 種別 | 用途 | 構成要素 |
|---|
| 確認ダイアログ | 削除・購入・入札などの重要操作確認 | タイトル / メッセージ / キャンセルボタン / 確認ボタン |
| フォームダイアログ | 入札額入力・連絡記録追加など | タイトル / フォーム / キャンセルボタン / 送信ボタン |
| アラートダイアログ | エラー・警告の詳細表示 | アイコン / タイトル / メッセージ / 閉じるボタン |
5.5 テーブル共通仕様
| 機能 | 説明 |
|---|
| ページネーション | 1ページ20件、ページ番号 + 前後ボタン |
| ソート | カラムヘッダークリックで昇順/降順切替 |
| 検索 | テキスト入力によるフリーワード検索 |
| フィルター | カラム別のフィルター機能 |
| 一括操作 | チェックボックスによる複数行選択 + 一括アクション |
| 行アクション | 各行末尾にアクションメニュー(編集/削除/詳細) |
| 空状態 | データなし時のイラスト + メッセージ表示 |
| ローディング | スケルトンUIによるローディング表示 |
6. レスポンシブ対応
6.1 ブレークポイント定義
| デバイス | 幅 | グリッド | ナビゲーション | 備考 |
|---|
| デスクトップ | 1280px以上 | 3カラムグリッド | サイドバー常時表示 | フル機能表示 |
| タブレット | 768px〜1279px | 2カラムグリッド | サイドバー折りたたみ(アイコンのみ) | チャートはスクロール対応 |
| モバイル | 767px以下 | 1カラム | ハンバーガーメニュー | テーブルは横スクロール |
6.2 デバイス別対応方針
| コンポーネント | デスクトップ | タブレット | モバイル |
|---|
| KPIカード | 横並び3〜4列 | 横並び2列 | 縦積み1列 |
| テーブル | 全カラム表示 | 主要カラム表示 | 横スクロール or カード変換 |
| チャート | フルサイズ表示 | 縮小表示 | 簡易表示 or スクロール |
| フォーム | 2カラムレイアウト | 2カラムレイアウト | 1カラムレイアウト |
| ダイアログ | 中央配置(max-width: 480px) | 中央配置 | フルスクリーン |
| オークションカード | グリッド3列 | グリッド2列 | リスト表示1列 |
6.3 タッチ対応
タッチターゲットサイズ:WCAG 2.1準拠のため、すべてのインタラクティブ要素のタッチターゲットは最小44x44pxを確保する。 ボタン間のマージンは最低8px以上とし、誤タップを防止する。
7. エラー画面・特殊状態
| 状態 | 表示内容 | アクション |
|---|
| 404 Not Found | ページが見つかりません + イラスト | ホームに戻るボタン |
| 403 Forbidden | アクセス権限がありません | ダッシュボードに戻るボタン |
| 500 Server Error | サーバーエラーが発生しました | リトライボタン + サポート連絡先 |
| ネットワークエラー | 通信に失敗しました | リトライボタン |
| セッション切れ | セッションが有効期限切れです | 再ログインボタン |
| 空状態(データなし) | 対象データがありません + イラスト | データ作成への導線 |
| ローディング | スケルトンUI表示 | 自動(タイムアウト30秒でエラー表示) |
| メンテナンス | メンテナンス中です(予定終了時刻表示) | 自動リロード設定 |
8. アクセシビリティ要件
| 項目 | 基準 | 対応内容 |
|---|
| WCAG準拠レベル | AA | 全画面でLevel AA準拠 |
| コントラスト比 | 4.5:1以上 | テキストと背景のコントラスト確保 |
| キーボード操作 | 全操作可能 | Tab/Enter/Escape/矢印キー対応 |
| スクリーンリーダー | 全要素読み上げ可 | aria-label, aria-describedby設定 |
| フォーカスインジケーター | 視覚的に明確 | 2pxの青色アウトライン |
| エラーメッセージ | 色以外でも識別可 | アイコン + テキストで通知 |
| フォームラベル | 全入力要素にラベル | label要素またはaria-label |
| 画像代替テキスト | 全画像にalt属性 | 装飾画像は空alt |
画面設計書 v1.0.0 | 保険リーズマーケットプレイス | 2026-03-18