株式会社 JR 西日本 IT ソリューションズ 様

JR 西日本
列車走行位置

JR 西日本の京阪神エリアにおける列車の運行情報をリアルタイムに提供するウェブサイトです。
走行中の列車ごとの現在位置や種別、行き先、遅れ時分などの鉄道利用に役立つ情報を、いつでもどこでも様々なデバイスから確認できます。

  • Web

– OUTLINE

ウェブだからこそ生まれる価値がある

駅に行かなくてもリアルタイムの運行情報がわかるので、列車に遅れがあった場合でも移動手段の変更など、次の行動をいち早く判断できるようになります。「現在の運行状況を知りたい」というユーザーのニーズに対して、最短(1タップ)で目的の情報を提供できることがポイントです。

鉄道運行情報を提供する類似または競合のサービスとして、他社の鉄道事業者公式アプリや経路探索アプリ、運行情報を統合した地図アプリなどがある中、「アプリ」ではなくあえて「ウェブサイト」として提供することで、アプリ以上に多くのデバイスをサポートできる点、また、対象路線の拡大や機能拡充の際、ユーザーがアップデートをしなくても最新のシステムを利用できる点は、利便性が高い特長だと考えています。

POINT“安心 × 信頼 × ユニバーサル” がコンセプト

老若男女の誰もが気持ちよく利用できる「わかりやすさ」と「使いやすさ」の実現に注力しました。

たとえば、路線名や駅名を記す書体には JR 駅構内のサインとの一貫性を保ちながら、スクリーン上でも読みやすい「UD 新ゴ」を採用。
モリサワの TypeSquare を導入し、幅広い環境で意図した通りの文字組みを実現しています。

路線選択画面では、京阪神エリアの路線図から自分が見たい駅を直接選べたり、列車の位置を知るための在線画面では、列車の行き先がひと目で分かるように列車アイコンを路線カラーで着色したり、画面をスクロールしている間だけ行き先方面を表示したりと、ユーザーの理解と行動を助ける工夫を施しています。

さらに、淡々と情報を伝えるのではなく、愛着が湧き長く利用されるシステムに育ってほしいと思い、色とりどりの列車がトコトコ走っているかのような「親しみを覚える」表現を目指しました。

POINT多様な工夫を盛り込んだ開発手段

フロントエンドからバックエンド、インフラのそれぞれを担当するエンジニアがそれぞれの知恵や知見を出し合うことで、メンバーの最大パフォーマンスを発揮し連携のとれた開発が実現しました。

基盤システムに近いサーバーは多くの情報を処理する必要があるため、並列処理に強い言語を採用したり、画面描画内容は動的に生成することで保守性向上と開発効率化を図ったりといった工夫を盛り込みました。

また、大量アクセスに対応するために、エンドユーザーからのアクセス部分はサーバーレス構成としています。

– DESIGN CAPTURE

– STAFF VOICE

デザイナー

情報を徹底的に整理することで、ユーザー第一の設計に

ユーザーの理解を助ける情報設計には、役割とプライオリティの設定が重要です。

案内に必要な情報をすべて洗い出し、列車アイコンや駅名のような「ざっと見る情報」と、遅れ時分や運行案内のような「じっと見る情報」の2つに分類。それぞれの情報に相応しいスタイルを指定することで、見通しがつきやすく、自分にとって必要かどうか即座に判断できる設計としています。

また、ユーザーが目的とする情報を迷わず得られるように、ルック&フィールの一貫性を保ち、ボタンなどは押しやすい面積にし周囲の余白を広めに取る、リンクを想起させるライトブルーで塗る、あるいは、テキストリンクであれば「>」アイコンと併記するなど、ユーザーの誤操作と誤認識を極力減らす画面設計にしています。

エンジニア

苦労したからこそ得られたノウハウ

フロントエンドにおいて Android の標準ブラウザに対応するうえで、サポートが切れているため最新の CSS が利用できなかったり、OS レベルではなく端末レベルで挙動が異なったりと、困難に直面した点も多くありましたが、こうした経験からしか学べないノウハウをたくさん得ることができました。

アプリ開発でお悩みなら。

実績の詳細、開発規模など詳しくはお問い合わせください。お電話でもメールでも承ります。