情報設計とナビゲーション：迷わせない構造をつくる（カードソート・ツリーテスト）｜UI・UXデザイン入門 第3回

分け方：作り手の都合ではなく、利用者の頭の中に合わせる

情報の分け方にはいくつかの切り口があります（図2）。

• テーマ（話題）別：「料金」「機能」「導入事例」のように、内容の種類で分ける。多くのサイトの基本になる分け方です。
• 利用者別：「個人のお客様」「法人のお客様」「パートナーの方」のように、誰向けの情報かで分ける。利用者が自分をどれに当てはめるか迷わない場合に有効です。
• やりたいこと別（タスク別）：「申し込む」「料金を払う」「解約する」のように、利用者の目的で分ける。手続きの多いサービスで使いやすい分け方です。
• 時系列・地域・五十音順：日付、地域、名前の順番など、正解が1つに決まる並べ方。ニュースの一覧や店舗検索、用語集などで使います。

よくある失敗：社内の組織図で分けてしまう

最もよく見かける失敗が、会社の部署の分け方をそのままメニューにしてしまうことです。たとえば、架空の会社のサイトで「営業本部」「カスタマーサクセス部」「経営企画室」のようにメニューが並んでいると、利用者は「料金の相談はどこ？」「使い方が分からないときは？」と迷います。利用者は、会社の組織の都合を知りませんし、知る必要もありません（図3）。

同じことは名前のつけ方にも言えます。社内でしか通じない言葉（サービスの社内コード名、業界の専門用語、部署の略称）をメニューに使うと、利用者はその言葉の意味から推測しなければなりません。利用者が普段使っている言葉で名前をつけるのが基本です。利用者がどんな言葉を使っているかは、問い合わせのメールや、サイト内検索で入力された言葉、営業の商談メモなどから集められます。

たどり方：ナビゲーションの主な種類

情報の構造が決まったら、それを利用者がたどれるようにナビゲーションを用意します。代表的なものは次のとおりです（図4）。

• グローバルナビゲーション：サイト全体の大きな分類を並べた、どのページにも共通するメニュー。画面の上部に置かれることが多いです。
• ローカルナビゲーション：いま見ている分類の中にある、下の階層のページへのメニュー。サイドや見出しの下に置かれます。
• パンくずリスト：「ホーム ＞ 料金 ＞ 法人プラン」のように、いま自分がどこにいるかを示すリスト。上の階層に戻るときにも使えます。
• 関連リンク：本文の内容に関係する別のページへのリンク。分類をまたいで移動したい利用者を助けます。
• フッター：画面の下部にある、会社情報、お問い合わせ、プライバシーポリシーなどへのリンク。
• サイト内検索：分類をたどらずに、言葉で目的の情報を探す仕組み。情報の量が多いサイトほど重要になります。

スマートフォンでの注意

スマートフォンでは画面が狭いため、メニューを「≡」のようなボタンの中に隠す形がよく使われます。省スペースになる反面、隠れたメニューは目に入らないため、使われにくくなることがあります。特に大事な操作（予約する、問い合わせるなど）は、メニューの中に隠さず、画面に直接見えるように置くことを検討しましょう。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

作った構造を確かめる：カードソートとツリーテスト

分け方と名前を決めても、それが利用者の感覚に合っているかどうかは、作り手には分かりません。そこで使うのが、カードソートとツリーテストという2つの調査方法です。NN/gは、この2つの違いを「カードソートは情報設計のアイデアを生み出すために使い、ツリーテストは情報設計の案を評価するために使う」とまとめています（参考資料3）。

カードソート：利用者の頭の中の分け方を知る

カードソートでは、ページや情報の名前を1枚ずつ書いたカードを参加者に渡し、「自分にとって分かりやすいまとまり」に分けてもらいます。NN/gによると、主に次の3つのやり方があります（参考資料4）。

• オープンカードソート：参加者が自分でまとまりを作り、名前もつける。最もよく使われるやり方で、利用者の頭の中の分け方を幅広く知ることができます。
• クローズドカードソート：まとまりの名前を作り手があらかじめ決めておき、参加者にカードを振り分けてもらう。既存の分類を確かめるときに使いますが、NN/gは、既存の分類の評価にはツリーテストのほうが向いていることが多いとしています。
• ハイブリッドカードソート：一部のまとまりだけを決めておき、残りは参加者に作ってもらう。決めておいたまとまりが参加者の考えを誘導してしまうおそれがあるため、NN/gは基本的にはすすめていません。

参加者の人数の目安として、NN/gは、理由まで聞く質的な調査では少なくとも15人、統計的な傾向を見る量的な調査では少なくとも30〜50人を挙げています（参考資料4）。カードソートの結果は、人によって分け方がばらつくため、「これが正解の分類」ではなく、分類の候補を考えるための材料として使います（参考資料3）。

ツリーテスト：その構造で、目的の情報にたどり着けるか

ツリーテストでは、デザインや本文のない、分類の名前だけを階層にした「木（ツリー）」を参加者に見せます。そして、「来月から料金プランを変えたい。どこを開きますか？」のような課題（タスク）を出し、参加者に分類をたどってもらいます（参考資料5）。

NN/gによると、ツリーテストでは主に次の指標を見ます（参考資料5）。

• 成功率：正しい場所にたどり着けた参加者の割合
• 直接さ（ディレクトネス）：迷わずにまっすぐ選べたか、いくつかの分類を行ったり来たりしたか。行ったり来たりが多いと、名前が分かりにくいか、自信を持って選べていないサインです。

課題の文章に、分類の名前と同じ言葉を使ってしまうと答えを教えることになるので、言いかえて書くのがコツです（参考資料5）。また、ツリーテストはデザインや本文がない状態で行うため、実際の画面での使いやすさ（メニューの見せ方など）までは分からない点に注意が必要です（参考資料5）。

実務ではこう使う：サイトのメニューを見直す手順

既存のサイトのメニューを見直すときは、次の順番で進めると、作り手の思い込みで決めてしまうことを防げます（図6）。

1. 今ある情報を棚卸しする：サイトにあるページを一覧にし、古いもの、重複しているもの、ほとんど見られていないものに印をつけます。アクセス解析のデータが役に立ちます。
2. 利用者の言葉を集める：問い合わせの文面、サイト内検索の言葉、営業やサポートが聞いている質問から、利用者がどんな言葉で情報を探しているかを集めます。
3. カードソートで分け方を知る：主なページをカードにして、利用者にオープンカードソートをしてもらいます。オンラインのツールを使えば、離れた場所の人にも参加してもらえます。
4. 分類案を作る：カードソートの結果と、事業として見せたい情報の優先順位をあわせて、分類の案を1〜2個作ります。名前は利用者の言葉を優先します。
5. ツリーテストで確かめる：主な目的（料金を知る、問い合わせる、事例を探すなど）を課題にして、ツリーテストを行います。成功率の低い課題があれば、名前や置き場所を直して、もう一度試します。

この手順は、新しいサイトを作るときにも同じように使えます。新しいサイトの場合は、1の代わりに「載せる予定の情報の一覧」を作るところから始めます。

分類が決めきれないときの考え方

「この情報は、どちらの分類にも入りそう」という場面はよくあります。その場合は、利用者がどちらから探しに来ても見つけられるように、両方の分類から見えるようにする（片方には関連リンクを置く）方法があります。ただし、何でも複数の場所に置くと、メニューが長くなり、かえって迷いやすくなります。ツリーテストで、利用者が実際にどちらを開くかを確かめてから決めると安心です。

この回のまとめ

• 情報設計（IA）は情報の分け方・名前・関係を決める「見えない土台」、ナビゲーションはそれを利用者に見せる「見える入口」。
• 分け方には、テーマ別・利用者別・やりたいこと別・時系列などの切り口がある。社内の組織図で分けるのは典型的な失敗。
• 名前は、社内用語ではなく、利用者が普段使っている言葉でつける。
• カードソートは分け方のアイデアを生み出す方法、ツリーテストは作った分類の案を評価する方法。
• メニューの見直しは、棚卸し→利用者の言葉集め→カードソート→分類案→ツリーテストの順で進める。

確認テスト

次回予告

第4回は「ユーザビリティの10原則」です。ヤコブ・ニールセンの10のヒューリスティクスを1つずつ取り上げ、画面のどこに問題があるのかを専門家の目で点検する「ヒューリスティック評価」の進め方を学びます。

参考資料

1. Page Laubheimer「Information Architecture: Study Guide」Nielsen Norman Group https://www.nngroup.com/articles/ia-study-guide/ （確認日：2026年11月12日）
2. Louis Rosenfeld, Peter Morville, Jorge Arango『Information Architecture: For the Web and Beyond』第4版（O’Reilly Media、2015年）
3. Samhita Tankala「Card Sorting vs. Tree Testing」Nielsen Norman Group（2024年2月23日） https://www.nngroup.com/articles/card-sorting-tree-testing-differences/ （確認日：2026年11月12日）
4. Samhita Tankala, Katie Sherwin「Card Sorting: Uncover Users’ Mental Models」Nielsen Norman Group（2024年2月2日） https://www.nngroup.com/articles/card-sorting-definition/ （確認日：2026年11月12日）
5. Page Laubheimer「Tree Testing: Evaluate Menu Labels and Categories」Nielsen Norman Group https://www.nngroup.com/articles/tree-testing/ （確認日：2026年11月12日）