← 納品物一覧に戻る本ドキュメントは、保険リードマーケットプレイスのUI/UXデザインにおける統一規約を定義します。 すべての画面・コンポーネントは本ガイドラインに準拠して設計・実装してください。
1. デザインコンセプト
1.1 方向性: Professional Trust（プロフェッショナル・トラスト）
保険・金融という信頼性が最重要となるドメインに適した、洗練された業務用UIを目指します。 派手な装飾や過剰なアニメーションを排し、データの視認性と操作の確実性を最優先とします。
コンセプトの3つの柱
信頼性
落ち着いたNavyカラーを基調とし、金融業界にふさわしい安定感を表現
効率性
デスクトップファーストの業務アプリケーション。データ密度を確保しつつ整理されたレイアウト
明瞭性
ステータスやアクションが一目で判別できる、明確な視覚的階層構造
1.2 ターゲットユーザー
| ロール | 利用シーン | 重視するUI要素 |
|---|
| 保険代理店 | リード検索・入札・顧客対応 | 一覧性、素早い操作、ステータス視認性 |
| マーケター（リード提供者） | リード登録・入札確認・収益管理 | データ入力効率、収益ダッシュボード |
| システム管理者 | ユーザー管理・設定・監視 | 管理画面の整理、ログ・統計表示 |
2. カラーパレット
カラーシステムは機能的な意味を持たせた設計です。各色は特定の用途に紐づけられ、 一貫した視覚言語を形成します。
Primary Navy
信頼・安定 / ヘッダー・見出し
#1B2A4A
Accent Blue
CTA・インタラクティブ要素・リンク
#2563EB
Success / Emerald
成功・利益・ポジティブ指標
#059669
Warning / Amber
警告・緊急性・注意喚起
#D97706
2.1 セマンティックカラーの適用例
| コンテキスト | 色 | 具体例 |
|---|
| 入札成功 / 落札 | Success #059669 | WONバッジ、成功トースト |
| 入札中 / CTA | Accent Blue #2563EB | 入札ボタン、リンク、選択状態 |
| 有効期限間近 | Warning #D97706 | 残り時間バッジ、警告アイコン |
| 入札失敗 / エラー | Error #DC2626 | LOSTバッジ、バリデーションエラー |
3. タイポグラフィ
3.1 フォントファミリー
全体を Noto Sans JP で統一します。 日本語と英数字の混在環境で視認性が高く、ウェイトバリエーションが豊富なため、 見出しから本文まで一貫したトーンを保てます。
3.2 タイプスケール
| レベル | サイズ | ウェイト | 行間 | 用途 |
|---|
| H1 | 28px | Bold 700 | 1.3 | ページタイトル |
| H2 | 22px | Bold 700 | 1.4 | セクション見出し |
| H3 | 17px | SemiBold 600 | 1.5 | サブセクション |
| H4 | 15px | SemiBold 600 | 1.5 | 小見出し・ラベル |
| Body | 14px | Regular 400 | 1.8 | 本文テキスト |
| Small | 12px | Regular 400 | 1.6 | 注釈・補助情報 |
3.3 タイポグラフィプレビュー
H1: 保険リードマーケットプレイス（28px / Bold）
H2: リード管理ダッシュボード（22px / Bold）
H3: 入札ステータス一覧（17px / SemiBold）
H4: フィルター条件（15px / SemiBold）
Body: 本リードは東京都在住の30代男性で、生命保険の新規加入を検討中です。（14px / Regular）
Small: 最終更新日: 2026年3月18日 15:30 | リードID: LD-20260318-001（12px / Regular）
3.4 数値表示
金額・統計値などの数値表示には font-variant-numeric: tabular-nums を適用し、 桁が揃った等幅数字で表示します。これにより、テーブル内の金額比較や統計数値の読み取りが容易になります。
¥ 12,500
¥ 128,000
¥ 3,750
¥ 45,200
4. スペーシングシステム
基準単位を 8px とし、一貫したリズムのあるレイアウトを実現します。
| トークン | 値 | プレビュー | 用途 |
|---|
| xs | 4px | | アイコンとラベルの間、微細な調整 |
| sm | 8px | | コンパクトな要素間、リスト項目内 |
| md | 16px | | 標準的なコンポーネント内余白 |
| lg | 24px | | カード内パディング、フォーム項目間 |
| xl | 32px | | セクション間の区切り |
| 2xl | 48px | | 大セクション間のマージン |
| 3xl | 64px | | ページレベルの区切り |
ガイドライン: コンポーネント内余白は12-16px、セクション間は32-48pxを基準としてください。
5. コンポーネントライブラリ
5.1 技術スタック
| 領域 | ライブラリ | バージョン |
|---|
| UIコンポーネント | shadcn/ui | 最新安定版 |
| スタイリング | Tailwind CSS v4 | v4.x |
| アニメーション | motion/react | 最新安定版 |
| アイコン | Lucide React | 最新安定版 |
5.2 コンポーネント一覧
| コンポーネント | バリエーション | 主な用途 |
|---|
| Button | Primary(blue), Secondary(outline), Destructive(red), Ghost | ユーザーアクション、フォーム送信、ナビゲーション |
| Card | 影あり、角丸12px、padding 24px | リード情報、統計表示、コンテンツグルーピング |
| Table | ヘッダー Navy背景白文字、交互行ストライプ | リード一覧、入札履歴、請求明細 |
| Dialog | オーバーレイ付きモーダル、ESCで閉じる | 確認ダイアログ、入力フォーム、詳細表示 |
| Input | border-gray-300、focus: ring-blue-500 | テキスト入力、検索、フィルター |
| Badge | ステータス表示用（色分け） | リードステータス、入札状態、ユーザーロール |
| Toast (Sonner) | 右下表示、4秒自動消去 | 操作完了通知、エラー通知、システムメッセージ |
5.3 ボタンバリエーション
Primary
Secondary
Destructive
Ghost
5.4 バッジバリエーション
NEWBIDDINGWONLOSTEXPIREDNO_BID
6. アニメーション規約
アニメーションはユーザーの操作に対するフィードバックとして使用します。 過剰な演出は避け、パフォーマンスに影響しない範囲で適用します。
| 項目 | 規約 | 理由 |
|---|
| Duration | 200ms以下 | 即応性の確保。200msを超えると遅延を感じる |
| Easing | ease-out | 自然な減速感を表現 |
| 対象プロパティ | transform, opacity のみ | Compositorプロパティに限定しGPU最適化 |
| ページ遷移 | fade 150ms | 最小限の視覚的連続性 |
禁止: layout系プロパティ（width, height, margin, padding, top, left等）のアニメーション。 リフロー（レイアウト再計算）が発生し、パフォーマンスを著しく低下させます。
7. レスポンシブデザイン
デスクトップファーストの業務アプリケーションですが、タブレット・モバイルにも対応します。
| デバイス | 幅 | レイアウト | ナビゲーション |
|---|
| Desktop | 1280px+ | 3カラム | サイドバー展開 |
| Tablet | 768-1279px | 2カラム | サイドバー折りたたみ |
| Mobile | -767px | 1カラム | ハンバーガーメニュー |
7.1 ブレークポイント
| トークン | 値 | Tailwind |
|---|
| sm | 640px | sm: |
| md | 768px | md: |
| lg | 1024px | lg: |
| xl | 1280px | xl: |
8. ダークモード
システム設定連動と手動トグルの両方をサポートします。 全カラーでWCAG AA準拠のコントラスト比（4.5:1以上）を確保します。
ライトモード
Background: #F8FAFC
Surface: #FFFFFF
Text: #1E293B
ダークモード
Background: #0F172A
Surface: #1E293B
Text: #F1F5F9
9. 禁止パターン（アンチパターン）
以下のパターンはAIスロップ（AI生成の定型的デザイン）として明確に禁止します。 差別化された業務UIを実現するために厳守してください。
| カテゴリ | 禁止パターン | 理由 | 代替 |
|---|
| フォント | Inter, Roboto, Arial | AI生成のデフォルト選択 | Noto Sans JP を統一使用 |
| カラー | 紫グラデーション | AI生成のデフォルト装飾 | 定義済みカラーパレットのみ使用 |
| エフェクト | 過剰なドロップシャドウ | 視覚的ノイズの増加 | 定義済みshadow-sm/md/lgのみ |
| エフェクト | グロー効果 | 業務UIには不適切 | フォーカスリングのみ許可 |
| レイアウト | 予測可能すぎるパターン | 差別化の欠如 | 情報設計に基づいたレイアウト |
10. 品質基準
10.1 Lighthouse スコア
| 項目 | 目標値 |
|---|
| Performance | 90+ |
| Accessibility | 100 |
| Best Practices | 100 |
| SEO | 100 |
10.2 Core Web Vitals
| 指標 | 目標値 | 説明 |
|---|
| FCP (First Contentful Paint) | < 1.8s | 最初のコンテンツ描画 |
| LCP (Largest Contentful Paint) | < 2.5s | 最大コンテンツ描画 |
| CLS (Cumulative Layout Shift) | < 0.1 | レイアウトのずれ |
10.3 アクセシビリティ
| 項目 | 基準 |
|---|
| WCAG準拠レベル | AA |
| コントラスト比 | 4.5:1 以上 |
| タッチターゲット | 44px 以上 |
| フォーカス表示 | 全インタラクティブ要素にフォーカスリング |
| alt属性 | 全画像に適切なalt属性 |
| キーボード操作 | 全機能がキーボードのみで操作可能 |