名古屋グランパス

今回も第四回アックゼロヨン・アワードからの紹介です。規模の大きいサイトほど、ナビゲーションの設計は大切だということが分かります。

情報構造

おそらくターゲットユーザーは大きく4つのセグメントに分けられている。コアなユーザー、にわかなユーザー、関係者、そして学生だ。チケット情報、試合日程など直接スタジアムに足を運ぶようなコアユーザー向けのコンテンツはかなり充実している。足を運ぶほどではないけど、応援はしたいというユーザーに対しては選手データなどの予備知識を提供し、ファンクラブへの誘導を促している。チームカレンダーや育成などの情報は関係者向け、サッカースクールは主に学生向けだと思われる。グローバルエリアに2つのナビゲーションが配置されているが、上の方は全てのユーザーにとって必要な情報と、関係者、学生にとって必要な情報が提示され、下の方はコアユーザー、にわかなユーザーに対して目的別に情報が提示されている。サイトの規模、ユーザーニーズ、ビジネスニーズを踏まえた上でステークホルダーの目的を明確にし、必要であれば2つのメインナビゲーションを用意するケースもあるという良い事例。

技術

トップページのコンテンツエリアでは、ユーザーの好みに合わせてガジェットを表示、非表示、折りたたみを行えるようになっている。こうしたUIもjQueryなどのライブラリを使用すれば簡単に実装することができる。jQuery デモページ

ユーザビリティ

メインナビゲーションで用いられている「金色の背景に赤色のカレント表示」という機能的なルールをコンテンツ内のランディングページなどで適用している。「信号は黄色から赤に変わる」といったように、機能の一貫性を保つことでより使いやすく、学びやすいUIを実現できる。

アクセシビリティ

アイコン、文字、記号など複数の表示方法を用いて情報を提示し、認知しやすさを向上させている。文字サイズ変更ボタン、 Englishサイトの切り替えなどの機能も提供されている。また、良い悪いはおいておいて、背景画像が積極的に使われており、テキスト情報を維持しているという特徴がある。