公開2025.07.11更新2026.10.12 Webサイト

トップダウン型情報アーキテクチャとは？ボトムアップ型との構造の違いと階層設計の手順

トップダウン型情報アーキテクチャとは、利用者がサイトに来たときに抱く問いを設計者が先に想定し、その答えになる構造を上の階層から決めていく情報設計です。対になるボトムアップ型は、コンテンツ自体が持つ構造やメタデータから行き先を組み立てます。この区分は、Louis Rosenfeld・Peter Morville・Jorge Arangoの『Information Architecture: For the Web and Beyond』第4版（2015年。邦訳『情報アーキテクチャ第4版』オライリー・ジャパン、2016年）の第5章で整理されている区分です。この記事では原書の記述をもとに、両者の違い、トップダウン型を選ぶ条件、上位階層の設計手順と判断基準を整理します。

まとめ：トップダウン型IAの定義と設計の要点

定義：設計者が利用者の主な問い（ここはどこか、何があるか、どう探すか等）を想定し、それに答える構造を「上から」中央で定める設計。原書第5章で整理された区分です。
ボトムアップ型との違い：起点が「利用者の問いを想定した全体構造」か「コンテンツに埋め込まれた構造」か。トップダウン型はトップページから入る人、ボトムアップ型は検索やSNSから記事の途中に着地した人を支えます。
どちらか一方ではない：原書は調査・戦略段階でトップダウンの構造定義（上位2〜3階層）に集中し、設計・制作段階でボトムアップのコンテンツ収集・分析を仕上げ、両者をコンテンツマッピングで突き合わせる流れを示しています。
選び方：新規サイトや主階層の決まっていないサイトはトップダウン型から入ります。しっかりした主階層が既にあるなら、力を入れるのはボトムアップ側です。
階層の判断基準：深さは2〜3階層を超えると利用者があきらめて去るおそれがあるとされ、成長が見込まれるサイトは「広く浅く」に寄せます。「7±2」のルールに従えとは言わないと原書は明言しています。

以下、定義、違い、選び方、手順、判断基準、点検用スクリプト、失敗パターンの順に説明します。

トップダウン型情報アーキテクチャの定義と成り立ち

原書第5章は、米国の大学（Gustavus Adolphus College）のトップページを例に、トップページが利用者の典型的な問いへ先回りして答えていると説明し、これを top-down information architecture と呼んでいます。設計者が利用者の問いに答える構造を仮定し、ページのレイアウトや中身はその「上から」中央で定めた構造を支えるように作る、という定義です。

同書がトップダウン型の問いとして挙げるのは次のようなものです（原書の10項目から抜粋）。

自分はいまどこにいるのか
探しているものが決まっているとき、どう検索するか
このサイトの中をどう移動するか
このサイトには何があり、いま何が起きているのか
人に問い合わせるにはどうするか、自分のアカウントにはどう入るか

原書は、1998年の初版を書いた当時は情報アーキテクチャといえばこのやり方が主流だったと振り返っています。読者の多くがサイトをゼロから作っていたためです。その後、情報環境が動的になり検索エンジンが普及するにつれて、ボトムアップ型が重みを増したと続けています。トップダウン型が廃れたのではなく、ボトムアップ型が加わって比重が変わった、と読むのが原書に沿った理解です。

情報アーキテクチャ全体の定義や4つの構成要素（組織化・ラベリング・ナビゲーション・検索）はインフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順で解説しています。

トップダウン型とボトムアップ型の違い

両者の違いは、構造の起点と、誰のどんな問いに答えるかにあります。原書第5章・第6章・第11章の記述を比較表にまとめます。

比較軸	トップダウン型	ボトムアップ型
構造の起点	利用者の問いを想定した全体構造	コンテンツに内在する構造
主に支える利用者	トップページから入る人	検索・広告・SNSから深い階層に着地した人
答える問い	サイトに何があるか、どう移動するか	ここはどこか、ここに何があるか、次にどこへ行けるか
原書が挙げる組織構造	階層（hierarchy）	データベースモデル
戦略段階の成果物	上位2〜3階層の組織化とナビゲーション	文書タイプの候補と大まかなメタデータ体系
主な調査	既存の情報アーキテクチャの俯瞰	コンテンツ分析
原書の例	大学サイトのトップページ	レシピアプリ、iOSの写真アプリ

ボトムアップ型の例として原書が挙げるレシピは、タイトル、材料、作り方、提供方法という並びそのものが構造になっています。利用者はレシピだと読む前に分かり、「レシピ名」という塊を対象に検索することもできます。トップダウン型が「サイト全体の地図」を先に描くのに対し、ボトムアップ型は「個々のページが自分の位置と行き先を語れるようにする」設計です。ボトムアップ型の進め方はボトムアップ型情報アーキテクチャとは何か？基本概念と特長を解説で扱っています。

原書は両者を組み合わせて使う前提で書かれています。原書第13章は、調査と戦略の段階ではトップダウンの構造定義に集中し、設計と制作の段階でボトムアップのコンテンツ収集・分析を仕上げると説明しています。そのうえで、コンテンツマッピングを「トップダウンの情報アーキテクチャがボトムアップと出会う場所」と位置づけています。

トップダウン型を選ぶ条件とボトムアップ型を優先する場面

どちらに力を入れるかについて、原書第12章（情報アーキテクチャ戦略）は、プロダクトの現状、社内政治、IAの管理体制などが影響するとしています。例として挙げているのは、しっかりしたトップダウンの情報アーキテクチャが既にあるか、主階層を「所有」する強いデザインチームがいる場合で、そのときはボトムアップに進むのがおそらく正解だと述べています。

この記述を実務の判断に置き換えると、次のようになります。

トップダウン型から入る：新規サイトの立ち上げ、リニューアルで主階層を作り直す場合、コーポレートサイトや大学・自治体サイトのように「何がどこにあるか」を利用者に示す役割が大きい場合。原書第6章も、階層は情報アーキテクチャの作業を始める場所として通常よく、トップダウンのアプローチなら大がかりなコンテンツ棚卸しをせずに情報環境の範囲を素早くつかめるとしています。
ボトムアップ型に力を入れる：主階層が既に機能している場合、記事・商品・事例などのページが大量にあり検索やSNSからの直接流入が多い場合。この場合は、トップページの階層をいじるより、各ページの見出し構造・メタデータ・関連リンクを整える作業を優先します。

ボトムアップ側に力を入れる場面でも、トップダウン構造は残ります。原書第6章によると、初期の情報アーキテクチャ界では、自由なタグ付け（フォークソノミー）が中央で定める構造を不要にするかが熱く議論されました。同書の結論は、時間がトップダウン構造の価値を証明したというものです。根拠として、ブックマークサービスDelicious.comのようなタグ主導の試みが市場で失速したこと、そうしたシステムの多くも結局は中央で定めた構造の中でタグを使っていたことを挙げています。ただし自由なタグ付けも特定の場面では有用だと認めています。

トップダウン型IAの設計手順

原書第11章は、戦略段階のトップダウン側の成果を「組織化とナビゲーション構造の最上位2〜3階層を定義すること」としています。そこに至る流れを5つの手順に分けます。

手順1：目的・利用者・コンテンツ範囲の把握

サイトのミッション、ビジョン、目標、想定利用者、コンテンツに関わる既存資料を集めます。原書第11章は、組織図は特に社外のコンサルタントやイントラネットの設計で価値が高いとしています。社内の利用者が組織をどう捉えているかを表し、インタビューやテストの対象者を決める手がかりになるためです。ここで扱う組織図は調査の材料です。組織図をそのままナビゲーションにするかどうかは、手順4の検証で判断します。

手順2：組織化スキームと主階層の決定

原書第12章は、トップダウン側の作業を「主要な組織化スキームを定義し、その中から主階層となる支配的なスキームを選ぶ」と説明しています。例は「製品別、タスク別、顧客区分別に探せる必要がある」です。スキームには、アルファベット順（日本語なら五十音順）・時系列・地理のように答えが一つに決まる正確なもの（exact）と、トピック別・タスク別・利用者別のように解釈の余地があるもの（ambiguous）があります。主階層には利用者がもっとも多く使う軸を1つ選び、ほかの軸は補助ナビゲーションや絞り込みに回します。

手順3：ハイレベル・サイトマップで上位2〜3階層を書き出す

原書第13章は、ハイレベル・サイトマップをトップダウンの過程で作られることが多い成果物としています。トップページから始め、下位セクションを足しながら上から順にナビゲーションを詰めていく使い方です。同章は、ホワイトボードで良く見えた案が、サイトマップという形式に落とすと現実的でないと分かることもあると述べています。画面の見た目を決める前にここで構造を固めます。画面要素への展開はワイヤーフレームとは？作り方とデザインカンプとの違い・発注側の確認範囲を解説の工程です。

手順4：ツリーテストで見つけやすさを検証

トップダウン型の弱点は、設計者の頭の中の分類が利用者の分類と一致する保証がないことです。Nielsen Norman Group（Samhita Tankala、2024年2月23日）は、ツリーテストを「提案中または既存のナビゲーション構造を評価する」手法、カードソートを「整理の案を生む」手法と区別しています。トップダウンで組んだ階層はツリーテストで検証し、ラベルの案が出ない段階ではカードソートで利用者の分類を集めます。カードソートの種類と使い分けはオープン・クローズド・ハイブリッドのカードソートの種類と違いを参照してください。

手順5：コンテンツマッピングでボトムアップと突き合わせる

最後に、実在するコンテンツを細かな単位（チャンク）に分け、どのページに載せるかを割り当てます。印刷物の1ページがWebの1ページに対応するとは限りません。そのため同章は、コンテンツとその入れ物を分けて扱うよう求めています。ここで「階層にはあるのに中身がない」「中身はあるのに置き場所がない」というズレが見つかり、上位階層を直すきっかけになります。

階層設計の判断基準：幅と深さ・排他性・7±2の扱い

原書第6章は、トップダウン型の基本形である階層を設計するときの経験則を示しています。

深さは保守的に：2〜3階層を超えてクリックさせると、利用者はあきらめて去るかもしれないとしています。
成長するサイトは広く浅く：コンテンツの追加が見込まれる新しいサイトは、狭く深い階層より広く浅い階層に寄せます。2階層目以下に項目を足すほうが、トップページに項目を足すより問題が少ないためです。
7±2に縛られない：同書は「7±2」のルールに従えとは言わないと明言しています。安全に置けるリンク数は短期記憶ではなく、ページを目で走査する能力で決まるという見方です。例として、原書執筆時の米国立がん研究所（NCI）のトップページは、約85のリンクを10のグループに分けて並べていました。
排他性にこだわりすぎない：トマトは果物か野菜かのように、曖昧な項目は複数のカテゴリに置いてよい（多重階層）とする一方、重複が多すぎると階層の価値が失われると注意しています。

深さの目安は、各ページの位置を示すパンくずリストの設計にも関わります。階層とパンくずの対応はパンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】で解説しています。

サイトマップ案の深さと重複をPythonで点検する

手順3で書き出したサイトマップ案は、テキストのアウトラインのままでも前節の基準で機械的に点検できます。次のスクリプトは、2スペースのインデントを1階層とみなし（タブは不可。インデントは1段ずつ下げる）、深すぎる経路、直下の項目が多すぎる親、同じラベルの重複を出力します。しきい値の3階層は原書の「2〜3階層」に、10項目はNCIの「1グループあたり少数」という考え方に合わせて筆者が置いた初期値です（原書が10という数を示しているわけではありません）。サイトに合わせて変えてください。

import sys
from collections import Counter

MAX_DEPTH = 3      # トップページから数えて何クリック目までに収めるか
MAX_CHILDREN = 10  # 1つの階層に並べる選択肢の上限（目視で走査できる量）

def parse(lines):
    """インデント2スペース＝1階層のアウトラインを (深さ, ラベル, パス) に変換する"""
    stack, nodes = [], []
    for raw in lines:
        if not raw.strip():
            continue
        depth = (len(raw) - len(raw.lstrip(" "))) // 2 + 1
        label = raw.strip()
        stack = stack[:depth - 1] + [label]
        nodes.append((depth, label, " > ".join(stack)))
    return nodes

def check(nodes):
    children = Counter()
    for depth, label, path in nodes:
        parent = path.rsplit(" > ", 1)[0] if " > " in path else "(トップ)"
        children[parent] += 1
    print(f"ノード数: {len(nodes)} / 最大の深さ: {max((d for d, _, _ in nodes), default=0)}")
    for depth, label, path in nodes:
        if depth > MAX_DEPTH:
            print(f"[深すぎ] {depth}階層目: {path}")
    for parent, n in children.items():
        if n > MAX_CHILDREN:
            print(f"[広すぎ] {parent} の直下に {n} 項目")
    for label, n in Counter(l for _, l, _ in nodes).items():
        if n > 1:
            paths = [p for _, l, p in nodes if l == label]
            print(f"[重複ラベル] 「{label}」が {n} 箇所: " + " / ".join(paths))

if __name__ == "__main__":
    check(parse(open(sys.argv[1], encoding="utf-8").read().splitlines()))

点検するサイトマップ案（sitemap.txt）の例です。

製品
  業務システム
    販売管理
    在庫管理
  クラウド
    導入支援
      移行計画
        費用の目安
サービス
  導入支援
  保守
導入事例
会社情報
  会社概要
  採用
お問い合わせ

Python 3.9.6で python3 ia_tree_check.py sitemap.txt を実行した出力です。

ノード数: 16 / 最大の深さ: 5
[深すぎ] 4階層目: 製品 > クラウド > 導入支援 > 移行計画
[深すぎ] 5階層目: 製品 > クラウド > 導入支援 > 移行計画 > 費用の目安
[重複ラベル] 「導入支援」が 2 箇所: 製品 > クラウド > 導入支援 / サービス > 導入支援

この例では、「移行計画」と「費用の目安」が4〜5階層目に沈んでいます。また「導入支援」が製品配下とサービス配下の2箇所に現れています。重複は多重階層として意図したものなら残してかまいません。意図していないなら、利用者がどちらを探すかをツリーテストで確かめて片方に寄せます。直下に12項目を並べたアウトラインでは「[広すぎ] (トップ) の直下に 12 項目」と出ることも確認しています。

トップダウン型の失敗パターンと補い方

トップダウン型だけで設計すると、次の問題が起きやすくなります。

階層を上下にしか動けない：原書第8章は、Webの前身の一つであるGopherを例に、純粋な階層では枝をまたぐ移動（横方向）も階層の飛び越し（縦方向）もできなかったと説明しています。関連記事や商品の「こちらもおすすめ」のような横のリンクで補います。
深い階層に着地した人が迷う：検索から記事の途中に来た人は、トップダウンの構造を学ばずに次のページへ移りたがります。原書は、トップページを無視してサイトの中ほどに飛び込み、自分の位置と次の行き先が分かるかを確かめる「ナビゲーション・ストレステスト」（Keith Instone、1997年）を勧めています。
階層が深いまま増築される：新しいコンテンツを既存カテゴリの下へ足し続けると、前節の点検で「深すぎ」が増えます。セクション内の移動を担うローカルナビゲーションを整える方法はローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準にまとめています。

「トップダウン」の他の意味との区別

「トップダウン」は分野ごとに意味が異なります。情報アーキテクチャの文脈と混同しやすい用法を整理します。

トップダウン処理（認知心理学）：知識や期待を手がかりに知覚を解釈する処理です。文脈が見え方を変える現象は文脈効果とは？知覚・記憶・選択で異なる3つの意味と日常生活の具体例で扱っています。
トップダウン設計（ソフトウェア）：システム全体を機能ごとに分割し、段階的に詳細化していく構造化設計の手法です。
トップダウン見積り（プロジェクト管理）：全体の規模から工数を割り振る見積り方です。手法の比較はボトムアップ見積もりとは？類推・パラメトリック・三点見積りとの違いと計算例で扱っています。
トップダウン経営：経営層が決定し現場に指示を下ろす意思決定のスタイルです。両者の中間として「ミドルアップダウン」という用語もあります。

どの分野でも「全体から部分へ」という向きは共通していますが、情報アーキテクチャでいうトップダウン型は、利用者の問いに答える構造を上位から決めることを指します。

よくある質問

トップダウン型とボトムアップ型の情報アーキテクチャの違いは何ですか？

構造の起点が違います。トップダウン型は設計者が利用者の問いを想定して全体構造を上から決め、ボトムアップ型はコンテンツに内在する構造やメタデータから行き先を組み立てます。前者はトップページから入る人を、後者は検索などで深いページに着地した人を支えます。

トップダウン型の情報アーキテクチャの定義の出典はどこですか？

Rosenfeld・Morville・Arangoの『Information Architecture: For the Web and Beyond』第4版（O’Reilly、2015年）第5章「The Anatomy of an Information Architecture」です。邦訳は『情報アーキテクチャ第4版 ―見つけやすく理解しやすい情報設計』（オライリー・ジャパン、2016年）です。