akira/keinasystem
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
60dca6aab1aedc2e9eeb14c44c98bc04a629bc4b
keinasystem/04_画面設計書.md
Akira 60dca6aab1 📚 修正したドキュメント 
✅ 02_ユーザーストーリー.md - 作物マスタの定義を統一
✅ 03_データ仕様書.md - 作物・品種マスタを更新
✅ 04_画面設計書.md - 集計サイドバーと編集モーダルのUI
✅ 05_実装優先順位.md - Day 5-6に集計API・品種追加APIを追加
✅ 06_Gemini向け統合指示書.md - コード例を全面更新
2026-02-15 10:41:55 +09:00

695 lines
32 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 画面設計書
## 🎨 デザイン原則（再掲）
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など）
- **オートコンプリート**: 有効化
### ナビゲーション
- **ハンバーガーメニュー**: 右上に配置
- **戻るボタン**: 画面左上に配置
Reference in New Issue View Git Blame Copy Permalink