UI / UX デザイン
株式会社サトーOEM製品カスタムダッシュボードデザイン
プロジェクト内容
主に食品製造業での衛生管理や点検、その記録に用いられるSaaS製品「@Form」（エージェンテック製品OEM）の管理画面・アプリケーションダッシュボード画面デザイン。
管理画面・アプリケーションの両方で、点検状況を一目で確認できるようにするためのカスタム。
業務内容
管理画面ダッシュボードのUI / UXデザイン
担当フェーズ
UI / UXデザイン / コーディング
期間
2023年3月～2023年4月
使用ツール
デザインのコンセプト
ステータスを色分けして一覧表示するダッシュボード機能
食品流通業界特有の複雑なステータス管理を視覚的に把握しやすくするため、直感的な色分けを採用しました。緊急性の高い項目は赤、進行中は青、完了は緑など、状態が瞬時に理解できる配色設計し、あらゆるユーザーが正確に情報を把握できるよう工夫しました。
選択しているステータスと各項目の数値が一目でわかること
ユーザーが最も頻繁に確認する「現在の状況」を瞬時に把握できることを最優先しました。大きな数字とアイコンで重要KPIを目立たせ、選択中の項目は視覚的に強調表示。これにより、日々の業務における意思決定のスピードと正確性が向上します。
管理画面・アプリで統一されたデザイン
PCの管理画面とモバイルアプリ間でシームレスな体験を提供するため、一貫したデザインを構築し、デバイスが変わっても操作感を維持。レスポンシブデザインにより、画面サイズに応じて最適な情報密度と操作性を確保しつつ、ブランドの一貫性と使いやすさを両立させました。
工夫した点・実績
要件にはなかったUIアイデアを提案
一覧のテーブルの見出し色をリンクさせるUIを提案し、視認性の高さとUI間の一貫性が高められ採用されました。
当初の要件では単純なステータス表示のみでしたが、ユーザーの業務フローを分析した結果、テーブルヘッダーとステータス表示を視覚的にリンクさせることで情報の関連性が明確になると考えました。この提案により、ユーザーはデータの関連性を直感的に理解できるようになり、クライアントからも高い評価を得ることができました。
見やすさと使いやすさを最大限考慮
各ステータス数値・グラフの表示は大きく表示し、画面で見る使いやすさを考慮してテーブル寸法を調整しました。
ユーザーの主な利用環境（10インチタブレット）に合わせて最適な文字サイズとタッチターゲットを設計。また、テーブルの行間隔や列幅は実際のコンテンツ量を分析して最適化し、情報の詰め込みすぎによる認知負荷の増加を防止。これらの工夫により、ユーザーは必要な情報に素早くアクセスでき、特に忙しい現場での使用においても効率的な業務遂行が可能になりました。
CSSのみでUI構築
提示された要件であればJavascriptは不要と判断しCSSのみでデザイン実装、軽量化しました。
これによりページ読み込み時間の短縮を実現し、保守性も向上。将来的な機能拡張やデザイン調整も容易になりました。