スマホに特化されたUIが特徴

リゾートホテルや高級旅館の予約ができる「一休.com」。今はレストラン予約やショッピング、ビジネスホテルの予約にも業態を広げ総合的な予約システムを提供しています。

今回は一休.comを使ってホテルの予約をしてみました。HTML5やJavaScriptを使ってネイティブアプリのような動作を実現し、スマホに特化したインターフェイスが印象的でした。

一休.comはネイティブアプリでもサービスを提供していますが、今回はスマホサイトを例にスマホUIを見て行きたいと思います。

サイト名	一休.com
URL	http://www.ikyu.com/sd/IkSdIndex.aspx
QRコード

TOPページでは検索カテゴリが整理されていて、「今日泊まれる宿」「明日泊まれる宿」「近くの宿」などユーザーが探しやすいコンテンツが配置されています。デザインも見やすい！

１，カレンダー予約

今回はスマホの動きを確認していただけるように、動画を撮影してみました。

ネイティブアプリと遜色ないカレンダーを使った検索をHTML5＋JavaScriptで実現しています。泊数を指定し最初に泊まる日をカレンダーから選択すれば、宿泊日数予定が色付きで表示されます。

また翌月を表示する動作もスムーズです。

モーダルウィンドウを使って選択画面が表示されるので、いちいちカレンダー画面に遷移する必要なく通信も途切れることがありません。モバイルユーザの特性をよく理解した構成になっています。

２，地域・人数選択

宿泊地域の選択や、宿泊人数の設定も画面を遷移することなく画面上に選択画面が現れ、モーダルウインドウ上で検索条件の指定が可能です。子供人数も細かく設定することができ、検索条件の指定も使い勝手が高いです。

３，レビューや部屋写真などをモーダル表示

宿泊施設の詳細に入るとレビューや宿の詳細写真、部屋の種類一覧を見ることができます。ECサイトでは商品詳細ページに商品ごとのレビューを遷移することなく同じ画面で表示させることができるので、こちらも参考になりそうです。

モバイルユーザは遷移が多いことが不満

スマートフォンユーザーのECサイト利用実態調査 | 株式会社IMJ

IMJの調査で、スマホECを利用するユーザの不満点1位は「1ページの情報量が少ない（ページ遷移が多い）」ことです。

いつ、どこでネットに接続しているか分からず、移動中などの通信環境が不安定なモバイルユーザには、画面遷移をさせることなくサイトコンテンツを提供しなければなりません。上記3つの画面を遷移させない工夫で、モバイルユーザのストレスは大きく軽減されるでしょう。

ネイティブアプリかWebアプリか

長らく議論がされている「ネイティブアプリ」vs「Webアプリ」

それぞれメリットデメリットがありますが、今回のホテル予約の一休.comを見て今後WebサービスはWebアプリに収束していくだろうと感じました。

よくWebアプリで言われるデメリットととして「動作速度」や「オフラインでの動作制限」が挙げられます。しかしスマートフォンの処理速度や通信回線の高速安定化、キャッシュなどの活用によってこれらの問題はほぼ解消されます。

先日発表されたFirefox OSは全てUIをWebアプリとして開発できることが明らかになっています。HTML5、CSS、JavaScriptで動作をする仕様で、開発者は柔軟な開発ができるようになりました。
Firefox OS – Mozilla | MDN

プラットフォームに依存しないWebアプリケーションの開発は、開発する側にとっても利用するユーザにとってもメリットがあるので、今後はWebアプリベースでの構築が主流になるでしょう。

上林