在庫・出荷管理アプリを作ってます⑬：その他のUI/UX改善総まとめ

はじめに

これまで出荷先マスタ、出荷予定登録、OCR機能など、主要機能の改善について記事にしてきました。

しかし実際には、他にも多くの細かな改善を積み重ねてきました。今回は、個別記事にはしていないものの重要だった改善内容をまとめて紹介します。

改善した機能一覧

1. 出荷比較画面のUX改善

改善前の課題：

• データがない時に無限ローディング
• 承認ボタンが表示されない不具合
• エラー時のフィードバックが不十分

改善内容：

• 空状態の適切な表示：データがない時は「データがありません」と明示
• 承認フロー修正：出荷実績の取得処理を見直し
• エラーハンドリング強化：タイムアウト対策とユーザーへの適切なフィードバック

効果：

• ユーザーが状況を把握しやすくなった
• 承認作業がスムーズに
• エラー時の対応が明確に

2. モバイルコンポーネントの統一化

改善前の課題：

• 画面ごとに異なるデザイン
• PC版とモバイル版でUI要素が異なる
• 保守性が低い

改善内容：
components/mobile/フォルダに共通コンポーネントを作成：

• MobileInput：入力フィールド
• MobileButton：ボタン
• MobileSelect：選択ボックス
• MobileTextarea：複数行入力

特徴：

• PC版とモバイル版で自動的にサイズ調整
• 一貫したデザイン
• 再利用可能

効果：

• 開発スピードが向上
• デザインの統一感
• バグの減少

3. CSV出力機能の追加

実装した機能：

• 出荷先マスタのCSV出力：登録されている出荷先データを出力
• 出荷実績のCSV出力：検索・フィルター条件を反映したデータを出力

特徴：

• PC版限定の機能（データ管理用途）
• クライアントサイド処理で高速
• フィルタリング条件を反映

効果：

• データの二次活用が可能に
• Excel等での分析が容易に
• バックアップとしても活用

4. 削除ボタンの権限制御

改善前の課題：

• 生産者に削除ボタンが表示される
• PC版とモバイル版で挙動が異なる
• 権限管理が不完全

改善内容：

// 権限に応じた表示制御
{(userRole === "admin" || userRole === "trader") && (
  <MobileButton
    onClick={() => handleDelete(id)}
    variant="danger"
  >
    削除
  </MobileButton>
)}

効果：

• 誤操作の防止
• 権限管理の明確化
• セキュリティ向上

5. 画像表示機能の実装

実装した機能：

• 出荷実績に添付された伝票画像の表示
• 出荷比較画面での画像確認機能
• Supabase Storageとの連携

技術的なポイント：

• Public bucket + ランダムURL方式
• 画像の自動リサイズ対応
• モバイルでも快適に表示

効果：

• 伝票確認が容易に
• データの信頼性向上
• ペーパーレス化の促進

6. PWA対応

実装内容：

• manifest.jsonの配置
• service-worker.jsの設定
• アイコン・スプラッシュ画面の設定

できるようになったこと：

• スマホのホーム画面に追加可能
• アプリのような操作感
• オフライン対応（基本機能）

効果：

• ユーザーのアクセス性向上
• アプリらしい体験
• インストール不要の手軽さ

7. エラーハンドリング強化

改善内容：

• タイムアウト対策：長時間の処理に対する適切な処理
• ユーザーフィードバック：エラー時の分かりやすいメッセージ
• デバッグログ：問題特定のための詳細なログ出力

具体例：

try {
  const { data, error } = await supabase.from('shipments').select('*');

  if (error) throw error;

  setShipments(data);
} catch (error) {
  console.error('出荷データ取得エラー:', error);
  setError('データの取得に失敗しました。もう一度お試しください。');
}

効果：

• ユーザーが状況を理解しやすい
• 問題の早期発見
• システムの安定性向上

8. 承認フローの完全実装

フロー：

1. 生産者が出荷実績を登録（status: “pending”）
2. 流通業者が承認または差し戻し
3. 承認済み（status: “approved”）は出荷一覧に表示
4. 差し戻し（status: “rejected”）は再登録可能

実装のポイント：

• ステータス管理
• 権限に応じた操作制限
• 承認履歴の記録

効果：

• 業務プロセスの明確化
• データの信頼性向上
• トラブル時の追跡が容易

技術的な学び

段階的な改善の重要性

一度に全てを変えるのではなく、小さな改善を積み重ねることで：

• リスクの最小化
• 問題の早期発見
• ユーザーフィードバックの反映

コンポーネント設計の効果

モバイルコンポーネントの統一により：

• 開発効率が大幅に向上
• バグの減少
• 一貫したUX提供

権限管理の複雑さ

生産者・流通業者・管理者の3役で適切な権限管理を実現するには：

• データベースレベル（RLS）での制御
• UIレベルでの表示制御
• 両方の組み合わせが重要

開発を通じて実感したこと

「完璧」より「実用的」

完璧を目指すよりも、実際に使える状態を優先することで：

• 早期にユーザーフィードバックを得られる
• 本当に必要な機能が見えてくる
• 無駄な実装を避けられる

小さな改善の積み重ね

目立たない改善でも、積み重ねることで：

• 全体的なUX向上
• システムの安定性向上
• ユーザーの満足度向上

ユーザー視点の重要性

技術的には可能でも、ユーザーにとって使いにくければ意味がない：

• 権限制御は分かりやすく
• エラーメッセージは親切に
• 操作は直感的に

まとめ

今回紹介した改善は、個別には小さなものかもしれません。しかし、これらを積み重ねることで、システム全体の完成度が大きく向上しました。

改善のポイント：

1. 出荷比較画面のUX改善
2. モバイルコンポーネントの統一
3. CSV出力機能の追加
4. 削除ボタンの権限制御
5. 画像表示機能の実装
6. PWA対応
7. エラーハンドリング強化
8. 承認フローの完全実装

農業現場で実際に使えるシステムを目指して、これからも改善を続けていきます。

---