# 画面設計書 ## 🎨 デザイン原則（再掲） 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. ☐ 名称 住所 面積 作付 品種 操作│ ├──────────────────────────────────────────────────────────────┤ │ 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など） - **オートコンプリート**: 有効化 ### ナビゲーション - **ハンバーガーメニュー**: 右上に配置 - **戻るボタン**: 画面左上に配置