ユーザーの「知りたい！」に的確に応える Webサイトの情報構造設計

ユーザーを導く導線。建築に近いWebサイトの構造

榊原：TEDという、プレゼンテーターが次々に登場してくるイベントがありますが、TEDをスマートフォンで視聴できるアプリをいくつか選んでいたんです。その中でセリフに日本語訳が付いて、止めたりリピート再生できる、TEDを英語の勉強に使えるアプリをダウンロードしてみたんですね。

数年前のアプリ自体がまだ出はじめの頃は、とりあえず作ってポッと上げてみてから改良していくという感じだったのが、最近のアプリはめっちゃレベル高いですよね。こんなことできたらええなぁと思う機能がほぼ完璧に備わっている。ここからここまでリピートするとか、途中でちょっと訳を隠すとか、スピードを変えるとか。

私も少しだけシステム開発に関わっているので、すごく練り込んで時間かけて組み上げたんやろなぁと感心しました。

曽志崎：要件仕様があまいと、細かいところが行き届かなかったりしますものね。

榊原：これは建築物のようなもので、Webサイトも同様なんですね。トップページを頂点として、その下に様々な情報を設置して、どういう抽象概念の下にどういう具体的ページを配分するかという。

階層的な導線だけだとユーザーフレンドリーじゃないので、トップページからダイレクトに孫ページに遷移できるようにするなど、ディレクトリの構造を壊さないよう、まさに建築物のように組んでいくわけです。

曽志崎：Webってペロッとできちゃう印象を持ちがちですけど、深い思想に基づいて構造物ができていると考えると、建築物に近いですね。

ディレクトリは浅い方が良いという「迷信」

榊原：昔にWebサイトのディレクトリは、浅く作った方がいいという考えが流行った時代があったんです。

どこの誰が言い出したのか、ドメイントップのアドレスに、/スラッシュ/スラッシュ/スラッシュのように、どんどんアドレスが長くなる構造は良くないと。スラッシュ1個か2個くらいで行ける子ページを、トップページ下に大量に配置する階層の浅いWebサイトが推奨されて、違うものはそのように作り変えましょうと。

曽志崎：へぇ～。

榊原：これって物理的には有効性が検証されていないのに、いまだにそういう勘違いをしているWeb制作会社って結構多いんですよ。

実際に検索で上位表示されているWebページを大量に分析すると、ディレクトリの4階層/5階層/6階層/7階層下のページでもいっぱい表示されていて、階層の深さ自体は問題ではないわけです。あくまでコンテンツの内容が、ユーザーが望んでいる検索キーワードに対して的確なものと判定されるかどうかが重要なわけで。自分が検索エンジンだったとして、ディレクトリの場所で検索順位を変えます？

曽志崎：いや～。

榊原：ユーザーが知りたいことに的確にマッチするコンテンツが4階層目にあって、上位階層にはもっと抽象度の高いテーマのページがあるとします。

ユーザーは具体的な内容で検索するわけで、トップページから近いからといって、曖昧なことしか言ってない、個別テーマに踏み込んでいないページを上位表示させますかって話です。冷静に考えたら、そんなことありえないと分かるんですけどね。

平屋と多層フロアの図書館。ユーザーが便利な情報の構造化とは？

曽志崎：なるほど。たとえば、図書館でいうと、国会図書館って確か地下5階まであるんですよね。地上階も結構あって、フロアごとにどの分野のどの文献が置いてあるとカテゴライズされていて、どこに行けばその文献があるか分かると。

もしくは、大きな1フロアの図書館をダーンと造って、一応マッピングはされているけれど、目的の本にたどり着くまですごい距離を歩かなきゃいけない感じなのか。

フロアごとに分かれている建造物と、広大な敷地の平屋でのコンテンツの置き方の違い。建築物という話が出たので、図書館になぞらえて勝手に妄想しちゃったんですけど。

榊原：おっしゃる通りで、ちゃんと構造化されている方がユーザーさんは便利なんですね。ユーザーは検索して、検索結果からクリックしてダイレクトに目的ページに行くわけで、トップページに行くとは限らないわけですよね。まずこれが第1ポイント。

次に、個別ページに来たユーザーは、コンテンツの信憑性を確認するために、反射的に左上とかに掲載されているロゴをクリックしたりするんですよ。

トップページや会社概要ページに飛んで、どんな会社か確認するとかいうことですね。検索結果から個別ページに行くんだけれど、その後にトップページへ行ってサイトの全体像を確認したり、メニューをクリックして他のページを回遊したりするわけです。

あとはブラウザの「戻る」をクリックして、さっき読んでたページに戻ったりするでしょ。一旦トップページにアクセスしたユーザーを、他のコンテンツに遷移しやすくするためには、情報の構造化がしっかり整備されていることしかありえないわけですよ。

トップページからの遷移を追求した「メガメニュー」の価値

榊原：最近はメガメニューというのが流行ってきましてね。従来はメニューをクリックするとプルダウンが開いて、いくつかの選択肢がペラッと縦に出てくる程度だったのが、今はメニューを押したら画面かと思うくらいの大きなウィンドウがポップアップするんです。モーダルっていうんですが、それがバーッと開いて色々なところに直接ワープできるようになっている。

Webの利便性というのは、根幹的には他の場所へワープできるというハイパーテキストリンクの利便性ですよね。ですから、内部管理上の合理性から、サイトのURLをスラッシュで切って深い構造に配置しても、別に支障はないんですね。

管理の利便性の上からも、しっかりと情報構造に沿ってディレクトリを切っておくことは、Web制作会社さんにお勧めしたいことです。

一般ユーザーからすると、ディレクトリとかURLとか一切関係ないので、トップページや大階層ページに戻ってきた時に、他の兄弟テーマに速やかに行きやすいかどうか。これがメガメニューを充実させる非常に大事なポイントなんです。

曽志崎：検索ページから個別ページに来て、次にトップページに行って全体を俯瞰した時に、自分が最初にランディングしたページは、トップからどういう動線で行き着くことができるのかという疑問を、個人的に結構持つんですよ。

そこが分かると、サイトがどういう情報構造設計のもとで構築されているかが把握できて、自分が検索したページに近い別の関連コンテンツは、この辺りにありそうかなと分かる。

このカテゴリの隣にこれがあるなとか、回遊する中でこういう領域を網羅しているサイトなんだと分かる構造って、メガメニューのような情報構造設計が1つのキーになってくる気はします。

スピードと情報構造設計。サイト構築の意思決定の落とし所

榊原：トップページって大事なんですが、トップページだけで全てをまかなうことは無理なんですよね。

それを補完するために、インデックスページというものがあるわけです。トップページは超親分ページなので、いろんな子分ページに誘導する役目がある。でもデザイン性も大事だ。デザインを重視すると写真の面積を大きく取らざるを得ない。写真の面積を大きく取ってしまうと、多くの子分メニューを紹介しきれない。これジレンマなんですよね。

そのジレンマを解消するために、最近メガメニューというものが使われるようになってきた。それでもメガニューでも解決していない問題とは、ありとあらゆる遷移先を一覧する能力が低いことなんです。

メガメニューって、個別のメニューをクリックして、これだけの行き先がありますよと、初めて見れるわけじゃないですか。

インデックスページというのは、コンテンツ全部を一覧表示するという目次ページですよね。理想的にはトップページのどこかに、サイトの全てのページに直ワープ可能な、インデックスページみたいな補填策へのリンクが配置してあった方がいいんですよ。

曽志崎：サイトマップじゃないですが、そのサイト全体でどういう情報が掲載されているの把握できるページですよね。

先ほど制作会社さんが、浅いディレクトリ構造で作ることを推奨しがちというお話がありましたが、やっぱり、階層が浅いページの方が正直作りやすいじゃないですか。そっちに流れがちな気持ちも分からないではないですけど。（笑）

というのは、メガメニューとか情報構造設計って、ものすごく時間がかかるし、答えもない。サイトの構造設計のための時間ばかりが過ぎて、どこまでやればいいのかという迷いの中で、決断しなきゃいけない。

そういうジャッジを挟まなくても済むサイト作りがやっぱり楽じゃないですか。そこにはユーザーの利便性っていう視点が、もしかすると欠けているのかもしれませんが。構造設計の難しさと、それをどこまで追求するのかという狭間の中で、サイト構築の意思決定が求められるのかなって気はしますね。