Information Architecture Archive

今まで、我流でサイト分析を行っていましたが『デザインイング・ウェブナビゲーション 』や『IA100 _ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計』など、情報アーキテクチャに関する参考書も豊富になってきたところで心機一転、それらをバイブルに実践を通して体系的に学んでいこうと思います。

ファッションレッグウェアブランド「Relish」の2009年秋冬コレクションサイトです。個人的に好きなブランド(ストッキングを身につけるわけではありませんが...)ということもあり、以前からチェックしていたのですが、久しぶりに見てみたらFLASHベースのプロモーションサイトから、柔軟性のあるHTMLベースの静的なブランドサイトにリニューアルされていました。

ビジネスゴール

レッグウェア事業、インナーウェア事業、介護用品事業など主とする『アツギ』がプロデュースする人気ブランドの一つが「Relish」であることからみて、ブランドイメージを高め基本的な主張を広めるという目的があると思います。また、今回のリニューアルから予想できることは、顧客ロイヤリティを向上させるという狙いがあるのではないかということです。HTMLベースの静的なブランドサイトにする利点は、来訪したユーザーがウェブサイト上で獲得できる最終的な成果である「コンバージョン」を意識した動線設計が行えることです。事業活動を支援するマーケティングツールとしてWebサイトを活用するのであれば、具体的な数値的目標、すなわち「コンバージョン率」をモニターし、実際にビジネスゴールに貢献するだけのコンバージョンが達成されているかどうかを明示する必要があります。「Relish」のようにある程度のブランドイメージが認知されている場合、次のステップとしてすでに抱えている顕在ユーザーの顧客ロイヤリティを向上させるというマーケティングは理にかなっていると思いますし、ログ解析によって費用対効果が明確になるという意味でも、ユーザーに与える価値の成長が見込める良いサイト事例だと思います。

サイトストラクチャ

図を見て分かる通り、コンテンツが少なく階層レベルが浅い構造になっています。「Relish」にサイトマップがないのは"必要ないから"ということなのでしょう。階層構造のバランスには、明白なトレードオフがあり、表示する項目を減らせば階層は深くなり、項目を増やせば浅くなります。一般的に後者の方が効果的に機能しますが、選択肢や項目をグループ化して焦点を絞り、ユーザーがより効率の良い経路で目的に到達できるようにするという意味では当たり前のことです。ただし、むやみに項目を増やせば良いということではなく、あくまで必要最低限の探索で済むように、選択肢を"最適化"するという視点を持つべきです。

ナビゲーション

「Relish」で特徴的なのは、主導線である『秋冬コレクション』や『キャンペーン』がそれぞれのカテゴリで副導線としても機能しているということです。複数のアクセスポイントを持つことにより、よりスムーズな情報探索が可能になるだけでなく、関連リンクとしてショートカットの役目も果たします。そうしたナビゲーション設計から、情報の優先順位、つまりユーザーをどのように導きたいのかを伺い知ることができます。メインコンテンツとなるのは、やはりシーズンごとに更新される「コレクション」なので、メインナビゲーションでは一番左、ローカルナビゲーションでは一番上に位置しています。Webの文書構造が、上から下に読まれる構造であること、左上から順に読まれるというヒューマンインタフェースの特性から、優先順位の高い項目を左から順に配置するのは、ナビゲーションシステムにおけるデファクトスタンダードとなっています。ビジネスゴールが顧客ロイヤリティの向上と記しましたが『ダウンロード』やキャンペーンはまさにそれを裏付ける主要なコンテンツではないかと思います。キャンペーンでは「季節スタイリングを見て、好きなスタイリングを選んでください。」とあり、『季節スタイリング』への導線を確保しています。Relishの商品はオンラインストアでも購入できるようなので、そこから購買に繋げるという狙いがあるのかもしれません(ただし、商品詳細ページでは品番しか明記されていないので、カタログを持ってるコアユーザー向けのコンテンツである可能性もあります)。ダウンロードでは、クオリティの高い壁紙やスクリーンセーバーを無償でダウンロードすることができます。おそらく壁紙もシーズンごとに更新され、ユーザーに「また見たい」という動機を抱かせる伏線になるのだと思います。

分析しながら、誰に対して、どのような情報を、どのように伝えるかという「ユーザーへ与えたい価値」が明確なサイトだなぁと思いました。不要な要素がそぎ落とされ、必要なものだけが残ったような、シンプルイズビューティフルの本質的な素晴らしさに触れられたような感じです。ところで「こころまでも、あたたかく写真集」がもらえるキャンペーンはもう終わってしまったのでしょうか。。「Relish」の商品も好きですが、毎回写真が素敵すぎるんです。

データストレージ技術ブランドとして40年の歴史を持つ世界No.1記録メディア「Verbatim(バーベイタム)」のプロモーションサイトです。世界でトップシェアを誇っているとのことですが、日本国内ではシェア3位ということからみて、国内ではそれほど認知されていないようです。「全日本バーベイタム選手権」が企画されたのは、国内におけるブランド価値の向上とみて間違いないでしょう。

ブランド理念 | 記録メディアのバーベイタムよりブランド理念の引用。

Verbatimは、記録メディアを中心とした製品の提供を通じて、「人と人、人とモノ、人とコト」との関係を、確かなもの、楽しいもの、豊かなものに変えていきます。

「Verbatim(バーベイタム)」はラテン語で「一語一句そのままに」という意味らしく、難読漢字10問を用いているのは、「一語一句そのままに」記録するという意味をかけているようです。それでピンときたのですが、このプロモーションサイトはブランド理念をそのまま表現しているのではないでしょうか。では、ブランド理念 | 記録メディアのバーベイタムから引用しつつ、具体的にどう表現しているのかを考察していきましょう。

人と人の関係＝共有

「アイデアを分かち合う確かなツール」より引用。

Verbatimが主に製品を展開するのは、映像やデータを記録する媒体です。これらは、個人が自分自身のために記録したものを保存するだけでなく、家族や仲間、同僚などと共有されるものでもあります。

記録メディアという媒体は、記録したものを保存するだけでなく、人と人との間で『共有』されるもの。これを私なりに解釈すると、生成されたモンスターを対戦させるだけではなく、ブログなどでブログパーツやリプレイシーンなどを公開したり、自分のモンスターをtwitterなどのリアルタイムな共有サービスで紹介して共有させ、ポストの連鎖を起こさせるという狙いがあったのではないでしょうか。その証拠に#verbatimで多くのツイートが見受けられます。そこまで見越しての戦略、恐れ入りました。

人とモノの関係＝デザイン

「そばにおいておきたくなる、よく考えられたデザイン」より引用。

Verbatimの製品は、見た目の美しさだけではなく、ユーザーの使いやすさが徹底的に考えられています。ストレスフリーな使いやすさ。それは、毎日使いたくなる、使っているだけで心地よくなるデザインです。

セールスポイントの一つとして見た目の美しさ、使いやすさがPRされています。そして当然ながらモンスターを生成するパーツとなっているのはバーベイタムの記録メディア製品であり、ユーザーに対して無意識に「バーベイタムの製品はこういうデザインだ」という認識をさせるには十分でしょう。私自身、プレイ中はそんなことを全く気にしていなかったのですが、USBメモリー | 記録メディアのバーベイタムなどを見ると、普通に欲しくなってしまいます。いや、記録メディアとしてというよりは、プラモデルやレゴの部品を欲しがる子供の好奇心に似たものがあります。製品のブランド価値を向上させ、Verbatimという記録メディアブランドを認知させるというボトムアップ式の戦略、これまた恐れ入りました。

人とコトの関係＝信頼・技術

「世界各地で磨かれ続けてきたNo.1ブランド」より引用。

Verbatimは、現在世界で最も多く使われている光メディアのブランドです。グローバルで磨かれた品質保証体制と、安定した供給体制で、安全・安心な製品をお届けします。

「ジャパンクオリティで生産される信頼の品質」より引用。

Verbatimの製品は、日本人の技術者が認定した製造ラインで、厳しい品質基準のもと作られ、 厳しい出荷テストを生き残ったものだけが提供されています。

これは少し制作者よりの考え方かもしれませんが、これほどグローバルで、高い技術力を保持しているブランドのプロモーションサイトで、低クオリティのものを作るわけにはいきませんよね。3Dグラフィックス、FLASHを使ってここまでのものが出来るんだなぁと、FLASHの可能性を感じずにはいられません。どうしたらこんなに滑らかで軽快な動きが実現できるんだろうか‥。ちなみに制作に参画されたのはROXIKの城戸雅行氏、カイブツ、イメージソースということです。

まとめ

文頭に引用したブランド理念にあるとおり、『人と人＝共有』『人とモノ＝デザイン』『人とコト＝信頼・技術』を確かなもの、楽しいもの、豊かなものに表現したものが全日本バーベイタム選手権 | Verbatim Championshipなのではないでしょうか。つまり、企業理念＋クリエイティブ。まさにVerbatimとクリエイティブのフュージョンです。今回の分析で感じたのは、企業側が伝えたいことを制作者側がしっかりと汲み取って、的を得た表現＋αで再現しているからこそ、私なんかがちょっと調べただけでも、何となくその意図が把握できるのではないかと思います。だからといって誰でも作れるものではないですけどね‥、＋αの部分が凄すぎるから(笑。

「すべての人にとって使いやすいものを。」より引用。

Verbatimは、小さなニーズにもしっかりと向き合い、すぐれた製品を広く、多くの人へ届けていきます。

最後になりますが、このサイトは日本語がわかる人だったら誰でも楽しめると思います。対戦するといっても、必殺技、回復、ミサイル攻撃の3パターンが1回ずつ使えるだけで、あとは自動的に闘ってくれます。説明書がなくても楽しめる、多くの人に伝わる。最後の最後まで恐れ入りました！

最近、大学のサイトリニューアルが目立っているように思います。その理由は、少子化によって受験生の確保が困難になっていること、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属性に「現在"カテゴリ名"にいます」というように、指定する方法があります。選択された項目をスクリーンリーダーが読み上げてくれるので、現在位置を正確に把握することができます。

しばらくぶりです。インフルエンザで死んでました。今日からボチボチ再開いたします。皆さんも新型には十分お気をつけください。。

デザイン

全体的なビジュアルヒエラルキーが明文化され、ページのどの部分に注目すべきかが明確になっている。ロゴには赤色が使われ、下層ページなどでは現在位置を示すアクティブなボタンに対して同系色の赤を使用している。また、リンク箇所は基本的に黄色で統一され、フッターのテキストリンクにも同系色のアイコンが使用されている。ユーザーはブラウジングを行う中で、無意識にそれが何を意味しているのかを理解する。こうした制御の効いたコントラストによってページ全体を上手く論理的に構成している点は参考になるだろう。

アーキテクチャ

レゴ エデュケーションについて少し調べてみると、海外ではすでに多くの事例があり、日本国内でもワークショップを通じて保護者や教員に関心を持ってもらい、児童・生徒にものづくりの楽しさを感じてもらうきっかけ作りを行っているという。このことから、ビジネスゴールは「ブランドイメージを高め、基本的な主張を広める」ことではないかと思う。サイト上ではレゴ教室への入会・資料請求を促しているので、サイトゴールは「新規顧客の獲得」というところだろう。レゴというブランドを誰もが知っているという前提で、「レゴ エデュケーションでは何ができるのか」という部分を訴求しつつ、資料請求・お問い合わせに繋げ、最終的にはカンファレンスの参加や教材の購入に結び付けたい。それは、レゴ教育の魅力や学びのプロセスなど、一番訴求したい"Whats"を示すコンテンツは全てのページからアクセスできるように配慮されている。情報構造はやはりカリキュラム→教材のご紹介→お問い合わせ・資料請求といった具合に直線的というわけではないが、順序が考慮された導線が確保されている。教員向けに「学校教材紹介ページ」や「体験レッスン」などのコンテンツも用意されているようだ。

ユーザビリティ

「レゴ教室紹介ムービー」や「カリキュラム紹介ムービー」など、動画コンテンツによるPR手法を多く取り入れている。メインビジュアルでよく用いられるFLASH同様、動画コンテンツでの訴求はテキストや画像などに比べて影響力が大きいと言える。ただし、テレビと同じで受動的なメディアであり、再生されている間ユーザーの自由を奪うということも承知しなくてはならない。無駄に長い、内容が伝わりにくいなどの問題があると、それだけユーザーにフラストレーションを与えてしまう。利用するのであれば、伝えるべき内容は何か、要点だけを簡潔にまとめるよう心がけるべきだろう。上手く利用できれば、効果は期待できる。

がんワクチン療法の研究開発を行っている企業のコーポレートサイトです。あるようでない、絶妙なバランス感覚のあるサイトだと思います。余白の使い方、全体的なバランスは眉唾ものです！(これは言い過ぎか)

デザイン

テラ株式会社はどこか洗練された、無駄のない印象を受ける。その秘密は何なのか自分なりに考えてみた結果、余白のたっぷり感と清涼飲料のようなサラリとした色使いにあるのだと結論した。前者は美術館や展示会などに行ったことがある方なら、展示面積を贅沢に使った作品の高級感は納得していただけると思う。それはWEBサイトでも同様で、目立たせたい要素の周囲に適切なマージンを与えることで、アイキャッチとしての効果が得られる。ただ、それだけではまだ物足りない。余白を上手く利用しているサイトは数多くあるが、テラ株式会社には他にはないものがある気がする。そこで気づいたのが、キーカラーを限りなく淡く表現した、この色使いだ。もしメインメニューや見出しが濃い配色だったら...？多くのサイトに見られるように、それぞれの要素が主張しすぎて、どこに注目すれば良いのか分かりにくいサイトになっていただろう。逆に余白が十分にとられていなければ、安っぽい印象になっていただろう。これらはフォントのバランスの関係に似ていると思う。ファッション雑誌などを見れば分かるが、ある特定の文字列を目立たせる手段は(完全なる私見であるが)、サイズを大きくする、ウエイトを変える、濃さを変える、そして余白である。重要なのは、目立たせたい、主張したい要素そのものに捕われるのではなく、それらの手段を用いて、全体を俯瞰し、最適なバランスを見いだすことだ。おそらくこの感覚を身につけるには、経験とセンスが必要になると思うが、日頃から美術館やクオリティの高い雑誌などを見ていれば自然と身に付くものだと思うので試してみては如何だろう。

アイディア

トップページのメインビジュアルでは、ロゴが表示され拡散し広がってゆくアニメーションが展開される。その後もオタマジャクシの卵のような物体がフワフワと動いているのだが、それが「お知らせ」など静的な印象を与える箇所にも反映されていて面白い。最初は全部FLASHなのかと思ったが、どうやら裏側ではしっかりとマークアップが成されているようだ。最近ではMovable Typeなどと連動したFLASHコンテンツなどが主流になっているようなので、調べてみる価値はありそうだ。

ユーザビリティ

テラ株式会社では、いわゆるダイナミックメニューを積極的に使用している。例えばメインメニューのプルダウン、ローカルナビゲーションの追従などだ。プルダウンメニューは、情報量に比例して項目或はオプションが増えてしまうナビゲーションに対して、素早いアクセスを提供する場合に利用されることが多い。デメリットとしては、情報表示のために何らかの動作を必要とすることだ。テラ株式会社の場合はコンテンツが少ないので、javascriptを無効にしてもナビゲーションは問題なく機能するし、プルダウンした範囲が透過されており、コンテンツと被った時の配慮も成されている。利用する際には用法用量を守って正しくお使いください、といったところだろうか。

アクセシビリティ

プルダウンメニューは、スクリーンリーダーが上手く処理できないことがあるらしい。正しくマークアップされていれば回避できる気もするが、実際にスクリーンリーダーを使ってテストをするのが無難だろう。また、動体視力に障害のあるユーザーは、ダイナミックメニューの操作が困難な場合があるらしいが、これはあまりピンと来ない。

名古屋にある大学のサイトです。なかなかボリュームがあり、分析するのがちょっと大変でしたが、上手くポイントを洗い出すことができたのではないかと思います。

デザイン

名古屋学院大学では、タブインタフェースが積極的に使用されている。ホームページ、各ランディングページ（カテゴリーページ、サブセクション開始ページなどとも呼ばれる）の最新情報、お知らせなどで主に使用されており「今どこにいるのか」が分かりやすくなっているが、それよりも重要なのは関連のある情報をグループ化して提示しているという点だ。タブインタフェースにすることで、それぞれの情報に関連性があるということを明示し、より直感的な操作を可能にしている。また、それぞれの情報が比較、或は同時にアクセスする必要のない情報であるという点にも注目したい。もしも、各パネルを比較したり、同時に閲覧する必要がある場合、前者は都度パネル間を行き来しなければならないし、後者はそもそも不可能であるため、ユーザーにフラストレーションを与えてしまう可能性がある。他にも、横幅の限界値やラベルの文字数制限など、スケーラビリティの問題もあるので、そうしたナビゲーションのメカニズムを良く理解してから採用を検討する必要があると思う。

情報構造

成功するナビゲーションを設計するためには、対象となるユーザーグループ、必要とされている情報についての理解が不可欠になる。名古屋学院大学では、受験生以外のステークホルダー（受験生の保護者・卒業生・企業の採用担当者など）を明確にし、それぞれのユーザーに対して最適な情報をスムーズに提供できるように工夫している。グローバルエリアの『対象者別メニュー』では、各グループの情報ニーズ「ここはどこで、どのような情報があり、次にどこに移動すればよいのか」を特定し、それぞれの目的と期待に添った情報を提供している。受験生の方などを見ていただければ分かると思うが、新着情報、主要コンテンツへの誘導、適合型ナビゲーションの提示という構成になっている。適合型ナビゲーションとは、ユーザータイプに合わせて内容が変わる「適合型」のナビゲーションのことであり、この設計からも、ユーザーに対するメッセージが明確であることが分かる。また、ホームページでは、フッターエリアにサイトマップを表示している。求めている情報が明確なユーザーは、目的の情報に素早く到達したいと考えているので、情報量が膨大なサイトにおいては、効率性を高める良い手段ではないかと思う。

ユーザビリティ

ほぼ全てのページで「全画面印刷」と「本文印刷」ができる。企業サイトでは、アクセスページなどで用意されていることが多いが、名古屋学院大学などの情報系サイトの役割も担ったサイトでは、全てのページに対応するのが無難といえるだろう。また、アクセスページを見てみると、アクセスマップのPDF版をダウンロードすることができ、さらに高画質なマップが手に入る。

アクセシビリティ

名古屋学院大学では、いわゆる「スキップナビゲーション」を採用している。グローバルエリアにある情報が、ページを遷移する度に読み上げられてしまうと、スクリーンリーダーを使用しているユーザーにとって障がいになる可能性がある。望ましいのは、グローバルエリアにあるナビゲーションの前に、コンテンツへのスキップリンクを設定し、ページ内を快適に移動できるようにすることだ。

HCD-Net 人間中心設計推進機構の公式サイトです。株式会社コンセント長谷川氏ほか、業界でも著名な方々が集結しています。会員になろうか私も迷っているところであります。

情報構造

まずHCD-Netを見て気がついたのは、サイトマップがないという点だ。最初は「何でないんだろう？」と思うかもしれないが、しばらく閲覧して、サイトストラクチャが頭の中で整理されてくるとその理由が分かってくる。サイトマップとは、"ナビゲーション用に表したサイトの構造"であるから、メインナビゲーションで提示されている情報がユーザーが求めるものに十分合致しているのであれば、必ずしも必要ではない。HCD-Netで想定しているユーザーは、会員になっているコアユーザー、会員ではないが興味があるユーザー、そして関係者であると思われる。その仮説から考えると、メインコンテンツとなるのは「参加する」のイベント・講演の情報であり、更新を伴うコンテンツが大きな割合を占めていることが分かる。会員ではないが興味があるユーザーを入会案内に誘導するために「イベントレポート」をローカルナビゲーションに配置しているが、これもまた更新を伴うコンテンツである。運用側の側面としても、サイトマップの粒度を細かくしすぎても、作成と手間がかかるだけで、投資に見合うだけの効果が得られないことがほとんどなので、有効な手段とはいえない。しかし、最近ではサイトマップが検索エンジン最適化(SEO)を促進する為の手段として認識されるようになり、フッターに表示させたりするケースも増えてきた。あまり参照されることなくても、サイトマップにはそのような利点もあるので、メリットとデメリットをよく検討して導入することが大切である。

ユーザビリティ

ユーザーがどのページからアクセスしてきても、適切に現在地を示すのは重要であるが、HCD-Netはおそらくトップページからのアクセスを想定している。或は、下層のページからトップページへ遷移することが想定されており、ユーザーが求めるであろうコンテンツがトップページ内で網羅されている。トップページで全体像が掴め、情報のプライオリティも容易く把握することができる、優れたインタフェースだと思う。

アクセシビリティ

HCD-Netのお問い合わせフォームは、エラーをリスト表示させている。各項目に表示させた方が直感的には理解しやすいが、音声ブラウザなどを使用しているユーザーへの配慮としては、前者の方法が適切と言えるだろう。また、基本的なことであるが、現在と完了までの流れが明示されている、ラベルと要素が明示的に関連づけされているなど、最低限のアクセシビリティは確保されている(最低限とはいえ、それすら出来ていないサイトが多く存在しているは事実)。

まだ行ったことがないのですが、一度現地で見てみたくなりました。おそらく、Webサイトと同様、分かりやすく、回遊しやすい環境でしょう。ナビゲーション設計は、注目です。

デザイン

もの或は環境の物理的特徴がその機能に影響を与えるという法則を「アフォーダンス」というが、コンピュータ上においても3Dのボタンが描かれていると、ボタンの物理的特徴を思い起こさせ、その結果押す為のアフォーダンスを持つように見える。グランベリーモールでは、それがリンクなのか、図版なのか、或はリンクされている図版なのかを、視覚的に示唆しており、ユーザーの「リンクだと思ったけど移動しない」といったフラストレーションを回避している。

情報構造

情報系のサイトは、多様なユーザーからの利用が想定されるため、選択肢や項目をグループ化して焦点を絞ることが有効な手段になる。グランモールでは、適切なグループ化によって、広く浅いナビゲーションが実現されており、"グループを見つけズームインして個々のリンクを探す"というユーザー情報探索行動に適した設計が成されている。グループ化されているのは大カテゴリー(メインナビゲーション)だけでなく、各カテゴリの一覧ページにおいてもいえる。ローカルナビゲーションはページ内アンカーリンクとして機能し、さらに詳細な情報においてはショップガイドへの導線を確保している。深い構造にある複数のレベルを探索するよりも、ページ上に広く並べられた項目をざっと見渡せる方が楽であることは間違いがない。

ユーザビリティ

ショッピングモールにおける経路探索において「ショップガイド」の役割はユーザーが期待しているものでなければならない(と思う)。グランベリーモールのショップガイドでは、キーワードから探すというWeb特有の機能を除いては、おそらく現地にあるパンフレットと同じ役割を果たしているのではないだろうか。エリアが小区画に分割された図版があり、カテゴリ別のアイコンで場所が示されているといった具合に。ユーザーが期待している視覚的情報を表現することによって、よりよいオリエンテーションと、ナビゲーションにおけるユーザビリティの向上に大きく繋がる。

アクセシビリティ

アクセス・営業時間のページでは、あらゆるケースを想定し、詳細な地図情報、駅すぱあとへのリンク、空車情報の確認システム、携帯版へのアクセス、駐車情報のプリントアウト、googlemapによる広域マップまで、様々な情報手段を提供している。アクセシビリティにもいくつかの分類があるのだが、エラーの発生とその影響を最小限にする「寛大さ」という面において、グランベリーモールは優れていると思う。

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

情報構造

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

技術

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

ユーザビリティ

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

アクセシビリティ

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

今回もアックゼロヨン入賞作品のベンチマークに臨んでみようと思います。マーケティングの企業だけあって、コンテキストが明確で、適切な情報アーキテクチャが設計されていると思います。一見の価値ありです。

デザイン

和文、欧文共に、ロゴに用いられているフォントと類似したもので統一し、東京サーベイ・リサーチのブランドイメージを効果的に訴求している。たったそれだけの工夫で、単なる文字列が「その企業の言葉」として伝わるので、世界観の反映させるための基となる「コンテキスト」の調査・分析が如何に大切かが分かる。また、アイコンや図版が積極的に使用されており、リンクとしての機能、論理的な情報の表現、分かりやすい図式化など、それぞれの役割を最大限満たしている。その表現方法は一見の価値あり。

情報構造

マーケティング事業を主とする企業は、ソリューションでどれだけ差別化できるかという部分が重要になる(と思う)。東京サーベイ・リサーチでは、トップページのメインビジュアルで、代表的な調査システムを訴求し、「何ができるのか」を明確に訴求している。また、ステークホルダー向けに「ソリューションを調査テーマから選ぶ」「東京サーベイ・リサーチの調査実績」という目的別ナビゲーションも提供している。ユーザーが求めていることを予期し、適切なコンテキストを与えている良い事例だと思う。

ユーザビリティ

ランディングページにおいて、ローカルエリアとコンテンツエリアの役割が明確で、非常に分かりやすく、操作性に長けている。コンテンツエリアでは、文書構造を示し、ローカルエリアでは、あくまでナビゲーションとして機能させている。企業サイトなどでよくあるパターンとして、コンテンツエリアの文書構造を、そのままローカルナビゲーションに反映させ、サイトマップのようになっていたり、コンテンツエリアでリンクのみを表示させているケースで、ローカルナビゲーションにも同じ内容が表示されている(この場合ローカルナビゲーションは必要ない)ことがある。あくまで、ナビゲーションはサイト上を快適にブラウジングする為のシステムなので、ユーザーインタフェースという意味で、その役割を明確にすることは大切だと思う。

手始めに第４回アックゼロヨンで入賞されたWebサイトからベンチマークしてみようと思います。図々しくも評価軸まで真似しちゃってます。拙い文章、分析でお恥ずかしいですが、見逃してやってください。ご指導ご鞭撻よろしくお願いします。

デザイン

白を基調とし、ブランドカラーを上手く引き立て、インタラクション効果を高めている。例えば、メインナビゲーションを始め、リンク関連は全て同色のアイコン、ボタン、背景色、フォント色で統一されている。金融関係のWebサイトは、堅実さや信頼性を表現する為、堅い印象になりがちだが、マネックスでは角丸や、イメージを利用することで「らしさ」を上手く訴求出来ていると思う。

情報構造

想定ユーザーの中で、最もプライオリティが高い(と思われる)「株主・投資家」に対して、適切なアーキテクチャが提供されている。例えば、株価情報などリアルタイムな情報に関しては、常にローカルエリアに表示させている。IRライブラリなど、定期的に知りたい情報に関しては、トップページから最短の遷移で済むように設計されている。ブラウジングした限りでは、3回のクリックで全ての情報を閲覧することができ、それ以上の詳細な情報に関してはJavascriptのギミックや、アンカーリンクなどで上手く回避している。

ユーザビリティ

大見出し、外部リンク、PDFなどにアイコンを使用し、学習しやすさを向上させている。その他には、ほぼ全てのページに印刷用ページがある、FAQでは回答の一覧表示の切り替えが可能であったりと抜け目がない。アクセス情報では、通常のマップに加えてGoogleマップへの外部リンクを用意している。iPhoneなどのデバイスで閲覧した際に有効なのでは、と個人的には思う。

アクセシビリティ

最近のWebサイトでは定石となっている文字サイズ変更ボタンが採用されている。テキストサイズを変更しても、テキストとページが適切に表示され、柔軟性のあるレイアウト設計が成されいる。また、ニュースリリースのカテゴリを示すアイコンは、色情報のみでなくテキスト情報も内包しており、色障がいを持つユーザーへのアクセシブルな配慮が成されている。