レッスン4：情報設計（IA）——迷わない構造をつくる

このレッスンで学ぶこと

情報のまとまりを、利用者の視点で作る考え方を理解する
利用者の言葉と社内の言葉のずれを見つけ、ラベリングを設計できる
カードソーティングを使って、情報の構造を検証できる
ナビゲーションの階層と幅、パンくずと現在地表示、検索とブラウズの併用を設計できる

レッスン3では、実際の利用者を観察するユーザビリティテストの進め方を学びました。このレッスンでは、レッスン1で触れた中核メッセージの 2 つ目、「迷う原因の多くは見た目ではなく、構造にある」を、実務の技法として掘り下げます。情報設計（IA）は、色や文字の大きさを整える以前の、もっと土台にあたる作業です。土台が崩れていれば、見た目をどれだけ整えても、利用者は迷い続けます。

迷いは構造から生まれる

利用者が画面上で迷う場面を思い浮かべてみましょう。目的のページが見つからない、探している情報がどのカテゴリーに入っているのかわからない、似た名前のメニューが並んでいてどれを選べばよいのかわからない。こうした迷いの多くは、ボタンの色や文字の大きさとは無関係に起きています。原因は、情報がどのようにまとめられ、どのように名前を付けられ、どのように並べられているかという、構造そのものにあります。

情報設計とは、この構造を、利用者が迷わずにたどり着けるように組み立てる作業です。具体的には、次の 4 つの作業から成り立ちます。

情報を意味のあるまとまりに分ける（グルーピング）
まとまりに、利用者に伝わる名前を付ける（ラベリング）
まとまりどうしの関係を、階層として組み立てる（ナビゲーション設計）
いま自分がどこにいるかを、利用者が把握できるようにする（現在地表示）

このレッスンでは、この 4 つを順番に扱っていきます。

情報のまとまりの作り方

情報をまとめる作業は、一見単純に思えますが、実際には複数の切り口が存在します。代表的な切り口には、次のようなものがあります。

話題によるまとめ方：内容の意味的な近さでまとめる（料理のレシピ、旅行の情報、など）
利用者の目的によるまとめ方：利用者が達成したいことでまとめる（申し込む、確認する、問い合わせる、など）
利用者の属性によるまとめ方：利用者の立場でまとめる（新規の利用者向け、既存の利用者向け、など）
時系列によるまとめ方：時間の流れでまとめる（新着順、開催日順、など）

どの切り口を選ぶかは、その画面で利用者が何を達成しようとしているかによって変わります。情報を発信する側にとって都合の良い切り口（社内の部署ごとの区分など）を、そのまま利用者向けの構造にしてしまうのは、よくある失敗です。利用者は社内の組織図を知りませんし、知る必要もありません。

⚠️ 注意 「新着情報」「お知らせ」「トピックス」のように、似た意味の言葉で複数のまとまりを並べて作ってしまう例も見られます。利用者からすると、どちらに欲しい情報があるのか判断がつかず、両方を確認する手間が生まれます。まとまりを作る前に、それぞれのまとまりが利用者にとって明確に区別できるかを確認しましょう。

グルーピングの質を確かめる簡単な方法は、「この情報は、ほかのどのまとまりに入っていても違和感がないか」を自問することです。複数のまとまりのどこに入れても不自然でない情報が多いほど、まとまりの切り口が利用者の感覚とずれている可能性があります。

具体的な場面で確認しましょう。ある社内システムのポータル画面を、部署ごとの区分（総務からのお知らせ、情報システムからのお知らせ、人事からのお知らせ）でまとめていたとします。この区分は発信する側にとっては自然ですが、利用する側にとっては「自分にいま関係のある情報はどれか」を、区分名からは判断できません。これを利用者の目的によるまとめ方に変え、「いま対応が必要なこと」「制度の変更点」「社内イベントの案内」のように、利用者が知りたい内容そのもので区分し直すと、どの部署が発信したかにかかわらず、必要な情報にたどり着きやすくなります。発信側の都合と利用側の都合が異なることに気づくことが、グルーピング改善の出発点です。

ラベリング——利用者の言葉と社内の言葉のずれ

まとまりに付ける名前を、ラベルと呼びます。ラベリングは、情報設計の中でも特につまずきやすい作業です。理由は、作り手が日常的に使っている言葉と、利用者が思い浮かべる言葉が、しばしば一致しないためです。

社内では、業務の都合や過去の経緯から生まれた独自の呼び方が定着していることがあります。例えば、利用者向けの案内を、社内では「周知文書」と呼んでいるとします。この言葉をそのまま画面のラベルに使うと、初めて訪れた利用者には意味が伝わりません。利用者が実際に探すときに使う言葉は、多くの場合、もっと平易な表現です。

このずれを埋めるための基本的な進め方は、次のとおりです。

利用者が実際に使う言葉を集める（問い合わせの記録、検索で使われた言葉、ユーザビリティテストでの発言など）
社内で使われている言葉と、利用者の言葉を並べて比較する
ずれが大きい箇所を優先して、利用者の言葉に置き換える

💡 ポイント レッスン3で扱ったユーザビリティテストの記録は、ラベリングの検証にも役立ちます。参加者が思考発話法の中で使った言葉そのものが、ラベルの候補になります。「まず、料金のところを見たいです」と参加者が言えば、その画面のラベルは「料金」という言葉を含めるべきだとわかります。

ラベリングでは、短さと正確さのバランスも重要です。正確さを追求するあまり長い説明的な文をラベルにしてしまうと、一覧の中で読みにくくなります。逆に短くしすぎると、意味が曖昧になります。目安として、ラベルは利用者が一目で意味を推測できる長さにとどめ、詳しい説明はラベルの先にある画面側で行うようにします。

カードソーティング

グルーピングとラベリングを、作り手の想像だけで決めるのではなく、利用者に確かめてもらう手法が、カードソーティングです。情報の項目を 1 枚ずつカードに書き出し、参加者にグループ分けをしてもらう調査手法です。

カードソーティングには、大きく 2 つの進め方があります。

オープンカードソーティング

あらかじめグループの名前を用意せず、参加者自身にカードを自由にグループ分けしてもらい、そのグループに名前も付けてもらう進め方です。作り手が思いもよらなかった切り口や、利用者ならではの呼び方が見つかりやすい利点があります。まだ構造が固まっていない段階、つまり、これから情報設計を組み立てる初期の段階に向いています。

クローズドカードソーティング

あらかじめ用意したグループの名前を参加者に示し、それぞれのカードをどのグループに入れるかを選んでもらう進め方です。すでに考案した構造が、利用者にとって自然かどうかを検証する目的に向いています。案として作った構造を確かめる、後の段階で使うことが多い手法です。

	オープンカードソーティング	クローズドカードソーティング
グループ名	参加者が自由に決める	あらかじめ用意する
向いている段階	構造を新しく考える初期段階	考案した構造を検証する段階
得られる情報	利用者ならではの切り口、呼び方	用意した構造の妥当性

カードソーティングを実施する際は、1 回あたり 15 枚から 30 枚程度のカードで行うことが目安とされています。カードが多すぎると、参加者の集中力が続かず、雑な分類になりがちです。項目数が多い場合は、まず大きな範囲を代表するカードで全体の骨格を確かめ、そのあとで細部を別のセッションで確かめるという段階を踏む進め方も有効です。

参加者が複数人いる場合、それぞれの分け方を見比べることで、多くの参加者に共通する分類の傾向が見えてきます。分け方が参加者ごとに大きくばらついた場合は、その情報項目自体が、利用者にとって位置づけの定まらない曖昧な内容である可能性を示しています。

flowchart TD
    A[分類前のカード群] --> B1["申込方法"]
    A --> B2["料金"]
    A --> B3["よくある質問"]
    A --> B4["解約の手続き"]
    A --> B5["サポート窓口"]
    B1 --> C1[グループ:契約前に知りたいこと]
    B2 --> C1
    B3 --> C2[グループ:困ったときの相談先]
    B4 --> C2
    B5 --> C2

この図は、5 枚のカードが、参加者によって「契約前に知りたいこと」と「困ったときの相談先」という 2 つのグループに分けられた例を示しています。作り手は当初、これらを別々の話題として扱うつもりだったとしても、参加者の分類結果からは、利用者が別の切り口でこれらを結び付けて捉えていることが見えてきます。

🔰 初学者の方へ カードソーティングは、特別な道具がなくても実施できます。紙のカードと付箋を使い、対面で行う進め方でも十分に効果があります。まずは身近な同僚数名に協力してもらい、小さく試してみることをおすすめします。

ナビゲーションの階層と幅

情報のまとまりが整理できたら、それらをどのような階層で並べるかを設計します。ここで登場するのが、階層の「深さ」と「幅」という 2 つの観点です。

深さとは、トップページから目的の情報にたどり着くまでに、何回クリックや操作を重ねる必要があるかを指します。幅とは、1 つの階層に、いくつの選択肢が並んでいるかを指します。

深い階層は、1 画面あたりの選択肢が少なくなるため、各画面はすっきりしますが、目的の情報にたどり着くまでの手数が増えます。逆に、浅く広い階層は、たどり着くまでの手数は減りますが、1 画面に並ぶ選択肢が多くなり、選ぶこと自体が難しくなります。

flowchart TD
    Top[トップ] --> Cat1[サービス案内]
    Top --> Cat2[料金]
    Top --> Cat3[サポート]
    Cat1 --> Sub1[機能の紹介]
    Cat1 --> Sub2[導入事例]
    Cat3 --> Sub3[よくある質問]
    Cat3 --> Sub4[問い合わせ]
    Sub3 --> Page1[アカウントに関する質問]
    Sub3 --> Page2[お支払いに関する質問]

この図は、トップから 3 階層でサポートに関する具体的な質問にたどり着く構造を示しています。深さと幅のどちらを優先するかを判断する目安として、それぞれの階層で並ぶ選択肢が、利用者にとって明確に区別できるかどうかを確認する方法があります。選択肢どうしの違いがひと目でわかるのであれば、幅を広げても利用者の負担は小さくとどまります。逆に、選択肢の意味が近く、区別しにくい場合は、幅を広げるほど選択自体が難しくなるため、階層を分けて選択肢を減らす判断が有効です。

📝 補足 深さと幅のどちらが正解かという、一律の基準はありません。扱う情報の量や種類によって、最適な形は変わります。大切なのは、数値上の深さや幅を追い求めることではなく、各階層で利用者が迷わず選べる状態を保つことです。

階層を設計したら、実際にその構造で目的の情報にたどり着けるかを、レッスン3で扱ったユーザビリティテストで確かめることが望まれます。カードソーティングで検証した分類と、実際にその構造をたどる操作性は、別の観点であるためです。

深さと幅を判断するもう 1 つの視点は、利用の頻度です。多くの利用者が繰り返し訪れる情報は、階層を浅くし、少ない手数でたどり着けるようにする価値が高くなります。逆に、一部の利用者だけがまれに必要とする情報であれば、多少階層が深くなっても、全体の見通しの良さを優先したほうが、多くの利用者にとって快適な構造になります。すべての情報を同じ深さで扱おうとせず、頻度に応じてめりはりをつける発想が実務では役立ちます。

構造全体を俯瞰するサイトマップ

情報のまとまりと階層が固まってきたら、全体を 1 枚の図として書き出したものをサイトマップと呼びます。サイトマップは、各ページの見た目には触れず、ページどうしの親子関係だけを示す図です。関係者どうしで構造の全体像を共有し、抜け漏れや重複がないかを確認する際に役立ちます。個々のページ数が多いサービスでは、サイトマップを最初に作ってから、各ページの詳細な設計に進む順序が、手戻りを防ぐうえで有効です。

パンくずと現在地表示

階層が深くなるほど、利用者は「いま自分がどこにいるのか」を見失いやすくなります。この問題に対応するのが、パンくずリストと現在地表示です。

パンくずリストとは、トップページから現在の画面までの経路を、階層に沿って一覧で示す表示のことです。「トップ＞サポート＞よくある質問＞お支払いに関する質問」のように表示することで、利用者は自分がどの階層にいるかを把握でき、途中の階層に戻ることも簡単にできます。

現在地表示は、パンくずリストだけでなく、ナビゲーションメニューの中で、いま選ばれている項目を強調する表示も含みます。メニューの中で自分がいまどこを見ているかがわかれば、利用者は次にどこへ進むべきかを判断しやすくなります。

💡 ポイント パンくずリストは、深い階層を持つ画面ほど効果を発揮します。逆に、階層が浅い構造では、パンくずリストがなくても迷いにくいため、必ずしも必要ではありません。構造の深さに応じて、案内の手段を選びましょう。

検索とブラウズの併用

情報にたどり着く方法は、階層をたどっていく方法（ブラウズ）だけではありません。求める情報の言葉を直接入力して探す方法（検索）も、多くの画面で併用されています。

ブラウズは、利用者が求めている情報の言葉をはっきりと思い浮かべられないときや、全体を見渡しながら選びたいときに向いています。一方、検索は、利用者が求めている情報の言葉をすでに知っているときに、素早くたどり着ける利点があります。

どちらか一方だけを用意すればよいわけではありません。階層をたどるのが得意な利用者もいれば、検索を使うことに慣れている利用者もいます。両方の手段を用意し、どちらを使っても同じ情報にたどり着けるようにしておくことが、迷わない設計の基本です。

検索を用意する場合は、検索結果の精度にも注意が必要です。ラベリングの節で扱った「利用者の言葉」を、検索の仕組み側でも認識できるようにしておかないと、利用者が入力した言葉と、画面側の言葉が一致せず、検索結果が 0 件になってしまうことがあります。カードソーティングで集めた利用者の言葉は、検索の設計にも活用できます。

まとめ

このレッスンでは、以下のことを学びました。

迷いの多くは、見た目ではなく情報の構造そのものに原因がある
情報のまとまりは、利用者の目的や属性など、利用者の視点に立った切り口で作る
ラベリングでは、利用者の言葉と社内の言葉のずれを埋めることが重要である
カードソーティングには、構造を考える初期段階に向くオープン型と、構造を検証する段階に向くクローズド型がある
ナビゲーションの深さと幅は、各階層で利用者が迷わず選べるかどうかで判断する
パンくずリストと現在地表示は、深い階層ほど利用者の助けになる
検索とブラウズは、どちらか一方ではなく併用することで、多様な利用者に対応できる

次のレッスンでは、ここで組み立てた構造を、画面を見せずに実装者へ伝える方法を扱います。ワイヤーフレームの忠実度の考え方と、目的・優先順位・状態・例外という 4 つの観点で意図を言葉にする技法を学びます。

確認クイズ

このレッスンの理解度をチェックしましょう。