WORKS

  1. HOME
  2. WORKS
  3. 企業
  4. ジェイアール四国バス株式会社様 スマートフォンサイト

ジェイアール四国バス株式会社様 スマートフォンサイト

ジェイアール四国バス株式会社様のスマートフォンサイトを制作しました。


ジェイアール四国バス株式会社様のスマートフォンサイト

ジェイアール四国バス株式会社様は香川県高松市に本社を置き、四国内・関西・中国・東京を結ぶ高速バスを運行している、香川県を代表するバス会社の一つ。
予約サイトをスマートフォン対応にしたいとご相談いただきました。
交通機関の予約サイトは利用者の使い勝手が最優先。利用者目線に立ち、ストレスなく予約できるスマートフォン版のウェブサイトが完成しました。

「発着地」と「路線」の2つの面から検索できる予約システム

ジェイアール四国バス様の予約は発車オ~ライネット(*1)と連動しています。
一般的にバスを検索する方法は「発着地」を選ぶパターンと「路線」を選ぶパターンが多く見られます。ジェイアール四国バス様との打ち合わせでどちらの方法を採用するか検討しました。

出発地が高松駅であれば「路線」での選択も【高松-神戸】となり分かりやすいですが、たとえば出発地が善通寺である場合は【観音寺・坂出-神戸】が該当する路線であることが分かりづらいと考えました。打ち合わせの結果、「発着地」と「路線」の2つの面から検索できるようにすることに決定。切り替えはタブで行うようにしました。


ジェイアール四国バス株式会社様のスマートフォンサイト

発着地から検索

ジェイアール四国バス株式会社様のスマートフォンサイト

路線から検索


利用者側からは見えませんが、管理画面では実は「路線」よりも「発着地」での検索の方が複雑なプログラムを必要とします。
出発地を選ぶと、次の目的地にはその出発地に対して目的地が実在する地名だけを表示します。目的地が確定すると、該当する路線の発車オ~ライネットに転送するように設定しています。


ジェイアール四国バス株式会社様のスマートフォンサイト

出発地が高松のときに表示される目的地

ジェイアール四国バス株式会社様のスマートフォンサイト

出発地が坂出のときに表示される目的地


また、スマートフォンはフォーム入力の表示がAndroidとiPhoneでは異なります。
Androidは選択肢が全画面で表示されるのに対し、iPhoneは画面の下の方にしか表示されません。Androidと比較すると操作しづらさを感じます。


iPhoneのフォーム入力例

iPhone

Androidのフォーム入力例

Android


ジェイアール四国バス様のサイトではAndroidもiPhoneも全画面表示ができるようにプログラムを作成しました。


ジェイアール四国バス株式会社様のスマートフォンサイト

発着地や路線が全画面で選択可能

ジェイアール四国バス株式会社様のスマートフォンサイト

出発日はカレンダーで選択


新しい路線が増えた場合にもお客様が追加できるようにメンテナンス性にも配慮しています。


路線詳細ページに予約に必要な情報を集約

路線一覧ページから希望する路線を選択すると、各路線の詳細ページが表示されます。
この路線詳細ページには、時刻表・運賃表・停留所・設備を掲載し、さらにページの最後で予約もできるようにしました。これによりわざわざトップページの予約画面に戻ることなく、予約画面に進むことができます。


ジェイアール四国バス株式会社様のスマートフォンサイト

路線一覧ページ

ジェイアール四国バス株式会社様のスマートフォンサイト

路線詳細ページ

バスの便数が多くかつ停留所も多いため、時刻表は複雑になり、パソコン版では細かな一覧表を掲載していました。スマートフォン版では改善策として、まず出発時間と到着時間を表示し、展開すると各停留所の出発時間が現れるようにしました。


ジェイアール四国バス株式会社様のパソコン版の時刻表

パソコン版の時刻表


ジェイアール四国バス株式会社様のスマートフォンサイト

出発時間と到着時間を表示

ジェイアール四国バス株式会社様のスマートフォンサイト

展開すると各停留所の出発時間を表示


また、パソコン版では別ページになっていた設備についても路線詳細ページに掲載。高速バスは長時間乗車するのでスマートフォンやパソコンを利用する方も多いでしょう。コンセントやWi-Fiの有無がバスの選択に影響すると考えたためです。


ジェイアール四国バス株式会社様のスマートフォンサイト

読み込み速度を最優先したデザイン

スマートフォンサイトで優先すべきことは、ウェブサイトを開いて表示されるまでの読み込み速度。そのため写真枚数を最小限にし、デザイン用の装飾にも画像をあまり使用していません。文字情報だけで見栄えがよくなるように工夫しました。
カラーはジェイアール四国バス様のバスの車体カラーを採用。
トップページの写真の下に表示している運行状況は切符風のデザインにし、遊び心を加えました。


ジェイアール四国バス株式会社様のスマートフォンサイト

制作中はジェイアール四国バスのご担当者様とGOFILDの佐藤が、利用者目線で意見を出し合い進めていきました。公開後、佐藤は大阪に行く際にこのウェブサイトを使って切符を予約し、使い勝手を確認。細部まで利用者目線にこだわったバス予約サイトが完成しました。

(*1)発車オ~ライネット
全国440路線を取り扱う高速バスのウェブ予約システム。


クライアント ジェイアール四国バス株式会社様 スマートフォンサイト
URL https://www.jr-shikokubus.co.jp/
公開日 2019年9月
デバイス
スマートフォン
プロジェクトメンバー

よく似た実績はこちら

MORE VIEW