「サイトを作ったけど、ユーザーがどこに行けばいいかわからないと言われる」
「ページは増えたのに、コンバージョンが上がらない」
こんな悩みの原因は、サイト設計（情報設計・IA）が曖昧なまま作り始めていることにある。
この記事では、Webサイトの情報設計をマインドマップで可視化する方法を紹介する。目的→導線→ページの3層構造で整理すれば、ユーザーが迷わないサイト構造が見えてくる。
コピペ用のテンプレートも用意した。
迷子になる原因
なぜユーザーはサイト内で迷子になるのか。設計段階での3つの失敗パターンを見ていこう。
失敗1: ページ単位で考えている
「トップページ」「会社概要」「サービス紹介」「お問い合わせ」
ページのリストから設計を始めると、ユーザーの行動が見えなくなる。ページは「箱」でしかない。大事なのは「箱と箱のつながり」だ。
失敗2: 目的が複数ある
「問い合わせを増やしたい」「採用応募も欲しい」「ブランド認知も上げたい」
1つのサイトに複数の目的を詰め込むと、導線が分散する。ユーザーは「結局、何をすればいいの？」と迷う。
失敗3: 階層が深すぎる
トップ→カテゴリ→サブカテゴリ→サブサブカテゴリ→詳細ページ
5クリック以上かかる構造は、離脱を招く。「たどり着けない」のではなく「たどり着く前にあきらめる」のが実態だ。
マインドマップが解決策になる理由
マインドマップは「中心から広がる構造」を可視化する。これがサイト設計と相性がいい。
- 中心 = サイトの目的
- 第1階層 = 主要な導線
- 第2階層 = ページ群
- 第3階層 = 個別ページ（詳細）
この構造なら、「どこから来て、どこへ行くか」が一目でわかる。
IA型（目的→導線→ページ）
サイト設計をマインドマップで行う基本フレームワークを紹介する。
3層構造の考え方
[サイトの目的]
└─ [導線] ユーザーはどんな行動をとるか
└─ [ページ群] その行動を支えるコンテンツ
└─ [個別ページ] 具体的なページ
逆算で考えるのがポイントだ。「ページを作る」のではなく「ゴールに到達させる」ためにページを配置する。
レイヤー1: サイトの目的
マインドマップの中央に、サイトの最終目的を1つだけ書く。
良い例:
- 「BtoB問い合わせ獲得」
- 「EC購入完了」
- 「採用エントリー」
- 「メルマガ登録」
悪い例:
- 「いろいろな情報を伝える」（曖昧すぎる）
- 「問い合わせと採用と認知向上」（複数ある）
目的が1つに絞れない場合は、サイトを分けるか、優先順位をつける。
レイヤー2: 導線
中心から伸びる第1ブランチは、ユーザーの「入口」と「行動パターン」で分ける。
典型的な導線:
- 1. オーガニック検索 → 課題認知 → 解決策 → 信頼構築 → 問い合わせ
- 2. SNS流入 → 興味喚起 → 詳細確認 → 問い合わせ
- 3. 広告流入 → LP → 即決 → 問い合わせ
- 4. リピーター → 最新情報確認 → 追加購入/継続相談
ユーザーがどこから来て、どう動くかをシナリオで考える。
レイヤー3: ページ群
各導線を支えるコンテンツをグルーピングする。
オーガニック検索導線
├─ 課題認知コンテンツ
│ ├─ ブログ記事（課題系）
│ └─ 用語解説
├─ 解決策コンテンツ
│ ├─ サービス紹介
│ └─ 事例紹介
├─ 信頼構築コンテンツ
│ ├─ 会社概要
│ └─ お客様の声
└─ CVポイント
└─ 問い合わせフォーム
「ページ」ではなく「役割」で分類するのがコツだ。
レイヤー4: 個別ページ
最下層に、実際に作成するページを配置する。
ここまで整理すると、「なぜこのページが必要か」「このページの次はどこに誘導するか」が明確になる。
Hub/Spoke設計
サイト構造のパターンとして、Hub/Spoke（ハブ・スポーク）設計を紹介する。
Hub/Spokeとは
飛行機の路線図をイメージしてほしい。主要空港（Hub）から各地方空港（Spoke）へ放射状に路線が伸びる。
サイト設計でも同じ考え方が使える。
- Hub（ハブ） — 中心となるまとめページ。複数のSpokeへの入口
- Spoke（スポーク） — 個別の詳細ページ。Hubから派生
Hub/Spokeの構造例
[Hubページ: SEO対策まとめ]
├─ [Spoke] キーワード選定の方法
├─ [Spoke] タイトルタグの書き方
├─ [Spoke] 内部リンクの最適化
├─ [Spoke] 被リンク獲得の戦略
└─ [Spoke] Core Web Vitals対策
Hubページはカテゴリートップ、SpokeページはHub内のトピックを深掘りした記事になる。
Hub/Spokeのメリット
SEO観点
- Hubページが「ピラーコンテンツ」として権威性を獲得
- Spoke間の内部リンクでサイト全体の評価が上がる
- 検索意図が明確なSpokeページがロングテールを拾う
ユーザー観点
- 「まずHubで全体像を把握→気になるSpokeで深掘り」の動線
- 迷子になりにくい（Hubに戻れば全体が見える）
- 関連情報へのアクセスが容易
マインドマップでHub/Spokeを設計する
サイト名
├─ Hub1: 製品カテゴリA
│ ├─ Spoke: 製品A-1詳細
│ ├─ Spoke: 製品A-2詳細
│ └─ Spoke: 製品A-3詳細
├─ Hub2: 製品カテゴリB
│ ├─ Spoke: 製品B-1詳細
│ └─ Spoke: 製品B-2詳細
└─ Hub3: お役立ちコンテンツ
├─ Spoke: 記事1
├─ Spoke: 記事2
└─ Spoke: 記事3
マインドマップで描くと、Hub同士の関係性、Spoke間のリンク構造も可視化できる。
Hub/Spoke設計のチェックポイント
- 各Hubは独立したテーマを持っているか
- SpokeからHubへの導線はあるか（パンくず、関連リンク）
- Spoke同士の横断リンクは適切か
- Hubページは定期的に更新されているか
- 孤立したページ（どのHubにも属さない）はないか
記事→LP導線
コンテンツマーケティングでよく使う「記事からLP（ランディングページ）への導線」設計を解説する。
基本構造
[記事群（集客）]
↓ 内部リンク
[中間ページ（教育・比較）]
↓ CTA
[LP（CV獲得）]
ブログ記事でユーザーを集め、段階的にLPへ誘導する流れだ。
ファネル別の記事設計
TOFU（Top of Funnel）: 認知段階
- 検索ボリュームが大きいキーワードを狙う
- 課題の存在を気づかせる記事
- 例: 「〇〇とは」「〇〇のメリット」
MOFU（Middle of Funnel）: 検討段階
- 解決策を比較検討する記事
- 例: 「〇〇の選び方」「〇〇 比較」「〇〇 おすすめ」
BOFU（Bottom of Funnel）: 決定段階
- 具体的なアクションを促す記事
- 例: 「〇〇の始め方」「〇〇の料金」「〇〇 導入事例」
マインドマップでファネルを設計する
サービスLP
├─ BOFU記事群
│ ├─ 導入事例5選
│ ├─ 料金・プラン比較
│ └─ 無料トライアルの始め方
├─ MOFU記事群
│ ├─ 〇〇ツール比較10選
│ ├─ 失敗しない選び方ガイド
│ └─ 導入前チェックリスト
└─ TOFU記事群
├─ 〇〇とは？基礎知識
├─ なぜ今〇〇が必要なのか
└─ 〇〇の5つのメリット
ゴール（LP）を中心に置き、逆算で記事を配置する。
導線設計のポイント
1. 各記事の「次のアクション」を明確に
TOFU記事の末尾 → MOFU記事への誘導
MOFU記事の末尾 → BOFU記事 or LP への誘導
BOFU記事の末尾 → LP直リンク or 問い合わせCTA
2. 複数経路を用意する
ユーザーは直線的に進まない。TOFU→BOFU、MOFU→TOFUなど、行ったり来たりする。すべての記事から主要ページへの導線を確保する。
3. 離脱ポイントを減らす
外部リンクは最小限に。内部リンクで回遊させる。
実例: SaaS系サービスの導線マップ
問い合わせフォーム
├─ LP: サービス紹介
│ ├─ CTAボタン
│ └─ 事例セクション → 事例詳細ページ群
├─ 料金ページ
│ └─ プラン比較表 → FAQ
├─ 事例ページ（Hub）
│ ├─ 事例1: 〇〇業界
│ ├─ 事例2: △△業界
│ └─ 事例3: □□業界
└─ ブログ（Hub）
├─ TOFU: 課題系記事
├─ MOFU: 比較系記事
└─ BOFU: 導入系記事
└─ 各記事末尾 → LP or 問い合わせCTA
テンプレ
そのまま使えるサイト設計テンプレートを3種類用意した。MindTreeにMarkdownとしてインポートするか、テキストエディタで編集して使える。
テンプレート1: 基本IA型
# [サイト名] IA設計
## サイト目的
- ゴール: [問い合わせ獲得 / 購入 / 採用 など]
- KPI: [月間CV数 / CVR など]
## 導線1: オーガニック検索
- 入口ページ
- ブログ記事（課題認知）
- サービス紹介
- 中間ページ
- 事例紹介
- 比較・選び方
- CVページ
- 問い合わせフォーム
## 導線2: 広告流入
- 入口ページ
- LP（キャンペーン別）
- CVページ
- 問い合わせフォーム
## 導線3: リピーター
- 入口ページ
- トップページ
- お知らせ
- 中間ページ
- 新着事例
- ブログ新着
- CVページ
- 追加相談フォーム
## サイトマップ
- トップページ
- サービス紹介
- サービスA詳細
- サービスB詳細
- 料金プラン
- 事例紹介（Hub）
- 事例1
- 事例2
- 事例3
- ブログ（Hub）
- カテゴリA
- カテゴリB
- 会社概要
- 代表メッセージ
- 沿革
- アクセス
- 問い合わせ
テンプレート2: Hub/Spoke型
# [サイト名] Hub/Spoke設計
## サイト目的
- ゴール: [メルマガ登録 / 商品購入 / アフィリエイト収益]
- 対象読者: [ペルソナ]
## Hub1: [カテゴリ名A]
- Hubページ概要: [このカテゴリのまとめ記事]
- Spoke記事
- 記事1: [タイトル] - [検索キーワード]
- 記事2: [タイトル] - [検索キーワード]
- 記事3: [タイトル] - [検索キーワード]
- 記事4: [タイトル] - [検索キーワード]
- 内部リンク設計
- Spoke → Hub: パンくず、末尾リンク
- Spoke → Spoke: 関連記事セクション
## Hub2: [カテゴリ名B]
- Hubページ概要:
- Spoke記事
- 記事1:
- 記事2:
- 記事3:
- 内部リンク設計
-
## Hub3: [カテゴリ名C]
- Hubページ概要:
- Spoke記事
- 記事1:
- 記事2:
- 内部リンク設計
-
## CVポイント
- 全ページ共通
- ヘッダーCTA
- フッターCTA
- 記事末尾
- 関連商品リンク
- メルマガ登録フォーム
## 横断リンク
- Hub1 ←→ Hub2: [関連トピックでリンク]
- Hub2 ←→ Hub3: [関連トピックでリンク]
テンプレート3: ファネル型
# [サービス名] コンテンツファネル設計
## ゴール
- CVポイント: [LP / 問い合わせ / 購入]
- ターゲット: [ペルソナ]
- 検索意図: [やりたい / 知りたい / 買いたい]
## LP
- URL:
- 訴求ポイント:
- CTA:
## BOFU記事
- 記事1
- タイトル:
- KW:
- 導線: → LP
- 記事2
- タイトル:
- KW:
- 導線: → LP
- 記事3
- タイトル:
- KW:
- 導線: → LP
## MOFU記事
- 記事1
- タイトル:
- KW:
- 導線: → BOFU記事 or LP
- 記事2
- タイトル:
- KW:
- 導線: → BOFU記事
- 記事3
- タイトル:
- KW:
- 導線: → BOFU記事
## TOFU記事
- 記事1
- タイトル:
- KW:
- 導線: → MOFU記事
- 記事2
- タイトル:
- KW:
- 導線: → MOFU記事
- 記事3
- タイトル:
- KW:
- 導線: → MOFU記事
## 導線チェックリスト
- TOFU → MOFU の内部リンクあり
- MOFU → BOFU の内部リンクあり
- BOFU → LP のCTAあり
- 全記事からLPへの導線あり（サイドバー or フッター）
- パンくずリスト設置
MindTreeで設計を可視化
サイト設計は、一度作って終わりではない。サイトの成長とともに構造を見直す必要がある。
なぜマインドマップツールが有効か
ExcelやPowerPointでサイトマップを作ると、修正のたびに再配置が必要になる。マインドマップなら、ノードの追加・削除・移動が直感的にできる。
MindTreeは完全ローカル動作なので、クライアントの機密情報を含むサイト設計も安心して扱える。クラウドに情報が送信されることはない。
設計作業での活用法
複数タブでの比較
- タブ1: 現状のサイト構造
- タブ2: 改善案A
- タブ3: 改善案B
複数の案を並べて比較検討できる。
書き出しでの共有
MindTreeはPNG、PDF、SVG、Markdown、OPMLに対応。
| 用途 | 形式 |
|---|---|
| クライアントへの提案資料 | |
| 社内Slackでの共有 | PNG |
| 開発チームへの仕様書 | Markdown |
| 他ツールへのインポート | OPML |
5種類のレイアウトを切り替えられるので、階層構造を見せたいときはツリー型、全体俯瞰したいときは放射型など、目的に応じて表現を変えられる。
まとめ
サイト設計でユーザーが迷子になる原因は、ページ単位で考えていること、目的が複数あること、階層が深すぎることだ。
マインドマップで「目的→導線→ページ」の3層構造を可視化すれば、ユーザーが迷わないサイト構造が設計できる。
この記事のポイント
- 迷子の原因: ページ単位思考・目的分散・深い階層
- IA型設計: 目的を中心に、導線→ページ群→個別ページで整理
- Hub/Spoke: 中心ページ（Hub）から詳細ページ（Spoke）へ放射状に展開
- ファネル設計: TOFU→MOFU→BOFU→LPの流れで記事を配置
- テンプレ: 3種類（基本IA型/Hub・Spoke型/ファネル型）をコピペで使える
設計したマップは、サイト運用中も定期的に見直そう。ページが増えるたびに構造を更新し、迷子を生まないサイトを維持していこう。
関連記事
あわせて読みたい:
FAQ
Q1: サイト設計とワイヤーフレームの違いは何ですか？
A: サイト設計（IA/情報設計）は「何をどこに配置するか」の構造を決める段階。ワイヤーフレームは「1ページ内のレイアウト」を決める段階。順序としては、サイト設計→ワイヤーフレーム→デザインの流れになる。マインドマップはサイト設計段階で特に効果を発揮する。ページ間の関係性や導線を俯瞰して設計できるからだ。
Q2: 既存サイトのリニューアル時もこの方法は使えますか？
A: 使える。むしろリニューアル時こそ有効だ。まず現状のサイト構造をマインドマップで可視化し、問題点（階層が深い、導線が途切れている、孤立ページがある等）を洗い出す。その上で、目的→導線→ページの3層構造で理想形を設計する。現状と理想を並べて比較することで、何を変えるべきかが明確になる。
Q3: ページ数が多いサイトでも対応できますか？
A: 対応できる。ただし、全ページを1つのマップに入れると見づらくなる。Hub/Spoke設計を採用し、Hub単位でマップを分割する方法がおすすめだ。「全体構造マップ」でHub同士の関係を描き、「Hub別詳細マップ」で各Hubとそのスポークを管理する。MindTreeの複数タブ機能を使えば、マップを切り替えながら作業できる。
コメント