• Skip to primary navigation
  • Skip to main content

Nagashima Laboratory

  • Home
  • Lecture
  • Note
  • Index
  • About

サイトマップ

サイトマップとは

ページ構成を整理した図。ページ構成図。文字通り「サイトの地図」に相当するものを指します。情報の設計図です。

→Google画像検索:サイトマップ

その他のサイトマップ

SEO対策用で、検索エンジンにページ構造を伝えるファイルのことも「サイトマップ」と呼ばれます。sitemap.xml として作成します。

Webサイト内に作成する「ページの一覧表」のことを指すこともあります。

サイトマップを作る目的

  • ページ同士の関係を整理して「情報の流れ」を見える化する。
  • 必要なページ・不要なページを判断する。
  • ワイヤーフレーム(レイアウト設計)やナビゲーション設計の基礎になる。

制作手順

①サイトの目的とターゲットを確認する

  • 誰が見るのか
  • 何を伝えたいのか

②掲載する情報をリストアップする

  • 掲載予定の情報を全て網羅する

③情報をグループ化する

  • 似た内容をまとめ、「親ページ」「子ページ」の関係を整理する

④階層構造にまとめる

  • ツリー構造(階層図)で描く
  • FigJamなどを活用
  • 項目が多いときはExcelなどのスプレッドシート型にまとめる方法も

⑤ナビゲーションを意識して調整

  • メインメニューに出すページ、フッターに置くページなどを検討する
  • WordPressであれば固定ページで扱うのか投稿で扱うのかを検討する

サイトマップ制作でよくある問題

  • トップページの下に全ページが並ぶ(階層構造がない)
    • 情報の親子関係を意識する
  • 重要な情報が抜けている
    • 閲覧者の行動を考える
  • 分類が主観的(自分だけがわかる分類法になっている)
    • 何の基準で分類したのかを明確にする
    • 内容別、ターゲットユーザー別、利用場面別・・・など

ツリーテスト

サイトマップの段階で情報設計を検証する手法の一つです。

①目的設定・シナリオ設定

どんな行動を想定しているユーザーかを決めて「タスク(探すお題)」を決めます。

②テスト実施

サイトマップ上でどの項目に移動すれば目的の情報が得られるかを探す

③振り返り

どのタスクで迷ったかを確認

参考

  • https://blog.adobe.com/jp/publish/2021/02/08/cc-web-tree-testing-improve-website-usabilit
  • https://www.nngroup.com/articles/tree-testing/

2025-10-21 (Last Modified: 2025-10-21) Category: 資料 Tags:ux, webdesign

Copyright © 2023–2025 · Nagashima Sayuri Laboratory