光速じゃらんの設計背景など

設計思想

高速ブラウザの登場によりリッチクライアントを意識した。

Javascriptの描画速度が近年急速に進歩してきたためかなり重い処理をクライアントサイド に任せても大丈夫になりつつある。そこでdomの操作、オブジェクト配列のソート等重い処理をクライアントサイドでかなりおこなった。一方でサーバーサイド側の処理は意識的にかなり軽くした。地図をドラッグするたびに新しい情報を取り出すという事が主流となりつつあるが、これはサーバへのアクセス数が非常に重くなるため避けた。その代わりに右クリックにより簡単にサーバから情報を取り出せるようにした。

ドメインに特化したサイトを作りたかった

「詰め込めるものは全部詰め込んだ」というマッシュアップサイトは多い。しかしそのようなサイトは専門性に特化したサイトと比べて使いづらい事が多い。検索エンジンからのアクセスという視点で考えても何でも詰め込んだ多目的なサイトは目的が明確でないため辿り着けない場合が多い気がする。このような事を考えるとWebサイトはより目的志向である必要があるのでは？と思われる。という事で「光速じゃらん」はホテル検索をメインとして他の機能は補足的に付け加えるにとどめた。

初心者がすぐに使えるサイトを意識した

ユーザインタフェースの巨匠であるシュナイダーマンによると、良いインタフェースとは初心者でも簡単に扱え、上級者になれば更に素早く操作することが可能なものだそうだ。つまり最初からゴタゴタと使い方を読ますようなマッシュアップサイトは良いサービスとは言えない。使い方を読まずとも簡単に活用でき、使うに従って徐々に理解できるサイトが良いマッシュアップサイトなのである。この「光速じゃらん」が果たしてそうなのかわからないが意識はして制作した。また １０人程度被験者を集めて使用感を尋ね改良していった。使い方を読まずともある程度使っていると使えるようになると思う。

工夫点

ホテルを探し易くなるように心がけた

右側の情報閲覧画面に検索結果が表示される。そこにアイコンを表示し、アイコンの番号を地図上のアイコンの番号と一致させた。情報閲覧画面中のアイコン をクリックすると（他のサイトにも見られるのだが）地図上のアイコンから詳細情報を記したウインドウが表示される。

取得した情報を（地図の中心を真ん中としてそこから）近い順、評価順、安い順、高い順に並び替えられるようにした。情報取得前（じゃらんAPIに検索要求を投げる前） に条件指定を行う事もできるが、取得後にも並び替える事ができると非常に利便性が向上する。例えば品川駅に最も近いホテル２０件をまず取り出して、 そこから安い順に並び替えるという事ができる。これはAPIを単純に用いるだけではできない事である。またこの時並び替えた番号 が入れ替わるため、ひと目で安いホテルの順序がわかる。（番号１が最も安い）

地図上でアイコンをクリックすると情報ウインドウが開かれるが、そこにメモボタンがあり、ブックマークする事ができる。 ブックマークしたホテルはメモを削除というボタンを押さない限り消える事がない。ホテルを探す時に複数の候補が出て迷う事が多いが、そのような 時に非常に重宝する機能である。

地図を用いた様々なホテル探しを考案した

１つ目は検索範囲を地図の表示範囲以外にも絞れるようにした事。検索範囲を小さくする、あるいは地図の縮尺 を大きくすると検索範囲が透明な青色で表示される。この四角形で囲まれた領域が検索範囲である。これにより全体 を俯瞰しつつ地図の一部分を探す事ができるようになり快適である。またピンポイントである場所を狙い検索するといった事もできるようになる。

２つ目は閲覧モードを設けた事。アイコンをクリックしてその情報にアクセスするのでは効率が悪い時があるので 閲覧モードによりアイコンをクリックせずとも情報にアクセスできるようにした。

３つ目は周辺の写真を取り出せるようにした事。ホテルを探す時に周囲の環境を調べたい事があると思う。しかし地図だけでは周囲の環境を調べるのには不十分であると思われる。そこで周辺の写真を取り出せるようにした。これも閲覧モードを使うとカーソルをアイコンに合わせるだけで情報を閲覧する事ができ便利である。

４つ目はキーワード検索。やりたいこと（海水浴、スキー、イチゴ狩りなど）ははっきりしてるけどどこにしようか決めかねている場合は良くあると思われる。そこで場所を推薦してくれるような機能があれば場所の決定に役立つのではないかと思い付け加えた。また推薦度が高いものほどアイコンが大きく表示されるようにした。

速く、快適を心がけた

結果の表示が速い、ページ遷移なし、できる限りスクロールもなしという点にこだわった。またページのロード時や情報取得時に形が崩れないようにする、ロード時にフォーカスが検索バーになっている、検索バーでEnterを押せば情報を取得できる、全てのブラウザでほぼ同等の表示、というような細かい点も意識をした。

ユーザがサイトにアクセスした時の画面解像度を、運営しているサイトのアクセス解析から調べ、地図の大きさ等を考えた。よってほとんどの人が快適に 使えるはずである。（約２％解像度が1024*768以下のユーザがいたが、その場合若干閲覧性が悪くなると思われる） なお他のマッシュアップサイトでは地図をほぼ全画面表示しているものが多い。しかしWebサイトに自然とマッシュアップアプリケーションを取り込もうとすると やはり全画面では不自然なので全画面表示にはしなかった。（実際じゃらんも楽天トラベルも食べログも地図検索で地図の全画面表示はしていない）