← 成果物一覧に戻る

デザイン要件定義書

Version 1.0.0  |  プロジェクト: PropCloud - 賃貸管理クラウド

PropCloud - デザイン要件定義書

> **バージョン**: 1.0.0

> **作成日**: 2026-03-19

1. 美的方向性

1.1 トーン & ムード

項目方向性
トーン**Professional-Trustworthy**（専門的で信頼感がある）
ムード落ち着き・清潔感・効率性
差別化「不動産のプロが本当に使いたいと思える道具」感

1.2 デザインコンセプト

**「信頼の道具」**

•毎日8時間使い続けても疲れないUI
•情報密度が高いが整理されている
•装飾よりも機能美を重視
•ホワイトラベルで各社のブランドに自然に馴染む「透明なデザイン」

1.3 参考方向性

•Notion（情報密度と余白のバランス）
•Linear（業務ツールとしての洗練）
•Stripe Dashboard（データ表示の明快さ）

1.4 避けるべき方向性

•過度にポップ・カジュアルなデザイン
•ダークモードを基調としたハッカー風UI
•グラデーションやグロー効果の多用
•大量のアニメーション（業務効率を阻害）

2. ブランドガイドライン

2.1 カラーシステム

ホワイトラベル前提のため、**ニュートラルベース + カスタマイズ可能なアクセント**構成。

デフォルトカラー（テナントがカスタマイズ前の初期値）

用途カラー説明
Primary`#1B2559`紺色系、信頼感・専門性
Primary Light`#2D3A8C`ホバー・アクティブ状態
Secondary`#F8F9FC`背景・カード
Accent`#3B82F6`CTA・リンク・強調
Success`#10B981`入金済・完了・正常
Warning`#F59E0B`注意・更新期限接近
Danger`#EF4444`滞納・エラー・削除
Text Primary`#1E293B`本文テキスト
Text Secondary`#64748B`補助テキスト・ラベル
Border`#E2E8F0`ボーダー・区切り線
Background`#FFFFFF`メイン背景
Surface`#F1F5F9`サイドバー・テーブルヘッダ

テナントカスタマイズ可能な範囲

•Primary / Primary Light（ブランドカラー）
•Accent（アクションカラー）
•ロゴ画像
•ファビコン

2.2 タイポグラフィ

用途フォントウェイトサイズ
見出しH1Noto Sans JP70024px
見出しH2Noto Sans JP60020px
見出しH3Noto Sans JP60016px
本文Noto Sans JP40014px
小テキストNoto Sans JP40012px
数値・金額Noto Sans JP50014px（tabular-nums）
ボタンNoto Sans JP50014px

> **フォント選定理由**: 日本語の業務システムとして可読性を最優先。Noto Sans JPは日本語の表示品質が高く、無料で商用利用可能。ホワイトラベルでも安全に使用できる。

2.3 アイコン

•**Lucide React** を標準アイコンセットとして採用
•統一された線幅・サイズ（20px基本）
•カスタムアイコンは最小限に抑える

3. UIコンポーネント方針

3.1 コンポーネントライブラリ

項目選定
ベースライブラリshadcn/ui
スタイリングTailwind CSS
アニメーションmotion/react（最小限使用）
フォームReact Hook Form + Zod
テーブルTanStack Table + shadcn DataTable
チャートRecharts
日付ピッカーshadcn/ui DatePicker（date-fns）
トースト通知shadcn/ui Sonner
モーダル/ダイアログshadcn/ui Dialog/Sheet
コマンドパレットshadcn/ui Command（cmdk）

3.2 コンポーネント設計原則

1. **一貫性**: 同じ操作は常に同じUIパターンで提供

2. **情報密度**: 1画面に必要な情報を過不足なく表示

3. **段階的開示**: 基本情報→詳細情報を段階的に表示

4. **フィードバック**: 操作結果を即座にユーザーにフィードバック

5. **エラー予防**: バリデーションは入力時リアルタイムに実施

3.3 レイアウトパターン

メインレイアウト

┌──────────────────────────────────────────────────┐
│ ヘッダー（テナントロゴ + ユーザーメニュー）           │
├──────────┬───────────────────────────────────────┤
│           │ パンくずリスト                          │
│ サイドバー  ├───────────────────────────────────────┤
│ ナビ       │                                       │
│ ゲーション  │ メインコンテンツエリア                    │
│           │                                       │
│           │                                       │
│           │                                       │
├──────────┴───────────────────────────────────────┤
│ フッター（バージョン情報・ヘルプリンク）               │
└──────────────────────────────────────────────────┘
•サイドバー: 折りたたみ可能（アイコンのみ表示モード）
•タブ切り替え: 同一画面内の関連情報切り替え
•スプリットビュー: 一覧と詳細の同時表示

一覧画面パターン

┌──────────────────────────────────────────────────┐
│ ページタイトル + アクションボタン（新規作成等）         │
├──────────────────────────────────────────────────┤
│ 検索バー + フィルタ + ソート                         │
├──────────────────────────────────────────────────┤
│ データテーブル                                      │
│   │ ステータス │ 物件名 │ 部屋番号 │ ... │ 操作 │     │
│   ├──────────┼───────┼────────┼─────┼─────┤     │
│   │ ● 入居中  │ ○○マンション │ 101 │ ... │ ... │     │
│   │ ○ 空室    │ △△ハイツ    │ 202 │ ... │ ... │     │
├──────────────────────────────────────────────────┤
│ ページネーション（25/50/100件表示切替）               │
└──────────────────────────────────────────────────┘

詳細画面パターン

┌──────────────────────────────────────────────────┐
│ ← 戻る │ 物件名: ○○マンション 101号室    │ 編集 │ ... │
├──────────────────────────────────────────────────┤
│ [基本情報] [契約情報] [入出金] [修繕履歴] [書類]     │
├──────────────────────────────────────────────────┤
│                                                    │
│ タブに応じたコンテンツ                                │
│                                                    │
└──────────────────────────────────────────────────┘

4. レスポンシブ方針

4.1 ブレークポイント

名称サイズ対象デバイス対応方針
sm640pxスマートフォンポータル画面のみ対応
md768pxタブレット縦サイドバー折りたたみ
lg1024pxタブレット横/小型PCサイドバー縮小表示
xl1280pxデスクトップフル表示
2xl1536pxワイドモニター最大幅制限

4.2 デバイス別対応方針

デバイス対応範囲備考
デスクトップ管理画面フル機能メインターゲット
タブレット管理画面（一部制限）外出先での確認用
スマートフォンポータルのみオーナー・入居者向け

4.3 タブレット対応のポイント

•サイドバーはデフォルト折りたたみ（ハンバーガーメニュー）
•テーブルは横スクロール対応
•モーダルはフルスクリーン表示
•フォームは1カラムレイアウト

5. インタラクション方針

5.1 アニメーション

種類durationeasing用途
ホバー150msease-outボタン、リンク
トランジション200msease-in-outタブ切替、アコーディオン
モーダル表示200msease-outダイアログ、シート
トースト300msspring通知表示

> **原則**: アニメーションは200ms以下。業務効率を阻害しないこと。

5.2 フィードバックパターン

操作フィードバック
ボタンクリックボタン色変化 + ローディングスピナー
保存成功トースト通知（緑）
エラー発生トースト通知（赤） + インラインエラー
削除操作確認ダイアログ（破壊的操作は赤ボタン）
一括操作プログレスバー + 完了通知
データ読み込みスケルトンスクリーン

5.3 キーボードショートカット

ショートカット操作
Cmd/Ctrl + Kコマンドパレット起動
Cmd/Ctrl + S保存
Cmd/Ctrl + N新規作成
Escapeモーダル/パネル閉じる
/検索フォーカス

6. ホワイトラベル対応デザイン

6.1 テーマシステム

CSS Variables（カスタムプロパティ）ベースのテーマシステム

--primary: テナント設定値
--primary-foreground: 自動計算（コントラスト確保）
--accent: テナント設定値
--background: 固定（#FFFFFF）
--surface: 固定（#F1F5F9）
...

6.2 ブランディング挿入ポイント

箇所カスタマイズ内容
サイドバー上部テナントロゴ（SVG/PNG）
ログイン画面テナントロゴ + ブランドカラー
メールヘッダテナントロゴ + 社名
帳票ヘッダテナントロゴ + 社名 + 住所
ファビコンテナント設定
ページタイトルテナント名 + ページ名
フッターテナント社名

6.3 テーマプレビュー

テナント管理者向けに、設定変更時のリアルタイムプレビュー機能を提供。

カラー変更・ロゴ変更の結果を適用前に確認できること。

7. 品質基準

7.1 Lighthouse

項目目標値
Performance90+
Accessibility100
Best Practices100
SEO100

7.2 Core Web Vitals

項目目標値
FCP< 1.8s
LCP< 2.5s
CLS< 0.1
INP< 200ms

7.3 アクセシビリティ

項目基準
WCAG準拠レベルAA
コントラスト比4.5:1以上（テキスト）、3:1以上（大テキスト）
タッチターゲット44px以上
フォーカスインジケーター明確に視認可能
スクリーンリーダー主要操作フローで対応

7.4 ダークモード

•初期リリースではライトモードのみ
•Phase 2以降でダークモード対応
•CSS Variablesベースで切り替え可能な設計にしておくこと

8. 業務システム固有のUI/UX要件

8.1 データテーブル

•列の表示/非表示切替
•列幅のドラッグ調整
•列の並び替え（ドラッグ&ドロップ）
•行選択（個別/全選択）
•一括操作メニュー
•インラインセル編集（限定的に採用）
•固定列（左端のチェックボックス + ステータス列）
•ページネーション + 件数切替（25/50/100）
•フィルタの保存・呼び出し

8.2 フォーム

•入力中のリアルタイムバリデーション
•未保存変更の離脱警告
•自動保存（下書き機能）
•入力補助（住所の自動入力、金額のカンマ区切り表示）
•条件付き表示（入力値に応じたフォーム項目の出し分け）

8.3 検索

•インクリメンタルサーチ（入力と同時に検索）
•検索条件の保存・呼び出し（マイフィルタ）
•複合条件検索（AND/OR）
•日付範囲指定
•ステータスフィルタ（チップ形式）

8.4 ナビゲーション

•コマンドパレット（Cmd+K）で全機能にアクセス
•最近使ったページの表示
•お気に入りメニューの登録
•パンくずリスト
•複数タブ同時表示対応（ブラウザタブ間のセッション共有）

*PropCloud - デザイン要件定義書 v1.0.0*