Web情報アーキテクチャ(IA)とツール

第3回 サイトマップと情報の構造化

この記事を読むのに必要な時間:およそ 2 分

インスピレーション

アウトライン表示とダイヤグラム表示を切り替えて使うツールとして,古くから編集作業で使われています。Webサイトの設計における作業としては,まず前述した現状のサイト分析から行うと思いますが,物理的な把握とは別に情報構造の把握という点で役に立ちます。

たとえば,この画面を整理する際には,次のように構造化します。

構造化のサンプル(技術評論社のページより)

構造化のサンプル(技術評論社のページより)

ヘッダーナビゲーション
 技術評論社ロゴ
 このサイトについて
 プライバシーポリシー
...
左ナビゲーション
 新着ニュース
  •  弊社...
  •  技術評論社からのお知らせ
 会社案内
  •  雑誌広告出稿のご案内
ボディ
 各種コンテンツ
  •  書籍新刊案内
  •  定期刊行物一覧
  •  最新生地
    •  第一回 ...

目視での確認をしていきつつ,情報を分解していく作業です。サイトの構造から画面上の要素 (エレメント) までを分解していくことは,そもそもの情報の構造を把握するのと同時に,グルーピングを進めていくことができます。⁠この情報はこのグループで格納されている」ということがわかるだけで,情報の塊 (チャンク) を把握することができます。

俯瞰できるようにして個別最適を進める

再整理する上で重要なことは,俯瞰できるように可視化することです。そうしないと客観視ができませんし,全体の整合性がとれません。

アウトライン編集画面でインデントが揃っていることは,階層の粒度を把握するという点でわかりやすい表現の1つだと思いますが,特定の項目(※インスピレーション上の用語としては「トピック⁠⁠)以下だけを簡単に非表示にすることができる機能は,全体と個別とを同時に編集する際に非常に便利です。Windowsのディレクトリツリーを思い浮かべてもらうとわかると思います。

Windowsのディレクトリツリーのイメージ

Windowsのディレクトリツリーのイメージ

さらに,特定の項目以下だけをアウトラインからダイヤグラムにして表示できることや,インポート・エクスポート機能があるため,個別に分担をしやすく共同作業を進める上で非常に役に立ちます。

ダイヤグラムでの表示

ダイヤグラムでの表示

著者プロフィール

坂本貴史(さかもとたかし)

2002年より,ネットイヤーグループ株式会社で,IA/UXDディレクターとして参加。

主に,企業におけるイタラクティブマーケティング支援 (コンサルティング)や,Webサイト構築におけるクリエイティブディレクションを担当。とくに,Web情報アーキテクチャを設計する専門職インフォメーションアーキテクトとして活躍中で,執筆・寄稿やセミナーの講師なども行っている。

URLhttp://bookslope.jp/blog/