27 KiB
27 KiB
画面設計書
🎨 デザイン原則（再掲）
- シンプル・イズ・ベスト: 1画面1機能
- 情報の優先順位: 最重要情報を最も目立つ位置に
- エラーを起こしにくい: 選択式優先、自由入力最小限
- スマホファースト（参照時）: 文字16px以上、タップ領域44px以上
- 既存データを尊重: 紙の台帳と同じ感覚で使える
📱 画面一覧
Phase 1（MVP）
- ログイン画面
- ダッシュボード（将来拡張用、Phase 1では簡易版）
- 作付け計画一覧（メイン画面）
- 作付け計画編集（モーダル/サイドパネル）
- 圃場詳細（スマホ参照用）
- 申請書ダウンロード
- データ管理（インポート・エクスポート）
Phase 2以降
- 栽培履歴入力
- 作業カレンダー
- 資材計画
画面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. ☐ 名称 住所 面積 作付 品種 操作│
├──────────────────────────────────────────────────────────────┤
│ 1 ☐ おまけ 口神ノ川足川 351 0.2反 米 にこまる [編集]│
│ 2 ☐ 口神１反２畝 口神ノ川１９８... 1.2反 米 にこまる [編集]│
│ 3 ☐ 口神 北東 口神ノ川１９８... 0.4反 野菜 トマト [編集]│
│ 4 ☐ 口神 北中 口神ノ川１９８... 0.4反 ❗未設定 [割当]│
│ 5 ☐ 口神 北西 口神ノ川１９８... 0.5反 休耕 - [編集]│
│ │
│ ... (39行) │
│ │
├──────────────────────────────────────────────────────────────┤
│ ページ: 1 / 2 表示件数: [25件▼] │
└──────────────────────────────────────────────────────────────┘
レイアウト（スマホ）
┌────────────────────────────────┐
│ 🌾 作付け計画 2025年度 ▼ ☰ │
├────────────────────────────────┤
│ 🔍 [検索_______________] [🔽] │
├────────────────────────────────┤
│ ┌────────────────────────────┐│
│ │ おまけ ││
│ │ 口神ノ川足川 351 ││
│ │ 0.2反 | 米（にこまる） ││
│ │ [編集] ││
│ └────────────────────────────┘│
│ │
│ ┌────────────────────────────┐│
│ │ 口神 北中 ││
│ │ 口神ノ川１９８... ││
│ │ 0.4反 | ❗未設定 ││
│ │ [割当] ││
│ └────────────────────────────┘│
│ │
│ ... (39圃場) │
│ │
└────────────────────────────────┘
機能要件
- 全圃場を一覧表示（39行）
- 各行に以下を表示:
- チェックボックス（一括操作用）
- 名称
- 住所
- 面積（反）
- 作付け作物（未設定の場合は警告色）
- 品種
- [編集]ボタン
- 検索機能:
- 圃場名・住所で部分一致検索
- リアルタイム絞り込み
- フィルタ機能:
- 作物で絞り込み（米、野菜、休耕など）
- 「未割当のみ」トグル
- 一括操作:
- 複数行を選択 → 「一括割当」ボタン表示
- 同じ作物を一括で割り当て
- [前年度をコピー]ボタン:
- 確認ダイアログ表示
- 前年度の作付けを全圃場にコピー
- [申請書作成]ボタン:
- 画面6へ遷移
デザインノート
- 未割当の強調: 赤または黄色の背景色
- チェックボックスの位置: 行の左端（スマホでも押しやすい）
- スマホ版: カード型レイアウト（1圃場1カード）
画面4: 作付け計画編集（モーダル）
目的
個別の圃場に作物を割り当てる
レイアウト（PC - モーダルウィンドウ）
┌────────────────────────────────────┐
│ 作付け計画を編集 [×] │
├────────────────────────────────────┤
│ │
│ 圃場: 口神 北中 │
│ 住所: 口神ノ川１９８（笹ヶ谷374-1) │
│ 面積: 0.4反 (400m2) │
│ │
│ ───────────────────────────────── │
│ │
│ 作物 * │
│ ┌────────────────────────────────┐│
│ │ [米 ▼] ││
│ └────────────────────────────────┘│
│ │
│ 品種 │
│ ┌────────────────────────────────┐│
│ │ [にこまる ▼] ││
│ └────────────────────────────────┘│
│ │
│ 備考 │
│ ┌────────────────────────────────┐│
│ │ [_____________________________]││
│ └────────────────────────────────┘│
│ │
│ [キャンセル] [保存] │
│ │
└────────────────────────────────────┘
作物選択のドロップダウン
┌────────────────────────────────────┐
│ 作付けしない │
│ • 休耕 │
│ • 緑肥 │
│ • 景観作物 │
│ • その他野菜 │
│ │
│ 作付けする │
│ • 米 │
│ • トウモロコシ │
│ • エンドウ │
│ • 野菜 │
└────────────────────────────────────┘
品種選択（作物に応じて動的に変化）
作物=「米」の場合:
┌────────────────────────────────────┐
│ • にこまる │
│ • たちはるか │
│ • たちはるか（特栽） │
│ • [その他: 自由入力_____________] │
└────────────────────────────────────┘
作物=「トウモロコシ」の場合:
┌────────────────────────────────────┐
│ [自由入力_____________________] │
│ （品種は毎年変わるため） │
└────────────────────────────────────┘
作物=「休耕」などの場合:
（品種選択フィールドは非表示）
機能要件
- 作物をドロップダウンで選択
- 作物に応じて品種選択が動的に変化
- 「作付けしない」系の作物は、品種選択を非表示
- 自由入力欄を用意（トウモロコシ、野菜など）
- [保存]ボタン → 作付け計画を保存して一覧に戻る
- [キャンセル]ボタン → 変更を破棄して一覧に戻る
一括割当の場合
- モーダルのタイトルを「一括割当」に変更
- 「圃場: 5件選択中」と表示
- 保存時、選択中の全圃場に同じ作付けを適用
画面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など）
- オートコンプリート: 有効化
ナビゲーション
- ハンバーガーメニュー: 右上に配置
- 戻るボタン: 画面左上に配置