情報アーキテクチャとは？UXのための情報設計と具体例

情報アーキテクチャ（IA）は、製品のコンテンツや機能を理解しやすく、見つけやすくするための構造です。何が存在するか、項目同士がどう関係するか、何と呼ぶか、どの経路でたどり着けるかを定めます。ナビゲーションバーは、その構造を画面に表す方法の一つであり、情報アーキテクチャの全体ではありません。

まずコンテンツと、利用者が達成したいタスクを整理します。主なコンテンツの種類を定義し、関連するものをまとめ、名称をそろえ、重要な情報にたどり着けるか確かめます。その構造をUXデザインとプロトタイプに反映し、実際の画面でも情報を見つけて使えるかを検討しましょう。

情報アーキテクチャ、ナビゲーション、サイトマップの違い

サイトマップは、ページとその階層関係を示します。ナビゲーションは、メニュー、パンくず、関連リンク、検索、フィルターなど、画面上の移動経路です。情報アーキテクチャには、それらの経路に一貫性を持たせるための、コンテンツの定義や用語も含まれます。

NN/gによるIAとナビゲーションの解説（英語）では、コンテンツの棚卸し、グループ分け、分類体系、内容を説明するメタデータを情報アーキテクチャの要素としています。一見小さなメニューの問題が、実はコンテンツの問題である場合に、この区別が重要になります。複数のページに少しずつ異なる答えが載っているなら、メニューのラベルを移すだけでは解決しません。

たとえば学習サービスのメニューに「コース」「トピック」「学習パス」を設けるとします。リンクを配置する前に、それぞれの意味をチームでそろえる必要があります。学習パスは一つのコースなのか、順番に並べた複数のコースなのか、単なる紹介ページなのか。その答えによって、リンク、メタデータ、利用者が期待する内容が変わります。

コンテンツと、それで支えるタスクを定義する

実践的なデザインスキルを学ぶサービスを例にします。学習者はユーザーリサーチのコースを探し、必要な前提知識を確認し、適切なレッスンを始め、後で続きに戻りたいと考えています。一方、経験のある学習者は、学習パス全体を進めず、特定のレッスンだけを読みたいかもしれません。

新しいメニューを提案する前に、現在のコンテンツを棚卸しします。変わらないID、タイトル、種類、目的、現在の掲載場所、管理担当者、状態を記録します。重複、古い内容、今後作る予定のものは、状態を分けて扱います。魅力的なページタイトルを並べるだけでは、その中身がタスクに答えているかを判断できません。

この表は説明用の例です。IDは構造を説明するためのもので、利用者の画面に表示する必要はありません。実際の製品では、コンテンツの管理担当者が内容を確認してから、役に立つ移動先として情報構造に組み込みます。

大きな階層図を描く前に、関係を定める

コースを「順序のあるレッスンの集合」と定義します。各レッスンには管理するコンテンツの実体が一つあり、コース内の順番が決まっています。トピックは扱う主題を表し、複数のコースを関連付けられます。学習パスは、レッスン本文を複製せず、コースをまたぐ学習順を示します。

この例では、「リサーチの基礎」に「誘導しない質問の作り方」が含まれます。このコースは「ユーザーリサーチ」というトピックに関連し、「UXの基礎」という学習パスに組み込まれています。それぞれの関係は、「次は何を学ぶか」「同じ主題の内容はほかにあるか」「どこから始めればよいか」という異なる問いに答えます。

すべての関係を、一つの親子階層に押し込む必要はありません。一つのコースが複数のトピックに属していても、管理するコースページは一つにできます。学習パスからも、そのページにリンクすればよく、少し違うタイトルの複製を作る必要はありません。更新内容がそろい、利用者も移動先を予測しやすくなります。

ルールは明文化します。レッスンを別のコースでも使えるのか。使えるなら、進捗と順番はどこに表示するのか。一つのコースを複数の学習パスに入れられるのか。コースを廃止するときはどうするのか。これらは画面に影響する情報設計上の判断であり、メニューが完成するまで先送りする実装上の細部ではありません。

コンテンツの違いが伝わる名称を選ぶ

利用者が頼りにする項目には、小さな用語集を用意します。このサービスなら、トピック、習熟度、コンテンツの種類などです。それぞれの値について、名称と意味をそろえます。「初心者向け」「入門」「基礎」が同じ習熟度を指すなら、画面で使う言葉を一つ決め、ほかは検索時の同義語として扱えます。

異なる概念を混ぜないようにします。「短時間」は所要時間であり、難易度ではありません。「人気」は利用状況や紹介上の扱いであり、主題ではありません。これらを一つのカテゴリ一覧に混ぜると、比較や、フィルターを使ったときの結果の予測が難しくなります。

実際のコンテンツと利用者の言葉に照らして、名称を確かめます。「リサーチオペレーション」は専門用語として正しくても、初めてのインタビューを学びたい人に適した移動先の名称とは限りません。管理する部署の名前ではなく、その先に何があるのかを伝える名称にします。

利用者と編集担当者で分類の考えが異なるときは、カードソーティングで、情報をどのように関連付けているかを調べられます。これは案を検討する根拠を得る方法であり、完成した情報構造や最適な名称が自動で決まるわけではありません。

情報の置き場所を定め、別の経路からもたどれるようにする

最初の構造として、コース一覧、トピックページ、学習パスを用意するとします。コース一覧は比較、トピックページは同じ主題の探索、学習パスは順序に沿った学習を助けます。それぞれの経路から、同じコース詳細ページにたどり着けます。

「リサーチの基礎」のコースページでは、学習後にできること、必要な前提知識、レッスンの順序、開始や再開の方法を説明します。トピックページでは関連コースから選べるようにし、学習パスではなぜその順番で学ぶのかを説明します。三つとも同じ紹介文を繰り返すと、それぞれの役割が曖昧になります。

関連リンクは、意味のあるつながりに使います。「誘導しない質問」のレッスンの後なら、一般的な「人気コンテンツ」の一覧より、関連する練習問題へのリンクが役立つかもしれません。その関係を確実に扱えるメタデータを定め、ページごとに編集担当者が推測し直さずに済むようにします。

役割が明確になったら、ナビゲーションデザインの考え方を使って、画面上の操作方法を選びます。デスクトップではメガメニュー、スマートフォンでは開閉式のメニューというように、コンテンツの意味を変えず、同じ情報構造を異なる方法で見せられます。

Pixsoで情報の関係と画面を可視化する

Pixsoホワイトボードのキャンバスに、各コンテンツの種類を一つずつ例示します。コネクタには関係を表す言葉を添えます。コースはレッスンを「含む」、トピックはコースを「分類する」、学習パスはコースに「順序を付ける」とします。言葉を付けることで、一本の線が複数の意味に解釈されるのを防げます。

関係図の横に簡単なページ階層を置き、二つの見方を区別します。次に、コース一覧、コース詳細、レッスン画面など、主要画面のフレームや参照リンクを追加します。各画面で必要な情報が、コンテンツモデルに含まれているかを検討しましょう。

コースカードには、仮の文字ではなく実際のタイトル、習熟度、学習後にできることを入れます。レッスン画面には所属するコースと次のレッスンも示します。実際に近い長さのコンテンツで試すと、見た目を仕上げる前に、不足する項目や曖昧な関係を見つけやすくなります。

見つけやすさと、移動先の有用性を確かめる

テスト課題は、正解となるラベルをそのまま使わず、利用者の目的を説明する形で書きます。たとえば「初めての顧客インタビューを準備しています。答えを誘導しない質問の作り方を知りたいとき、どこを探しますか」と尋ねます。選んだ経路と、どのページを答えだと判断したかの両方を確認します。

ツリーテストでは、詳細画面ができる前に、提案した階層を検討できます。ただし、検索結果、カード、フィルター、ページの中身を含む体験全体を評価するものではありません。階層に見込みがあれば、実際のプロトタイプでも同じ目的を達成できるかを確かめます。

失敗は種類を分けて考えます。違うカテゴリを選ぶなら、名称と分類を見直します。正しいコースに着いても、目的に合う内容があるか判断できないなら、移動先の説明を改善します。レッスンは見つかってもコース内の順序が分からなくなるなら、現在位置と続け方を改善します。全体の成功率一つだけでは、必要な変更の違いが隠れてしまいます。

コンテンツが増えても構造を保つ

コンテンツの種類と用語には、それぞれ管理担当者を決めます。新しいコースには、主題、習熟度、前提知識の条件、既存内容との関係が必要です。「その他」を作らないと配置できない場合は、コンテンツか構造に意味のある区別が欠けていないかを見直します。

コンテンツを廃止・統合するときは、そこへ向かう経路、学習パスへの組み込み、次のレッスンへのリンクを確認します。コース一覧が整っていても、学習パスの途中が途切れている可能性はあります。構造を変えた理由を残せば、後任の担当者も、コースの置き場所を一つに保ちつつ複数の経路からたどれる設計を理解できます。

こうして作る構造は、学習者が選び、理解し、続きを進めるための土台になります。製品に何があり、各要素がどう結び付くかをチームで合意できていれば、メニュー自体も設計しやすくなります。