奈良大学

最近、大学のサイトリニューアルが目立っているように思います。その理由は、少子化によって受験生の確保が困難になっていること、WEBというメディアの重要性が認知されてきたということが起因しているのではないでしょうか。今やWEBサイトを持たない大学の方が珍しいですが、より戦略的な広報ツールとして機能するように、情報の充実・構造化、運用の効率化、コスト削減などが計られ、他大学との差別化が意識されています。大学に限らず、サイトリニューアルが様々なWEBサイトで行われている今日、情報設計の重要性がますます注目されていることが分かります。

デザイン

スクールカラーの活用

校章・スクールカラー・キャラクター｜奈良大学に記述してありますが、奈良大学の描くイメージを色によって表現されたロイヤル・ブルーをメインカラーとして使用し、サイト全体を通してブランドイメージを訴求しています。オーソドックスな方法ですが、インタラクションを高める効果的な手段なので、奈良大学のWEBサイトを参考にしてみてはいかがでしょうか。

ごちゃごちゃ感のないすっきりデザイン

参考程度に色々な大学サイトを閲覧していましたが、大抵はテキスト情報だけで埋め尽くされ、視認性の悪いレイアウトばかりです。グラフィックデザインの観点から素晴らしいと思うサイトは本当に稀でした。では何が違うのかというと、ゲシュタルト効果を意識しているかどうかにあると思います。以下、おそらく誰もが知っているゲシュタルト崩壊の引用です。

ゲシュタルト崩壊(独: Gestaltzerfall)とは心理学における概念のひとつで、全体性を持ったまとまりのある構造（Gestalt: ドイツ語で形態）から全体性が失われ、個々の構成部分にバラバラに切り離して認識し直されてしまう現象をいう。

そして、人間の視覚が物体を自然にグループとして捉える現象のことを「ゲシュタルト効果」といいます。この現象はレイアウトには非常に重要で、いくつかの要因があります。まず一番オーソドックスなのが「近接」で、ゲシュタルトを崩壊させないで｜Macとデザインと美しいモノのブログという記事に分かりやすく解説されています。要するに近くに配置された要素は、関連のあるものとして見なされるということです。他にも補完、継続、類似などの要因がありますが、今回は省きます。興味のある方は調べてみてください。

情報構造

直接の利益に繋がる目標という意味での主なビジネスゴールは「受験生の確保」だと思います。サイトゴールは「ブランドイメージの向上」や「運用効率の向上」が挙げられるのではないでしょうか。

対象者別にナビゲート

大学のWEBサイトでは、受験生はもちろん、在学生、保護者、企業の採用担当者など、様々なステークホルダーが想定されます。ユーザー調査を行い、どのようなユーザーがサイトを訪問するのか、そしてそのユーザーの期待に応えるにはどのようなナビゲーション設計を行うのが最適なのかを考えます。以前、名古屋学院大学｜シャンディ・ガフを飲みながらをベンチマークした際にも記述しましたが、奈良大学でも対象者別にナビゲーションを設置しています。サイト内にある膨大な情報を最適化し、それぞれのステークホルダーの期待に応えるであろうコンテンツを提供しています。これは、ペルソナによって、ユーザーのニーズや行動パターンを明確にし、優れたシナリオが考慮されていることを示唆しています。また、ただ情報を一覧化しているだけでなく、情報のプライオリティが意識され、重要なコンテンツほど上から順にマークアップされている点にも注目です。

学部別のWEBサイトに誘導

驚くべきことに、奈良大学ではほぼ全ての学部でWEBサイトを保有しているようです。学部・大学院｜奈良大学でそれぞれの学部ページを確認してみると分かりますが、学びのポイント、カリキュラムなどの必要最低限の情報は学部ページ内で網羅され、より詳細な情報に関してはそれぞれの専用サイトへ誘導しています。要件定義の時点で各学部のWEBサイトに関しても意見が交わされたと思いますが、公式サイト、学部サイトの役割を明確にすれば自ずと答えが出てくるはずです。1つのサイトの情報を詰め込んでもそれは良い設計とは言えません。奈良大学の場合、公式サイトがマルチエントランスとなり、ユーザーがどの切り口からアプローチしても、必要とするコンテンツへ誘導できるようなサイト構造になっています。情報探索行動にもレベルがあり、ニーズが明確なユーザーは直接学部サイトへアクセスする可能性もありますが、明確でないユーザーは公式サイト経由でアクセスすることになるでしょう。名古屋学院大学のように、関連サイトを同時にリニューアルするケースもありますが、これには予算や期限の問題もあるのでケースバイケースといえます。

関連情報の提供

奈良大学では、異なるレベルの階層やサイト構造にわたって、重要な繋がりを示す関連ナビゲーションが提供されています。ページごとの文脈に応じて変化する「文脈的ナビゲーション」とサイト内で訴求したい重要なコンテンツへのアクセスを促す「クイックリンク」があります。前者は、ページのコンテンツ末尾に、「関連コンテンツ」というラベリングで配置されています。主に関連する別サイトへのリンクやページ内の遷移が促され、ユーザーに新たなインタラクションを感じさせています。余談ですが、Amazon.comでは、フィルタリングによって生成された関連商品の情報がサムネイル化されて表示されています。これは文脈型ナビゲーションではあるのですが、ページごとというよりかは、サイト全体のユーザー行動が何らかのアルゴリズムによってランキングシステムに反映される仕組みである為、ちょっと特殊なケースであるといえます。話を戻して、後者はサイドコンテンツに「関連情報」というラベリングで配置されています。文脈的ナビゲーションとの違いは、特定のページではなく、サイト全体に対して文脈的であるという点です。見ていただければ分かりますが、資料請求、奈良大学のGP、社会調査学科誕生など、アクセスの頻度が高いコンテンツ、または注目させたいコンテンツが並べられています。奈良大学では、ページごとにクイックリンクの項目にも変化を持たせているので、文脈的ナビゲーションとクイックリンクとの間の子みたいな感じになっていますね。

ユーザビリティ

ページ内でのタブインタフェース

いつかの記事にも記述した内容なので復習になりますが、タブインタフェースを使用するポイントは、関連性のある情報をグループ化して提示するということです。見出し単位で区分けした方が良い場合もありますが、タブインタフェースの場合は、情報がかなり細分化された時に使用するべきです。教員紹介｜奈良大学を見ていただければ分かりますが、当ページは教員紹介が主なコンテンツであり、学部は単なる所属なので、見出しとしては不適切です。つまりタブインタフェースは、ナビゲーションの役割を担っているということになります。使用する利点としては、ページが長行になるのを防げるのと、より直感的な操作を提供できること。また、各パネルを比較したり、同時に閲覧する必要がある場合、都度パネル間を行き来することになり、ユーザーにフラストレーションを与えてしまう可能性があるので要注意です。

一覧表示のレイアウトを切り替える

トップページの「クローズアップ」でリスト表示と、サムネイル表示を切り替えられるインタフェースが実装されています。こうしたインタフェースは卒業研究作品｜文化女子大学 造形学部キャリア支援ネットなどでも動作を確認することができますが、まだまだ事例は少ないと思います。サムネイル表示があると、その先にどういったコンテンツがあるのかということが想定しやすいという利点があるということと、いくつかの表示方法をユーザーに委ねるという設計は、様々なステークホルダーが想定される大学サイトの場合、効果的な手段だと思います。jQueryなどのJSライブラリを使用すれば簡単に実装ができるようなので、関心のある方は試してみてはいかがでしょうか。詳しくは一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch｜コリスからどうぞ。

アクセシビリティ

小さな配慮から

大学規則｜奈良大学などで確認ができますが、PDFファイルのダウンロードが必要なページでは、Adobe Readerのダウンロードに関する注意書きがされています。また、江戸期の奈良絵図集成｜奈良大学では、それぞれの図版を拡大表示することができます。もしかしたらPDFアイコンだけで十分であったり、拡大画像がなくても良いかもせません。しかし、こうした小さな配慮がアクセシブルなサイトへの第一歩になるのではと思います。

複数の情報で伝える

奈良大学では、見出し部分がリンクしているのか、してないのかをリンク色、ロールオーバー、アイコンなど、複数の情報を提示することでアクセシビリティを向上させています。色覚障害を持つユーザーは、色情報のみでは、的確な情報の区別が困難になるため、こうした配慮は必要不可欠です。また、スクリーンリーダーを使用しているユーザーに対しては、現在位置を明示的に伝える必要があります。例えば、遷移した先のナビゲーションのハイライトを示す場合、alt属性またはtitle属性に「現在"カテゴリ名"にいます」というように、指定する方法があります。選択された項目をスクリーンリーダーが読み上げてくれるので、現在位置を正確に把握することができます。