← 納品物一覧に戻る

画面設計書

バージョン: 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-003LP(リード取得)/lp一般消費者保険相談申込フォーム、SMS認証
SCR-010営業ダッシュボード/dashboardSALES_AGENT個人KPI表示、直近オークション、購入済みリード
SCR-011オークション一覧/auctionSALES_AGENTアクティブオークション表示・フィルター・入札
SCR-012案件一覧/casesSALES_AGENT購入済みリード管理・ステータスフィルター
SCR-013案件詳細/cases/[id]SALES_AGENT連絡記録・面談記録・返金申請
SCR-014設定/settingsSALES_AGENTアカウント設定・請求先設定・通知設定
SCR-020法人ダッシュボード/agency/dashboardAGENCY_ADMIN組織KPI・メンバー成績・月次集計
SCR-021メンバー管理/agency/membersAGENCY_ADMIN営業担当管理・招待・権限設定
SCR-022請求管理/agency/billingAGENCY_ADMIN月次請求一覧・明細ダウンロード
SCR-030管理ダッシュボード/admin/dashboardADMINプラットフォームKPI・アラート
SCR-031リード管理/admin/leadsADMINリード在庫管理・品質スコア確認
SCR-032ユーザー管理/admin/usersADMINユーザー・代理店管理・アカウント停止
SCR-033オークション管理/admin/auctionsADMINライブ・完了オークション・手動介入
SCR-034A/Bテスト管理/admin/ab-testsADMINテスト設定・トラフィック配分・結果分析
SCR-035価格設定/admin/pricingADMIN価格ルール・カテゴリ乗数・地域係数
SCR-036配信管理/admin/deliveryADMIN配信スケジュール・バッチ設定
SCR-037管理設定/admin/settingsADMINシステム設定・メール文面・通知設定
SCR-038請求・返金管理/admin/billingADMIN全請求・返金管理・支払い状況
ロール定義:
全ユーザー - 認証済み全ユーザー / 未認証 - ログインしていないユーザー / 一般消費者 - 保険相談を申し込む一般利用者 / 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)CheckCircle3秒入札完了、保存完了
エラー(error)赤 (#ef4444)XCircle5秒入札失敗、通信エラー
警告(warning)黄 (#f59e0b)AlertTriangle4秒残高不足、期限切れ間近
情報(info)青 (#3b82f6)Info3秒新規オークション開始

5.4 ダイアログ

種別用途構成要素
確認ダイアログ削除・購入・入札などの重要操作確認タイトル / メッセージ / キャンセルボタン / 確認ボタン
フォームダイアログ入札額入力・連絡記録追加などタイトル / フォーム / キャンセルボタン / 送信ボタン
アラートダイアログエラー・警告の詳細表示アイコン / タイトル / メッセージ / 閉じるボタン

5.5 テーブル共通仕様

機能説明
ページネーション1ページ20件、ページ番号 + 前後ボタン
ソートカラムヘッダークリックで昇順/降順切替
検索テキスト入力によるフリーワード検索
フィルターカラム別のフィルター機能
一括操作チェックボックスによる複数行選択 + 一括アクション
行アクション各行末尾にアクションメニュー(編集/削除/詳細)
空状態データなし時のイラスト + メッセージ表示
ローディングスケルトンUIによるローディング表示

6. レスポンシブ対応

6.1 ブレークポイント定義

デバイスグリッドナビゲーション備考
デスクトップ1280px以上3カラムグリッドサイドバー常時表示フル機能表示
タブレット768px〜1279px2カラムグリッドサイドバー折りたたみ(アイコンのみ)チャートはスクロール対応
モバイル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