UI / UX デザイン
株式会社友愛観光バス 機関システム
プロジェクト内容
バス会社の「バス手配受付管理」「配車」「バス・運転手管理」「旅行会社・旅行代理店との連携」「精算管理」の全ての業務をデジタル化するシステムの開発
業務内容
システム管理画面のデザイン / マニュアル作成
担当フェーズ
ワイヤーフレーム作成 / UIデザイン / コーディング / デザインガイドライン策定
期間
2023年9月～2024年6月、～現在（保守対応）
使用ツール
デザインのコンセプト
ユーザーの中心である60代以上の高齢者でも使いやすいUI（PC、スマートフォン）
バス会社のスタッフは60代以上の方が多く、デジタルツールへの抵抗感が強い傾向がありました。そこで、大きめのフォントサイズ、高コントラストの色使い、直感的に理解できるアイコンを採用。また、操作手順を極力シンプルにし、一画面あたりの情報量を適切に制限することで、ITリテラシーに関わらず使いこなせるUIを実現しました。
連携する（株）HANATOUR JAPANのシステム（別途開発）と親和性の高いデザイン
旅行会社のHANATOUR JAPANシステムとの連携が頻繁に発生するため、両システム間の操作的な一貫性を重視し、ユーザーがシステムを行き来する際の認知負荷を軽減。データの整合性を保ちながら、スムーズな業務フローを実現する設計としました。
日ごと、時間ごとに変わる配車状況にも柔軟に対応できること
バスの配車状況は予約変更やキャンセルにより頻繁に変動します。そこで、リアルタイムでの状況把握と迅速な調整が可能なインターフェースを設計。行程切り離しによる簡単な配車変更、色分けによる状態表示など、変化に柔軟に対応できる機能を実装しました。
工夫した点・実績
情報量が多い持つバスの行程を見やすい形で実現
情報量が多い複数バスの行程をカレンダーなど狭いスペースで見せなければいけないため、ツールチップを使用。カーソルがどこにあるかによって表示を変え、必要な情報を適切な場所で提供する工夫をしました。
7日・15日・30日などユーザーからの様々な表示方法の要求にもフレキシブルに対応し、一目で状況を把握できるよう設計しました。これにより、従来の紙ベースの管理と比較して情報検索時間がかなり短縮されたとのフィードバックをいただきました。
制作業務の効率化
バスの運行は1日の中でも流動的に変わり複雑な制約の登録機能が求められたため、AIでJavascriptを生成しスピーディーに正確な制作を実現。
これによりコーディング問題を大幅に軽減し、業務効率を向上させました。特に複雑な条件分岐（バスの種類、運転手の勤務時間制限、突発的な運行変更など）を正確に実装することができました。
高齢者でも使いやすいUI
60代～70代の高齢者でもスマートフォンで使いやすい大きめのデザインを採用。
色覚多様性にも配慮し、色だけでなく位置でも情報を区別できるよう設計しました。フォントサイズは16pt以上を基本とし、実際のユーザーによる操作テストを繰り返し行って、高齢ユーザーでも迷わず操作できることを確認しました。
デザインガイドラインの作成
パーツをコンポーネント化し、コピー&ペーストでHTMLを作成できるよう効率化。
デザインの一貫性を保ちながら、開発効率を向上させるためのガイドラインを作成しました。これによりチーム全体での作業効率が向上し、品質も安定しました。特に色彩設計、タイポグラフィ、スペーシング、インタラクションパターンを明確に定義し、新機能追加時にも統一感のあるUIを維持できる基盤を構築。このガイドラインにより、開発チームとのコミュニケーションもスムーズになりました。
マニュアルの改善
ただの設計書のコピーのようだったマニュアルの構成をすべて変更、ユーザーが参照しやすくわかりやすい「ガイド」のように改善を行いました。
従来の機能別構成から業務フロー別の構成に変更し、実際の使用シーンに沿った説明を心がけました。また、文字だけでなく、スクリーンショットや図解を豊富に取り入れ、視覚的な理解を促進しました。これにより、システム導入後のサポート問い合わせが約25%減少し、ユーザーの自己解決率が向上しました。