HTML5で近代化した、「世界最高の公共交通サイト」：ユーザー中心のサイト構築事例

ロンドン交通局はデータの正規化とAPIの提供、HTML5の採用などにより、どのような種類のデバイスからのアクセスも容易にし、さまざまな交通手段の情報を提供できるようにした。

[Cliff Saran，Computer Weekly]

　ロンドン交通局（TfL）が前回Webサイトをリニューアルしたのは、2007年のiPhone発表直後のことだった。当時、Androidデバイスやタブレットは出回っていなかったため、モバイルには対応しなかった。

　TfLはその後、2012年のロンドンオリンピックの際にモバイルアプリを開発し、大きな成功を収めた。オリンピック観戦に来た多くの観光客が、このアプリを使って人気スポットに出掛け、移動ルートを探索した。この成功を受けて、TfLはWebサイトのデザインの見直しを進めている。

Computer Weekly日本語版　4月2日号無料ダウンロード

本記事は、プレミアムコンテンツ「Computer Weekly日本語版　4月2日号」（PDF）掲載記事の抄訳版です。本記事の全文は、同プレミアムコンテンツで読むことができます。

• Computer Weekly日本語版　4月2日号：中古ソフトウェア販売は著作権侵害か？

なお、同コンテンツのEPUB版およびKindle（MOBI）版も提供しています。

　オンライン部門の責任者フィル・ヤング氏は今回の改定理由として、現在の旅行客は多種多様なデバイスを利用するようになったので、それに対応するようにWebサイトを近代化し、さまざまな交通手段に関する情報を提供するためだと述べている。

　つまり、先日ビクトリア線で起きた制御室にセメントが流れ込むといった事故（訳注）があっても、別の交通手段を簡単に見つけられるようにするということだ。

訳注：2014年1月24日に、速硬化性セメントが信号装置に流れ込み、ロンドン地下鉄のビクトリア線の大部分が運休となった事故。

テクノロジーを見通す力

　テクノロジーが今後数年でどう変化するかを予測することは不可能だ。そのため、TfLはデザイン時に下した幾つかの決定が長く使われ続けることを願っている。例えば、新しいWebサイトの構築にHTML5を使用すること、レスポンシブデザイン手法を取り入れ、アクセスするデバイスに応じてWebサイトを動的に変化させることを決めた。

　Googleマップとストリートビューも採用し、ユーザーの現在地に合わせてバス停や地下鉄の駅を表示できるようにしている。さらに、近くの駅やバス停を見つける「nearby」機能も組み込んだ。

　「ロンドンを訪れる観光客に最高の体験を届け、勤務先や自宅までの移動をできるだけ簡単にしたいと考えている」とヤング氏は話す。

　TfLのWebサイトは、ロンドンでも人気のあるサイトの1つだ。ロンドン市民の75％が利用し、毎月800万人が閲覧している。2013年の閲覧者数は7200万人を数え、閲覧回数は12億回に及ぶ。

　地球に優しい公共交通を目指すメンバー組織Advanced Public Transportは、TfLのWebサイトを「世界最高の公共交通サイト」と評価している。交通に関するさまざまなことを考えると、この改変は簡単な作業ではない。

　「人々が求めるサイトの使い方は変化している。モバイルによって全てが変わった」とヤング氏は言う。「人々が求めているのはスマートフォンからTfLのWebサイトにアクセスすることだけではない。スマートフォン、タブレット、デスクトップなど全てのデバイスで地理位置情報を扱い、どのデバイスでもサイトがシームレスに実行されることを求めている」

　サイトの構築とテストのため、ヤング氏率いるTfLチームは段ボール製のスマートフォンを作成し、利用者がモバイルサイトをどのように操作するかを想像した。段ボール製スマートフォンのディスプレーには切り抜きを利用し、細長い1枚の紙切れに鉛筆でユーザーインタフェースを描いた。「このスマートフォンのおかげで利用者の好みが分かり、不要な部分を削ぎ落とすことができた」とヤング氏は話す。

1つのAPIで交通データを統合

　モバイルアクセス以外にも、複数のTfLサイトを1つの総合的なサイトにまとめ、データサービスを統合することもデザイン目標の1つだった。そうすれば、利用者は目的地までの最適な公共交通手段を選択できるようになる。これは、プロジェクトの最も大きな作業領域の1つになっている。

　「データを正規化し、1つのAPIを使用して（TfLの公共交通に関する）全てのデータをこのサイトの傘下に統合し、優れたユーザーエクスペリエンスを実現した」とヤング氏は語る。

　TfLは、バスの到着時間を知らせるシステム、レンタサイクルのドッキングステーションの状態をリアルタイムに確認するシステム、地下鉄の運行状況を確認するシステムなど、複数のバックエンドシステムを運用している。これらのシステムが生成するデータは、それぞれ形式が少し異なっているため、フロントエンドサービスの構築を難しくしている。

　「さまざまなデータインスタンスごとに異なるコードを作成しなければならないので、かなり厄介な作業だ。これは当局だけの問題ではなく、サードパーティーの開発者にとっても問題だろう」と同氏は話す。

　TfLの新しいサイトは1つのデータモデルを使用している。同氏によると、データを正規化することで、地下鉄、バス、船舶、レンタサイクルのデータ形式が同じになり、1つのAPIで扱えるようになる。このため、非常に短時間でサイトを構築し、統合した情報を表示できるという。この統合により、利用者は全ての公共交通手段（船舶、バス、地下鉄、レンタサイクル）をまとめて検索できるようになった。

　「Webサイトの見た目には多くの時間をかけた。実に刺激の多い作業だったが、統合エクスペリエンスを実現するための作業の多くは見た目だけでは分からないだろう」と同氏は話す。

　TfLが公開しているデータを利用する約5000人の開発者は、1つAPIと正規化されたデータを使って簡単にTfLに接続できる。「開発者コミュニティーの効率が上がり、あらゆる交通手段を総合するサービスを構築できるようになる。当局も（サードパーティーの）アプリ市場から多くのイノベーションを得ることができる」

ユーザーエクスペリエンス要素

　Flashを使用していた以前のサイトとは異なり、新しいWebサイトは、スマートフォン、タブレット、ノートPC、デスクトップPCの全てで双方向性を実現するためにHTML5を基盤としている。

　「当局は、ユーザー中心のアプローチを採用することを方針にしている。これまで社内関係者や旅行利益団体などの第三者機関に50回にも及ぶ調査を行い、利用者がWebサイトに望むことを調べた。そしてこの結果を全て踏まえ、最善と思える要件をまとめた」とヤング氏は話す。

　調査対象者の要望にはかなりの共通点があることが分かった。

続きはComputer Weekly日本語版　4月2日号にて

本記事は抄訳版です。全文は、以下でダウンロード（無料）できます。

• Computer Weekly日本語版　4月2日号：中古ソフトウェア販売は著作権侵害か？

■Computer Weekly日本語版 最近のバックナンバー

Computer Weekly日本語版　3月19日号：新CEOは迷走するMicrosoftを救えるか？

Computer Weekly日本語版　3月5日号：サーバ市場を揺るがすIBM＋Lenovo連合

Computer Weekly日本語版　2月19日号：次世代ホットスポット「NGH」徹底解説