情報設計とは？情報表示と動線
情報設計（Information Architecture / IA）とは、デザインが適切にユーザーに情報を伝えられるような情報表示と動線の設計のことです。ジャンルを問わず、デザインには常に目的が与えられており、単にわかりやすいだけではなく、その目的を果たす上で有効な設計を行 うことが情報設計の重要なポイントとなります。
UIデザインと情報設計（IA）の違い
IAと同じく情報表示や動線の設計を通して、ユーザーが目的を達成しやすいデザインを作るという意味合いで使われる言葉にUIデザインがあります。UIデザインとは、ユーザーがサービスをスムーズに使い、その価値を最大限に享受できるようにプロダクトの設計をすることを意味します。意味としては同じに見えますが、UIデザインが設計やインタラクションから、最終的な表象までの全体を意味するのに対し、IAはその元となる情報の構造を指す言葉です。
書籍「The Elements of User Experience ~5段階モデルで考えるUXデザイン」の著者Jesse James Garrett氏の定義したUXデザインの5段階モデルに基づいて考えると、情報設計はUIデザインの土台という役割を持つこともわかります。
効果的な情報設計のための5つのステップ
では、ユーザーが目的を達成できるような情報設計を行うためにはどのような手順を踏むと良いのでしょうか？ここでは、実際のIAデザインを行う際の流れに沿って、効果的な情報設計の方法を紹介します。プロジェクトとしては、Webサイトの設計などに当てはめて考えてみるとわかりやすいかもしれません。しかし、基本的な考え方は大きなプロジェクトの情報設計であっても、小さなバナーデザインの情報設計であっても同じです。ポイントは、「ユーザーにさせたいこと」と「ユーザーの行動心理」を理解してそれぞれの文脈にあった情報を適切な順番で伝えることです。
1. デザインの目的の明確化
情報設計を行う際には、まずそのデザインが達成するべき目標を明確にします。一見明確な目標があるように見える場合でも、再考することで見落としがちなポイントに気づくことがあります。特に、目的が「ユーザーの行動」に紐づいたものになっていない場合、そのデザインは「ユーザーに何をさせることが目的のものなのか」もう一度考えて見ましょう。
例えば、会社のコーポレートサイトのデザインをしている時のゴールが、「会社の情報を伝える」のように、その後のユーザーの行動まで想定できていない場合は注意が必要です。会社の情報を伝えた上で、ユーザーに何をさせたいのかによって最適な情報設計の方向性が変わるからです。最終的なゴールが「潜在顧客からのお問い合わせ」である場合と、「募集中の求人への応募」である場合では想定するターゲットユーザーも異なってきます。
2. 情報構造の把握
次に、デザイン上で提供する情報の構造を把握しましょう。例えば、レシピ情報を提供するWebサイトの情報設計をする際、
レシピの一覧
レシピの詳細
所要時間
必要な機材
材料
調理手順
関連レシピ
など、たくさんの情報を取り扱うことになりますね。これらの情報を「情報間の関係性」に注意しながら細分化した上で、まとめましょう。例えば、「レシピの所要時間」はそれぞれのレシピに紐づく情報です。そして、レシピ一覧はそのようなレシピの集合体ですね。
この情報構造の把握については、シンプルなプロジェクトであれば一つずつ書き出していくことでもうまくまとめることができると思います。しかし、例えばECサイト の販売者向け管理画面など、より複雑な情報を取り扱うような場合には、単にリストアップしていくだけだと追いつかなくなることが多いです。
このような複雑な情報構造も含めて、情報構造を正しく把握してデザインするための手法としてはデザインにデータモデリングの考え方を取り入れた、オブジェクト指向UX（OOUX）やオブジェクト指向UI（OOUI）が大変有効です。
3. ユーザーの行動心理に合わせた情報の優先度付け
デザインの目的を設定し、提供する情報の整理もついたことで、
ユーザーにさせたいこと
ユーザーに提供できる情報
が明確になりました。この２つを使ってユーザーに的確に情報を伝えるためにもう一つ重要なポイントがあります。それは、「ユーザーの行動心理」を理解することです。ユーザーが具体的にどのような状況で、どのようなことを考えながらそのデザインと向き合うのかを理解すること で、情報設計が、「ユーザーに伝えたいことを伝えるデザイン」から「ユーザーが必要とする情報を得られるデザイン」へとレベルアップします。
ユーザーの行動心理を理解しようとはいっても、そう簡単にわかるものではないですよね。このユーザーリサーチに関しては、UXデザインの分野で、ユーザーインタビューなどの様々な手法が生み出されています。これらの手法を使って、明確なペルソナとユーザージャーニーを定義できると情報設計のための情報の優先度付けをユーザーの行動心理に沿って行えるようになります。
とはいえ、今すぐインタビューをできるような状況ではない場合などは、まずユーザーがこのデザインと出会う際の「5W1H」を明確にするだけでもとても効果的です。ここで定義したユーザーの行動心理や状況に合わせて、デザイン上で提供できる情報のユーザーにとっての重要度を判断しましょう。
5W1H
When = いつ
Where = どこで
Who = だれが
What = 何を
Why = なぜ
How = どのように
4. ユーザー動線の設計
Webサイトやモバイルアプリなど一画面で全ての情報を表示しないようなデザインを行う場合、実際の情報設計に取り掛かるはじめの一歩として、サービス全体の構成を考えます。いわゆる画面一覧や画面遷移図といったものを作る際のイメージに近いです。
ユーザーの行動心理に合わせて、ユーザーが「デザインの目的」となっている行 動を起こすまでの道のりを設計します。ここで設計する動線は、マーケティングの世界では「コンバージョンファネル」と呼ばれるものとなります。ユーザーがそのデザインに出会った時点から目的達成までの、それぞれのステップで「途中でやめてしまう」確率を下げることがここでの最重要事項となります。
5. 画面内の情報の設計
サービス全体の動線を設計すると、それぞれの画面で提供する情報はある程度明確になっていると思います。それぞれの画面ごとに、ユーザーに提供するべき情報とその優先度、ユーザーに行わせたい行動が明確になっていれば、情報設計は一旦完了です。画面内での情報構成をより細かく設計したい場合には、「ワイヤーフレーム」を作ることでチーム内で検討を重ねたり、実際のユーザーに意見を聞いたりすることもあります。ワイヤフレームの作り方や、おすすめのワイヤーフレーム作成ツールについては別記事で紹介しています。
ワイヤーフレームから先は、情報の優先度に合わせて、それをユ ーザーに伝えるための具体的なデザインを考える、グラフィックデザイン的な作業となります。最終的なデザインが情報設計を反映していなければデザインの意味がなくなってしまうので、特に情報設計の担当者と最終的な画面デザインの担当者が異なる場合はワイヤーフレームを渡すだけではなく、
ユーザーにさせたいこと
ユーザーに提供できる情報
ユーザーの行動心理
といった、情報設計のポイントをしっかりとグラフィックデザイナーに伝えることが重要となります。
まとめ
「情報設計」は近年のデジタルデザインにのみ関連した技術ではなく、ポスターや本のデザ インなど古くからデザインの世界では欠かせない技術でした。そのため、基本となる考え方は伝統的なグラフィックデザインの基礎に沿ったものとなります。
とはいえ、近年のITサービスでは扱う情報の量が圧倒的に多いことや、デジタルサービスであるが故の「ユーザーとの距離」に起因して、情報設計の難易度はとても上がっています。このような難題に対処する方法として、UXリサーチや、エンジニアリング分野のデータモデリングの考え方を取り入れて情報設計を行うOOUXなど、デジタルデザイン分野ならではの手法も生まれています。
