joe/sougi
Watch
1
0
Fork
You've already forked sougi
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WebUI全体をスマホ優先の高視認性デザインに刷新(グレー基調・ダークモード) #21

New issue
Closed
opened 2026-09-27 11:43:02 +00:00 by joe · 2 comments
joe commented 2026-09-27 11:43:02 +00:00
Owner
Copy link

背景

現状のWebUIは最小限の共通CSSで、画面間の統一感やスマートフォンでの操作性が不足している。葬儀対応中に迷わず使えるよう、全画面の視認性とタッチ操作を改善する。

承認済みデザイン方針

  • 方向性: 高視認性・操作優先(C案)。文字と主要ボタンを大きくし、状態を識別しやすくする
  • カラー: ライト/ダークとも中間のグレー濃度(B案)。白背景を避ける。ライトはグレー背景＋一段明るいグレーのカード、ダークも黒ではなくスレートグレーの階層
  • テーマ: 初回はOSのprefers-color-schemeに追従。画面上で手動切替でき、切替後はブラウザ内に選択を保存
  • ナビ: PCは上部ナビ。スマホはヘッダーのメニュー操作で左側からスライドするドロワー(A2)
  • レスポンシブ: スマホではフォームを縦一列・大きなタップ領域にし、一覧表はカード表示へ切替
  • Flask/Jinjaを維持し、CSSと小さなJavaScriptで対応。外部UI依存は追加せず、業務ロジック/データ構造は変更しない

対象

ダッシュボード、見積、弔問客、香典返し、経費、設定、スキャン画面。印刷ビューは印刷向けの白背景/簡素な体裁を維持する。

受け入れ条件

  • 全画面に一貫したライト/ダークの配色、文字、余白、フォーム、ボタン、ステータス表示
  • OS設定に追従し、手動テーマ切替と選択記憶が機能
  • スマホ幅でドロワーを開閉でき、メニュー外タップ/Escapeでも閉じる。ARIA属性とキーボード操作に配慮
  • 一覧・フォームが横はみ出しせず、主要操作をスマホで使える
  • 印刷ビューの見た目を壊さない
  • 既存機能/テストを維持し、追加のフロントエンド依存を導入しない
## 背景 現状のWebUIは最小限の共通CSSで、画面間の統一感やスマートフォンでの操作性が不足している。葬儀対応中に迷わず使えるよう、全画面の視認性とタッチ操作を改善する。 ## 承認済みデザイン方針 - **方向性**: 高視認性・操作優先(C案)。文字と主要ボタンを大きくし、状態を識別しやすくする - **カラー**: ライト/ダークとも中間のグレー濃度(B案)。白背景を避ける。ライトはグレー背景＋一段明るいグレーのカード、ダークも黒ではなくスレートグレーの階層 - **テーマ**: 初回はOSの`prefers-color-scheme`に追従。画面上で手動切替でき、切替後はブラウザ内に選択を保存 - **ナビ**: PCは上部ナビ。スマホはヘッダーのメニュー操作で左側からスライドするドロワー(A2) - **レスポンシブ**: スマホではフォームを縦一列・大きなタップ領域にし、一覧表はカード表示へ切替 - Flask/Jinjaを維持し、CSSと小さなJavaScriptで対応。外部UI依存は追加せず、業務ロジック/データ構造は変更しない ## 対象 ダッシュボード、見積、弔問客、香典返し、経費、設定、スキャン画面。印刷ビューは印刷向けの白背景/簡素な体裁を維持する。 ## 受け入れ条件 - 全画面に一貫したライト/ダークの配色、文字、余白、フォーム、ボタン、ステータス表示 - OS設定に追従し、手動テーマ切替と選択記憶が機能 - スマホ幅でドロワーを開閉でき、メニュー外タップ/Escapeでも閉じる。ARIA属性とキーボード操作に配慮 - 一覧・フォームが横はみ出しせず、主要操作をスマホで使える - 印刷ビューの見た目を壊さない - 既存機能/テストを維持し、追加のフロントエンド依存を導入しない
joe commented 2026-09-27 13:26:13 +00:00
Author
Owner
Copy link

ユーザー確認により、スマホ弔問客一覧はA案(コンパクト2段リスト)に決定。1段目に氏名/香典額/返礼状況、2段目に続柄/参列/供花弔電をまとめ、全項目と既存操作は維持する方針です。

ユーザー確認により、スマホ弔問客一覧はA案(コンパクト2段リスト)に決定。1段目に氏名/香典額/返礼状況、2段目に続柄/参列/供花弔電をまとめ、全項目と既存操作は維持する方針です。
joe commented 2026-09-27 16:57:28 +00:00
Author
Owner
Copy link

実装完了としてクローズします。ライト/ダークテーマ(生成パレット)、スマホのスライドドロワー、レスポンシブなフォーム/一覧/ダッシュボード、比較・設定の局所スクロール、印刷ビューを実装し、ローカルmainへマージ済みです(pushは未実施)。テーマはその後、層の明度差と文字コントラストを検証する生成方式に置き換えました。

実装完了としてクローズします。ライト/ダークテーマ(生成パレット)、スマホのスライドドロワー、レスポンシブなフォーム/一覧/ダッシュボード、比較・設定の局所スクロール、印刷ビューを実装し、ローカルmainへマージ済みです(pushは未実施)。テーマはその後、層の明度差と文字コントラストを検証する生成方式に置き換えました。
joe closed this issue 2026-09-27 16:57:29 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug

   
cleanup

   
enhancement
No labels
bug
cleanup
enhancement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
joe/sougi#21
No description provided.