IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計

「IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計」を読了した。けっこうななめ読み。
IA は Information Architecture で、情報アーキテクチャのこと。
じゃあ 情報アーキテクチャ ってなに?というと、こんな感じ。

情報アーキテクチャ(Information Architecture)は、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術である。 ウェブデザインの発展に伴い、従来のグラフィックデザイン(平面デザイン)に加え、編集・ビジュアルコミュニケーション・テクノロジーを融合したデザインが要求されるようになった。情報アーキテクチャはこれらの要素技術を組み合わせた、わかりやすさのためのデザインである。ウェブ技術の発達に伴いその重要性が認識されているが、情報アーキテクチャの考え方自体は、紙面デザインの頃から変わらない。

情報アーキテクチャ - Wikipedia

本書では情報アーキテクチャの設計の要素を、パターンとして100にまとめたもの。デザインパターンと同じ意味でのパターン。
目次の抜粋版はこんな感じ。

Part I INTRODUCTION
 1. What is IA ?
 2. How to build IA ?
Part II ANALYSIS
 1. ユーザー分析
 2. コンテンツ分析
 3. コンテキスト分析
Part III SYNTHESIS
 1. ユーザーエクスペリエンスデザイン
 2. サイトストラクチャ設計
 3. ナビゲーション設計
 4. ラベル設計
 5. 画面設計

前半の INTRODUCTION と ANALYSIS の部分は、読んでも読んでもさっぱりわからなかった。パターンは見開きで1つ紹介されていて、左に図が、右に説明文が書いてあった。図を見ても、説明文を読んでもさっぱりわからなかった。背景知識が圧倒的に足りなかったのだと思う。やっぱり、パターンと呼ばれるものを理解するには、ある程度の前提知識が必要になる。たとえばこんな文章がさっぱりわからなかった。

情報アーキテクチャ設計は、ビジュアルコミュニケーション設計とテクノロジー設計の前提となる部分もあるが、アートディレクション方針(トーン&マナー定義)、システム概要設計等は平行して検討を行う。
パターン16 統合フェーズ

というわけで前半はかなり流し読みをしていたのだけれど、後半に入ってからはサイト構造などの具体例が多くなってきたので、楽しく読み進めることができた。エンジニアであれば、INTRODUCTIONを読んでから、SYNTHESISを読んだほうがわかりやすいと思う。最後に ANALYSIS をぱらぱらと読んで、どうやって設計するために必要な情報を分析すればいいのかを考えるとよさそう。


後半のSYNTHESISでは、サイトストラクチャのパターンとして以下の構造が記載されていた。

  • 改装分類型構造
  • ファセット分類型構造
  • Web型(ハイパーリンク型)構造
  • ハブ&スポーク型構造
  • 一覧&詳細型構造
  • 直線型(フロー型)構造

これだけだとわからないけど、このあとに文章で説明があり、それぞれパターンとしても紹介されていた。それぞれの構造にあったサイトが紹介されていていイメージしやすかった。

同様にナビゲーションエリアと、ナビゲーションの種類の説明もわかりやすかった。
ナビゲーションエリアは以下の3つ。

  • グローバルエリア
  • コンテンツエリア
  • ローカルエリア

ナビゲーションの種類は以下の7つ。

  • 階層型ナビゲーション
  • 機能ナビゲーション
  • 関連ナビゲーション
  • ダイレクトナビゲーション
  • パンくずナビゲーション
  • ステップナビゲーション
  • ダイナミックナビゲーション

どのような情報を、どのように配置すると、どのような効果があるのか、といったことがわかりやすく書かれていた。これは知りたかったことのひとつなので、とても勉強になった。


HTML5マークアップをする上で、セマンティクスを意識する必要がある。見た目ではなく、その情報はどういったものなのかを理解して、その情報に適したタグを利用していかなくてはならない。例えば section article aside nav とか、どれがその情報に適したタグなのかを理解しておく必要がある。

ちなみにHTML5でのマークアップについては、羽田野さんと白石さんの資料がとてもわかりやすい。


こういったことから、情報アーキテクチャの概念や考え方は、HTML5マークアップする上で役に立ちそうだなと思った。実際にこういったマークアップをする機会はあまりないと思うけど、やっぱりHTML5の基本となるマークアップについてはちゃんと理解しておきたい。
IAシンキングは買った(IA100は図書館で借りた)ので、もうちょっとしたら読むつもり。


IA100 ―ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
長谷川 敦士
ビー・エヌ・エヌ新社
売り上げランキング: 142149