もしも、「ザ・ペニンシュラ東京」を解析するなら（上）［第45回］

毎週木曜9時は「かってに解析！」。だれもが知っている有名サイトをかってに取り上げ、「もしもアクセス解析をするならば、どこに目をつけるか？」という視点で、サイトの問題点やチェックポイントにあたりをつける方法を解説していく。

12月は、クリスマスや年末年始休暇などで、ちょっとリッチなホテルを利用する機会も多いのではないか。ということで、今回はシティ型高級ホテルの「ザ・ペニンシュラ東京」のサイトを取り上げる（以下、本稿において、カギかっこ付きで「ザ・ペニンシュラ東京」と書くときは、ホテル名ではなくサイト名を指す。他のサイト、ホテルも同様）。

ザ・ペニンシュラ東京は、東京・千代田区の有楽町にある超高級ホテル。標準的な宿泊料金は最低でも1泊60,000円台から、最高級のペニンシュラ・スイートになると、広さ347平方メートル、1泊100万円近くする（「日本ホテル協会」掲載の標準宿泊料金表より）。

筆者は、ホテル業界のサイトが直面している課題や戦略・戦術を十分に理解しているわけでもない。あくまでもどのような点に着目したらよいのかを重視して読んでいってほしい。

「ザ・ペニンシュラ東京」の閲覧シチュエーションを想定

今回のサイト利用シナリオは以下の通りだ。会社の総務部の人が、役員の指示で、ザ・ペニンシュラ東京の予約を行うというものだ。

Webサイトで宿泊予約まで行ったうえで、ホテルの地図とアクセス方法が書かれたページを印刷するところまでが、具体的なタスクとなる。

「ザ・ペニンシュラ東京」をエキスパートレビュー！

「ペニンシュラ」で検索すると、GoogleでもYahoo!でも1位

まずは検索エンジンで「ペニンシュラ」と検索してみる。「Google」でも「Yahoo! JAPAN」でも「ザ・ペニンシュラ東京」のWebサイトが自然検索の第1位に表示される。そこからサイトへ入ってみる。図1がトップページだ。解像度の低いモニターで見ていても、すべての要素がファーストビューに収まりそうな非常にコンパクトな作りだ。縦スクロールも必要ない。

高級感漂うトップページだが、文字の視認性が悪い

トップページの中央にあるメインビジュアルが高級感を醸し出している。高級感のあるブランディングを意識していると思われる。ただコンテンツへのテキストリンクは見にくい。ヘッダーやフッターを見てほしい。グレーを背景にした白抜き文字では、視認性は悪く、しかも文字が小さい。

実際のサイト利用者の属性は分からない。もし、今回のシナリオのように、若い総務の人が予約するのであればよいのだが、年配の役員さんでも意外とこだわりのある人だと、予約を依頼する前に、あらかじめ自分で宿泊する部屋の選択などをするのではないだろうか。となると、ユーザビリティの観点からは、比較的年配の人も利用することを想定し、文字は大きく、コントラストも付けるのが望ましい。メインビジュアルの中のテキストも含めて、文字の視認性は残念ながら非常に悪いと言わざるを得ない。

ホテルサイトの機能としては、

• 予約
• 客室案内
• 宴会場
• ホテル内設備案内
• 地図
• 交通機関からのアクセス

といったホテルに関する情報と、それに加えて、運営会社や採用情報といったものになろうかと思う。それほど多くのコンテンツは必要ないので、ナビゲーション要素としては、トップページにあるグローバルナビゲーションで十分だろう（図1の赤枠で囲んだ部分）。

「ザ・ペニンシュラ東京」をエキスパートレビュー！（続き）

業界用語的で分かりにくい言葉づかいがある

トップページ全体を眺めてみたところ、言葉づかいとして業界用語的で分かりにくいものがあった。

• メディアルーム（＝リリース、広報、ニュースレターなどがある）
• ディレクトリー（＝館内案内のこと、ブローシャーつまり小冊子になっている）
• ライフスタイル（＝ホテルの様子を写したビデオがある）
• ウェルネス（＝スパ、フィットネス、自然食、トリートメントなどの紹介）

これらの用語からは、それぞれのコンテンツにテキストリンクが張られているのだが、その先にあるコンテンツが若干想像しにくい。

トップページのナビゲーションはどうか？

トップページ（図1）の上部にあるグローバルナビゲーションは、メニューによっては、マウスオーバーすると、プルダウンメニューが現れる。たとえば「ご滞在目的」「婚礼・宴会」「ご予約」などのメニューだ。マウスオーバーすると、メニューの白抜き文字が太字になり、明度も上がって位置を確認させてくれる（図2）。

また下のフッターのナビゲーションは、「最新情報」以外、たとえば「ライフスタイル」（図3の青枠で囲んだ部分）をクリックすると、下からコンテンツへのリンクが含まれる長方形のエリア（図3の赤枠で囲んだ部分）がにゅるっと湧き出してくるような作りになっている。このクリックによるURLの変化はない。このエリアを消したいときには右上の［×］をいちいちクリックしなくてはならないのがわずらわしい。

メインビジュアルの下のエリア（図1の青枠で囲んだ部分）は、右から左へ、サイト内コンテンツへのリンクが流れていっている（図1を下に再掲）。これは実はフッターの「最新情報」のコンテンツが、アクセスした時点であらかじめ表示されていて、そのリンクが表示されているのだ。「最新情報」のテキストリンクをクリックしてもページ移動はない。流れているコンテンツのどれかをクリックしないと次のページへは移動しない。

左右に流れる最新情報をクリックしてみた

流れている「最新情報」のうちの1つ、「ツリー・オブ・ホープ」をクリックしたページが、下の図4だ。「最新情報」のページがいったん開いたのち、その中の「ツリー・オブ・ホープ」の枠が重なるように自動的に開く仕組みになっている。

右上の［閉じる］（図4の赤枠で囲んだ部分）をクリックすると、「最新情報」のページ（図5）が見えるようになる。

メインビジュアル部分に8つの画像があり、1つずつのコンテンツへのリンクになっている。訪問時は全体で18個の画像リンクがあり、縦スクロールのスクロールバーがあった（図5の青枠で囲んだ部分）のだが、薄くて分かりにくい。

サイト全体にわたり、コンテンツはメインビジュアル部分で表示するという一貫性があり、ブラウザのスクロールバーで縦スクロールさせないというユニークなユーザーインターフェイスになっている。つまり、縦スクロールが必要な場合も、このメインビジュアル内のスクロールバーを使わせるということだ。

「ザ・ペニンシュラ東京」をエキスパートレビュー！（続き）

トップページで滞在目的を選択する

さて、トップページに戻って、滞在目的を選択してみよう。

「ご滞在目的」のプルダウンメニューは4つある。この中から、たとえば「ビジネス」をクリックすると、まず4つのビジュアルが左右に4分の1ずつ均等に表示され、選択した「ビジネス」の部分の扉がスッと開くように、横幅が拡がり、最終的には図6の黄色枠で囲んだ部分のようになる。言葉だけで説明すると、いまいち動きのイメージが伝わりにくいと思う。上の「ビジネス」のリンクをクリックしていただくと、実際に動きを見ることができる。

ここまででも、メインビジュアル内に表示されるコンテンツをいくつか見てきたが、文字はやはり小さく、文中内タイトル（図6の緑枠で囲んだ部分）もコントラストは弱い色で表示されている。

コンテンツのリンクは、下にあるプルアップメニュー（プルダウンとは逆に、上に向かって表示されるメニュー）と右下の「次のページ」のボタン（図6青枠で囲んだ部分）だ。このページ自体のコンテンツが小さいテキストだけで、かついっぱい読まないといけない。その上、リンク先のコンテンツが一望できずプルアップメニューをクリックせざるを得ないのはいかがなものだろうか。

プルアップメニューをクリックしたのが下の図7だ。図7の赤枠で囲んだ部分を見る限りでは、「次のページ」をクリックしても同じコンテンツにたどりつけるようだと推察できる。

「次のページ」（到着と出発）（図7の青枠で囲んだ部分）をクリックすると図8のようになる。

プルアップメニューの始点のテキストが、「検索」ではなく「エクスプローラー」と変化している。大した問題ではないが、言葉づかいの揺れは、グローバルで展開しているサイトならではの翻訳の難しさなのかもしれない。

今回は、トップページから滞在目的の選択という、予約に入る直前のWebサイトの作りを見てきた。次回は実際に予約を行ってみることにしたい。

さて、この連載では、

• Webサイトのオーナーか管理者の方からの「かってに解析」してほしいリクエスト
• 「かってに解析」されたサイト運営者・管理者の方からの異論や反論

などを随時募集している。希望者は、（web-tan@impressrd.jp）までお寄せいただきたい。