695 lines
32 KiB
Markdown
695 lines
32 KiB
Markdown
# 画面設計書
|
||
|
||
## 🎨 デザイン原則（再掲）
|
||
|
||
1. **シンプル・イズ・ベスト**: 1画面1機能
|
||
2. **情報の優先順位**: 最重要情報を最も目立つ位置に
|
||
3. **エラーを起こしにくい**: 選択式優先、自由入力最小限
|
||
4. **スマホファースト（参照時）**: 文字16px以上、タップ領域44px以上
|
||
5. **既存データを尊重**: 紙の台帳と同じ感覚で使える
|
||
|
||
---
|
||
|
||
## 📱 画面一覧
|
||
|
||
### Phase 1（MVP）
|
||
1. **ログイン画面**
|
||
2. **ダッシュボード**（将来拡張用、Phase 1では簡易版）
|
||
3. **作付け計画一覧**（メイン画面）
|
||
4. **作付け計画編集**（モーダル/サイドパネル）
|
||
5. **圃場詳細**（スマホ参照用）
|
||
6. **申請書ダウンロード**
|
||
7. **データ管理**（インポート・エクスポート）
|
||
|
||
### Phase 2以降
|
||
8. 栽培履歴入力
|
||
9. 作業カレンダー
|
||
10. 資材計画
|
||
|
||
---
|
||
|
||
## 画面1: ログイン画面
|
||
|
||
### 目的
|
||
シンプルな認証（メール＋パスワード）
|
||
|
||
### レイアウト（PC/スマホ共通）
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ │
|
||
│ 🌾 Keina System │
|
||
│ 作付け計画管理システム │
|
||
│ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ メールアドレス │ │
|
||
│ │ [___________________] │ │
|
||
│ └───────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ パスワード │ │
|
||
│ │ [___________________] │ │
|
||
│ └───────────────────────┘ │
|
||
│ │
|
||
│ [ ログイン ] │
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件
|
||
- [ ] メールアドレスとパスワードで認証
|
||
- [ ] ログイン成功 → ダッシュボードへ遷移
|
||
- [ ] ログイン失敗 → エラーメッセージ表示
|
||
- [ ] 「パスワードを忘れた」リンク（Phase 2）
|
||
|
||
---
|
||
|
||
## 画面2: ダッシュボード
|
||
|
||
### 目的
|
||
システムの入り口（Phase 1では簡易版、将来拡張）
|
||
|
||
### レイアウト（PC）
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────┐
|
||
│ 🌾 Keina System 2025年度 ▼ 👤ログアウト │
|
||
├────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📊 概要 │
|
||
│ ┌────────────────┬────────────────┬─────────────┐│
|
||
│ │ 全圃場数 │ 作付け済み │ 未割当 ││
|
||
│ │ 39筆 │ 35筆 │ 4筆 ❗ ││
|
||
│ └────────────────┴────────────────┴─────────────┘│
|
||
│ │
|
||
│ 🔗 クイックアクセス │
|
||
│ ┌──────────────────────────────────────────────┐│
|
||
│ │ [📝 作付け計画を編集] [📄 申請書ダウンロード] ││
|
||
│ └──────────────────────────────────────────────┘│
|
||
│ │
|
||
│ 📌 最近の変更 │
|
||
│ • 2025/02/10: 田A に「米（にこまる）」を割当 │
|
||
│ • 2025/02/09: 田B を「休耕」に変更 │
|
||
│ │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件（Phase 1）
|
||
- [ ] 年度選択（ドロップダウン）
|
||
- [ ] 作付け状況のサマリー表示
|
||
- [ ] 「作付け計画を編集」→ 画面3へ
|
||
- [ ] 「申請書ダウンロード」→ 画面6へ
|
||
|
||
---
|
||
|
||
## 画面3: 作付け計画一覧（メイン画面）
|
||
|
||
### 目的
|
||
全圃場の作付け状況を一覧で確認・編集
|
||
|
||
### レイアウト（PC）
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────────┐
|
||
│ 🌾 Keina System > 作付け計画一覧 2025年度 ▼ 👤ログアウト │
|
||
├──────┬───────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 │ 🔍 [検索: 圃場名・住所_____________] 🔽絞込: [全て▼] │
|
||
│ 集計 │ │
|
||
│ │ ☐ 未割当のみ表示 [📋 前年度をコピー] [📊 申請書作成] │
|
||
│ ────────────────────────────────────────────────────────────────│
|
||
│ 米 │ No. ☐ 名称 住所 面積 作付 品種 操作 │
|
||
│15.3反│ ────────────────────────────────────────────────────────│
|
||
│┣にこ │ 1 ☐ おまけ 口神ノ川... 0.2反 米 にこまる [編集]│
|
||
││10.2反│ 2 ☐ 口神１反 口神ノ川... 1.2反 米 にこまる [編集]│
|
||
│┗たち │ 3 ☐ 口神北東 口神ノ川... 0.4反 野菜 トマト [編集]│
|
||
││5.1反│ 4 ☐ 口神北中 口神ノ川... 0.4反 ❗未設定 [割当]│
|
||
│ │ 5 ☐ 口神北西 口神ノ川... 0.5反 その他 完全休耕 [編集]│
|
||
│野菜 │ │
|
||
│3.2反 │ ... (39行) │
|
||
│ │ │
|
||
│その他│ ────────────────────────────────────────────────────────│
|
||
│1.5反 │ ページ: 1 / 2 表示件数: [25件▼] │
|
||
│ │ │
|
||
│未設定│ │
|
||
│2.0反❗ │
|
||
└──────┴───────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**サイドバー（開閉可能）:**
|
||
```
|
||
┌──────────────┐
|
||
│ [≡] 集計 │← トグルボタンで開閉
|
||
├──────────────┤
|
||
│ 合計 40.0反 │
|
||
│ │
|
||
│ 米 │
|
||
│ 15.3反 │
|
||
│ ├にこまる │
|
||
│ │ 10.2反 │
|
||
│ └たちはるか │
|
||
│ 5.1反 │
|
||
│ │
|
||
│ 野菜 │
|
||
│ 3.2反 │
|
||
│ ├トマト │
|
||
│ │ 1.8反 │
|
||
│ └キュウリ │
|
||
│ 1.4反 │
|
||
│ │
|
||
│ トウモロコシ │
|
||
│ 2.5反 │
|
||
│ │
|
||
│ エンドウ │
|
||
│ 1.8反 │
|
||
│ │
|
||
│ その他 │
|
||
│ 1.5反 │
|
||
│ ├完全休耕 │
|
||
│ │ 0.8反 │
|
||
│ └緑肥 │
|
||
│ 0.7反 │
|
||
│ │
|
||
│ ❗未設定 │
|
||
│ 2.0反 │
|
||
└──────────────┘
|
||
```
|
||
|
||
**サイドバー閉じた状態:**
|
||
```
|
||
┌───┐
|
||
│[☰]│← クリックで開く
|
||
└───┘
|
||
```
|
||
|
||
### レイアウト（スマホ）
|
||
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ 🌾 作付け計画 2025年度 ▼ ☰ │
|
||
├────────────────────────────────┤
|
||
│ 🔍 [検索_______________] [🔽] │
|
||
│ │
|
||
│ [📊 集計を表示] [前年度コピー]│← 集計はモーダル
|
||
├────────────────────────────────┤
|
||
│ ┌────────────────────────────┐│
|
||
│ │ おまけ ││
|
||
│ │ 口神ノ川足川 351 ││
|
||
│ │ 0.2反 | 米（にこまる） ││
|
||
│ │ [編集] ││
|
||
│ └────────────────────────────┘│
|
||
│ │
|
||
│ ┌────────────────────────────┐│
|
||
│ │ 口神 北中 ││
|
||
│ │ 口神ノ川１９８... ││
|
||
│ │ 0.4反 | ❗未設定 ││
|
||
│ │ [割当] ││
|
||
│ └────────────────────────────┘│
|
||
│ │
|
||
│ ... (39圃場) │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
**スマホ: 集計モーダル**
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ 集計 [×] │
|
||
├────────────────────────────────┤
|
||
│ │
|
||
│ 合計面積: 40.0反 │
|
||
│ │
|
||
│ 米: 15.3反 │
|
||
│ ├ にこまる: 10.2反 │
|
||
│ └ たちはるか: 5.1反 │
|
||
│ │
|
||
│ 野菜: 3.2反 │
|
||
│ ├ トマト: 1.8反 │
|
||
│ └ キュウリ: 1.4反 │
|
||
│ │
|
||
│ トウモロコシ: 2.5反 │
|
||
│ │
|
||
│ エンドウ: 1.8反 │
|
||
│ │
|
||
│ その他: 1.5反 │
|
||
│ ├ 完全休耕: 0.8反 │
|
||
│ └ 緑肥: 0.7反 │
|
||
│ │
|
||
│ ❗未設定: 2.0反 │
|
||
│ │
|
||
│ [閉じる] │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件
|
||
- [ ] 全圃場を一覧表示（39行）
|
||
- [ ] 各行に以下を表示:
|
||
- チェックボックス（一括操作用）
|
||
- 名称
|
||
- 住所
|
||
- 面積（反）
|
||
- 作付け作物（未設定の場合は警告色）
|
||
- 品種
|
||
- [編集]ボタン
|
||
- [ ] 検索機能:
|
||
- 圃場名・住所で部分一致検索
|
||
- リアルタイム絞り込み
|
||
- [ ] フィルタ機能:
|
||
- 作物で絞り込み（米、野菜、休耕など）
|
||
- 「未割当のみ」トグル
|
||
- [ ] 一括操作:
|
||
- 複数行を選択 → 「一括割当」ボタン表示
|
||
- 同じ作物を一括で割り当て
|
||
- [ ] [前年度をコピー]ボタン:
|
||
- 確認ダイアログ表示
|
||
- 前年度の作付けを全圃場にコピー
|
||
- [ ] [申請書作成]ボタン:
|
||
- 画面6へ遷移
|
||
- [ ] **集計サイドバー（PC）**:
|
||
- トグルボタンで開閉
|
||
- 作物別の合計面積
|
||
- 品種別の内訳（ツリー表示）
|
||
- 未設定の面積を警告表示
|
||
- [ ] **集計モーダル（スマホ）**:
|
||
- [📊 集計を表示]ボタンでモーダル表示
|
||
- PC版と同じ内容を縦スクロール表示
|
||
|
||
### デザインノート
|
||
- **未割当の強調**: 赤または黄色の背景色
|
||
- **チェックボックスの位置**: 行の左端（スマホでも押しやすい）
|
||
- **スマホ版**: カード型レイアウト（1圃場1カード）
|
||
- **サイドバーの幅**: 200px（固定）
|
||
- **集計の更新**: 作付け計画を編集するたびにリアルタイム更新
|
||
|
||
---
|
||
|
||
## 画面4: 作付け計画編集（モーダル）
|
||
|
||
### 目的
|
||
個別の圃場に作物を割り当てる
|
||
|
||
### レイアウト（PC - モーダルウィンドウ）
|
||
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ 作付け計画を編集 [×] │
|
||
├────────────────────────────────────┤
|
||
│ │
|
||
│ 圃場: 口神 北中 │
|
||
│ 住所: 口神ノ川１９８（笹ヶ谷374-1) │
|
||
│ 面積: 0.4反 (400m2) │
|
||
│ │
|
||
│ ───────────────────────────────── │
|
||
│ │
|
||
│ 作物 * │
|
||
│ ┌────────────────────────────────┐│
|
||
│ │ [米 ▼] ││
|
||
│ └────────────────────────────────┘│
|
||
│ │
|
||
│ 品種 * │
|
||
│ ┌────────────────────────────────┐│
|
||
│ │ [にこまる ▼] ││
|
||
│ │ - にこまる ││
|
||
│ │ - たちはるか ││
|
||
│ │ - たちはるか（特栽） ││
|
||
│ └────────────────────────────────┘│
|
||
│ [+ 新しい品種を追加] │
|
||
│ │
|
||
│ 備考 │
|
||
│ ┌────────────────────────────────┐│
|
||
│ │ [_____________________________]││
|
||
│ └────────────────────────────────┘│
|
||
│ │
|
||
│ [キャンセル] [保存] │
|
||
│ │
|
||
└────────────────────────────────────┘
|
||
```
|
||
|
||
### 作物選択のドロップダウン
|
||
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ • 米 │
|
||
│ • トウモロコシ │
|
||
│ • エンドウ │
|
||
│ • 野菜 │
|
||
│ • その他 │
|
||
└────────────────────────────────────┘
|
||
```
|
||
|
||
### 品種選択（すべての作物で統一）
|
||
|
||
**作物=「米」の場合:**
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ • にこまる │
|
||
│ • たちはるか │
|
||
│ • たちはるか（特栽） │
|
||
│ ──────────────────────────────── │
|
||
│ [+ 新しい品種を追加] │
|
||
└────────────────────────────────────┘
|
||
|
||
クリックすると:
|
||
┌────────────────────────────────────┐
|
||
│ 新しい品種名を入力: │
|
||
│ [___________________________] │
|
||
│ │
|
||
│ [キャンセル] [追加] │
|
||
└────────────────────────────────────┘
|
||
```
|
||
|
||
**作物=「トウモロコシ」の場合:**
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ （まだ品種が登録されていません） │
|
||
│ ──────────────────────────────── │
|
||
│ [+ 新しい品種を追加] │
|
||
└────────────────────────────────────┘
|
||
```
|
||
|
||
**作物=「その他」の場合:**
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ • 完全休耕 │
|
||
│ • 緑肥（ヘアリーベッチ） │
|
||
│ • 緑肥（レンゲ） │
|
||
│ • 景観作物（コスモス） │
|
||
│ • 景観作物（ヒマワリ） │
|
||
│ ──────────────────────────────── │
|
||
│ [+ 新しい品種を追加] │
|
||
└────────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件
|
||
- [ ] 作物をドロップダウンで選択
|
||
- [ ] **すべての作物で品種選択UIは統一**
|
||
- プリセット品種のドロップダウン
|
||
- [+ 新しい品種を追加]ボタンは常に表示
|
||
- 作物による操作の違いなし
|
||
- [ ] 新しい品種の追加:
|
||
- [+ 新しい品種を追加]をクリック
|
||
- インライン入力フィールド表示
|
||
- 入力後、その場でプリセットに追加
|
||
- データベースに永続化（次回から選択可能）
|
||
- [ ] 備考欄（任意）
|
||
- [ ] [保存]ボタン → 作付け計画を保存して一覧に戻る
|
||
- [ ] [キャンセル]ボタン → 変更を破棄して一覧に戻る
|
||
- [ ] **集計のリアルタイム更新**:
|
||
- 保存すると、サイドバーの集計が即座に更新される
|
||
|
||
### 一括割当の場合
|
||
- モーダルのタイトルを「一括割当」に変更
|
||
- 「圃場: 5件選択中」と表示
|
||
- 保存時、選択中の全圃場に同じ作付けを適用
|
||
|
||
### デザインノート
|
||
- **UIの統一性**: どの作物を選んでも操作フローが同じ
|
||
- **品種の追加**: その場で追加できる（別画面に遷移しない）
|
||
- **プリセットの管理**: 一度追加した品種は、全ユーザーで共有（マスタ化）
|
||
|
||
---
|
||
|
||
## 画面5: 圃場詳細（スマホ参照用）
|
||
|
||
### 目的
|
||
田んぼにいるときに、その圃場の情報を確認
|
||
|
||
### レイアウト（スマホ）
|
||
|
||
```
|
||
┌────────────────────────────────┐
|
||
│ ← 一覧に戻る 2025年度 │
|
||
├────────────────────────────────┤
|
||
│ │
|
||
│ 口神 北中 │
|
||
│ │
|
||
│ 📍 住所 │
|
||
│ 口神ノ川１９８（笹ヶ谷374-1) │
|
||
│ │
|
||
│ 📏 面積 │
|
||
│ 0.4反 (400m2) │
|
||
│ │
|
||
│ 🌾 今年の作付け │
|
||
│ 米（にこまる） │
|
||
│ │
|
||
│ 📋 共済情報 │
|
||
│ 耕地番号: 2 / 分筆: 2 │
|
||
│ │
|
||
│ 📋 中山間情報 │
|
||
│ ID: 50 │
|
||
│ │
|
||
│ ───────────────────────────── │
|
||
│ │
|
||
│ 📅 過去の作付け履歴（Phase 2） │
|
||
│ • 2024年: 米（にこまる） │
|
||
│ • 2023年: 米（にこまる） │
|
||
│ • 2022年: 休耕 │
|
||
│ │
|
||
└────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件
|
||
- [ ] 圃場の基本情報を見やすく表示
|
||
- [ ] 文字サイズ: 18px以上（スマホで見やすく）
|
||
- [ ] 余白: 十分に確保（誤タップ防止）
|
||
- [ ] 将来的に栽培履歴も表示（Phase 2）
|
||
|
||
---
|
||
|
||
## 画面6: 申請書ダウンロード
|
||
|
||
### 目的
|
||
水稲共済細目書・中山間交付金のPDFをダウンロード
|
||
|
||
### レイアウト（PC）
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────┐
|
||
│ 🌾 Keina System > 申請書ダウンロード 👤ログアウト │
|
||
├────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 年度: [2025年度 ▼] │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────┐│
|
||
│ │ 📄 水稲共済細目書 ││
|
||
│ │ ││
|
||
│ │ 提出時期: 2月・5月（年2回） ││
|
||
│ │ 区画数: 31区画 ││
|
||
│ │ ││
|
||
│ │ ⚠️ 未割当の圃場: 4筆 ││
|
||
│ │ → 作付け計画を完成させてください ││
|
||
│ │ ││
|
||
│ │ [プレビュー] [PDFダウンロード] ││
|
||
│ └────────────────────────────────────────────────┘│
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────┐│
|
||
│ │ 📄 中山間地域等直接支払交付金 ││
|
||
│ │ ││
|
||
│ │ 提出時期: 5月（年1回） ││
|
||
│ │ 区画数: 71区画 ││
|
||
│ │ ││
|
||
│ │ ✅ 全て割当済み ││
|
||
│ │ ││
|
||
│ │ [プレビュー] [PDFダウンロード] ││
|
||
│ └────────────────────────────────────────────────┘│
|
||
│ │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件
|
||
- [ ] 年度を選択
|
||
- [ ] 各申請書について:
|
||
- 区画数を表示
|
||
- 未割当の警告（ある場合）
|
||
- [プレビュー]ボタン → 新しいタブでPDFプレビュー
|
||
- [PDFダウンロード]ボタン → ファイルダウンロード
|
||
- [ ] ダウンロードされるPDFのファイル名:
|
||
- 水稲共済: `水稲共済細目書_2025年度.pdf`
|
||
- 中山間: `中山間交付金_2025年度.pdf`
|
||
- [ ] PDFはA4サイズ、印刷してそのまま提出可能
|
||
|
||
### プレビュー機能
|
||
|
||
[プレビュー]ボタンをクリックすると、新しいタブでPDFを表示：
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────┐
|
||
│ ← 戻る 水稲共済細目書_2025年度.pdf [印刷] [⬇] │
|
||
├────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 水稲共済細目書（2025年度） │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────┐│
|
||
│ │ 耕地 分筆 地名地番 面積 作付 品種 ││
|
||
│ │ ──────────────────────────────────────────── ││
|
||
│ │ 1 1 四万十町 ... 2.2 米 にこまる ││
|
||
│ │ 2 1 四万十町 ... 25.4 米 にこまる ││
|
||
│ │ 2 2 四万十町 ... 12.0 米,野菜 ... ││
|
||
│ │ ││
|
||
│ │ ... (31行) ││
|
||
│ └────────────────────────────────────────────────┘│
|
||
│ │
|
||
│ 1 / 2 │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
- [ ] ブラウザの標準PDFビューアで表示
|
||
- [ ] 印刷ボタンで直接印刷可能
|
||
- [ ] ダウンロードボタンでローカル保存
|
||
|
||
---
|
||
|
||
## 画面7: データ管理
|
||
|
||
### 目的
|
||
圃場マスタや申請マスタのインポート・エクスポート
|
||
|
||
### レイアウト（PC）
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────┐
|
||
│ 🌾 Keina System > データ管理 👤ログアウト │
|
||
├────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📥 データインポート │
|
||
│ │
|
||
│ タブ: [吉田農地台帳] [共済マスタ] [中山間マスタ] │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────┐│
|
||
│ │ 吉田農地台帳 (実圃場データ) ││
|
||
│ │ ││
|
||
│ │ 最終更新: 2025/02/01 ││
|
||
│ │ 登録圃場数: 39筆 ││
|
||
│ │ ││
|
||
│ │ ファイルを選択: [ファイルを選択] 📎 ││
|
||
│ │ ││
|
||
│ │ ⚠️ 既存データは上書きされます ││
|
||
│ │ ││
|
||
│ │ [プレビュー] [インポート実行] ││
|
||
│ └────────────────────────────────────────────────┘│
|
||
│ │
|
||
│ 📤 データエクスポート │
|
||
│ │
|
||
│ • [全圃場データ (CSV)] ※バックアップ用 │
|
||
│ • [作付け計画 (CSV)] ※バックアップ用 │
|
||
│ • [バックアップ (全データ ZIP)] │
|
||
│ │
|
||
│ 📄 申請書PDF生成 │
|
||
│ → 「申請書ダウンロード」画面へ │
|
||
│ │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 機能要件
|
||
- [ ] 3種類のマスタをタブで切り替え
|
||
- [ ] ファイルアップロード（ODS/Excel対応）
|
||
- [ ] プレビュー機能（インポート前に確認）
|
||
- [ ] インポート実行（確認ダイアログ付き）
|
||
- [ ] エクスポート機能（CSV/ZIP）
|
||
|
||
---
|
||
|
||
## 🎨 UI共通仕様
|
||
|
||
### カラーパレット
|
||
|
||
```
|
||
プライマリカラー（緑系）:
|
||
#2E7D32 濃い緑（ヘッダー、ボタン）
|
||
#4CAF50 緑（アクセント）
|
||
#81C784 淡い緑（ホバー）
|
||
|
||
セカンダリカラー（土系）:
|
||
#8D6E63 茶色（サブヘッダー）
|
||
#BCAAA4 淡い茶（背景）
|
||
|
||
警告・状態色:
|
||
#F44336 赤（エラー、未設定）
|
||
#FF9800 オレンジ（警告）
|
||
#4CAF50 緑（成功）
|
||
#2196F3 青（情報）
|
||
|
||
グレースケール:
|
||
#212121 ダークグレー（テキスト）
|
||
#757575 グレー（サブテキスト）
|
||
#E0E0E0 ライトグレー（ボーダー）
|
||
#FAFAFA ホワイト（背景）
|
||
```
|
||
|
||
### タイポグラフィ
|
||
|
||
```
|
||
フォント:
|
||
- システムフォント優先
|
||
- 日本語: "Hiragino Sans", "Yu Gothic", sans-serif
|
||
- 英数字: "Roboto", "Helvetica", sans-serif
|
||
|
||
サイズ:
|
||
- 見出し(h1): 28px / 太字
|
||
- 見出し(h2): 22px / 太字
|
||
- 本文: 16px / 通常
|
||
- 小文字: 14px / 通常
|
||
|
||
行間:
|
||
- 本文: 1.6
|
||
- 見出し: 1.3
|
||
```
|
||
|
||
### スペーシング
|
||
|
||
```
|
||
余白の基本単位: 8px
|
||
|
||
8px: 最小余白
|
||
16px: 標準余白（要素間）
|
||
24px: セクション間
|
||
32px: 画面の上下余白
|
||
```
|
||
|
||
### レスポンシブブレークポイント
|
||
|
||
```
|
||
スマートフォン: 〜767px
|
||
タブレット: 768px〜1023px
|
||
PC: 1024px〜
|
||
```
|
||
|
||
---
|
||
|
||
## 🖱️ インタラクション
|
||
|
||
### ボタン
|
||
- **プライマリボタン**: 緑背景、白文字、影付き
|
||
- **セカンダリボタン**: 白背景、緑文字、ボーダー付き
|
||
- **ホバー**: 10%明るく、カーソルpointer
|
||
- **押下**: 5%暗く、影を小さく
|
||
|
||
### モーダル
|
||
- **背景**: 半透明黒（opacity: 0.5）
|
||
- **アニメーション**: フェードイン（0.2秒）
|
||
- **閉じる**: 背景クリック or [×]ボタン or Escキー
|
||
|
||
### トースト通知
|
||
- **位置**: 画面右上
|
||
- **表示時間**: 3秒（自動消去）
|
||
- **種類**: 成功（緑）、エラー（赤）、警告（オレンジ）、情報（青）
|
||
|
||
---
|
||
|
||
## 📱 スマホ特有の配慮
|
||
|
||
### タップ領域
|
||
- **最小サイズ**: 44px × 44px
|
||
- **余白**: ボタン間は最低8px
|
||
|
||
### スクロール
|
||
- **慣性スクロール**: `-webkit-overflow-scrolling: touch`
|
||
- **無限スクロール**: 不要（全39筆なので一覧でOK）
|
||
|
||
### 入力
|
||
- **キーボードタイプ**: 適切に指定（email, number, textなど）
|
||
- **オートコンプリート**: 有効化
|
||
|
||
### ナビゲーション
|
||
- **ハンバーガーメニュー**: 右上に配置
|
||
- **戻るボタン**: 画面左上に配置
|