Summary
Project Type:
Webシステム
Launch Date:
製造現場の稼働状況を可視化する、工場管理者向けのダッシュボードを作成しました。各ラインの進捗や遅延情報をリアルタイムで集約し、ひと目で状況を把握できるようにしています。
ReactとTailwind CSSを使用し、情報の見やすさと使いやすさを重視した、実用的でモダンなデザインを目指しました。
Tasks Tasks
技術コンサルタント, UIデザイン, UXデザイン, Web開発, レスポンシブ
Technologies Technologies
TypeScript, React, Tailwind CSS v4
Colors Colors
#2563eb
#1d4ed8
#1e3a8a
#f8fafc
#f1f5f9
#94a3b8
#64748b
#334155
#0f172a
#10b981
#f59e0b
#e11d48
#ffffff
Dashboard Dashboard
工場の全体像を把握するためのメイン画面です。画面上部には全体の進捗率や遅れているライン数などの重要指標（KPI）を配置しました。
メインエリアには各ラインの状況をカード形式で並べ、進捗率やトレンドをグラフとアイコンで表示しています。
遅延などの異常があるラインは色で強調されるため、管理者がすぐに対応が必要な箇所を見つけられるよう工夫しました。情報の配置を整理し、多忙な業務の中でも瞬時に状況を判断できるレイアウトを意識しています。
Line Detail View Line Detail View
特定のラインの状況を詳しく確認・分析する画面です。計画と実績の推移を比較できるグラフを設置し、時間の経過とともにペースが落ちていないかなどを直感的に確認できます。
また、現場からの報告用としてシンプルな実績入力フォームを用意しました。時間帯ごとの詳細なデータも表で確認でき、問題の原因特定や改善アクションにつなげやすい構成にしています。
Production Plans Production Plans
毎日の生産計画を管理する一覧画面です。日付やシフト、ライン名などで絞り込みができ、必要な情報にすぐにアクセスできます。
表形式で見やすくレイアウトし、備考欄のステータスなどをバッジで表示することで視認性を高めています。
また、PCでは一覧性の高いテーブル表示、スマホでは片手でも操作しやすいカード表示に自動で切り替わるレスポンシブ対応を行い、場所を選ばず業務を行えるよう配慮しました。
