Skip to content

UI_DESIGN.md

Latest commit

 

History

History
451 lines (346 loc) · 10.7 KB

UI_DESIGN.md

File metadata and controls

451 lines (346 loc) · 10.7 KB
Raw

UI設計書

最終更新日: 2025-12-04 19:08 JST

目次

  1. 概要
  2. デザイン原則
  3. 共通UI要素
  4. 画面一覧
  5. レスポンシブデザイン
  6. アクセシビリティ

概要

KakeiBonのユーザーインターフェース設計について記述します。

技術スタック

  • HTML5: セマンティックマークアップ
  • CSS3: モダンレイアウト（Flexbox/Grid）
  • Vanilla JavaScript: フレームワークなし、ES6+モジュール

設計方針

  • シンプル性: 複雑なフレームワークを避け、学習コストを削減
  • 保守性: モジュール化された共通コンポーネント
  • 一貫性: 全画面で統一されたUI/UX

デザイン原則

1. 一貫性

  • 色: 統一されたカラーパレット（プライマリ、セカンダリ、エラー、成功）
  • タイポグラフィ: 統一されたフォントサイズとスタイル
  • スペーシング: 一貫したマージンとパディング

2. 直感性

  • 明確なラベル: すべての入力フィールドに説明的なラベル
  • 即時フィードバック: バリデーションエラーを即座に表示
  • 視覚的階層: 重要な要素を強調

3. アクセシビリティ

  • キーボードナビゲーション: すべての操作をキーボードで実行可能
  • スクリーンリーダー対応: 適切なARIA属性
  • カラーコントラスト: WCAG 2.1 AA準拠

4. パフォーマンス

  • 軽量: 外部フレームワークなし
  • 遅延ロード: 必要なモジュールのみ読み込み
  • 最小化: CSSとJavaScriptの最適化

共通UI要素

メニューバー

場所: res/js/modules/menu-bar.js

機能:

  • ナビゲーションリンク
  • 言語切り替え
  • フォントサイズ調整
  • ログアウト

実装:

import { loadMenuBar } from './modules/menu-bar.js';

弱視者支援インジケータ (Low Vision Support Indicator)

スタイルシート: res/css/indicators.css

目的: 弱視のユーザーに対して、視覚的なフィードバックを強化し、UI要素の状態を明確に伝える

種類:

  • アクティブ/選択状態: 高コントラストの枠線とハイライト
  • フォーカス: 太い境界線で現在のフォーカス位置を明示
  • 無効状態: グレースケールとパターンで無効な要素を表示
  • ステータスフィードバック: 成功（緑）、エラー（赤）、情報（青）の高コントラスト表示

将来実装予定: スクリーンリーダー対応（ARIA属性の追加）

フォントサイズ調整

モジュール: res/js/modules/font-size.js

サイズオプション:

  • Small: 12px
  • Medium: 16px（デフォルト）
  • Large: 20px
  • Custom: ユーザー定義（12-32px）

永続化: localStorage

モーダルダイアログ

共通パターン:

  • 半透明オーバーレイ
  • 中央配置コンテンツ
  • 閉じるボタン（×）
  • Escキーで閉じる

画面一覧

1. ログイン/初期設定画面

ファイル: res/index.html

セクション:

  1. 管理者初期設定 (初回のみ)

    • ユーザー名
    • パスワード（16文字以上）
    • パスワード確認

  2. 一般ユーザー登録 (管理者設定後)

    • ユーザー名
    • パスワード（16文字以上）
    • パスワード確認

  3. ログイン

    • ユーザー名
    • パスワード

フロー:

起動 → 管理者存在チェック
  ├─ No → 管理者初期設定表示
  │        ↓
  │      登録完了 → 一般ユーザー登録表示
  └─ Yes → ログイン画面表示
           ↓
         認証成功 → ユーザー管理画面

2. ユーザー管理画面

ファイル: res/user-management.html

セクション:

  1. ユーザーリスト

    • テーブル表示（ID、ユーザー名、ロール、作成日時、更新日時）
    • 編集ボタン
    • 削除ボタン（管理者のみ）

  2. ユーザー追加/編集モーダル

    • ユーザー名
    • ロール選択（管理者/一般ユーザー）
    • パスワード（新規のみ）

  3. パスワード変更モーダル

    • 現在のパスワード
    • 新しいパスワード
    • パスワード確認

3. 費目管理画面

ファイル: res/category-management.html

特徴:

  • 3階層カテゴリ（大分類→中分類→小分類）
  • カスケード選択
  • 追加/編集/削除

レイアウト:

  • 左側: カテゴリツリー
  • 右側: 詳細/編集フォーム

4. 口座管理画面

ファイル: res/account-management.html

フィールド:

  • 口座名
  • 初期残高
  • 現在残高（自動計算）
  • IS_DISABLED（無効化フラグ）

機能:

  • 一覧表示（テーブル）
  • 追加/編集モーダル
  • 無効化/有効化トグル

5. 店舗管理画面

ファイル: res/shop-management.html

フィールド:

  • 店舗名
  • IS_DISABLED

機能:

  • 検索/フィルタリング
  • 一覧表示
  • 追加/編集/無効化

6. メーカー管理画面

ファイル: res/manufacturer-management.html

フィールド:

  • メーカー名
  • IS_DISABLED

機能:

  • 検索/フィルタリング
  • 一覧表示
  • 追加/編集/無効化

7. 商品管理画面

ファイル: res/product-management.html

フィールド:

  • 商品名
  • メーカーID（外部キー）
  • IS_DISABLED

機能:

  • メーカー別フィルタリング
  • 一覧表示
  • 追加/編集/無効化

8. 入出金管理画面

ファイル: res/transaction-management.html

セクション:

  1. ヘッダー情報

    • 取引日
    • 口座
    • 店舗

  2. 明細一覧

    • 商品
    • カテゴリ
    • 金額
    • 税情報

機能:

  • 期間フィルタリング
  • 詳細表示/編集
  • 明細追加/削除

9. 入出金明細管理画面

ファイル: res/transaction-detail-management.html

フィールド:

  • 商品選択
  • カテゴリ選択（3階層）
  • 税抜金額
  • 税率
  • 税込金額（自動計算）
  • 端数処理（自動検出）

スマート税計算:

  • 税抜 → 税込の自動計算
  • 端数処理の自動検出（切り上げ/切り捨て/四捨五入）

10. 集計画面群

ファイル:

  • res/aggregation.html - 集計メニュー
  • res/aggregation-daily.html - 日別集計
  • res/aggregation-weekly.html - 週別集計
  • res/aggregation-period.html - 期間集計
  • res/aggregation-yearly.html - 年別集計

共通機能:

  • グラフ表示
  • テーブル表示
  • CSV/PDFエクスポート
  • カテゴリ別ドリルダウン

レスポンシブデザイン

ブレークポイント

/* モバイル */
@media (max-width: 767px) { ... }

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* デスクトップ */
@media (min-width: 1024px) { ... }

レイアウト戦略

  • モバイル: 単一カラム、積み重ねレイアウト
  • タブレット: 2カラム、サイドバー折りたたみ
  • デスクトップ: 3カラム、固定サイドバー

アクセシビリティ

WCAG 2.1準拠

レベルA（必須）

  • ✅ キーボード操作可能
  • ✅ 十分な時間
  • ✅ 発作の防止
  • ✅ ナビゲート可能

レベルAA（推奨）

  • ✅ カラーコントラスト 4.5:1以上
  • ✅ テキストサイズ変更可能
  • ✅ 複数の方法でナビゲーション
  • ✅ フォーカス表示

スクリーンリーダー対応（将来実装予定）

  • aria-label: 視覚的なコンテキストの提供
  • role: 要素の役割の明示
  • aria-live: 動的コンテンツの通知

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

  • Tab: 次の要素へ
  • Shift+Tab: 前の要素へ
  • Enter: 送信/選択
  • Esc: モーダルを閉じる

バリデーション

クライアントサイド

モジュール: res/js/modules/validation-helpers.js

検証項目:

  • 必須フィールド
  • 文字数制限
  • パスワード強度（16文字以上）
  • メールフォーマット（将来対応）

サーバーサイド

モジュール: src/validation.rs

二重検証:

  • クライアント側のバリデーションを信頼しない
  • すべての入力を再検証
  • SQLインジェクション対策

国際化（i18n）

対応言語

  • 日本語（デフォルト）
  • 英語

翻訳ファイル

  • res/locales/ja.json
  • res/locales/en.json

実装

import { loadTranslations, switchLanguage } from './modules/i18n.js';

// 言語切り替え
switchLanguage('en');

スタイルガイド

カラーパレット

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
}

タイポグラフィ

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-small: 12px;
  --font-size-base: 16px;
  --font-size-large: 20px;
  --line-height: 1.5;
}

スペーシング

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

パフォーマンス最適化

読み込み戦略

  1. クリティカルCSS: インライン化
  2. 非クリティカルCSS: 遅延読み込み
  3. JavaScript: モジュール単位で遅延読み込み

画像最適化

  • SVGアイコン優先
  • 遅延読み込み（lazy loading）
  • WebP形式（フォールバック付き）

テスト

手動テスト

テストファイル:

  • res/tests/admin-setup.test.html
  • res/tests/login-integration.test.html
  • res/tests/user-addition.test.html
  • res/tests/tax-rounding-tests.html

テスト項目

  • ✅ フォームバリデーション
  • ✅ モーダル動作
  • ✅ CRUD操作
  • ✅ 国際化
  • ✅ フォントサイズ調整

将来の拡張

計画中の機能

  • ダークモード
  • PWA対応
  • オフライン機能
  • カスタムテーマ
  • ドラッグ&ドロップUI

改善予定

  • アニメーション強化
  • より詳細なエラーメッセージ
  • ツールチップ/ヘルプシステム
  • ショートカットキー拡充

関連ドキュメント: