Webサイトを制作する際に考慮すべき情報アーキテクチャ（IA）という考え方をご存じでしょうか？

情報アーキテクチャ（IA）の考え方をWebサイト制作に取り入れることでユーザーにとってよりわかりやすいサイト設計が可能となり、UX／UIの向上に繋げることができます。

Web制作担当者以外の方もこの概念を知ることで自社のWebサイトやアプリケーションがユーザーにとってわかりやすくなっているかを判断することができ、自社サイトのリニューアルや新規構築の目標達成に役立ちます。

情報アーキテクチャ（IA）とは？

情報アーキテクチャ (Information Architecture: IA) とはWebサイトやアプリケーションにおいて、情報を整理し、ユーザーにわかりやすく伝えたり、ユーザーが情報を探しやすくするための技術や考え方のことです。

Webサイトにおける情報アーキテクチャ（IA）の役割

Webサイトは紙の媒体に比べて制限がなく、多くの情報量を掲載することができます。

たくさんの情報が得られる一方で情報が整理されていないと、どこにどんな情報があるのかが分からなくなり、使いづらいサイトになってしまいます。

情報量の多いWebサイトには不可欠の「ユーザーに分かりやすく情報を伝える」視点を表現することが情報アーキテクチャ（IA）の役割になります。

情報アーキテクチャ（IA）とUX/UI設計の関係性

UX設計における情報アーキテクチャはUXの５段階設計モデルの３番目、構造段階の一つの要素にあたります。

UXの5段階モデル

1.戦略段階

戦略段階はUXの５段階モデルの置いてベースとなる要素です。プロダクトの目的とユーザーニーズを明確することで以降のフェーズの指針を作ります。

「リーンキャンパス」「ビジネスモデルキャンパス」「KPIツリー」などのフレームワークを活用しプロダクトの目的を明確化するためのリサーチ・分析を行います。

ユーザーニーズを明確にするためにはユーザーインタビューやペルソナの作成を行います。

2.要件段階

要件段階ではカスタマージャーニーマップを作成してユーザーの行動や感情を時系列で整理します。

また、アイディアを創出するために「ストーリーボード」や「バリュープロポジションキャンパス」を用いることもあります。

「カスタマージャーニーマップ」や「ストーリボード」を活用しながら一連のユーザー体験を俯瞰し、サービスに必要な情報・機能を洗い出します。

3.構造段階

要件段階で定義した必要コンテンツや情報を分類・整理・配置して構造化する「情報設計」を行います。

具体的なアウトプットとしてはプロダクト全体の構造を可視化した「コンテンツマップ」「サイトマップ」を作成します。

また、インターフェースを通じてユーザー体験を向上させる「インタラクションデザイン」のためのUIクラス図およびUIモデリング図の作成も行います。

4.骨格段階

骨格段階ではユーザーが使用するインターフェースの設計を行います。

構造段階で定義したサイトマップ、コンテンツマップをもとに情報のレイアウトをワイヤーフレームに落とし込み、プロトタイピングを実施します。

5.表層段階

これまでの段階を踏まえて最終成果物としてのビジュアルデザインを行います。

ユーザーが直接認識する部分になるので感性的な領域も考慮しながらグラフィックやモーションの設計を行います。

情報アーキテクチャ（IA）はUX設計の一要素

情報アーキテクチャ（IA）は上記の５段階のうちの「構造」に含まれるデザインとコンセプトをつなぐものになります。

情報アーキテクチャ（IA）を通じてのアウトプットとしては下記のようなものがあります。

ペルソナ

ペルソナとは代表的なユーザー像のことで、ターゲットとなる人物像を定義します。

架空の人物であっても実際にいる人かのように名前、年齢、性別、居住地、家族構成、趣味味、ライフスタイルなど詳細な情報を設定します。

ユーザーのサイト内での行動を考えるときにこのペルソナであればどう感じるかということを起点とすることでチーム内で共通認識を持って議論を深めることができます。

コンテンツマップ

コンテンツマップはサイト内のコンテンツが一覧で可視化された図になります。

コンテンツマップを作成することでコンテンツに過不足がないか、重複している項目がないかなどを洗い出すことができるので、移行の余分な作業をしてしまうことを防ぐメリットがあります。

ワイヤーフレーム

情報アーキテクチャ（IA）における最終のアウトプットが「ワイヤーフレーム」になります。

Webページの完成イメージを「見える化」し、ユーザーに意図した動きをしてもらえるかを検証することができます。

情報アーキテクチャ（IA）の過程を経ずにワイヤーフレームを作成することも可能ですが情報アーキテクチャ（IA）の考え方を取り入れることにより高いユーザビリティを実現し、Webサイトにおける目的達成に近づくことができます。

情報アーキテクチャ（IA）の設計プロセス

具体的な情報アーキテクチャ（IA）の設計プロセスは以下の手順になります。

分析フェーズ

1.ユーザー分析

サイトのターゲットや想定ユーザーの行動や特性、心理状況をモデル化します。

「誰が」「どんな状況で」「どんな目的で」情報に接するかを知るためにグループインタビューなどの定性調査や、ユーザビリティテストやログ解析などの定量調査を行い、ペルソナやメンタルモデルを作成します。

2.コンテンツ分析

サイトに掲載する情報を整理し、情報の性質や関係性を明らかにするために、情報の分類やコンテンツのモデリングをし「コンテンツマップ」を作成します。

3.コンテキスト分析

設計やデザインを行うにあたっての状況の整理や、制約条件の確認を行います。

プロジェクトの目的を明確化するために数値目標やユーザーに与えたい価値を定義する要件定義書を作成します。

統合フェーズ

1.サイトコンセプト定義

コンテンツやユーザーの属性、制約事項、プロジェクトの目的などを定義します。

表現の形態としては「コンセプトダイアグラム」「ユーザーエクスペリエンスフロー」といった方法があります。

2.サイトストラクチャ設計

サイト内の導線定義、カテゴリの整理、コンテンツの定義、画面フローの定義など一般的なサイトストラクチャのパターンの中から最適なものを選択して組み合わせます。

3.ナビゲーション設計

コンテンツの導線の優先順位を明確化し、ページ間のリンクの設計をします。

ナビゲーション要素を優先順位に従って配置し、サイト全体で一貫したルールを適用させることでユーザビリティを高めます。

4.ラベル設計

メニューなどに用いられるカテゴリ名称やリンクやボタンの文言を定義します。

そのボタンをクリックした結果をクリックする前からユーザーが理解できているかどうかを判断基準にします。

5.画面設計

これまでの全ての観点を踏まえて、どの情報をどこに配置するのかを可視化したワイヤーフレームに落とし込んでいきます。

情報アーキテクチャ（IA）の技法を使うことによってこのワイヤーフレームのクオリティが格段にアップします。

UX/UI設計のベースになる情報アーキテクチャ（IA）

よりよい「ユーザー体験（＝UX）」を実現するためには「かっこいい」「おしゃれ」「感動的」といったユーザーの感情を動かす要素が必要です。

しかし、ビジュアル的な要素だけでそれらを達成することはできません。ユーザー体験の基礎となるのは「分かりやすいサイトであるか」「使いやすいサイト」であるかといった大前提があります。

よりよいUXを実現するための「分かりやすさ」「使いやすさ」を緻密に設計するための技法が情報アーキテクチャ（IA）なのです。