# UIデザインガイドライン

## 1. ヘッダー
- 背景色: #000080（ネイビー）
- インデックス: ロゴ表示
- 各機能画面: 「← 戻る」ボタン + 画面タイトル
- ユーザー名: クリックでドロップダウンメニュー表示
  - マイページ
  - ログアウト

## 2. カラーパレット
- プライマリ（通常ボタン）: #000080（ネイビー）
- ボタンテキスト: 白
- ホバー時:
  - 通常ボタン: #0000a0（明るいネイビー）
  - 削除ボタン: #ff4444（赤）
  - 警告ボタン: #ffaa00（オレンジ）

## 3. ボタンの意味付け
- ネイビー背景: 通常操作（登録・保存・遷移）
- 赤背景: 削除・取消など不可逆な操作
- オレンジ背景: 注意を要する操作（借方/貸方入れ替えなど）

## 4. アイコンについて

### 4.1 原則：アイコン不使用
- 画面上のアイコンは原則として一切使用しない
- すべてテキストで表現する
- ボタンはテキストのみ（例：削除、入れ替え、取込実行）

### 4.2 例外：システム指示があった場合のみ使用可
- アイコンが必要な場面は都度システム管理者が明示的に指示する
- 指示なしにアイコンを追加してはならない
- 現時点で使用が許可されているアイコン：**なし**

### 4.3 絵文字の使用禁止
- 絵文字（🚧 ⚡ 🔐 等）はUI上で一切使用しない
- コメント・ドキュメント内のみ使用可

## 5. レスポンシブ対応
- 768px以下: ボタン・フォーム要素を縦積みに
- 480px以下: フォントサイズ調整

## 6. ホバーエフェクト
- 全てのボタン: opacity 0.8 + 色変化
- クリック時: opacity 0.6（瞬間）
- 削除ボタン・警告ボタンは通常時はネイビーで統一し、ホバー時にのみ赤/オレンジに変化する

## 7. メニューボタン文言（インデックス用）

| タイトル | ボタン |
|---------|--------|
| 案件管理 | 案件管理へ |
| 営業管理 | 顧客・見積管理 |
| 会計 | 会計システムへ |
| 書庫・資料 | 書類を探す |
| 管理者 | 設定・管理 |
| マイページ | マイページへ |
| 事業者情報 | 事業者情報を見る |
| 労務関係 | 社会保険CSV出力 |

## 8. フォーム要素のサイズ

### 8.1 基本サイズ
- 入力フィールドの高さ: 38px
- ボタンの高さ: 38px（入力フィールドと揃える）
- フォントサイズ: 14px（PC）、16px（スマホ）
- 左右パディング: 0.5rem（8px）

### 8.2 フィールド幅の原則
- 日付・借方科目・貸方科目・金額は全て同じ幅とする
- 税区分のみ狭くする
- 摘要・案件IDは横並びで十分な幅を確保

### 8.3 揃えの原則
- 同一行に入力フィールドとボタンが並ぶ場合、高さは必ず38pxで揃える
- ボタンは高さを揃えた上で、色（ネイビー/赤/オレンジ）で意味を区別する

### 8.4 補助ボタンの扱い
- グリッド内のアイコンボタンなど、どうしても小さく見せたい場合は34px〜36pxも可
- ただし、タップ領域（ヒットエリア）は38px以上を確保すること

## 9. サンプル・ダミーデータについて

### 9.1 HTMLへのサンプル禁止
- HTMLファイルにサンプルデータ・ダミーデータを埋め込んではならない
- データがない状態で正しく動作すること（「データがありません」等の空表示が正）
- サンプルがあると動作確認が曖昧になり、バグの発見が遅れる

### 9.2 JSONマスタへのサンプル
- 開発・テスト目的でサンプルデータが必要な場合はJSONマスタに限り許可
- 必ず `"_sample": true` フラグを付けること
- 稼働時に `_sample: true` のデータを一括削除できるようにすること

## 10. 日付入力ルール

### 10.1 手入力の場合
- 月/日形式で入力（例：3/15）
- 年は画面上部で選択中の年が自動セットされる

### 10.2 レシートOCR読取の場合
- レシートから読み取った日付をそのまま自動セット（年月日すべて）
- 読取年が現在選択中の年と異なる場合は**年プルダウンを自動切替**してデータを再読み込みする
- 読取結果が正しいか確認できるようプレビュー表示する
- 訂正可能

### 8.5 メニューカードの配置
- SPS BACK OFFICE index のメニューカード内のタイトル・ボタンはセンター揃えとする
- `.menu-card h3`：`text-align: center`
- `.menu-button`：`text-align: center`

---

## 12. ヘッダー帯の共通仕様

### 12.1 全画面共通
- `padding: 0.8rem 2rem`（SPS BACK OFFICE indexに統一）
- 構成：左・中央・右の3要素をflexで配置（`justify-content: space-between`）

### 12.2 各要素の内容

| 位置 | SPS BACK OFFICE index | 各システムindex | 各管理画面 |
|------|----------------------|----------------|-----------|
| 左 | ロゴ画像 | ←システムTOPへ | ←○○TOPへ |
| 中央 | なし | システム名（2行可） | 画面名 |
| 右 | ユーザー名 | ユーザー名 | ユーザー名 |

### 12.3 システム名の2行表記
SPS・SCSPSの両方にアクセス可能なシステムは、会社切替に連動してヘッダー中央を2行で表示する。

```
会計システム
   -SCSPS-
```

- 2行目はセンター揃え
- 2行目のフォントサイズ・スタイルは各担当判断
- 2行表記が必要かどうかは各担当が真柴さんと打ち合わせの上決定する

---

## 13. 各システムindexのカード仕様

### 13.1 ボックス・ボタンサイズ
SPS BACK OFFICE indexに統一する。

### 13.2 カード構成
各システムindexのカードは以下の構成とする。

```
説明文
━━━━━━━━━━━━  （border: 1px solid #2a2a3a）
ボタン（表題を兼ねる）
```

- h3タイトルは不要。ボタン文言が表題を兼ねる
- 説明文の色は `#a0a0b0` 程度・小さめ（font-size: 0.8rem 程度）
- 飾り罫は `border: 1px solid #2a2a3a`
- 説明文・ボタン文言は各担当が真柴さんと打ち合わせの上決定する

### 13.3 メニュー形式の使い分け
- リンク数が少ない → カード＋ボタン形式
- リンク数が多い → テキストリンク形式（会計システム等）
- いずれの場合もヘッダー帯・ボックスサイズは統一する
- 各システムindexから先の各機能画面は機能優先とし、カード仕様の適用外とする

---

## 14. 改訂履歴
| 日付 | 版 | 担当 | 内容 |
|------|----|------|------|
| 2026-03-12 | 1.0 | 全体管理者 | 初版作成 |
| 2026-03-15 | 1.1 | 全体管理者 | ヘッダーにユーザードロップダウンメニュー追記 |
| 2026-03-16 | 1.2 | 全体管理者 | アイコン不使用を明記、フォーム要素のサイズ詳細を追加 |
| 2026-03-18 | 1.3 | 全体管理者 | アイコン例外規定・絵文字禁止・サンプルデータ禁止・日付入力ルールを追加 |
| 2026-04-06 | 1.4 | 全体管理者（10代目） | 8.5節追加：メニューカード内テキストのセンター揃えを明記 |
| 2026-04-06 | 1.5 | 全体管理者（10代目） | 12節追加（ヘッダー帯共通仕様）、13節追加（各システムindexカード仕様）。旧11節を14節に移設 |