公開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章で整理されています。第5章はO’ReillyがThe anatomy of an information architectureとして公開しています。この記事では原書の記述をもとに、ボトムアップ型の定義、構造を形づくる部品、設計手順、検証方法を説明します。

まとめ：ボトムアップ型IAの定義と設計の要点

定義：原書は、ボトムアップ型を「上から指示される」のではなく、システムのコンテンツが示し、コンテンツに内在する情報アーキテクチャと説明しています。利用者の行動ログから構造を作る手法という意味ではありません。
トップダウン型との違い：トップダウン型はトップページから入る人に全体の地図を示し、ボトムアップ型は検索・広告・SNSから深いページに着地した人に、その場での位置と行き先を示します。
構造をつくる部品：コンテンツの塊（チャンク）と並び順、メタデータ（構造・記述・管理）、メタデータでつないだ文脈リンク（コンテンツモデル）の3つです。
設計手順：コンテンツ分析で文書タイプとメタデータを洗い出し、コンテンツモデルで行き先をつなぎ、コンテンツマッピングでトップダウン側の階層と突き合わせます。
検証：トップページを飛ばして深いページから入り、位置と行き先が分かるかを試すナビゲーション・ストレステストで確かめます。

ボトムアップ型情報アーキテクチャの定義：コンテンツに内在する構造

原書第5章は、料理アプリEpicuriousのレシピ画面を例に説明します。レシピには、タイトル、材料、作り方、提供方法という明確な構造があり、情報は「塊」に分かれています。材料が作り方より先に来るのは、作り始める前に材料がそろっているかを確かめたいからです。この塊の定義と並び順によって、読み始める前にレシピだと分かり、どう使えばよいかも分かります。

同書はさらに、塊があれば検索や閲覧にも使えると続けます。たとえば「レシピ名」という塊を対象に検索できます。こうしてコンテンツの構造・並び順・タグ付けが、次の3つの問いに答えると説明しています。

自分はいまどこにいるのか（Where am I?）
ここには何があるのか（What’s here?）
ここからどこへ行けるのか（Where can I go from here?）

2つ目の例はiOSの写真アプリです。画面にはサムネイルの集まりしかありませんが、撮影日と地域でまとめた「コレクション」、自分で作る「アルバム」、年単位への切り替え、地図表示、時期や場所による検索が用意されています。原書は、このアプリのボトムアップ構造は主に、写真に埋め込まれたメタデータと深い文脈リンクで定義されていると述べています。

ボトムアップ型IAの定義とユーザー行動ログの役割

日本語の解説には、ボトムアップ型を「ユーザーの検索履歴やクリックの流れから構造を導く手法」と説明するものがあります。原書の定義とは違います。原書がボトムアップ型の材料とするのは、コンテンツの構造・並び順・タグ付け・メタデータです。アクセスログや検索ログは、どちらの型でも設計や検証の調査材料になります。購買履歴などの行動データで関連商品を勧める仕組みは、原書第8章がパーソナライゼーションとして別に扱っており、Amazonの推薦を例に、他店で買った本を知らないまま勧めてしまう限界も指摘しています。行動データを起点にすることをボトムアップ型と呼んでしまうと、肝心のコンテンツ分析とメタデータ設計が抜け落ちます。

トップダウン型との違い：起点と支える利用者

両者の違いは、構造の起点と、どの入口から来た利用者を支えるかにあります。ボトムアップ側の詳細に絞って、原書第5章・第6章・第11章・第12章の記述を並べます。

比較軸	トップダウン型	ボトムアップ型
構造の起点	利用者の問いを想定した全体構造	コンテンツに内在する構造
支える利用者	トップページから入る人	深いページに直接着地した人
原書の組織構造	階層	データベースモデル
主な調査	既存IAの俯瞰（ヒューリスティック評価）	コンテンツ分析
戦略段階の成果物	上位2〜3階層の組織とナビゲーション	文書タイプの候補と大まかなメタデータ体系

原書第6章は、データベースモデルを「ボトムアップのアプローチ」と呼び、情報アーキテクトにとっての重要性を一語で「メタデータ」と答えています。文書にメタデータを付けることで、検索、閲覧、絞り込み、動的なリンクが可能になるという説明です。両者は二者択一ではなく、原書第13章はコンテンツマッピングを「トップダウンの情報アーキテクチャがボトムアップと出会う場所」と位置づけています。トップダウン型の設計手順と、どちらに力を入れるかの判断はトップダウン型情報アーキテクチャとは？ボトムアップ型との構造の違いと階層設計の手順で扱っています。

ボトムアップ型IAの必要性：深いページへの直接流入

原書第5章は、ボトムアップ型が重要な理由を、利用者がトップダウンの構造をますます素通りするようになったためと説明しています。Google検索、広告のクリック、SNSで流れてきたリンクから、サイトの深いページに直接たどり着きます。到着した人は、トップダウンの構造の使い方を覚えずに、サイト内の関連するコンテンツへ移りたいと考えます。

同章は、初版（1998年）の頃はトップダウン型が主流だったとも振り返っています。読者の多くがサイトをゼロから作っていたからです。情報環境が動的になり、検索エンジンが普及したことで、ボトムアップ型が重みを増しました。記事・商品・事例のようにページ数が増え続けるサイトほど、トップページの階層だけでは利用者を支えきれません。

ボトムアップ構造をつくる3つの部品：チャンク・メタデータ・文脈リンク

チャンクと並び順：ページ単体で位置を伝える構造

レシピの例が示すとおり、同じ種類のページが同じ塊を同じ順で持つと、利用者は中身を読む前にページの種類と使い方を判断できます。原書第13章は、レシピの文字をダミーテキストに置き換えてもレシピだと分かるが、作り方を材料の前に置いたり重要な塊を抜いたりすると成り立たなくなると述べています。製品ページなら「概要・仕様・価格・対応機種」、事例ページなら「課題・導入内容・結果」のように、文書タイプごとに塊と順序を固定することが最初の作業になります。

メタデータ：構造・記述・管理の3種類

原書第11章は、コンテンツ分析で各オブジェクトについて書き出すメタデータを3種類に分けています。

種類	書き出す内容	Webサイトでの例
構造メタデータ	タイトルや独立した塊があるか	見出し、FAQ、仕様表
記述メタデータ	トピック・利用者・形式などの説明	カテゴリ、タグ、対象業種
管理メタデータ	作成者・所有者・作成日・削除時期	担当部署、公開日、見直し期限

記述メタデータについて原書は、多くのオブジェクトは少なくとも十数通りの説明の仕方があるので、この段階ですべて出し切るよう勧めています。既存のメタデータ項目に縛られず、コンテンツの側から新しい項目を示してもらう姿勢です。

文脈リンクとコンテンツモデル：次の行き先を自動でつなぐ仕組み

原書第13章は、コンテンツモデルを「相互につながった小さなコンテンツの塊でできた情報アーキテクチャ」と定義しています。多くのサイトに欠けている、深い階層で機能する文脈ナビゲーションを支えるのが役割です。同章によると、コンテンツの単位は簡単にたまる一方、それらを役に立つ形でつなぐのは非常に難しいため、この部分が欠けやすいとされています。

例として挙がるのは衣料品店で、青いオックスフォードシャツのページにたどり着いた人に、合うパンツや小物を勧める画面です。階層を横に飛ぶこの移動は、サイトの構造よりも利用者の必要に基づいています。同じ働きをする塊が大量にある場合、たとえば携帯電話の製品ページ、レビュー、アクセサリーのページなら、リンクを人手で決めずにCMSで自動生成すべきだと原書は述べています。関連リンクの選び方と実装はコンテキストナビゲーションとは？関連リンクの選び方とHTML実装・SEOの基準で解説しています。

ボトムアップ型IAの設計手順

原書第11章〜第13章の記述を、ボトムアップ側の作業として5つの手順に並べます。

手順1：コンテンツ分析のサンプル選定

原書第11章は、コンテンツ分析をボトムアップ型の決定的な構成要素と位置づけています。情報環境に実在する文書やオブジェクトを丁寧に見直す作業です。サンプルは形式（文書・アプリ・動画など）、文書タイプ（製品カタログ、プレスリリース、技術レポート、ホワイトペーパー、フォームなど）、出所（部署）が偏らないように選びます。数の多い種類は数例に絞り、少なくても重要な種類（投資家がよく見る年次報告書など）は入れます。新しい発見がなくなったら、そこで区切ってよいと同章は述べています。

手順2：オブジェクトごとのメタデータの書き出し

選んだサンプルごとに、前章の構造・記述・管理メタデータを書き出します。原書は作業中に次の問いを繰り返すよう勧めています。

このオブジェクトは何か
人と機械に向けてどう説明できるか
ほかのオブジェクトと何が違うか
人と機械にとって見つけやすくするにはどうするか

個々の書き出しが済んだら、まとまりや階層関係、別々の部署にあるのに同じ業務でつながるオブジェクトなど、横断して見えるパターンを探します。同章は、2周目、3周目で初めて気づくことがあるので、この作業は反復が前提だとしています。

手順3：文書タイプとメタデータ項目の定義

原書第12章（情報アーキテクチャ戦略）は、ボトムアップ側の成果を「文書タイプの特定」としています。記事、レポート、ホワイトペーパー、金融計算ツール、オンライン講座のモジュールといった種類を決める作業で、コンテンツの執筆・管理チームとの密な協力が要るとされています。続けてメタデータ項目を、全文書に付けるもの、特定のサブサイトだけのもの、特定の文書タイプだけのもの（ニュース記事なら見出し）に分けて定義します。

手順4：コンテンツモデルによる行き先の設計

原書第13章は、音楽情報を扱うメディアを例に、アーティスト紹介とアルバムのページが数千件ある場合を挙げています。どのオブジェクトをどうつなぐかが明らかでないときは、カードソートの変形を使います。各オブジェクトを印刷してナビゲーション部分を切り取り、被験者に「次にどこへ行きたいか」を考えてもらい、オブジェクト同士を線でつないでもらう方法です。足りないオブジェクトを尋ねれば、簡単なギャップ分析にもなります。カードソートの種類はオープン・クローズド・ハイブリッドのカードソートの種類と違いで整理しています。

手順5：コンテンツマッピングによるトップダウン側との突き合わせ

原書第11章は、ヒューリスティック評価がトップダウンの理解を、コンテンツ分析がボトムアップの理解をもたらし、両者をコンテンツマップでつなぐとしています。コンテンツ分析で見つかった実態が、戦略チームの描いた構想と量や質で食い違うことがあり、その差を見つけて手当てするのもこの段階の仕事です。第13章は、詳細なサイトマップとコンテンツマッピングでトップダウンとボトムアップを解決しておけば、構造の大きな欠陥が制作の終盤で見つかる事態は起きにくいとしています。全体の階層の決め方はインフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順も参考になります。

メタデータから関連リンクを生成するPython例

手順4のコンテンツモデルを、文書タイプとメタデータの一致でリンクを作る小さなスクリプトにしました。原書の音楽メディアの例に合わせ、アーティスト、アルバム、レビュー、イベントの4タイプを扱います。この例では、コンテンツ間の関係をメタデータで表し、関連リンクを規則に従って自動生成します。自動化そのものがボトムアップ型の定義ではありません。

from collections import defaultdict

# コンテンツオブジェクト：文書タイプと記述メタデータだけを持つ
objects = [
    {"id": "artist-a", "type": "artist", "artist": "A"},
    {"id": "album-a1", "type": "album", "artist": "A", "year": 2019},
    {"id": "album-a2", "type": "album", "artist": "A", "year": 2023},
    {"id": "review-a2", "type": "review", "album": "album-a2"},
    {"id": "artist-b", "type": "artist", "artist": "B"},
    {"id": "album-b1", "type": "album", "artist": "B", "year": 2023},
    {"id": "event-c", "type": "event", "artist": "C"},
]

# コンテンツモデル：どの文書タイプからどこへ進めるかをメタデータの一致で定義する
rules = [
    ("artist", "album", lambda s, t: s["artist"] == t["artist"]),
    ("album", "artist", lambda s, t: s["artist"] == t["artist"]),
    ("album", "review", lambda s, t: t["album"] == s["id"]),
    ("album", "album", lambda s, t: s["artist"] == t["artist"] and s["id"] != t["id"]),
    ("artist", "event", lambda s, t: s["artist"] == t["artist"]),
]

links = defaultdict(list)
for src in objects:
    for s_type, t_type, match in rules:
        if src["type"] != s_type:
            continue
        for tgt in objects:
            if tgt["type"] == t_type and match(src, tgt):
                links[src["id"]].append(tgt["id"])

inbound = defaultdict(int)
for targets in links.values():
    for t in targets:
        inbound[t] += 1

for o in objects:
    out = links.get(o["id"], [])
    flag = ""
    if not out:
        flag += " 行き止まり"
    if inbound[o["id"]] == 0:
        flag += " 孤立(どこからも来ない)"
    print(f'{o["id"]:10} -> {", ".join(out) or "-":26}{flag}')

Python 3.9で実行した結果です。

artist-a   -> album-a1, album-a2
album-a1   -> artist-a, album-a2
album-a2   -> artist-a, review-a2, album-a1
review-a2  -> -                          行き止まり
artist-b   -> album-b1
album-b1   -> artist-b
event-c    -> -                          行き止まり 孤立(どこからも来ない)

出力から2つの欠けが読み取れます。レビューから先へ進む規則がないため、review-a2が行き止まりになっています。event-cはアーティストCの紹介ページが存在しないため、どこからもリンクされません。前者は規則（review→album）の追加で、後者はオブジェクト（artist-c）の追加で埋めます。このコードが検出するのは、定義した規則で生成される関連リンクの入出力がないオブジェクトだけで、公開サイトの全リンクではありません。利用者が求める行き先や、まだ存在しないコンテンツの必要性は、別途調査して判断します。実際のCMSに適用するには、書き出したデータをobjectsの形式に整え、文書タイプと項目名に合わせてrulesも変更します。

ナビゲーション・ストレステストによるボトムアップ構造の検証

原書第5章は、サイトのボトムアップ型IAを評価する簡単で実用的な方法として、Keith Instoneのナビゲーション・ストレステストを挙げています。原書第8章の注によると、Instoneが1997年の記事「Stress Test Your Site」で広めた手法です。Instone自身の解説ページ（Navigation stress test、Internet Archiveの保存版）の手順は次のとおりです。

トップページ以外の下位ページを無作為に選ぶ
URLが印字されないように白黒で紙に印刷する
初めてこのページからサイトに入ったつもりで、下の問いに答えを書き込む
チームの他のメンバーやサイトを知らない人にも同じテストをしてもらう
答えを比べ、どこで一致し、どこで誰も一致しなかったかを確かめる

問い	紙への書き込み方
このページは何についてか	ページのタイトルを四角で囲む
これは何のサイトか	サイト名を丸で囲む
サイトの主なセクションは何か	Xの印を付ける
このページはどのセクションにあるか	該当するXを三角で囲む
1つ上の階層はどこか	Uの印を付ける
トップページへの戻り方	Hの印を付ける
セクションの先頭への戻り方	Tの印を付ける
リンクの各まとまりは何を表すか	D・N・S・Oで分類する
トップページからここへ来る経路は何か	選択肢を順に書き、根拠となる要素を結ぶ

D・N・S・Oは、Dが下位の詳細ページ、Nが同じセクション内の近いページ、Sが同じサイト内の離れたページ、Oが外部サイトです。Instoneは、多くのページは合格しないので「ストレステスト」と呼ぶと説明しています。見つかった問題はナビゲーションの再設計に使うほか、ユーザビリティテストの焦点を絞る材料にもなります。パンくずリストはこのテストの「1つ上の階層」と「セクションの先頭」に直接答える部品で、設計はパンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】、セクション内の移動はローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準で扱っています。

ボトムアップ型が効く条件と失敗パターン

原書の記述から、ボトムアップ型に工数をかける価値がある条件ははっきりしています。第6章はデータベースモデルが特に役立つ対象として、製品カタログや職員名簿のように比較的均質なサブサイトを挙げています。第13章はコンテンツモデルが向く条件を、似た種類で価値の高い塊が大量にあり、うまくつながっておらず、リンクを自動化できるCMSがある場合としています。取締役十数人分の情報のように数が少なければ、人手でつないでも十分です。全コンテンツにモデルを作ることもできますが手間がかかるため、原書は利用者と組織の双方にとって価値の高いコンテンツに絞るよう勧めています。

逆に、次の進め方は失敗しやすいと判断します。

タグだけで階層を置き換える：原書第6章は、自由なタグ付け（フォークソノミー）がトップダウン構造を不要にするかという論争について、時間がトップダウン構造の価値を証明したと結論づけています。Delicious.comのようなタグ主導の試みは市場で失速し、多くのシステムも結局は中央で定めた構造の中でタグを使っていました。タグはボトムアップ型の部品の一つで、主階層の代わりにはなりません。
コンテンツ分析を飛ばしてタグを付け始める：文書タイプとメタデータ項目を決めないままタグを足すと、同じ意味のタグが乱立し、手順4の自動リンクも正しく働きません。
関連リンクを人手で選び続ける：関連リンクの手動更新が運用体制で処理できる量を超えると、リンクの追加漏れが生じます。前章のスクリプトのように、規則で生成して欠けを点検する形に移します。

「ボトムアップ」の他の意味との区別

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

ボトムアップ処理と相互交流モデル（認知心理学）：ボトムアップ処理は、文字や音などの感覚情報を積み上げて意味を組み立てる処理です。知識や期待から解釈するトップダウン処理と対になります。読解の相互交流モデルは、D. E. Rumelhartの論文「Toward an interactive model of reading」（1977年、Attention and Performance VI所収）で知られ、読解では両方向の処理が同時に働くとする考え方です。文脈が見え方を変える現象は文脈効果とは？知覚・記憶・選択で異なる3つの意味と日常生活の具体例で扱っています。
ボトムアップテスト（ソフトウェアテスト）：下位のモジュールから順に結合して確かめる結合テストの進め方で、未完成の上位モジュールの代わりにドライバを使います。
ボトムアップ方式の姿勢推定（画像認識）：画像内の関節点を先に検出してから人物ごとに組み立てる方式です。Cao らの論文「Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields」（arXiv 1611.08050）は、人数に関係なくリアルタイムで動く貪欲なボトムアップ解析を示しました。
ボトムアップ見積もり（プロジェクト管理）：作業を細かく分けて積み上げる見積り方です。手法の比較はボトムアップ見積もりとは？類推・パラメトリック・三点見積りとの違いと計算例で扱っています。

どの分野でも「部分から全体へ」という向きは共通しています。情報アーキテクチャでいうボトムアップ型は、コンテンツの構造とメタデータから行き先を組み立てることを指します。

よくある質問

ボトムアップ型情報アーキテクチャとは何ですか？

コンテンツ自体が持つ構造・並び順・メタデータから、利用者が現在地と次の行き先を判断できるようにする情報設計です。『Information Architecture』第4版（邦訳『情報アーキテクチャ第4版』）第5章は、上から指示されるのではなく、コンテンツに内在する情報アーキテクチャと説明しています。