ブランドシステム v1

genbaOS フィールドグリッド

素早く記録し、事実で伝え、確実に引き継ぐ。

日差しの下、手袋着用、短時間作業でも使い切れる衛生工事チーム向け設計。

基本原則

  1. 完璧な入力より、素早い記録を優先。1タップ1アクション。
  2. 事実優先。外部提出文面で推測を書かない。
  3. 状態を常時可視化。下書きと承認の区別を明確に。
  4. 現場品質の誇り。玩具的ではなく業務用の佇まいに。

カラートークン

ブランド 800#16665d
ブランド 700#1d7f72
ブランド 100#d7efe9
アクセント 600#da6f1d
インク 900#1a2426
サーフェス 50#edf3f5
状態 OK#e9f7ee
状態 注意#fff4e6
状態 危険#fdecec

タイポグラフィ

表示見出し / 案件名と主要マイルストーン

見出し / パネルとセクションタイトル

本文 / メモ・QA詳細・操作説明

補助文 / ID・時刻・説明テキスト

本文フォントは日本語業務文の可読性を最優先。 見出しフォントは力強さと落ち着きを両立。

アクション部品

最小タップ領域: 44px。重要操作は塗り、通常操作はアウトラインを使用。

ボタン基準: 高さ 44px、ラベルは文頭のみ大文字。

状態ラベル

処理中承認済み要追記失敗

状態色は意味ベースで統一し、ジョブ・日報・RFI・出力で共通利用します。

現場UXルール

  1. 初期表示の主要アクションは5個以内。
  2. 最新出力は1タップで必ず表示。
  3. 質問は2〜3択、最大3問まで。
  4. 承認前は共有・外部出力を無効化。
  5. 写真とメモ入力を最優先導線に配置。

実装マッピング

  1. トークン定義: src/lib/design-system/tokens.ts
  2. CSS基盤: src/app/globals.css
  3. 案件ルーム適用: src/components/projects/ProjectWorkspace.tsx
  4. 参照仕様: docs/brand-design-system.md

ワークスペースへ戻る: 案件ルームを開く