akira/keinasystem
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

移動

Browse Source
This commit is contained in:
Akira
2026-02-15 10:56:50 +09:00
parent 60dca6aab1
commit e4da194ebd
7 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

694
document/04_画面設計書.md Normal file
View File

@@ -0,0 +1,694 @@
# 画面設計書
## 🎨 デザイン原則（再掲）
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など）
- **オートコンプリート**: 有効化
### ナビゲーション
- **ハンバーガーメニュー**: 右上に配置
- **戻るボタン**: 画面左上に配置