情報アーキテクチャの包括的なガイド

この記事の音声バージョンを聞く

UXプロセスの標準的な部分として、設計者は製品を構築するときに情報アーキテクチャを作成します。 ユーザーがアプリやウェブサイトを経由できるすべての道と道を定義する情報アーキテクチャは、どのページがどこにつながるかを示す単なるサイトマップではありません。

設計図を使用して家のあらゆる部分を構築する建築家と同様に、物理的な構造から電気や配管などのより複雑な内部構造まで、情報アーキテクチャはWebサイトまたはアプリケーションの階層、ナビゲーション、機能、および相互作用を記述します。 また、設計図が建築家にとって建物の建設に使用する最も価値のあるドキュメントであるように、情報アーキテクチャは設計者の武器庫で最も強力なツールになる可能性があります。

ただし、機能のリストをまとめてそれらがどのように機能するかをマッピングするほど簡単ではありません。プロセスを調べてみましょう。

情報アーキテクチャとは何ですか、なぜそれが重要なのですか？

情報アーキテクチャ（IA）は、青写真のように、製品のインフラストラクチャ、機能、および階層を視覚的に表現したものです。 詳細のレベルは設計者次第であるため、IAには、ナビゲーション、アプリケーションの機能と動作、コンテンツ、およびフローも含まれる場合があります。 IAのサイズや形状に制限はありません。 それにもかかわらず、それは製品の一般化された構造を包含し、誰でも（理論的には）それを読んで製品がどのように機能するかを理解できるようにする必要があります。

両方のドキュメントの目的はほぼ同じであるため、ブループリントリファレンスを頻繁に使用します。 設計図のように、IAは設計者（および製品開発チームとエンジニアリングチーム）に製品全体の鳥瞰図を提供します。 新しい機能の開発、既存の機能の更新、および既存の製品を考慮して何が可能かを確認するには、アプリケーションまたはWebサイトがどのように機能するかをシンプルかつ理解しやすい形で表す単一のドキュメントを用意することが不可欠です。

IAが利用可能になると、新機能と実装の重要な決定を下し、製品変更のタイムラインを理解し、複数のプロセスを通じてユーザーの行動を追跡することが非常に簡単になります。

基本的なビデオに飛び込んで、IAがどのように構築されているかを見てみましょう。

情報アーキテクチャを設計する方法

UXプロセスの一部として、IAデザインはフローチャートと非常によく似たパターンに従います。図形を追加し、それらを整理された方法で1つのドキュメントに線で接続します。 IAを構築する際の課題は、ユーザーの観点からアプリまたはWebサイトが実際にどのように機能するか、およびその情報を読みやすく読みやすい形式に編成する方法を理解することです。

IAを実際に構築するには、2つの主要な要件があります。視覚的な階層（つまり、機能、機能、および動作の階層）を介してIAを編成することと、さまざまなタイプの機能、相互作用、およびフローを表示するための凡例を作成することです。 標準のフローチャートでは、形状は特定の要件に従います（長方形はプロセス、ひし形は決定ポイントなど）。 ただし、その命名法に従うことは必須ではありません。

つまり、IAを構築するための最も重要な要素は、アーキテクチャの個々のコンポーネントが（階層的に）配置される場所と、それらがどのようにラベル付けおよび表示されるかです。

視覚的階層の理解と表示

新しい情報アーキテクチャを作成する上で最も難しいのは、ほとんどの場合、階層的に構築することです。 IAは「トップダウン」で構築する必要があるというのはよくある誤解です。 上記のビデオのように、既存の製品でない限り、これを行うのはほとんどの場合より困難です。

IAを最初から構築する場合、Webサイトまたはアプリケーションが標準形式に準拠していない限り、トップレベルの後に何かを引き出すことは非常に困難です。 これは、部品ではなく上から下に車を作るように整備士に依頼するようなものです。 それぞれの作品は、独自の研究、設計、開発の時間を使って事前に構築する必要があります。 同じことがIAにも当てはまります。

視覚的な階層を表示することは、読者にとってより良いコンテキストを提供するだけでなく、製品の主要な領域を一般化するため、IAにとって貴重な資産です。 アプリの最も重要な機能が、ホームページから実行できる配車（UberまたはLyft）の注文である場合、そのページには、製品にとって最も多くのタッチポイントと最も価値のあるものがあります。 同じことが視覚的階層にも当てはまります。

サイトマップは、ページを数値で整理するため（1.0 Home、2.0 Payment、2.1 Add Pay Methodなど）、階層を理解するのに役立ちます。 または、デューク大学の図書館のWebサイトの以下の画像の例を検討してください。ここでは、上部のナビゲーションが上部だけでなく、アプリケーション全体に表示されるように強調表示されています。

形状、色、およびその他の視覚要素の階層

階層とは別に、上記のアーキテクチャは別のことをうまく行います。単純な凡例といくつかのキーフレーズを通じて、必要に応じてすべてのエンゲージメントポイントを一意に表示します。 凡例はページとコンテンツタイプを示し、図形の色の違いを示します。 デュークのサイトはかなり単純に見えますが、IAは3レベルしか深くないため、これは重要です。 黄色の長方形はそれぞれアプリケーションを示しているため、これらの各ボックス内のプロセスはこのドキュメントには含まれていません。

これらのパーツがなくても、IAだけでWebサイトをナビゲートする方法を理解できる構造になっています。 Webサイト内のアプリケーションに到達すると、それは停止します。必ずしもそうする必要はありません。

以下のIAはゲーム用です。 4つの形状、色なし、スマートに配置されたテキストスニペットを使用して、すべての主要なインタラクションはプロトタイプなしで理解でき、さらに重要なことに、それに取り組んでいる人なら誰でも理解できます。

このモデルは完全ではありませんが、アプリの階層を明確に整理し、ユーザーが任意の時点で表示または実行する内容を示します。

最高の情報アーキテクチャツール

IAの構築を可能にするソフトウェアアプリケーションはたくさんありますが、エクスペリエンスを楽しくするのに十分なほどシンプルで迅速なものはほとんどありません。 または、少なくとも、管理が簡単です。

上のビデオで使用されているDraw.ioは、個人的および専門的な使用のために完全に無料であり、自動的にGoogleドライブに接続されます。 また、有料のConfluenceおよびJIRAとの統合もあります。 Draw.ioは、フローチャート、ユーザーフロー、および情報アーキテクチャの作成に最適です。ドライブ機能を使用すると、複数のユーザーが同じドキュメントで作業し、変更をライブで確認できます。 無料のオフラインバージョンもあります。

Lucidchartは、Draw.ioよりもわずかに優れたエクスペリエンスを提供するもう1つの優れたツールであり、事前に作成されたテンプレート、より多くの統合、モバイルアプリ（App Storeで2.5つ星と評価）、エンタープライズのサポートなどの追加の利点があります。

OmnigraffleとVisioは長年の業界の主力であり、IA設計の構築と維持に優れていますが、Visioはオンラインのみ（古いオフラインバージョンはWindowsのみ）ですが、OmnigraffleはMacのみであり、MacOSとiOSを別々に購入する必要がありますバージョン。 OmniGraffleは、JavaScriptとAppleScriptの自動化を提供するという点で、主要な競合他社に比べて1つの利点があります。これは、ほとんどの設計者にとって不要かもしれませんが、通常、フルタイムの情報アーキテクトはそれを高く評価しています。

上記のすべてのツールは、情報アーキテクチャとほぼ同じ原則に従うフローチャートを中心に、スピードと使いやすさのために作られています。 Balsamiq、MindMeister、MindManager、XMindなどの他のアプリケーションはすべて同様の動作を提供しますが、プロトタイピングやマインドマッピングなどの他の主要な目的のために構築されています。

情報アーキテクチャのベストプラクティス

情報アーキテクチャを構成するものについて定義されたルールはほとんどありませんが、プロセスを実行するときは、次のことを考慮してください。

階層に焦点を当てるのではなく、構造に焦点を当てる

階層は調整可能です。 ホームページは常にホームページになりますが、それがどこにつながるか、ユーザーがそれらの場所に到達する方法、およびその間のすべてが後で決定されます。

すべてのプロセスは論理的である必要があります

UXプロセスのIAはユーザーとの対話用ですが、その方法のすべてのステップが理にかなっている必要があります。 登録画面が設定につながるべきではなく、カメラ機能がマップビューにジャンプするべきではありません…リストは続きます。

UXプロセスを忘れないでください

よくある間違いは、リソース、調査、その他の資産や作業を行わずに、IAを作成することです。 これは、著者にアウトラインなしで本を書くように指示したり、プログラマーにプロトタイプなしでアプリをコーディングするように指示したりするようなものです。

あなたはカートグラファーです

地図製作者は、山脈から州境まで、地図に関するすべてを考慮に入れます。 マップメーカーと同じように、デザイナーはIAデザインに何を入れるかを決定します。 個々のページ、特定のユーザーの行動、決定ポイントのコンテキストなど。

最終的に、カートグラファーはユーザーのニーズに基づいてマップに何を表示するかを決定します。 同じことが設計者にも当てはまります。したがって、エンドユーザー、つまり製品開発チームと設計チームのIAを構築します。

情報アーキテクチャは常に変化し、進化しています

ポイントをもう一度ドリルするために、すべてのIAは変更のために構築されています。 製品は進化し、デザインは変化し、ユーザーは適応し、サイクルは何度も繰り返されます。 それをあまり真剣に受け止めないでください、そして常に改善の余地があることを知ってください。 完璧を目指してはいけません。 シンプルで適応性のあるIAを構築します。

私の情報アーキテクチャは完成しました…今何ですか？

設計作業が実際に行われることは決してないというのが一般的な概念であり、それは確かに情報アーキテクチャの場合です。 それらは、当社の製品と同じように成長、縮小、変化します。 建物の青写真とは異なり、IAは常に、ユーザーのニーズから新機能や製品のオーバーホールまで、あらゆるものに基づいて進化します。 構造の多くは同じままで、バージョン間の一貫性を提供するため、ユーザーが混乱することはありません。

そして、それは良いことです。 IAが流動的なドキュメントであり、毎週、場合によっては毎日変更される可能性があることを知ることは、コードに触れたり新しいプロトタイプを作成したりすることなく、アプリやWebサイトの全体的な構造を維持するための強力な方法です。 製品開発チーム全体がIAをよく知っているほど、誰もが何が可能で何が不可能であるか、そして想定される「簡単な作業」が実際にどれほど深刻であるかをより早く知ることができます。

これは、情報アーキテクチャの真の美しさをもたらします。事前定義された開始点はありません。 従来のUX設計プロセスでは、十分なユーザーフローを完了した後にIAを構築する必要があります。 たくさんのユーザーと競争力のある研究で武装しているので、それは最初に行われることも、最後に行われることもあります。 プロトタイピングプロセスでは、論理的または想像を絶するIAからは想像しがたい、特定の動作またはアクションがどのように発生するかについての情報が得られることがよくあります。

進化し続けるプラクティスとして、IAデザインはスキルであると同時に芸術でもあります。そのため、大企業には情報アーキテクトの立場があります。 これらの設計者は、大規模なシステムの門番であり、時間の経過に伴う製品の成長を理解することで、製品、設計、エンジニアリングの各チームが何年にもわたって正しい決定を下せるように支援します。 この規模の組織はすべての設計者に適しているわけではありませんが、すべての設計者はシンプルで理解しやすい情報アーキテクチャを構築できます。

•••

情報アーキテクチャについての推奨読書

Webおよびそれ以降のIA

混乱を理解する方法：すべての人のための情報アーキテクチャ

情報アーキテクチャの基本

情報アーキテクチャとUXデザインの違い

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法