Files

警告アイコン（⚠️/✅）を全て除去 — M:Nの特性上、面積が一致しないのが正常なので
合計面積はセクション見出しにグレー小文字で併記するのみ — 「共済情報 (2件 / 計800m2)」の形式
圃場一覧の紐づけ列も控えめに — 0件は「-」のグレー表示、警告なし
面積情報は「見ようと思えば見える」程度の存在感にしました。画面がうるさくならないはずです。

2026-02-18 13:49:51 +09:00

41 KiB

Raw Blame History

画面設計書

最終更新: 2026-02-16 変更履歴: 実装済み機能との差異を解消（B-1〜B-5, C-6, E-1 反映）

🎨 デザイン原則（再掲）

シンプル・イズ・ベスト: 1画面1機能
情報の優先順位: 最重要情報を最も目立つ位置に
エラーを起こしにくい: 選択式優先、自由入力最小限
スマホファースト（参照時）: 文字16px以上、タップ領域44px以上
既存データを尊重: 紙の台帳と同じ感覚で使える

PC レイアウト

上部に水平ナビゲーションバーを常時表示。ブランド名「KeinaSystem」と主要画面へのリンクを配置。

┌──────────────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem  [作付け計画] [圃場管理] [帳票出力] [データ取込]  [ログアウト] │
└──────────────────────────────────────────────────────────────┘

ナビゲーション項目

アイコン	ラベル	パス	説明
🌾 (Wheat)	作付け計画	`/allocation`	作付け計画編集画面（メイン）
📍 (MapPin)	圃場管理	`/fields`	圃場一覧・編集
📄 (FileText)	帳票出力	`/reports`	申請書PDFダウンロード
⬆️ (Upload)	データ取込	`/import`	マスタインポート

仕様

アクティブなページのリンクは緑背景でハイライト
ログアウトボタンは右端に配置
スマホではレスポンシブにタブバーまたはハンバーガーメニューに切り替え

📱 画面一覧

Phase 1（MVP）

ログイン画面 (/login)
ダッシュボード (/) — 将来拡張用、Phase 1では簡易版
作付け計画一覧・編集 (/allocation) — メイン画面、インライン編集方式
圃場管理一覧 (/fields) — 圃場の一覧表示・グループ管理・表示順管理
圃場詳細・編集 (/fields/[id]) — 個別圃場の情報編集
圃場新規作成 (/fields/new) — 手動での圃場登録
申請書ダウンロード (/reports) — PDFダウンロード
データ取込 (/import) — インポート

Phase 2以降

栽培履歴入力
作業カレンダー
資材計画

画面1: ログイン画面

目的

シンプルな認証（ユーザー名＋パスワード）

レイアウト（PC/スマホ共通）

┌─────────────────────────────────────┐
│                                     │
│          🌾 Keina System           │
│       作付け計画管理システム          │
│                                     │
│    ┌───────────────────────┐       │
│    │ ユーザー名              │       │
│    │ [___________________]    │       │
│    └───────────────────────┘       │
│                                     │
│    ┌───────────────────────┐       │
│    │ パスワード                │       │
│    │ [___________________]    │       │
│    └───────────────────────┘       │
│                                     │
│         [  ログイン  ]              │
│                                     │
└─────────────────────────────────────┘

機能要件

ユーザー名とパスワードで認証（JWT）
ログイン成功 → 作付け計画画面へ遷移
ログイン失敗 → エラーメッセージ表示
「パスワードを忘れた」リンク（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反                │
│                                │
│            [閉じる]            │
└────────────────────────────────┘

機能要件

全圃場を一覧表示（39行）
各行に以下を表示:
- グループ名（インライン編集可能、datalist補完付き）
- 圃場名
- 面積（反）
- 作物（ドロップダウン、インライン選択）
- 品種（ドロップダウン、作物選択後に有効化）
- 備考（テキスト入力）
- 表示順変更ボタン（↑↓、カスタム順モード時のみ）
年度切り替え（ドロップダウン）
並び替え機能:
- カスタム順（display_order）
- グループ順（group_name）
- 作付け順（crop別）
インライン即時保存: 作物・品種・備考を変更すると即座にAPIに保存（画面遷移なし、スクロール位置維持）
集計サイドバー（PC）:
- 閉じるボタンで非表示可能
- 作物別の合計面積
- 品種別の内訳（ツリー表示、展開可能）
- 未設定の面積を警告表示
- 作付け変更時にリアルタイム更新
集計モーダル（スマホ）:
- [集計]ボタンでサイドパネル表示
- 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行)                                                        │
│                                                                    │
└──────────────────────────────────────────────────────────────────┘

機能要件

全圃場を一覧表示（テーブル形式）
表示列: 順序番号、圃場名、グループ名、住所、面積(反)、面積(m2)、所有者、操作
グループ名のインライン編集: datalist による候補表示付きテキスト入力
表示順変更: ↑↓ ボタンで順序入れ替え（表示順モード時）
並び順の切り替え（グループ順、表示順、登録順）
[新規作成]ボタン → 画面6へ遷移
[✏️ 編集]ボタン → 画面5（圃場詳細）へ遷移
[🗑 削除]ボタン → 確認ダイアログ後に削除
紐づけ状況列（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          [×] ││
│  └──────────────────────────────┘│
│                                    │
└────────────────────────────────────┘

機能要件

圃場の基本情報を編集フォームで表示
編集可能フィールド: 圃場名、住所、面積(反)、面積(m2)、所有者、グループ名
[保存]ボタン → PATCH API で更新
[← 一覧に戻る] → /fields へ遷移
エラーメッセージ表示
共済情報の読み取り専用テーブル表示（A-8 完了）
中山間情報の読み取り専用テーブル表示（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）                        │
│  [________]                       │
│                                    │
│  所有者                            │
│  [____________________________]   │
│                                    │
│           [作成]                   │
│                                    │
└────────────────────────────────────┘

機能要件

各フィールドを入力して圃場を新規作成
[作成]ボタン → POST API で作成
作成成功 → 圃場一覧へ遷移
バリデーションエラー → エラーメッセージ表示

補足

インポート（ODS/Excel）との使い分け: 大量登録はインポート、1件追加は手動作成
グループ名は新規作成時には設定不可（作成後に圃場一覧から設定）

画面7: 申請書ダウンロード

目的

水稲共済細目書・中山間交付金のPDFをダウンロード

レイアウト（PC）

┌────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem  [作付け計画] [圃場管理] ...        │
├────────────────────────────────────────────────────┤
│                                                    │
│  年度: [2025年度 ▼]                               │
│                                                    │
│ ┌────────────────────────────────────────────────┐│
│ │ 📄 水稲共済細目書                               ││
│ │                                                 ││
│ │ 区画数: 31区画                                  ││
│ │                                                 ││
│ │ ⚠️ 未割当の圃場: 4筆                            ││
│ │   → 作付け計画を完成させてください              ││
│ │                                                 ││
│ │             [プレビュー]  [PDFダウンロード]    ││
│ └────────────────────────────────────────────────┘│
│                                                    │
│ ┌────────────────────────────────────────────────┐│
│ │ 📄 中山間地域等直接支払交付金                   ││
│ │                                                 ││
│ │ 区画数: 71区画                                  ││
│ │                                                 ││
│ │ ✅ 全て割当済み                                 ││
│ │                                                 ││
│ │             [プレビュー]  [PDFダウンロード]    ││
│ └────────────────────────────────────────────────┘│
│                                                    │
└────────────────────────────────────────────────────┘

機能要件

年度を選択
各申請書について:
- [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)] ※バックアップ用               │
│                                                    │
└────────────────────────────────────────────────────┘

機能要件

3種類のマスタを縦並びで表示（タブではなく各セクション形式）
ファイルアップロード（ODS/Excel対応）
インポート実行（結果メッセージ表示）
プレビュー機能（インポート前に確認）— 未実装
エクスポート機能（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など）
オートコンプリート: 有効化

41 KiB Raw Blame History Unescape Escape

画面設計書

🎨 デザイン原則（再掲）

🧭 共通ナビゲーション（Navbar）

PC レイアウト

ナビゲーション項目

仕様

📱 画面一覧

Phase 1（MVP）

Phase 2以降

画面1: ログイン画面

目的

レイアウト（PC/スマホ共通）

機能要件

画面2: ダッシュボード

目的

現在の実装

レイアウト（将来実装予定、PC）

機能要件（将来実装予定）

画面3: 作付け計画一覧・編集（メイン画面）

目的

編集方式

レイアウト（PC）

レイアウト（スマホ）

機能要件

デザインノート

画面4: 圃場管理一覧

目的

レイアウト（PC）

機能要件

画面5: 圃場詳細・編集

目的

レイアウト（PC）

レイアウト（スマホ）

機能要件

必要なAPI（E-2 用）

デザインノート

画面6: 圃場新規作成

目的

レイアウト

機能要件

補足

画面7: 申請書ダウンロード

目的

レイアウト（PC）

機能要件

画面7-A: PDF帳票フォーマット仕様

7-A-1: 水稲共済細目書 PDF

7-A-2: 中山間地域等直接支払交付金 PDF

画面8: データ取込

目的

レイアウト（PC）

機能要件

🎨 UI共通仕様

カラーパレット

タイポグラフィ

スペーシング

レスポンシブブレークポイント

🖱️ インタラクション

ボタン

インライン編集（作付け計画）

トースト通知

📱 スマホ特有の配慮

タップ領域

スクロール

入力

ナビゲーション

41 KiB

Raw Blame History