# 画面設計書 > **最終更新**: 2026-02-16 > **変更履歴**: 実装済み機能との差異を解消（B-1〜B-5, C-6, E-1 反映） ## 🎨 デザイン原則（再掲） 1. **シンプル・イズ・ベスト**: 1画面1機能 2. **情報の優先順位**: 最重要情報を最も目立つ位置に 3. **エラーを起こしにくい**: 選択式優先、自由入力最小限 4. **スマホファースト（参照時）**: 文字16px以上、タップ領域44px以上 5. **既存データを尊重**: 紙の台帳と同じ感覚で使える --- ## 🧭 共通ナビゲーション（Navbar） ### PC レイアウト 上部に水平ナビゲーションバーを常時表示。ブランド名「KeinaSystem」と主要画面へのリンクを配置。 ``` ┌──────────────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] [ログアウト] │ └──────────────────────────────────────────────────────────────┘ ``` ### ナビゲーション項目 | アイコン | ラベル | パス | 説明 | |---------|--------|------|------| | 🌾 (Wheat) | 作付け計画 | `/allocation` | 作付け計画編集画面（メイン） | | 📍 (MapPin) | 圃場管理 | `/fields` | 圃場一覧・編集 | | 📄 (FileText) | 帳票出力 | `/reports` | 申請書PDFダウンロード | | ⬆️ (Upload) | データ取込 | `/import` | マスタインポート | ### 仕様 - アクティブなページのリンクは緑背景でハイライト - ログアウトボタンは右端に配置 - スマホではレスポンシブにタブバーまたはハンバーガーメニューに切り替え --- ## 📱 画面一覧 ### Phase 1（MVP） 1. **ログイン画面** (`/login`) 2. **ダッシュボード** (`/`) — 将来拡張用、Phase 1では簡易版 3. **作付け計画一覧・編集** (`/allocation`) — メイン画面、インライン編集方式 4. **圃場管理一覧** (`/fields`) — 圃場の一覧表示・グループ管理・表示順管理 5. **圃場詳細・編集** (`/fields/[id]`) — 個別圃場の情報編集 6. **圃場新規作成** (`/fields/new`) — 手動での圃場登録 7. **申請書ダウンロード** (`/reports`) — PDFダウンロード 8. **データ取込** (`/import`) — インポート ### Phase 2以降 9. 栽培履歴入力 10. 作業カレンダー 11. 資材計画 --- ## 画面1: ログイン画面 ### 目的 シンプルな認証（ユーザー名＋パスワード） ### レイアウト（PC/スマホ共通） ``` ┌─────────────────────────────────────┐ │ │ │ 🌾 Keina System │ │ 作付け計画管理システム │ │ │ │ ┌───────────────────────┐ │ │ │ ユーザー名 │ │ │ │ [___________________] │ │ │ └───────────────────────┘ │ │ │ │ ┌───────────────────────┐ │ │ │ パスワード │ │ │ │ [___________________] │ │ │ └───────────────────────┘ │ │ │ │ [ ログイン ] │ │ │ └─────────────────────────────────────┘ ``` ### 機能要件 - [x] ユーザー名とパスワードで認証（JWT） - [x] ログイン成功 → 作付け計画画面へ遷移 - [x] ログイン失敗 → エラーメッセージ表示 - [ ] 「パスワードを忘れた」リンク（Phase 2） --- ## 画面2: ダッシュボード ### 目的 システムの入り口（Phase 1では簡易版、将来拡張） ### 現在の実装 - `/` アクセス時、トークンの有無で `/allocation`（ログイン済み）か `/login`（未ログイン）にリダイレクト - ダッシュボード画面自体は未実装 ### レイアウト（将来実装予定、PC） ``` ┌────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] ... │ ├────────────────────────────────────────────────────┤ │ │ │ 📊 概要 │ │ ┌────────────────┬────────────────┬─────────────┐│ │ │ 全圃場数 │ 作付け済み │ 未割当 ││ │ │ 39筆 │ 35筆 │ 4筆 ❗ ││ │ └────────────────┴────────────────┴─────────────┘│ │ │ │ 🔗 クイックアクセス │ │ ┌──────────────────────────────────────────────┐│ │ │ [📝 作付け計画を編集] [📄 申請書ダウンロード] ││ │ └──────────────────────────────────────────────┘│ │ │ │ 📌 最近の変更 │ │ • 2025/02/10: 田A に「米（にこまる）」を割当 │ │ • 2025/02/09: 田B を「休耕」に変更 │ │ │ └────────────────────────────────────────────────────┘ ``` ### 機能要件（将来実装予定） - [ ] 年度選択（ドロップダウン） - [ ] 作付け状況のサマリー表示 - [ ] 「作付け計画を編集」→ 画面3へ - [ ] 「申請書ダウンロード」→ 画面7へ - [ ] 将来の機能追加時にボタンを追加していく想定 --- ## 画面3: 作付け計画一覧・編集（メイン画面） ### 目的 全圃場の作付け状況を一覧で確認し、**インライン**で直接編集 ### 編集方式 **インライン編集**を採用（モーダルではない）。テーブル行内のドロップダウンで作物・品種を選択し、変更は即座にAPIに保存される。 ### レイアウト（PC） ``` ┌──────────────────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │ ├──────┬───────────────────────────────────────────────────────────┤ │ │ │ │ 📊 │ 年度: [2025 ▼] 並び順: [カスタム順 ▼] │ │ 集計 │ │ │ │ ──────────────────────────────────────────────────────── │ │ ──── │ グループ 圃場名 面積 作物 品種 備考 順序│ │ 合計 │ ──────────────────────────────────────────────────────── │ │20.0反│ [口神_▼] おまけ 0.2反 [米 ▼] [にこまる▼] [___] ↑↓│ │ │ [口神_▼] 口神１反 1.2反 [米 ▼] [にこまる▼] [___] ↑↓│ │ 米 │ [口神_▼] 口神北東 0.4反 [野菜 ▼] [トマト▼] [___] ↑↓│ │15.3反│ [南__▼] 口神北中 0.4反 [-- ▼] [---------] [___] ↑↓│ │┣にこ │ [南__▼] 口神北西 0.5反 [その他 ▼] [完全休耕▼] [___] ↑↓│ ││10.2反│ │ │┗たち │ ... (39行) │ ││5.1反│ │ │ │ │ │未設定│ │ │2.0反❗ │ └──────┴───────────────────────────────────────────────────────────┘ ``` **サイドバー（集計パネル、開閉可能）:** ``` ┌──────────────┐ │ 集計 [×] │← 閉じるボタン ├──────────────┤ │ 合計 20.0反 │ │ │ │ 米 │ │ 15.3反 │ │ ├にこまる │ │ │ 10.2反 │ │ └たちはるか │ │ 5.1反 │ │ │ │ 野菜 │ │ 3.2反 │ │ │ │ その他 │ │ 1.5反 │ │ │ │ ❗未設定 │ │ 2.0反 │ └──────────────┘ ``` ### レイアウト（スマホ） ``` ┌────────────────────────────────────┐ │ 🌾 作付け計画 [2025▼] [集計] ☰ │ ├────────────────────────────────────┤ │ 並び順: [カスタム順 ▼] │ ├────────────────────────────────────┤ │ ┌────────────────────────────────┐│ │ │ おまけ 0.2反 ││ │ │ グループ: [口神___▼] ││ │ │ 作物: [米 ▼] 品種: [にこまる▼]││ │ │ 備考: [___________________] ││ │ └────────────────────────────────┘│ │ │ │ ┌────────────────────────────────┐│ │ │ 口神 北中 0.4反 ││ │ │ グループ: [南___▼] ││ │ │ 作物: [-- ▼] 品種: [------] ││ │ │ 備考: [___________________] ││ │ └────────────────────────────────┘│ │ │ │ ... (39圃場) │ └────────────────────────────────────┘ ``` **スマホ: 集計モーダル**（[集計]ボタンで表示） ``` ┌────────────────────────────────┐ │ 集計 [×] │ ├────────────────────────────────┤ │ 合計面積: 20.0反 │ │ │ │ 米: 15.3反 │ │ ├ にこまる: 10.2反 │ │ └ たちはるか: 5.1反 │ │ │ │ 野菜: 3.2反 │ │ │ │ その他: 1.5反 │ │ │ │ ❗未設定: 2.0反 │ │ │ │ [閉じる] │ └────────────────────────────────┘ ``` ### 機能要件 - [x] 全圃場を一覧表示（39行） - [x] 各行に以下を表示: - グループ名（インライン編集可能、datalist補完付き） - 圃場名 - 面積（反） - 作物（ドロップダウン、インライン選択） - 品種（ドロップダウン、作物選択後に有効化） - 備考（テキスト入力） - 表示順変更ボタン（↑↓、カスタム順モード時のみ） - [x] 年度切り替え（ドロップダウン） - [x] 並び替え機能: - カスタム順（display_order） - グループ順（group_name） - 作付け順（crop別） - [x] **インライン即時保存**: 作物・品種・備考を変更すると即座にAPIに保存（画面遷移なし、スクロール位置維持） - [x] **集計サイドバー（PC）**: - 閉じるボタンで非表示可能 - 作物別の合計面積 - 品種別の内訳（ツリー表示、展開可能） - 未設定の面積を警告表示 - 作付け変更時にリアルタイム更新 - [x] **集計モーダル（スマホ）**: - [集計]ボタンでサイドパネル表示 - PC版と同じ内容 - [ ] 検索機能（圃場名・住所で部分一致検索）— **未実装** - [ ] フィルタ機能（作物で絞り込み、未割当のみトグル）— **未実装** - [ ] チェックボックスによる一括操作 — **未実装** - [ ] [前年度をコピー]ボタン — **Backend APIあり、Frontendボタン未実装** ### デザインノート - **未割当の強調**: 作物未設定の行は目立つ表示 - **即時保存**: ユーザーが選択を変更するたびにバックグラウンドで保存（ローディングスピナーなし） - **スクロール維持**: 保存時に画面がリセットされない - **サイドバーの幅**: 約200px（固定） --- ## 画面4: 圃場管理一覧 ### 目的 圃場マスタの管理（一覧表示、グループ編集、表示順変更、削除） ### レイアウト（PC） ``` ┌──────────────────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │ ├──────────────────────────────────────────────────────────────────┤ │ │ │ 並び順: [表示順 ▼] [+ 新規作成] │ │ │ │ ───────────────────────────────────────────────────────────── │ │ 順序 圃場名 グループ 住所 面積(反) 面積(m2) 所有者 操作│ │ ───────────────────────────────────────────────────────────── │ │ 1 おまけ [口神___▼] 口神ノ川足川... 0.2 200 吉田 ✏️🗑│ │ 2 口神１反 [口神___▼] 口神ノ川... 1.2 1200 吉田 ✏️🗑│ │ 3 口神北東 [口神___▼] 口神ノ川... 0.4 400 吉田 ✏️🗑│ │ 4 口神北中 [南_____▼] 口神ノ川... 0.4 400 吉田 ✏️🗑│ │ │ │ ... (39行) │ │ │ └──────────────────────────────────────────────────────────────────┘ ``` ### 機能要件 - [x] 全圃場を一覧表示（テーブル形式） - [x] 表示列: 順序番号、圃場名、グループ名、住所、面積(反)、面積(m2)、所有者、操作 - [x] **グループ名のインライン編集**: datalist による候補表示付きテキスト入力 - [x] **表示順変更**: ↑↓ ボタンで順序入れ替え（表示順モード時） - [x] 並び順の切り替え（グループ順、表示順、登録順） - [x] [新規作成]ボタン → 画面6へ遷移 - [x] [✏️ 編集]ボタン → 画面5（圃場詳細）へ遷移 - [x] [🗑 削除]ボタン → 確認ダイアログ後に削除 - [ ] **紐づけ状況列（E-2）** — **未実装** - [ ] 「共済」列: 紐づけ件数表示（例: 「2件」）。0件の場合は「-」をグレー表示 - [ ] 「中山間」列: 紐づけ件数表示。0件の場合は「-」をグレー表示 --- ## 画面5: 圃場詳細・編集 ### 目的 個別の圃場情報を確認・編集。共済/中山間マスタとの紐づけ管理。田んぼにいるときにスマホで確認する用途も想定。 ### レイアウト（PC） ``` ┌────────────────────────────────────────────────────────────┐ │ ← 一覧に戻る │ ├────────────────────────────────────────────────────────────┤ │ │ │ 圃場名 住所 │ │ [口神 北中___________] [口神ノ川１９８（笹ヶ谷374-1)___] │ │ │ │ 面積（反） 面積（m2） 所有者 グループ名 │ │ [0.4___] [400___] [吉田___] [口神___] │ │ │ │ [保存] │ │ │ ├────────────────────────────────────────────────────────────┤ │ │ │ 📋 共済情報 (2件 / 計800m2) [+追加] │ │ ─────────────────────────────────────────────────────── │ │ 耕地-分筆 漢字地名 住所 面積(m2) 操作│ │ ─────────────────────────────────────────────────────── │ │ 2-1 四万十町 笹ヶ谷 374-1 笹ヶ谷... 400 [×]│ │ 2-2 四万十町 笹ヶ谷 374-2 笹ヶ谷... 400 [×]│ │ │ ├────────────────────────────────────────────────────────────┤ │ │ │ 📋 中山間情報 (1件 / 計400m2) [+追加] │ │ ─────────────────────────────────────────────────────── │ │ ID 所在地 面積(m2) 支払金額 操作 │ │ ─────────────────────────────────────────────────────── │ │ 50 口神ノ川 壱町切 1694 400 ¥8,000 [×] │ │ │ └────────────────────────────────────────────────────────────┘ ``` **[+追加]ボタン押下時 — 紐づけ追加モーダル:** ``` ┌────────────────────────────────────────────┐ │ 共済区画を追加 [×] │ ├────────────────────────────────────────────┤ │ │ │ 🔍 [検索: 地番・漢字地名で絞り込み____] │ │ │ │ ─────────────────────────────────────── │ │ □ 3-1 四万十町 笹ヶ谷 375 300m2 │ │ □ 4-1 四万十町 笹ヶ谷 376 250m2 │ │ □ 5-1 四万十町 口神ノ川 198 500m2 │ │ ─────────────────────────────────────── │ │ ※ 既に他の圃場に紐づいている区画は │ │ (🔗 圃場名) で表示 │ │ │ │ [選択した区画を追加] │ │ │ └────────────────────────────────────────────┘ ``` ### レイアウト（スマホ） ``` ┌────────────────────────────────────┐ │ ← 一覧に戻る │ ├────────────────────────────────────┤ │ │ │ 圃場名 │ │ [口神 北中________________] │ │ 住所 │ │ [口神ノ川１９８（笹ヶ谷374-1)__] │ │ 面積（反） 面積（m2） │ │ [0.4___] [400___] │ │ 所有者 グループ名 │ │ [吉田___] [口神___] │ │ │ │ [保存] │ │ │ ├────────────────────────────────────┤ │ 📋 共済情報 (2件/計800m2) [+追加] │ │ ┌──────────────────────────────┐│ │ │ 2-1 四万十町笹ヶ谷374-1 ││ │ │ 400m2 [×] ││ │ └──────────────────────────────┘│ │ ┌──────────────────────────────┐│ │ │ 2-2 四万十町笹ヶ谷374-2 ││ │ │ 400m2 [×] ││ │ └──────────────────────────────┘│ │ │ ├────────────────────────────────────┤ │ 📋 中山間情報 (1件/計400m2)[+追加]│ │ ┌──────────────────────────────┐│ │ │ ID50 口神ノ川壱町切1694 ││ │ │ 400m2 ¥8,000 [×] ││ │ └──────────────────────────────┘│ │ │ └────────────────────────────────────┘ ``` ### 機能要件 - [x] 圃場の基本情報を編集フォームで表示 - [x] 編集可能フィールド: 圃場名、住所、面積(反)、面積(m2)、所有者、グループ名 - [x] [保存]ボタン → PATCH API で更新 - [x] [← 一覧に戻る] → `/fields` へ遷移 - [x] エラーメッセージ表示 - [x] 共済情報の読み取り専用テーブル表示（A-8 完了） - [x] 中山間情報の読み取り専用テーブル表示（A-8 完了） - [ ] **紐づけ管理機能（E-2: 対応付け可視化・編集）** — **未実装** - [ ] 共済/中山間セクションに [+追加] ボタン - [ ] 追加モーダル: 未紐づけの区画一覧から選択して追加 - [ ] 検索フィルタ（地番、漢字地名、IDで絞り込み） - [ ] 既に他の圃場に紐づいている区画は紐づけ先を表示（M:N のため追加は可能） - [ ] 各行に [×] ボタンで紐づけ解除（区画自体は削除しない） - [ ] 確認ダイアログ: 「この紐づけを解除しますか？」 - [ ] **面積参考表示（E-2）** — **未実装** - [ ] セクション見出しに紐づけ区画の合計面積を小さく併記（例: 「共済情報 (2件 / 計800m2)」） - [ ] ※ M:N関係の特性上、圃場面積と一致しないのが通常。警告アイコンやハイライトは表示しない - [ ] 面積はあくまで参考情報として、件数と合計面積を淡いグレー文字で表示するのみ - [ ] 将来的に栽培履歴も表示（Phase 2） ### 必要なAPI（E-2 用） | メソッド | エンドポイント | 説明 | |---------|---------------|------| | GET | `/api/kyosai-fields/` | 共済マスタ全件取得（紐づけ追加モーダル用） | | GET | `/api/chusankan-fields/` | 中山間マスタ全件取得（紐づけ追加モーダル用） | | POST | `/api/fields/{id}/kyosai-links/` | 共済紐づけ追加 `{ kyosai_field_ids: [1,2,3] }` | | DELETE | `/api/fields/{id}/kyosai-links/{kyosai_id}/` | 共済紐づけ解除 | | POST | `/api/fields/{id}/chusankan-links/` | 中山間紐づけ追加 `{ chusankan_field_ids: [1,2,3] }` | | DELETE | `/api/fields/{id}/chusankan-links/{chusankan_id}/` | 中山間紐づけ解除 | ### デザインノート - [+追加] ボタンはセクション見出しの右端に配置 - [×] ボタンは各行の右端、テキストリンクスタイル（赤系） - **面積表示は控えめに**: 件数と合計面積をセクション見出しにグレー小文字で表示するのみ。M:N関係の特性上、圃場面積と合計面積は基本的に一致しないため、警告アイコンやハイライト色は一切使わない - モーダルの区画一覧はチェックボックス選択式（複数同時追加可能） --- ## 画面6: 圃場新規作成 ### 目的 手動で圃場を1件ずつ新規登録（インポート以外の方法） ### レイアウト ``` ┌────────────────────────────────────┐ │ ← 一覧に戻る │ ├────────────────────────────────────┤ │ │ │ 圃場名 │ │ [____________________________] │ │ │ │ 住所 │ │ [____________________________] │ │ │ │ 面積（反） │ │ [________] │ │ │ │ 面積（m2） │ │ [________] │ │ │ │ 所有者 │ │ [____________________________] │ │ │ │ [作成] │ │ │ └────────────────────────────────────┘ ``` ### 機能要件 - [x] 各フィールドを入力して圃場を新規作成 - [x] [作成]ボタン → POST API で作成 - [x] 作成成功 → 圃場一覧へ遷移 - [x] バリデーションエラー → エラーメッセージ表示 ### 補足 - インポート（ODS/Excel）との使い分け: 大量登録はインポート、1件追加は手動作成 - グループ名は新規作成時には設定不可（作成後に圃場一覧から設定） --- ## 画面7: 申請書ダウンロード ### 目的 水稲共済細目書・中山間交付金のPDFをダウンロード ### レイアウト（PC） ``` ┌────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] ... │ ├────────────────────────────────────────────────────┤ │ │ │ 年度: [2025年度 ▼] │ │ │ │ ┌────────────────────────────────────────────────┐│ │ │ 📄 水稲共済細目書 ││ │ │ ││ │ │ 区画数: 31区画 ││ │ │ ││ │ │ ⚠️ 未割当の圃場: 4筆 ││ │ │ → 作付け計画を完成させてください ││ │ │ ││ │ │ [プレビュー] [PDFダウンロード] ││ │ └────────────────────────────────────────────────┘│ │ │ │ ┌────────────────────────────────────────────────┐│ │ │ 📄 中山間地域等直接支払交付金 ││ │ │ ││ │ │ 区画数: 71区画 ││ │ │ ││ │ │ ✅ 全て割当済み ││ │ │ ││ │ │ [プレビュー] [PDFダウンロード] ││ │ └────────────────────────────────────────────────┘│ │ │ └────────────────────────────────────────────────────┘ ``` ### 機能要件 - [x] 年度を選択 - [x] 各申請書について: - [x] [PDFダウンロード]ボタン → ファイルダウンロード - [ ] 区画数の表示 — **未実装** - [ ] 未割当の警告表示 — **未実装** - [ ] [プレビュー]ボタン → 新しいタブでPDF表示 — **未実装（A-5）** - [ ] ダウンロードされるPDFのファイル名: - 水稲共済: `水稲共済細目書_2025年度.pdf` - 中山間: `中山間交付金_2025年度.pdf` - [ ] PDFはA4サイズ、印刷してそのまま提出可能 --- ## 画面7-A: PDF帳票フォーマット仕様 ### 7-A-1: 水稲共済細目書 PDF **基本仕様:** - 用紙: A4 縦 - 表形式（1行1区画、全31行） - ヘッダー: 「水稲共済細目書（YYYY年度）」 - ページ番号あり - 印刷してそのまま提出可能 **列定義:** | # | 列名 | データ元 | 備考 | |---|------|---------|------| | 1 | 漢字地名 | OfficialKyosaiField.kanji_name | 例: 四万十町 笹ヶ谷 374-1 | | 2 | 耕地-分筆 | k_num + "-" + s_num | 例: 2-1 | | 3 | 本地面積 (m2) | OfficialKyosaiField.area | 内部 m2 で保存 | | 4 | 作付品目 | Plan.crop.name | 作付け計画から取得 | | 5 | 品種 | Plan.variety.name | 〃（nullの場合は空欄） | | 6 | 圃場名称 | Field.name | 吉田農地台帳の名称 | **複数圃場紐づき時の扱い:** - 1つの共済区画に複数の実圃場（Field）が紐づく場合 → 作物・品種・圃場名をカンマ区切りで列挙 - 例: 「米, 野菜」「にこまる, トマト」「口神北東, 口神北中」 **未設定時の扱い:** - 作付け未設定の場合 → 作付品目列に「未設定」と表示 --- ### 7-A-2: 中山間地域等直接支払交付金 PDF **基本仕様:** - 用紙: A4 横（列が多いため） - 表形式（1行1区画、全71行） - ヘッダー: 「中山間地域等直接支払交付金（YYYY年度）」 - ページ番号あり - 印刷してそのまま提出可能 **列定義:** | # | 列名 | データ元 | 備考 | |---|------|---------|------| | 1 | 所在地 | 大字+字+地番+枝番 連結 | 例: 口神ノ川 壱町切 1694 | | 2 | 植栽面積 | OfficialChusankanField.planting_area | m2 | | 3 | 作付け品目(元) | OfficialChusankanField.original_crop | ODS「作付け品目」列（役場記入の値） | | 4 | 協定管理者 | OfficialChusankanField.manager | | | 5 | 所有者 | OfficialChusankanField.owner | | | 6 | 作物 | Plan.crop.name | 作付け計画から取得 | | 7 | 品種 | Plan.variety.name | 〃（nullの場合は空欄） | | 8 | 圃場名称 | Field.name | 吉田農地台帳の名称 | **複数圃場紐づき時の扱い:** - 共済と同様、カンマ区切りで列挙 --- ## 画面8: データ取込 ### 目的 圃場マスタや申請マスタのインポート ### レイアウト（PC） ``` ┌────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] ... │ ├────────────────────────────────────────────────────┤ │ │ │ 📥 データインポート │ │ │ │ ┌────────────────────────────────────────────────┐│ │ │ 吉田農地台帳（圃場マスタ） ││ │ │ ││ │ │ ファイルを選択: [ファイルを選択] 📎 ││ │ │ ││ │ │ ⚠️ 既存データは上書きされます ││ │ │ ││ │ │ [インポート実行] ││ │ └────────────────────────────────────────────────┘│ │ │ │ ┌────────────────────────────────────────────────┐│ │ │ 共済マスタ ││ │ │ ││ │ │ ファイルを選択: [ファイルを選択] 📎 ││ │ │ [インポート実行] ││ │ └────────────────────────────────────────────────┘│ │ │ │ ┌────────────────────────────────────────────────┐│ │ │ 中山間マスタ ││ │ │ ││ │ │ ファイルを選択: [ファイルを選択] 📎 ││ │ │ [インポート実行] ││ │ └────────────────────────────────────────────────┘│ │ │ │ 📤 データエクスポート │ │ • [全圃場データ (CSV)] ※バックアップ用 │ │ • [作付け計画 (CSV)] ※バックアップ用 │ │ │ └────────────────────────────────────────────────────┘ ``` ### 機能要件 - [x] 3種類のマスタを縦並びで表示（タブではなく各セクション形式） - [x] ファイルアップロード（ODS/Excel対応） - [x] インポート実行（結果メッセージ表示） - [ ] プレビュー機能（インポート前に確認）— **未実装** - [ ] エクスポート機能（CSV）— **未実装（A-6）** --- ## 🎨 UI共通仕様 ### カラーパレット ``` プライマリカラー（緑系）: #2E7D32 濃い緑（ヘッダー、ボタン） #4CAF50 緑（アクセント、アクティブなナビ項目） #81C784 淡い緑（ホバー） セカンダリカラー（土系）: #8D6E63 茶色（サブヘッダー） #BCAAA4 淡い茶（背景） 警告・状態色: #F44336 赤（エラー、未設定） #FF9800 オレンジ（警告） #4CAF50 緑（成功） #2196F3 青（情報） グレースケール: #212121 ダークグレー（テキスト） #757575 グレー（サブテキスト） #E0E0E0 ライトグレー（ボーダー） #FAFAFA ホワイト（背景） ``` ### タイポグラフィ ``` フォント: - システムフォント優先 - 日本語: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif - 英数字: Inter, "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%暗く、影を小さく ### インライン編集（作付け計画） - **ドロップダウン**: 選択変更と同時にバックグラウンド保存 - **テキスト入力**: blur（フォーカスアウト）時に保存 - **保存中**: ローディングスピナーは表示しない（スクロールリセット防止のため） - **エラー時**: トースト通知でエラー表示 ### トースト通知 - **位置**: 画面右上 - **表示時間**: 3秒（自動消去） - **種類**: 成功（緑）、エラー（赤）、警告（オレンジ）、情報（青） --- ## 📱 スマホ特有の配慮 ### タップ領域 - **最小サイズ**: 44px × 44px - **余白**: ボタン間は最低8px ### スクロール - **慣性スクロール**: `-webkit-overflow-scrolling: touch` - **無限スクロール**: 不要（全39筆なので一覧でOK） ### 入力 - **キーボードタイプ**: 適切に指定（email, number, textなど） - **オートコンプリート**: 有効化 ### ナビゲーション - **Navbar**: PC版と同じ項目をレスポンシブに配置 - **戻るボタン**: 画面左上に配置（詳細画面など）