大学サイトのユーザビリティ向上のポイント!

大学サイトには受験生・在校生・卒業生とたくさんの人が訪れます。
現在はデザインの幅が広がり視覚的に楽しめるWebサイトが増えてきていますが、ユーザビリティをおろそかにしてはいけません。

在校生と卒業生は入学してから長い間利用し続けますし、受験生も大学サイトから大学の情報を収集するのでユーザビリティの強化が必要です。

この記事では、大学サイトのユーザビリティについて注意するべきことを紹介します。

※ここで紹介するのはあくまで大学に関するユーザビリティの1つの基準です。この基準に必ず合わせなければいけないというものではありませんのでご了承ください。

トップページのユーザビリティのポイント

リンク先のページ内容が分からないリンク名を使わない

リンク先のページ内容が分からない曖昧なリンク名の使用は避けましょう。
大学Webサイトのユーザーは、「講座の内容を知りたい」「入試日程を知りたい」「各種書類の発行の仕方を知りたい」など、知りたい情報を明確にしてホームページを訪れます。

大学サイトを訪れた際に最初にユーザーが目にするのはもちろんトップページです。
ユーザーはこのトップページからナビゲーションやボタンをクリックして、自分が知りたい情報のあるページに遷移します。

ボタンをクリックする際にリンク名から自分の知りたい情報がどのページに記載されているのかを推測するので、ボタンのリンク名が曖昧で目的のページにたどり着けなかった場合、ユーザーに疲労感や不快感を与えてしまう恐れがあります。

他にも、例えば入試情報と受験者向けページのリンク先を同一のページに設定するというような、ユーザーにとって混乱を招くリンク先の設定も避けるべきです。
ユーザーがスムーズに情報収集できるように、リンク名がページ内容と一致した分かりやすいものにしましょう。

動きのある画像やテキストを使用しない

HTMLやCSS、JavaScriptがどんどん進化している昨今、動きの多い画像やテキストを使用しているWebサイトが増えてきています。

しかし、大学サイトでは動きのある画像やテキストの使い方に注意しましょう。
現在は、大学サイトをいわゆる現代風のデザインにしている大学も増えてきていますが、ユーザビリティが意識されたWebサイトになっているでしょうか。

アクセシビリティの基準であるJIS X 8341-3 2016の達成基準2.2.2では、5秒以上動きのあるコンテンツに対して「一時停止、停止、非表示」のメカニズムを設定するように勧めています。

あまりにも画像やテキストの動きが大きいと、ユーザーがその動きに気を取られ、各ページにスムーズにたどり着きにくくなる可能性があるので、ユーザビリティを意識するならば大きな動きのある画像やテキストの使用は極力控えた方が良いでしょう。

画面2枚分以内にページをまとめる

トップページは画面2枚分以内になるようにしましょう。

先ほども申し上げたように、トップページは大学サイトを訪れたユーザーが最初に目にする場所です。大学の良さを伝えたいがためにトップページに情報を詰め込みたくなる気持ちも分かりますが、トップページの情報量が多すぎるとかえって逆効果です。

ユーザーは自分の知りたい情報が記載されているページにできる限り早くたどり着きたいので、調べる行為を情報量の多さに妨げられてしまったときは大きなストレスを感じます。

また、近年ほとんどの大学が大学ホームページのスマホ対応を行っていますが、スマホから見る際のユーザビリティを確保するという意味でもページを長くしすぎず、短くまとめると良いでしょう。

しかし近年、多くの大学は大きく解像度の高い写真を積極的に使用しコンテンツの見栄えをよくするのが主流です。大きい画像を多く使用すると、自然と1ページが縦に長くなり画面2枚分どころか5枚分以上ある大学も増えています。見栄えやデザインを重視するのか、それともユーザビリティをを重要視するかによって変わってくる部分ですので、ユーザビリティを重視するのであればこの基準を意識しましょう。

サイト内の各ページのポイント

各ページに共通のロゴを設置する

大学サイトの各ページに、共通のロゴを設置しましょう。

一般的なWebサイトの中に、別のWebサイトのリンクを張ることは珍しくありません。特定のWebサイトで情報収集していたつもりが、気づいたら全く違うWebサイトを見ているという状況がしばしば起こります。これは大学サイトでも起こりうる事です。

ユーザーは情報の信頼性を確認するために、「この情報はどこが提供しているものか」を重要視しています。そのため、今いるサイトが大学サイト内であることを伝える方法として、サイトのロゴを設定し、大学サイト内のすべてのページに表示することが手軽かつ効果的です。

各ページに共通のナビゲーションバーを設置する

大学サイトの各ページに、共通のナビゲーションバーを設置しましょう。

ユーザーを各種コンテンツに誘導するメニューバーをナビゲーションバーといい、サイト内で共通のナビゲーションバーをグローバルナビゲーションバー(通称GNB)といいます。

ユーザーのほとんどが大学サイト内のすべてのページにGNBが配置されているものだと考えているので、探している情報が記載されているページにたどり着くためにGNBを利用したいのに特定のページにGNBが無ければ困惑してしてしまいます。

せっかく大学サイトにユーザーが訪れてくれたのに、ページを行き来している間に道に迷い、そのままサイトを離れられてしまったら、ユーザーはもちろん大学側も損をしてしまいます。大学サイトのガイド役として全ページに共通したGNBを設置し、ユーザーを目的のページへと導くようにしましょう。

ナビゲーションガイドを設置する

ナビゲーションガイドとは、現在訪れているページがWebサイト内でのどこの位置にあたるかを示す要素のことです。一般的なナビゲーションガイドは「パンくずリスト」と呼ばれるものです。このパンくずリストの重要性を紹介した記事をWebMediaに掲載しているので、併せてお読みください。

WebMedia参考記事

パンくずリストとは？役割やメリット、設定における注意点を解説！

https://www.itra.co.jp/webmedia/bread_crumbs.html

私たちは地図で行きたい場所を調べようとするとき、いま自分が居る場所がどこかを把握しようとするのではないでしょうか。Web...

各ページにトップページへのリンクを設置する

大学サイト内の各ページに、トップページへのリンクを設置しましょう。

ユーザーは、情報収集中にWebサイト内で迷ったとき、または目的の情報を得た後にさらに他の情報を見ようとするときに、一度トップページに戻って確認するケースが多いです。したがって、各ページにトップページへのリンクを設置することは、ユーザビリティの向上に繋がります。

設置する際は、ユーザーにリンクがあることを気づいてもらいやすくするために、ページ下部ではなくページ上部に設置すると良いでしょう。昨今では、ロゴを左上に設置して、そのロゴにトップページへのリンクを設置することが一般的です。

リンクカラーが変化するようにする

リンクをクリックする前とクリックした後で、リンクカラーが変化するようにしましょう。

ユーザーは、大学ホームページで情報収集している際に、どのページに既に訪れたかを全て覚え続けることはできません。特にリンクが多く掲載されているページでは、リンクカラーの変化を取り入れることで、ユーザビリティが向上します。

メインコンテンツのユーザビリティ向上のポイント

入学金や授業料の情報を正しく掲載する

受験生やその保護者にとって、入学金と授業料は大学を選択する上でとても重要な情報です。しかし、受験生向けのページと保護者向けのページの分け方が曖昧な大学サイトも少なくないので、訪れた受験生や保護者の情報収集の手間を増やしてしまう場合があります。

入学金・授業料の情報が掲載されているページにスムーズにアクセスできるように、保護者向けのページにはもちろん、保護者と共に受験生がページを見ることを想定して受験生向けのページにも案内があると親切です。

また、入学金や授業料の年度情報を更新していないケースも稀にあります。金額に変更がある事自体が珍しく、更新する必要性を感じにくいかもしれませんが、受験生と保護者にとっては重要な情報です。年度ごとに、年度情報が更新されているかは毎年よく確認しましょう。

キャンパスの情報を細かく記載する

ほぼ全ての大学サイトがキャンパスの交通アクセスページを設けていますが、記載内容が明確でないケースが見受けられます。キャンパスの最寄り駅・バス停の名前やその場所や、所要時間など、できる限りキャンパスの位置情報が分かりやすくなるような情報を記載しましょう。

また、各キャンパスに対応する学部や年次の情報を記載することも必要です。キャンパスの交通アクセスページを見るだけで、おおよその場所や経路を把握してもらえるような、適切な情報量にしましょう。

アクセシビリティについて

代替テキストを適切に使用する

非テキストコンテンツを使用する際には、代替テキストを適切に使用しましょう。非テキストコンテンツとは、例えば画像や動画などが挙げられます。

<alt>属性は、視覚に障害をもつ人にとっては音声ブラウザが読み上げをしてくれる要素です。また、何らかの理由で画像が表示されなかったときにその内容を知らせてくれるなど、重要な役割を果たします。しかしながら、全ての画像に<alt>属性をつければ良いというわけではありません。

Webサイト内の画像は「意味のある画像」と「意味のない画像」の２種類に分けることができます。意味のある画像とは、サイトに記載されている内容を理解するうえで、内容の把握が必要不可欠な画像のことを指します。意味のある画像には、必ず<alt>属性を設定しましょう。

逆に、例えば文章を仕切る点線や罫線を画像で表現していた場合、それらはサイトの内容を理解するうえで知らなくてもいい情報です。もし<alt>属性をつけてしまうと、音声読み上げ機能を使用した際に、意味がないのに読み上げられてユーザーの理解の邪魔をしてしまいます。

画像や動画にalt属性を作業的に入れるのではなく、大学サイトのユーザーのことを考えながら代替テキストを挿入しましょう。

文字の色と背景の色を適切なコントラスト比にする

文字が見やすいように、文字の色と背景の色を適切なコントラスト比にしましょう。

デザインに気を取られているとついつい忘れがちなコントラスト比ですが、 JIS X 8341-3 2016の達成基準1.4.3の「 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。」をクリアできるコントラスト比にすると良いです。

コントラスト比に限らず、アクセシビリティを高めるためにはJIS X 8341-3 2016を確認しながら大学サイトを制作することをおすすめします。

リンク先のページを新規ウィンドウで立ち上げない

リンク先のページをできるだけ同じウィンドウで開くように設定しましょう。

大学サイト内で情報収集する時は、たくさんのリンクをクリックして複数のページを見ることが多いです。もし新規ウィンドウで立ち上げるように設定していると、複数のウィンドウが乱立してどこに何があるのか分かりにくくなってしまいます。

また、新規ウィンドウからだと「戻る」ボタンではそのリンクが掲載されていたページに戻ることができず、ユーザーに手間をかけさせてしまうことも、新規ウィンドウでの立ち上げを避けたほうが良い理由の１つです。

その他の注意点

要約文対策をする

Google検索はほとんどの場合、検索結果として挙げたページのHTMLファイルを確認し、meta要素のdescriptionに検索キーワードが入っていた際には、descriptionの内容を要約文として採用します。

これはサイト内検索ツールであるGoogleカスタム検索でも同様の仕様であり、これはページ内容を明確に説明したdescriptionを記述することで要約文対策ができることを意味しています。大学サイトのスマホ対応が標準的になった今、小さな画面で分かりやすい検索結果を表示することは、ユーザビリティの強化に繋がります。

Flashについて

近年では、大学ホームページ内でFlashを使用する大学はほとんど見受けられなくなりました。

Flashは、使い方次第では表現の仕方の選択肢が増え、ユーザーの理解度を高める内容を制作する大きな要素となりますが、使うタイミングを間違うと、ユーザビリティとアクセシビリティの両方を損なうことになります。

それに加え、iPhoneやAndroidはFlashに対応していないので、扱いの難しさとスマホ対応の考慮の２つの要因から、Flashの使い方が見直されたのでしょう。 Flashは2020年に終了するため、使用は避けましょう。

まとめ

受験生が大学の事を知ろうとするときに、まず見に来るのが大学サイトです。ユーザビリティの高い大学サイトにすることは、訪れた受験生に良いイメージを与えます。多くの学生に自分の大学について興味を持ってもらうために、ユーザビリティを強化していきましょう。

ただし始めにも書かせていただいたように、ここで紹介したのはあくまで大学サイトに関するユーザビリティの1つの基準です。この基準に必ず合わせなければいけなかったり、最近リニューアルした大学サイトがこれらの基準に必ずしも沿っている、というものではありませんのでご了承ください。

大学サイトのデザインを変えたい、ユーザビリティの高い大学サイトにしたい、とお考えではありませんか？ITRAではお客さまのご要望に沿いつつ、システム設計からデザインに至るまで高品質なホームページ制作を行い、多くの大学サイトを制作してきました。Webサイトのリニューアルをお考えの方は、お気軽にフォームへお問い合わせください。