もしも、「早稲田大学」を解析するなら（前半）［第39回］

今週も、早いもので、もう木曜日。そして、毎週木曜9時は、かってに解析だ！

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

今回は「早稲田大学」だ（以下、本稿において、カギかっこ付きで「早稲田大学」と書くときは、大学名ではなくサイト名を指す。他のサイト、大学、企業も同様）。

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

「早稲田大学」の閲覧シチュエーションを想定

今回のサイト利用シナリオは以下の通りだ。早稲田大学を受験しようと考えている受験生が、一般入試の内容と、オープンキャンパスの日程を調べるために訪問して来た、という想定だ。

オープンキャンパスというのは、いわゆる大学の内覧会だ。入学を検討している受験生やその家族に学校施設を見てもらい、学校への関心を高めてもらうためのイベントである。

1990年代後半から、少子化によって学生の確保に頭を悩ませる一部の大学や専門学校で盛んにおこなわれるようになった。近年では、早慶上智、関関同立といった有名私大や、東大・東工大などの国公立大でも開催されている。

「早稲田大学」をエキスパートレビュー！

まずは検索エンジンで「早稲田」と検索してみる。「Yahoo! JAPAN」でも「Google」でも、「早稲田大学」が検索結果の第1位に表示される（図1と図2の赤枠で囲んだ部分）。

入試の情報や、受験生のためのページへの直接リンクが表示されて、検索エンジンも使いやすくなってきている（図1、図2の青枠で囲んだ部分）。こういうリンクから直接目的のページへ行ってもいいのだが、まずはトップページを見てみることにしよう。

「早稲田大学」をエキスパートレビュー！（続き）

ユーザー属性別メニューに目が行くトップページ

図3がトップページだ。全体的にコンパクトで、少々文字は小さいように感じる。テキストの色が若干灰色がかっていて、コントラストが悪い部分もある。老眼に悩む中高年にはキツイが、10代の受験生がメインターゲットなのだろう。

メインコンテンツ部分は、ニュース・イベント系、アーカイブ系など、それほど一般の人にとって魅力的なコンテンツがあるように見えない（図3赤枠で囲んだ部分）。

多くの人は、ファーストビュー上部のメインビジュアル左にある「受験生の方へ」「卒業生の方へ」「ご父母の方へ」「一般・企業の方へ」といった利用目的別あるいはユーザー属性別のメニューに目が行くのではないだろうか（図3青枠で囲んだ部分）。そのファーストビュー上部のナビゲーションについて少し見ていこう。

ユーザー別にまず入口で分けるグローバルナビ

早稲田大学のスクールカラーであるエンジの背景に、白抜き文字のグローバルナビゲーションの部分は（図3青枠で囲んだ部分）、「大学案内」「学部・大学院等」「研究活動」「国際展開・留学」「図書館・博物館」「キャリア・生涯学習」といったラベルがついており、なんとなくコンテンツが想像できる。

一方、誰向けなのかという軸で見るナビゲーションも用意されている。図3青枠で囲んだ部分の一番上中央部分に、［在校生］［教職員］というボタンがある。いわゆる学校の直接的な関係者のためのページへのリンクボタンだが、あまり目立ってない。関係者だからということもあって、特に目立たせる必要もないという判断があるのかもしれない。

直接の関係者以外のユーザーについては、左上の黒の背景に白抜きした部分に、「受験生の方へ」「卒業生の方へ」「ご父母の方へ」「一般・企業の方へ」という4パターンのユーザー像を想定したリンクが見えている。今やどこの学校系サイトでも、こういったユーザー別にトップページでターゲットを分けるのが普通になっているようだ。これらのユーザーのサイト訪問の目的は大きく異なるので、ユーザー別にまず入口で分けてしまうというのはよいことだ。

「早稲田大学」をエキスパートレビュー！（続き）

ナビゲーションが見にくい！使いづらい！

ではシナリオどおり、受験生の気持ちになって、一般入試の内容と、オープンキャンパスの日程を調べていこう。

まずはトップページの「受験生の方へ」のところにマウスを合わせて……、といきたいところなのだが、図4をご覧いただきたい。

これは2番目の「卒業生の方へ」にマウスを合わせたところだ。下の階層（2階層目）のメニューが右に見えてくるのだが、文字が小さいこと！　一部の項目は、文字数が多く、テキストが折り返されている。また項目が多いためにスクロールバーがあるのだが、このスクロールバーが細い（図4赤枠で囲んだ部分）。こういったデザインのせいで、項目自体が選択しにくく、このスクロールバーにマウスを重ねて動かすのも、かなり正確なテクニックが必要だ。卒業して数十年経った中高年ユーザーには相当キツイのではないだろうか。

さらにナビを使ってみると、問題発生

では「受験生の方へ」から「入試概要」を選んで、第3階層まで表示してみよう（図5）。気になるほどのレベルではないが、図5の赤枠で囲んだ部分のように、第2階層と第3階層間が間延びしているために、マウスの移動が少し余計に必要になる。またこの画面では気がつかないのだが、実用上結構問題となりそうな部分を発見した。

具体的に示していこう。下の図6をご覧いただきたい。第1階層で「受験生の方へ」を選択し、第2階層で「Q&A」を選択しているところだ。ここから第3階層の「入試Q&A」を選択したいので、青矢印のように、ナナメにポインタを動かしてみると、「Q&A」を選択していたのが、この選択が別の第2階層のメニューに移ってしまう。つまり赤矢印で第2階層の別メニューに移動していく感じになるのだ。

第2階層の「Q&A」から、第3階層の「入試Q&A」を選択するには、まずマウスを水平に移動して、第3階層側に移動した上で、コンテンツを選択するためにマウスを上方へ移動させなければいけない。つまり図6の黄色矢印の2アクションが必要だ。

下向きに展開されるプルダウンメニューでは、同じような微妙な体験をしたことがないので、なぜこのようになるのか、理由がすぐに気がつかなかったが、みなさんはこのナビゲーションの問題点あるいは改善点を指摘できるだろうか？

「早稲田大学」をエキスパートレビュー！（続き）

「早稲田大学」の水平展開ナビゲーションが使いづらい理由とは？

第37回、第38回で記事にした「ユニクロ」のトップページ（図7）や、他のメガドロップダウン式メニューの画面（図8）をご覧いただきたい。これらの例では、他の階層のメニューに戻ってしまったり、別のものを選択してしまったりする誤りは相対的に低いと思われる。

さてこの両者の使い勝手の溝がどこにあるのかおわかりだろうか。

プルダウンメニューの原則として、下の階層のメニュー表示が始まる場所は、選択された上の階層の直下となっている。そう考えるとどこがおかしいのかがわかる。「早稲田大学」の右に展開していくメニューは、第3階層の項目表示が必ず、メインビジュアルの上部から始まっていること。これが問題なのだ。

下の階層の表示開始位置が問題だ

言葉で言われてもピンとこないだろう。図9を見てほしい。第2階層が「Q&A」なら、第3階層のメニュー表示開始場所は、現在の場所（赤枠で囲んだ部分）ではなく、ポインタを真横に移動した場所から始めるべきだ（黄色枠で囲んだ場所）。

こうすれば図6の2アクションは、少なくとも1つの項目では1アクションになるし、それ以外の項目選択する場合も、マウスは最小移動で済むようになる。そして図5でも説明したように、さらに第2階層と第3階層の間延びを無くせば、マウスの移動による項目選択の混乱も大分減ると思われる。

筆者はページをHTMLやCSS、JavaScript、Flashなどでいちから作った経験はないので、どういう制約があるのか知るよしもないが、このインターフェースの造りからすると、階層型で横展開していくナビゲーションの表示範囲を、

• メインビジュアルの中に納めなければいけないという制約
• 第2階層の横表示の幅は固定にしなければならないという制約

この2つの制約があるために、その範囲内で工夫したのだろう。もしそうでなければ、スクロールバーを使ったりする必要もなく、メインビジュアルの外にまで表示していいはずだ。この階層型メニューを利用しているときは、上位階層のメニューさえ見えていれば、他のコンテンツが下に隠れてもまったく問題ないので、もしメインビジュアルの中で表示しなければいけない技術的制約がないのであれば、ただちに変更すべきナビゲーションのように思う。

なぜかリンクが張られていない第2階層

もう1つ、ナビゲーションで不思議な部分があった。それはこの3階層のメニューの第2階層だけが、そこでクリックをしても反応がないことだ。

どういうことかというと、第1階層の「受験生の方へ」などはクリックすると該当ページに飛ぶし、一番右の第3階層も該当のページに飛ぶのだが、第2階層は、クリックしてもどこのページにも移動しない。リンクが張られていない。どうやら第2階層はURL構造の階層ではなく、ナビゲーション上だけの論理的な階層のようだ。

あと、トップページの右上部分にはサイト内検索もあり、「交通アクセス」「サイトマップ」なども配置してある。「Language」だけは、マウスオーバーするだけで、自然にメニューが下りてくるという動きがある。これは他と動きが違うのだが、余計にワンクリックさせることなく言語を切り替えられるので、これでよい感じがする。「お問合わせ」のページは、電話番号、メールアドレスなども代表、各部門すべて詳細にあり、出し惜しみ感もなく好感が持てる。

今回はここまでとしたい。またしてもトップページの話が長くなってしまったが、トップページに、検索からも相当の割合で流入があると思われる場合は、トップページの使い勝手はかなり重要だ。次回は、本題の一般入試の内容とオープンキャンパス日程を確認していこう。

さて、この連載では、

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

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