WORKS 制作実績

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

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

Chapter

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


ジェイアール四国バス株式会社様ウェブサイト

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

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

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

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


ジェイアール四国バス株式会社様ウェブサイト 予約システム

左メニュー 発着地から検索

ジェイアール四国バス株式会社様ウェブサイト 予約システム

左メニュー 路線から検索


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


ジェイアール四国バス株式会社様ウェブサイト 予約システム

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

ジェイアール四国バス株式会社様ウェブサイト 予約システム

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


また、スマートフォンはフォーム入力の表示がAndroidとiPhoneでは異なり、見え方は端末に依存します。そのため、20件程度の選択項目があると情報が探しづらい見え方になることもあります。
ジェイアール四国バス様のサイトではユーザーのスマートフォンがAndroid、iPhoneのどちらの場合でも、選択項目を確認しやすく操作性を高めるためのプログラムを作成し、使用する端末に関わらず設計した表示になるようカスタマイズしました。


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

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

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

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


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


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

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


ジェイアール四国バス株式会社様ウェブサイト 路線一覧ページ

路線一覧ページ

ジェイアール四国バス株式会社様ウェブサイト 路線詳細ページ

路線詳細ページ


バスの便数が多くかつ停留所も多いため時刻表は複雑になり、既存サイトのパソコン版では細かな一覧表を掲載していました。


ジェイアール四国バス株式会社様ウェブサイト 時刻表

パソコン版の時刻表

リニューアルでは、パソコン版は「始発~11時台」「12時台~終発」をスライド式で閲覧できるように工夫。


ジェイアール四国バス株式会社様ウェブサイト 始発~11時台の時刻表

始発~11時台の時刻表

ジェイアール四国バス株式会社様ウェブサイト 12時台~終発の時刻表

12時台~終発の時刻表


スマートフォン版では、まず出発時間と到着時間を表示し、展開すると各停留所の出発時間が現れるようにしました。


ジェイアール四国バス株式会社様ウェブサイト スマートフォン版時刻表

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

ジェイアール四国バス株式会社様ウェブサイト スマートフォン版時刻表

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


また、設備内容も路線詳細ページ内に掲載。高速バスではスマートフォンやパソコンを利用する方も多いでしょう。コンセントやWi-Fiの有無がバスの選択に影響すると考え、ウェブサイト内に明記しました。


ジェイアール四国バス株式会社様ウェブサイト 設備内容を詳細ページ内に掲載

スマートフォンでの読み込み速度を最優先にしたデザイン

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


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

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

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


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

よく似た実績はこちら

MORE VIEW

失敗しないホームページリニューアルマニュアル