目次
はじめに
これまで7回にわたって農業向けの在庫・出荷管理アプリを開発してきました。
認証、出荷予定、出荷実績（OCR）、出荷先マスタ、役割別権限など、基本機能は動く状態に。
ただ、ざっくりとしか着手しておらず、実運用を考えると「もっと使いやすいUI/UXにしたい」という課題が見えてきました。
初回にも述べましたが、AI補助としてChatGPTを利用しています。
今回からはこれをベースに、元々興味があったClaudeの提案を取り入れて
トップページとログイン画面のUI改善を行った内容を記録します。
※現在ChatGPTとClaude両方課金しています。
どちらがいいのか、片方でいいのかしばらく使ってみたいと思っています。
発覚した課題と改善の方向性
ホームページの問題点（UX改善前）
- 起動すると「判別中です…」しか表示されない
- アプリの説明がなく、いきなりログイン状態判定に入る
- 初回利用者には不親切
ナビゲーションの問題点（UI改善前）
- メニューが「出荷一覧」「ログアウト」のみ
- 役割別の機能分けがない
- どこに何があるか分からない
管理者機能の不在
- 生産者・流通業者のみ
- システム管理機能が存在しない
- 全体を把握する手段がない
在庫管理アプリの段階的UI/UX改善
Phase 1: ホームページの抜本的改革
- 課題：「判別中です…」のみの不親切な画面
- 改善内容：
- 未ログイン時 → ランディングページ（システム概要・機能紹介・CTA）
- ログイン時 → ダッシュボード（役割別メニュー・今日の概要表示）
ダッシュボード式にして、概要がわかるように
Phase 2: 管理者機能の追加
- 課題：管理者が存在せず、全体把握ができない
- 改善内容：管理者用ナビゲーションを追加し、生産者・流通業者の機能をすべて閲覧可能に
Phase 3: ナビゲーションの完全刷新
- 課題：最低限のメニューのみで迷子になりやすい
- 改善内容：
- 役割別の本格的なナビゲーションバーを導入
- アクティブ表示・ツールチップ・ホバー効果・レスポンシブ対応を実装
Phase 4: 認証フローの統一
- 課題：ログイン後のリダイレクト先が役割ごとにバラバラ
- 改善内容：ログイン後は全員ダッシュボードへ統一 → 状況把握後に作業選択が可能に
ChatGPTとClaudeのアプローチの違い
ChatGPTに頼んだこと
- 技術実装重視：「機能を作る」ことに集中
- 個別最適化：機能ごとに独立した開発
- 完了志向：「動けばOK」で終了
Claudeに頼んだこと
- UX設計重視：「使いやすさ」を最優先
- 全体最適化：システム全体の一貫性を重視
- 段階的改善：影響範囲を考慮した安全な実装
※ただし、最初にClaudeに頼んでいたらどうなっていたか、ChatGPTでも同様に改善できたかなどの実証はしていません。
UI/UX改善の具体例
エラーメッセージの日本語化
- Before:
Invalid login credentials - After:
メールアドレスまたはパスワードが正しくありません。
権限管理の可視化
- Before: 全員同じメニュー、利用可能範囲が不明
- After: ヘッダーに「管理者版」「流通業者版」を表示、権限に応じたメニューを出し分け
情報アーキテクチャの改善
- Before: ログイン直後に作業ページへ直行
- After: ログイン後はダッシュボード → 状況把握 → 作業選択
開発を通じて
１. 「動く」と「使える」の違い
- 動くシステム：要件を満たし、エラーなく稼働
- 使えるシステム：直感的で迷わず、現場業務に適したUX
２. 段階的改善の効果
- ホームページ改革 → 第一印象の改善
- 管理者機能追加 → システム全体を把握可能に
- ナビゲーション刷新 → 操作性を抜本的に改善
- 認証フロー統一 → 一貫したユーザー体験を提供
改善の成果
定量的な改善
- メニュー数：2個 → 役割別で3〜6個に拡張
- ページ遷移：分散 → ダッシュボード統一
- エラーメッセージ：英語 → 完全日本語化
定性的な改善
- 第一印象：「判別中…」 → プロフェッショナルなランディングページ
- 操作性：迷子になる → 直感的に操作可能
- 管理性：個別管理 → 統合ダッシュボード
今後の展開
- 出荷先マスタ管理の改善
- OCR機能の精度向上
- モバイル対応の強化
- 承認フローの実装
