こんにちは！アシスタントデザイナーのくぼです！
本記事では、UIデザインの基本となる情報設計について丁寧に解説している『IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計』をご紹介します！
この本について
この本は、IA（情報アーキテクチャ）について知るべきポイントが100項目にまとめられた本です。具体的には、ユーザー調査、コンテンツ分析、コンセプト定義、そして実際の設計までを網羅した内容になっており、IAについて知るべきポイントが100項目にまとめられています。
ここでまとめられている型とは必ず守らなければならないルールではなく、基本的でよく使われるパターンとして紹介しています。
情報アーキテクチャは、Webに関わる人であれば身につけておきたいスキルです。さまざまな要件に合わせた情報設計をする力を身につけるために、まずはこの本で紹介されている基本を学びましょう！
手元に置いて、定期的に読み返す本としてもおすすめです。
目次紹介
PART1 INTRODUCTION
- What is IA?
- How to build IA?
PART2 ANALYSIS
- ユーザー分析
- コンテンツ理解
- コンテキスト分析
PART3 SYNTHESIS
- ユーザーエクスペリエンスデザイン
- サイトストラクチャ設計
- ナビゲーション設計
- ラベル設計
- 画面設計
内容について
情報アーキテクチャとは「複雑な情報をわかりやすく伝えるための技術」
情報アーキテクチャとは人が何か目的を達成するために情報を利用しようとしたとき、そのままの形では有効に活用できないときに、複雑な情報を理解しやすく、利用しやすくする考え方です。
そのままでは意味をなさない「データ」が統合され「情報」になり、この情報がさらに組織化され、文脈に沿った形になることで「知識」となり「知恵」となります。
この「統合」「組織化」「文脈化」を行うのが、情報アーキテクトです。情報アーキテクチャ設計は「手段」ではなく、いかにユーザーが情報を活用できるようにするかという「思いやり」に他ならないと本書では書かれています。
情報アーキテクチャには3つの役割がある
情報アーキテクチャには以下の3つの役割があります。
- 利用者が情報を探し、活用できるようにする
- 情報提供者が自分の意図通りに情報を提示できる
- サイト内での情報の変化、増減によるクオリティ変化を防ぐ
一つ目が一番大きな目的です。目的達成のためには「誰が利用者か」「どういった情報が必要なのか」を明示する必要があります。
二つ目は、逆を言うと「情報提供者の提供したい情報を適切に届ける」ことを意味します。目的や意図を反映させたWebサイトを構築することが情報アーキテクチャの大きな目的の一つなのです。
三つ目は、変化することがわかっている要素、追加される要素、属性が変化する要素(今後の予定が過去の予定に変わるなど)についてあらかじめその変化を見込んだ形に設計することです。
Webサイトは多様なユーザーに対して変化に富んだ情報を提供するメディアであるという性質を持っているため、積極的に活用するためには情報アーキテクチャ設計は欠かせないものなのです。
情報アーキテクチャ設計のプロセス
本書では、Paet Ⅱ「分析」で観察とフレームワーク、Part Ⅲ「統合」で方針とソリューションについて扱っています。
Part Ⅲ「統合」で抽象から具象へつなぐ役割を果たすため、しっかりした分析をしていなければ具体的なデザインを行うことができません。その前提となる要素の把握がPaet Ⅱ「分析」で扱われています。
ここで重要なのは、このプロセスは繰り返し行うことです。そのため一番最初の検討にあまり時間をかけすぎず、なるべく早く仮説を検証しながら再びプロセスを実施することが求められます。
分析フェーズでは
情報の洗い出しや調査などによって得られた知見を設計に用いることができるようにモデル化を行うのが分析フェーズです。(生のデータは量が膨大なため必要な観点で単純化し意思決定に用いる形にする)
統合フェーズに繋げるために必要となる要素は以下です。
- ユーザー(利用者)
- コンテンツ(情報)
- コンテキスト(文脈：制約条件やビジネス目標など)
ユーザー分析
適切な情報アーキテクチャには正しいユーザー理解が必要です。正しいユーザー理解とは「誰が」「いつどんな状況で」情報に接するのか正しく知ることが重要なのです。
ユーザー分析には多くのフレームワークが存在します。
- ユーザー調査
- コンテクスチュアル・デザイン
- オンラインリサーチ
- ユーザビリティテスト
- ユーザーモデリング
- ペルソナ法
- メンタルモデル分析
- シチュエーションニーズ分析
- 情報探索行動モデル
コンテンツ分析
サイトで扱う情報を整理し、正しく理解することが重要です。
具体的には以下です。
- サイト内で扱われるコンテンツの性質を正しく知る
- 情報を分解し、コンテンツ間の関係性や情報の持つグループを明らかにする
コンテンツ分析のフレームワークとしては以下があります。
- 5つの帽子掛け
- コンテンツの追加と更新
- 既存コンテンツの再利用
- カードソーディング
- コンテンツモデリング
- コンテンツインベントリ
コンテキスト分析
コンテキスト分析では、設計・デザインを行うにあたっての制約・状況を明確化します。
コンテキストを考える際は大きく以下の2つを念頭に置きタスクを考えます。
- プロジェクト目的の明確化(ビジネス要件定義)
- 正しい現状の認識
ここでいうプロジェクト目的とは以下です。
- プロジェクトの定義
- プロジェクトで実現したいこと
- ビジネスゴール
- プロジェクトによってビジネス的に達成したいこと
- 具体的な数値目標
- ユーザーへ与えたい価値
- プロジェクトでユーザーが得られる価値
- また、複数のユーザーが想定される場合、その優先順位
コンテキスト分析のフレームワークとしては以下があります。
- ビジネス要件定義
- ユーザーへの提供価値定義
- ロードマップ
- 現状分析
- ヒューステリック評価
- ログ分析
- ベンチマーキング
- 他サイトのサイトストラクチャ分析
- クリエイティブ・ブリーフ
- 実施施策の優先順位付け
統合フェーズ
統合フェーズでは、分析フェーズでモデル化された前提条件を統合して解決案の検討を行います。一般的なWebサイト構築では大きく「設計・デザイン」と「開発・制作」の2つのフェーズに分かれています。
設計・デザインフェーズでは、まず全体のコンセプトとなるユーザーエクスペリエンス方針(ユーザーに与えたい体験)を定義し、その内容に沿って情報アーキテクチャ、ビジュアルコミュニケーション、テクノロジー設計を行います。
開発・制作フェーズでは、各ページデザイン、システム開発を行います。全体を統合するコンセプト(方針)に基づき以下を構成要素を検討します。
- サイトストラクチャ
- ナビゲーション
- ラベル
- 画面設計
サイトコンセプト
サイトコンセプトは、コンテンツ・ターゲットとするユーザーの属性、制約事項を前提に定義されるプロジェクトのビジョン(方針)です。
この方針は様々な表現形態が取られており、形態に関わらずコンセプトは以下を示している必要があります。
- ビジネスゴール
- ユーザーへ与えたい体験
- サイトで実現する機能
- ブランド価値の表現
サイトストラクチャ
サイトストラクチャは、Webサイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。
情報アーキテクチャ内でのサイトストラクチャの役割は様々で、主には以下があります。
- サイト内でのユーザーの動線定義
- サイト内でのカテゴリの整理
- ページタイプ定義
- コンテンツ量
- システム仕様定義
- データベース・CMS導入の計画
ナビゲーション定義
ナビゲーションはサイト内でのユーザーの道筋です。ナビゲーション定義において大事なことは「一貫性」と「明確化」の2点です。
本書では、Webサイト内での基本的なナビゲーションの要素を7種類に類型化して解説しています。
- 階層型ナビゲーション
- 機能ナビゲーション
- 関連ナビゲーション
- ダイレクトナビゲーション
- パンくずナビゲーション
- ステップナビゲーション
- ダイナミックナビゲーション
ラベル定義
ラベル定義は、サイト内の見出し文言を定義することです。定義には以下があります。
- メニューなどに用いられるカテゴリ名称
- リンクやボタンなどの名称
ラベルは「その文言を見て内容が想起できるか」が判断基準となるため、ラベル名明示には、利用するユーザーの状況とリテラシーや前提知識を重視する必要があるのです。
画面設計(ページデザイン)
Webサイトのページは最終的にユーザーが触れる部分であり、この出来によってサイトのクオリティが判断されます。
情報アーキテクチャ要素を各ページに反映させるには以下の点に留意する必要があります。
- ユーザーエクスペリエンスから考えたページデザイン
- ページタイプから考えたページデザイン
- 各ページでの文章構造
- ナビゲーションエリア定義
- ドキュメンテーション
- ユーザーインターフェース
まとめ
情報アーキテクチャは、ユーザ分析に基づいてサイトストラクチャ、ナビゲーション設計、ラベル設計、画面設計をする必要があります。
その構造とプロセスについて知ることができたので、次は実践して理解を深めたいと思います！
最後までお読みいただきありがとうございました！
5
