バスWebアプリ（個人制作）

長岡駅～長岡造形大学間を運行する越後交通バスのリアルタイム運行状況を確認できるWebアプリを制作しました。

ターゲットは長岡造形大学の学生、非常勤講師。

GTFS RealtimeとGTFS Staticのデータを組み合わせ、バスの現在地や到着予測時刻を表示しています。
UIデザイン・フロントエンド・サーバーサイドAPIの実装を一人でフルスタック開発しました。

新潟県長岡市は降雪地域であり、冬季には路線バスが最大1時間程度遅延することがあります。
また、通常時でも交通状況によって8分程度の遅延が発生する時もあり、「バスがすでに通過したのか、それとも遅れているだけなのか」が利用者には判断しづらいという課題がありました。

市が提供するバス運行情報サービス「Bus-Vision ながおかバスi」で現在地や運行状況を確認できますが、目的の停留所を検索する手間がかかることや、「あと何分で到着するのか」「現在どの停留所を走行しているのか」が直感的に把握しにくいと感じていました。

また、Google マップでは目的地まで徒歩を含む別ルートが優先される場合があり、駅と大学を往復する学生にとって使いにくい面もありました。

これらの問題を解決するために、駅と大学間の移動に特化したバスアプリを企画・デザインしました。

利用頻度の高いルートに限定することで、検索や画面遷移を必要とせず、利用者が知りたい情報を1画面に集約。バスの現在位置や到着予定、運行状況をひと目で把握できるよう情報設計を行い、寒い屋外でも素早く確認できるシンプルなUIを目指しました。

本アプリは「長岡駅前」と「長岡造形大学前」の往復利用を主なユースケースとして設計しています。

利用者が求める情報の優先順を考慮して、バスの現在位置は円形の路線図として抽象化しました。正確な地図ではなく、駅・大学・バスの位置関係を直感的に把握できることを重視しています。

また、画面上下には優先情報である到着予測時間を配置しました。

※以下は開発途中の説明図のため公開されているデザインと一部異なります。

路線ごとの識別性を高めるため、3つの路線の配色は一般的に区分されている色覚特性を考慮し、シミュレーションを用いて視認性を検証しました。

初期段階では「大学までの到着時間を分かりやすくする」をコンセプトにラフデザインを複数作成しました。これは自身がバスを利用した際、「遅延しているのか既に通過したのか分からず不安だった」という実体験がきっかけです。

その後、大学の学生や教授へのヒアリングを実施し現在のデザインの方向性に決定。
実際の利用状況や路線数、同時間帯に運行するバスの本数を踏まえ、必要な情報量や画面構成を見直し、現在のUIへとブラッシュアップしました。

ラフスケッチ：