制作実績 / 05
工場見学予約システム
予約する人にも、管理する人にも、迷わない操作を。
UI・UXデザイン / 情報・導線設計 / プロトタイプ制作
01 — 制作の概要
工場見学の予約・管理を支えるUI設計
工場見学管理アプリの担当経験をもとに、見学者向けの予約画面と、運用担当者向けの管理画面を再構成。スマートフォンとPC、それぞれの利用目的に合わせて情報と操作の流れを整理しました。企業名・情報は仮想工場向けに置き換えています。
- 担当したこと
- 情報・導線設計 / UIデザイン / 画面遷移設計 / コンポーネント設計 / プロトタイプ制作
- 使用したツール
- Figma
- 制作したもの
- 見学者向けの予約画面 / 管理者向けの管理画面 / 共通コンポーネント / デザインガイドライン
- 制作の目的
- 見学者が迷わず予約でき、担当者が予約状況の確認や予約枠の管理を進めやすい体験をつくる。
02 — 制作前の課題
予約の分かりやすさと、
管理のしやすさを。
利用する人によって、必要な情報と操作が異なる。
設計のポイント
見学者には、空いている日時を選び、予約を完了できること。担当者には、当日の予約や変更を把握し、予約枠と参加者情報を管理できることが必要です。双方の利用目的を分け、確認・判断・操作する内容を整理しました。
いつ予約できる？
空き・時間帯・残数を確認
どう申し込む？
入力・確認・完了へ
何を確認する？
本日の予約・変更を把握
03 — 情報・導線の設計
予約の流れと、日々の業務をつなぐ。
見学者と管理者、それぞれの目的に沿って
設計。
見学者の予約までの流れ
01
メールを確認
認証リンクから開始
02
日時を選ぶ
空き状況を確認
03
情報を入力
代表者・同伴者
04
内容を確認
日時・人数を見直す
05
予約を完了
当日の案内を確認
04 — デザインの工夫
一つひとつの設計に、理由を。
迷い・入力ミス・管理の手間を減らす、3つの工夫。
01 / 予約状況の見せ方
空き状況を、ひと目で判断できるように。
「空きあり・残少・満枠」を色だけでなく文言と記号でも表示。時間帯ごとの残り人数を併記し、予約できる枠を判断しやすくしました。
02 / 入力と確認の導線
次にすることが、分かるフォームへ。
ステッパーで手続きの進み具合を示し、項目名は入力欄の上に常時表示。必須項目と入力エラーを明確にし、スマートフォンでは次の操作を画面下に配置しました。
03 / 管理業務への配慮
確認と操作を、ひとつの流れに。
予約一覧の検索・絞り込みから詳細へ進む構成に。一括登録とCSV取り込みには事前確認、キャンセルなどの取り消せない操作には確認ダイアログを設けました。
05 — 完成したデザイン
予約画面と管理画面を、ひとつの体験に。
見学者はスマートフォン、管理者はPCを中心に。
ダッシュボードから、予約一覧・詳細へ。
担当者が確認したい情報をまとめて管理。
06 — 運用・実装を見据えた設計
画面だけでなく、運用時の状態まで。
共通ルールで、実装と改善につなげる。
設計で意識したこと
ボタン・入力欄・状態表示を共通化し、色・文字・余白のルールをガイドラインに整理。
満枠や入力エラー、キャンセル確認などの状態を設計し、画面遷移をプロトタイプでつなぎました。
公開デモは操作確認用のモックです。実案件の本番環境とは異なります。