この記事のオーディオ版を聴く
UXプロセスの標準的な部分として、デザイナーは製品を構築するときに情報アーキテクチャを作成します。 ユーザーがアプリケーションまたは Web サイトを通じて取ることができるすべての道とパスを定義する情報アーキテクチャは、どのページがどこにつながるかを示すサイトマップ以上のものです。
建築家が設計図を使用して、物理構造から電気や配管などの複雑な内部構造まで、家のあらゆる部分を構築するのと同様に、情報アーキテクチャでは Web サイトまたはアプリケーションの階層、ナビゲーション、機能、インタラクションを説明します。 設計図が建築家が建物を建設する際に使用する最も貴重な文書であるように、情報アーキテクチャはデザイナーの武器として最も強力なツールになりえます。
情報アーキテクチャとは何か、そしてなぜ重要なのか
情報アーキテクチャ (IA) は、設計図のように、製品のインフラストラクチャ、機能、および階層を視覚的に表現したものです。 詳細なレベルは設計者次第なので、IA には、ナビゲーション、アプリケーションの機能と動作、コンテンツ、およびフローも含まれる場合があります。 IA のサイズや形状に決まった制限はありませんが、誰でも (理論的には) 読んで製品がどのように機能するかを理解できるように、製品の一般的な構造を包含する必要があります。 設計図と同様に、IA は設計者 (製品開発およびエンジニアリング チームと同様) に製品全体を俯瞰する視点を提供します。 アプリケーションやWebサイトがどのように機能するかをシンプルでわかりやすく表現した1つのドキュメントを持つことは、新しい機能を開発したり、既存の機能を更新したり、既存の製品を考慮して何が可能かを確認するために不可欠です。
IA があれば、新機能や実装の重要な決定を下すこと、製品変更のタイムラインを理解すること、複数のプロセスを通じてユーザーの行動を追跡することが大幅に容易になります。
How to Design Information Architecture
UX プロセスの一部として、IA デザインではフローチャートに非常に似たパターンを使用します。 図形を追加し、それらを 1 つのドキュメントに組織化された方法で線で接続します。 IA を構築する際の課題は、ユーザーの視点からアプリまたは Web サイトが実際にどのように動作するかを理解し、その情報を読みやすく、読みやすい形式に整理することです。
IA を実際に構築するには、視覚的階層 (つまり、機能、機能、および動作の階層) によって整理し、異なるタイプの機能、相互作用、フローを表示する凡例を作成することの 2 つの主要要件が必要です。 標準的なフローチャートでは、形状は特定の要件に従いますが (長方形はプロセス、ダイヤモンドは決定ポイントなど)、その命名法に従うことは必須ではありません。
言い換えれば、IA の構築で最も重要な要因は、アーキテクチャの個々のコンポーネントを (階層的に) 配置し、それらをどのようにラベル付けし表示させるか、です。
Understanding and Showing Visual Hierarchy
新しい情報アーキテクチャを作る際に最も難しい点は、ほとんど常にそれを階層的に構成することです。 IA は「上から下へ」構築されなければならないというのは、よくある誤解です。
ゼロから IA を構築する場合、Web サイトやアプリケーションが標準的な形式に従っていない限り、トップ レベル以降の何かを描き出すことは非常に困難です。 整備士に、車を部分的にではなく、トップダウンで作ってくれと頼むようなものです。 それぞれのパーツは、事前に調査し、設計に時間をかけ、開発しながら構築していかなければなりません。 IA も同様です。
視覚的な階層を表示することは、読者により良いコンテキストを提供するだけでなく、製品の主要な領域を一般化するため、IA にとって貴重な資産となります。 アプリの最も重要な機能が、ホームページからできる乗り物の注文 (Uber や Lyft のようなもの) である場合、そのページは最も多くのタッチポイントと製品の最も大きな価値を持つことになります。
サイトマップはページを数字で整理するため、階層を理解するのに便利です（1.0 Home、2.0 Payment、2.1 Add Pay Method、などなど）。 また、Duke University の図書館の Web サイトの下の画像の例では、トップ ナビゲーションが一番上にあるだけでなく、アプリケーション全体にわたって見えるように強調されています。 ホームページには、グローバル ナビゲーション リンクとコンテンツが表示され、各グローバル リンクは、相対的に高い位置にあるさまざまなページにつながっています。 それは、シンプルな凡例といくつかのキーフレーズによって、すべてのエンゲージメント ポイントを必要に応じて一意に表示することです。 凡例は、ページとコンテンツの種類を示し、図形の色のバリエーションを示します。 デューク大学のサイトは一見シンプルですが、IAは3階層までしかありませんから、これは重要です。 黄色の四角形はそれぞれアプリケーションを示すので、これらのボックス内のプロセスはこのドキュメントには含まれていません！
これらの部分がなくても、IA だけで Web サイトをナビゲートする方法が理解できるような構造になっています。 その必要はありません。
以下のIAはゲームのためのものです。 4 つの図形、無色、およびスマートに配置されたテキスト スニペットを使用して、すべての主要なインタラクションがプロトタイプなしで理解でき、さらに重要なことに、それに取り組む誰もが理解できるようになっています。
このモデルは完璧ではありませんが、アプリの階層を明確に整理し、ユーザーが任意の時点で見るもの、行うものを明確にします。
The Best Information Architecture Tools
IA を構築できるソフトウェア アプリケーションはたくさんありますが、体験を楽しくするためにシンプルかつ迅速にできるものはあまりありません。
上のビデオで使用されている Draw.io は、個人でもプロフェッショナルでも完全に無料で使用でき、Google Drive に自動的にプラグインされます。 また、有料のConfluenceやJIRAとの統合もあります。 Draw.ioはフローチャート、ユーザーフローや情報アーキテクチャの作成に優れており、Driveの機能により、複数の人が同じドキュメントで作業し、変更をライブで確認することができます。 また、無料のオフライン版もあります。
Lucidchart も素晴らしいツールで、Draw.io よりも若干優れた体験を提供し、ビルド済みのテンプレート、より多くの統合、モバイル アプリ（App Store で星 2.5 の評価）、エンタープライズ向けサポートなどの付加的な利点があります。しかし、Visio はオンラインのみ（古いオフライン版は Windows のみ）であるのに対し、Omnigraffle は Mac のみで、MacOS 版と iOS 版を別々に購入する必要があります。 OmniGraffle には、JavaScript および AppleScript の自動化を提供するという点で、主要な競合製品と異なる利点があります。 Balsamiq、MindMeister、MindManager、または XMind のような他のアプリケーションはすべて、同様のスタイルの動作を提供しますが、プロトタイピングやマインド マッピングなど、他の主要な目的のために構築されています。
すべてのプロセスは論理的でなければならない
UXプロセスのIAがユーザーとの対話のためであっても、方法のすべてのステップが意味をなしていなければならない。 登録画面が設定につながるべきではありませんし、カメラ機能がマップ ビューにジャンプするべきではありません……。 これは、作家にアウトラインなしで本を書けと言ったり、プログラマーにプロトタイプなしでアプリをコード化しろと言ったりするようなものです。
あなたは地図製作者です
地図製作者は、山脈から州の境界まで、地図に関するすべてを考慮に入れています。 地図製作者と同じように、デザイナーもIAデザインに何を入れるかを決定します。 個々のページ、特定のユーザーの行動、決定ポイントのコンテキスト……などです。
最終的には、地図製作者が、ユーザーのニーズに基づいて地図に載せるものを決定します。 同じことがデザイナーにも言えるので、エンドユーザー、つまり製品開発および設計チームのために IA を構築します。
Information Architecture Is Ever-Changing and Evolving
ポイントをもう一度掘り下げると、すべての IA は変化のために構築されています。 製品は進化し、デザインは変わり、ユーザーは適応し、そのサイクルは何度も何度も繰り返されます。 それをあまり深刻に考えず、常に改善の余地があることを知っておいてください。
私の情報アーキテクチャは完成しました。 情報アーキテクチャは、製品が成長し、縮小し、変化するのに合わせて変化します。 建物の設計図とは異なり、IA は、ユーザーのニーズから新機能や製品のオーバーホールに至るまで、あらゆるものに基づいて常に進化していきます。 構造の多くは変わらないかもしれませんが、ユーザーが混乱しないように、バージョン間の一貫性を提供します。 IA が流動的なドキュメントであり、毎週、場合によっては毎日変わる可能性があることを知っておくことは、コードに触れたり新しいプロトタイプを作成したりせずに、アプリまたは Web サイトの全体構造を維持する強力な方法となります。 製品開発チーム全体が IA をよく理解していればいるほど、誰もが何が可能で何が不可能か、そして、「簡単な仕事」と思われているものが実際にはどれほど深刻なものかをより早く知ることができるのです。 あらかじめ定義された出発点がないのです。 伝統的なUXデザインプロセスでは、IAは十分なユーザーフローを完了した後に構築されることになっていますが、ユーザーと競合の調査を十分に行った上で、最初に行うことも…最後に行うこともできるのです。 プロトタイピングのプロセスでは、論理的または想像力のない IA からは想像しにくい、特定の動作や行為がどのように起こるべきかという情報がよく出てきます。
常に進化する実践として、IA デザインはスキルと同様に芸術であり、大企業に情報アーキテクトの役職がある理由の一部です。 これらのデザイナーは巨大なシステムの門番であり、時間の経過に伴う製品の成長を理解し、製品、デザイン、およびエンジニアリング チームが何年にもわたって正しい決定を下すことを支援します。 このような規模の組織はすべてのデザイナーのためのものではありませんが、すべてのデザイナーはシンプルで理解しやすい情報アーキテクチャを構築することができます。
Information Architecture for Everybody
Information Architecture Basics
The Difference Between Information Architecture and UX Design
情報アーキテクチャとUXデザインの違い