IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 」を元に、要約メモしておきたいと思います。

56_サイトストラクチャ定義

Webサイトの骨格

  • サイト内でのユーザの動線定義
    サイト内でユーザをどのように誘導させるかを示す。ユーザが自由に移動するための経路設計。
  • サイト内でのカテゴリ整理
    サイト内での情報のまとめ方(階層型、ファセット型、ハブ型、ハイパーリンク型など)
  • カテゴリトップ、リストページ、詳細ページ等のページタイプ定義
    ページデザインを行うにあたっての、各ページの役割を示す
  • コンテンツ量の定義
    何ページ程度で情報を展開するかを視覚的に把握する
  • システム仕様定義
    システム設計を行うための画面遷移図
  • データベース、CMS導入の計画
    データベースを効率的に導入するための構成

57_サイトストラクチャのパターン

サイトストラクチャの一般的な形態

  • 階層型分類構造
    大カテゴリー、小カテゴリー、詳細情報といった階層構造に情報を分ける分類方法
  • ファセット分類型構造
    ページや情報にタグを付けて、それを元に分類を行う方法
  • Web型(ハイパーリンク型)構造
    情報同士が相互に参照しあっている形態。
  • ハブ&スポーク型構造
    基本となるページを元に機能を呼び出し、また基本ページに戻る形式。
  • 一覧&詳細型構造
    ECサイトのような、情報検索と個別の詳細情報を持つ形式
  • 直線型(フロー型)構造
    ユーザ登録や決済など一連の流れを示す画面遷移でみられる形式

58_階層型分類構造

最もよく見られるWebサイトの形態

59_ファセット分類型構造

情報の属性を利用して分類した形態

60_web型(ハイパーリンク型)構造

情報が等価につながっている形態

61_ハブ&スポーク型構造

特定のページをハブとして、機能やコンテンツへ遷移させる形態

62_一覧&詳細型構造

検索結果の一覧ページと、個別の情報ページで構成される形態

63_直線(フロー)型構造

一連の流れをたどる形態

64_企業サイトの構造

企業サイトおよび製品情報サイトの特徴

  • 企業サイト
    役割ごとに階層型に分けられ、第二階層以降はそれぞれのカテゴリの情報が並列に並べられる。
  • 製品情報サイト
    その製品のプロモーション的な位置づけやブランド戦略に応じて、企業サイト内に統合されることもあれば、独立したサイトとなることもある。

65_サービスサイトの構造

サービスサイトの特徴

  • ニュースサイト
    データベースを用いたファセット分類型コンテンツサイトとなる。
  • ECサイトや情報サービスサイト
    ファセット分類を用いた、一覧&詳細型の形態をとる。
  • Webアプリケーションサイト
    メイン画面のトップページからそれぞれの機能が呼び出される、ハブ&スポーク型の構造となる。

66_ハイレベル(抽象)サイトストラクチャ

Webサイトの全体方針

  • マイクロサイト化の検討
    目的別にいくつかのサイトに分けた方が、効果やメンテナンス性から有効となる。
  • メインカテゴリの検討
    マイクロサイト化の検討後、、それぞれのサイトの大分類項目を決める。

67_詳細サイトストラクチャ

ページ単位のサイトストラクチャ

  • 1ページに切り出すページ内容
  • 何と何を並列にするか
  • ページの順序
  • 必要なナビゲーション
  • 各カテゴリのコンテンツ量のバランス

68_サイトストラクチャとナビゲーション

サイトストラクチャ定義に合わせてナビゲーションも検討する

  • 階層型ナビゲーション
    下ったり同一階層を移動したりする
  • 関連ナビゲーション
    カテゴリをまたがった遷移や、主動線ではない副次的な動線
  • ダイレクトナビゲーション
    トップページなどに、ユーザの目的に合わせたショートカット
  • ダイナミックナビゲーション
  • 機能ナビゲーション
    どの項目を機能ナビゲーションとするか

69_Site-it!の活用

サイトストラクチャを効果的に検討するためのツール

70_ビジュアルボキャブラリー

サイトストラクチャ記述のためのツールセット

71_サイトストラクチャのドキュメンテーション

利用者に合わせたサイトストラクチャの記述

こちらの関連記事もあわせてどうぞ!