それでは今回から、情報アーキテクチャについて、学習を進めていきます。
まず、情報アーキテクチャとは何か、についてですが、一言で言えば「WEBサイトなどで情報を見つけやすくするための設計」のことです。
私たちはインターネットを使ったり、WEBサイトを閲覧するとき、ほとんどの場合「何かしらの情報」を探していますよね。
そこで、欲しいと思っていた情報がすぐに見つからなかったり、目的の情報にたどり着くまで時間がかかったり、迷ったりするなら、それは情報アーキテクチャの設計がうまくいっていない、ということになります。
だからこそ、どういう設計にすれば、目的の情報を見つけやすくなるのか考えることで、より使い勝手の良いWEBサイトやWEBサービスが出来上がります。
そこで誕生したのが、情報アーキテクチャという手法なのです。
情報探索のパターン
情報を見つけやすくするためには、情報を探すとき、人がどのような行動をするかについて、よく知る必要があります。
昔から人は、何かしらの情報を探してきました。
インターネットが始まる前の、図書館だったり、人の話だったり、アナログな手段しかなかった時代から、インターネットが普及した今の時代まで、人の情報検索行動は、ほとんど変化がありません。
「どうやって人間が情報を探すのか」を知れば「どうやって情報を探しやすくするか」という命題に対して、相手にとってベストな環境を提供できます。
では、人間の探査行動には、どんなものがあるのでしょうか。
人が情報を探索するとき、その行動は3つに分けられます。
明確な答えを探す場合 : 既知探索型
まず1つめが、自分が何の情報を探しているのか、知っているケースです。
単純な話、明確な1つの答えを探すような行動が、これに当たります。
例えば、今使っているパソコンのメーカーは何なのか。
docomoの新しいプランの価格はいくらなのか。
明確な答えがあると知っていて、情報を探すケースが既知探索型です。
こうしたユーザーには、直接答えを与えてあげると良いです。
大まかな方向性だけ分かっている場合 : 探求探索
そして2つめが「探す分野」だけは理解しているケース。
例えば「自分の今後のキャリアをどう作ればいい？」「近くにあるお肉の美味しいレストランは？」といった、ざっくりと探す方向性は理解しているものの、その答えが何か分かっていない場合です。
こうしたユーザーには、コンサルタントやコンシェルジュように、適切な情報を組み立てて提供する必要があるでしょう。
「この情報はいかがですか？一番いいと思いますよ」と提案するイメージです。
ありったけの情報を全部知りたい : 全数探索
3つめが、対象分野のすべてを知りたいケースです。
例えば「JavaScriptの書き方についてすべて知りたい」「WEBデザインの方法をあるだけ知りたい」といった場合です。
主に何かを学習している、といったケースで全数探索は行われます。
こうしたユーザーにはとにかく、ありったけの情報を伝えることが大事です。
このように、大きく分けると3つに人間の探索行動は集約されます。
ユーザーがどの探索行動をとるのかを見定め、適切な方法で情報をまとめ、情報構造を設計することで、ユーザーの満足度は上がるのです。
人間の探索行動を直線的ではない
何かを検索する時、人は検索してすぐに、情報を見つけるわけではありません。
大抵は、複数の情報を閲覧します。
そして情報を見ている間に、少しずつ対象への理解を深めることも多いのです。
WEBサイト制作をしている時などは、よくその様子を見ます。
例えば、CSSで要素を横並びにしたくて、方法がわからなかったとします。
そこで検索するわけですが、なかなかうまくいくやり方を見つけられません。
どんどん調べて情報を見ていると、その間に理解が深まります。
すると今度は、横並びにするflexという書き方を求めていたと気づきます。
気づいたら今度は、flexについて調べ始めるのです。
このように様々な要素を巡回するうちに、理解を深める場合が多いです。
ただ、本来であれば「横並び CSS」で調べて一発で答えが出ることが理想でしょう。
または、flexだけでなく複数のアプローチを提示して、その中で、どれが一番使いやすいか、比較しながら教えてあげるべきなのかもしれません。
情報探査の巡回行動を少しでも短くしてあげる必要があります。
情報アーキテクチャの構成要素
そもそも、情報アーキテクチャとは、どういった内容なのでしょうか。
情報を探しやすくする、と言われても、どうすればいいのかイメージがつかない方も多いはずです。
なぜなら、普段はあからさまに視認できるものでもないからです。
情報の構成、と言うとわかりづらいかもしれませんが、簡単に言えば「情報を見つけやすくするために、決めるべきこと」です。
上手く情報を見つけてもらうためのルールそのものです。
そこで、情報を探しやすくするために決めるべき基本が5つあります。
この5つを作り込むことで、よりユーザーは情報を見つけやすくなります。
それぞれ説明していきましょう。
組織化システム
組織化というと、分かりづらいかもしれませんが、たくさんある情報を「どういう分類に分けるか」考えよう！ということです。
WEBサイトをつくる時、伝えなければならない情報が、たくさんあります。
それらの情報は、すべてがバラバラなわけではありません。
同じカテゴリにまとめられる情報もあるでしょう。
例えばWEBサイト制作の勉強で「h1タグの意味」と「pタグの意味」というコンテンツは「HTML」というカテゴリにまとめることができます。
このように、バラバラな情報をまとめて名前をつけることで、どのページに何の情報を入れるか、決めていけるのです。
ラベリング
各コンテンツの見出しや、ナビゲーションの名前など、コンテンツやリンクには、それぞれ何かしらの名前がついています。
この名前や言葉のことを「ラベル」と呼びます。
ラベルを慎重に考えないと、ユーザーは迷います。
例えば、HTML学習ページへのナビゲーションがあったとします。
そのナビゲーションに「学習」とだけ書いてあったらどうでしょう。
リンクの先で何が学べるか分からず、混乱してしまうかもしれません。
「CSS学習ページ」の見出しが「デザイン」だったらどうでしょう。
これもまた、ユーザーは混乱してしまうはずです。
一貫性を保ち、イメージしやすいラベルを考える必要があります。
ナビゲーション
グローバルナビゲーションやサイトマップなど、ページ同士を行き来する、ナビゲーションについて、深く考える必要があります。
WEBサイトにナビゲーションが無ければ、ページの間を行き来できません。
ナビゲーションには、例えばamazonの「あなたにおすすめのアイテム」のような「おすすめアルゴリズム」のような機能も含まれます。
文章から他のページに飛ぶようなハイパーリンクも含まれます。
使い方を示すようなガイドもナビゲーションに含まれます。
リンクやナビゲーションだけではなく、ページ同士を行き来するためのサポート機能もナビゲーションに含めて考えます。
ナビゲーションのラベルや設計がめちゃくちゃであれば、ユーザーは自分の居場所を見失い、次にどこを見るべきかも想定できなくなるでしょう。
クリックした先がどこに繋がるのか明確で、勘違いすることもなく、かつユーザーが自分が「次に知りたい情報」へスムーズに到達できるような、ナビゲーションの設計が必要です。
検索
検索ボックスから自由に言葉を入力して、情報を探す機能です。
Googleの検索エンジンのようなものを思い浮かべると思いますが、WEBサイトを対象にした場合、検索範囲はサイト内の情報だけになります。
例えば、旅行予約サイトで航空券や宿を探すための検索ボックス。
ブログや情報サイトで、特定のコンテンツを探す検索ボックス。
こうした検索ボックスを作る時、検索出来る対象を絞ったり、言葉を推薦したり、言葉を制限したりして、いかに情報を見つけやすくできるかを考えます。
コンテンツ
コンテンツと言うと、ブログの投稿などを思い浮かべるかもしれませんが、それだけではなく、WEBサイトそれぞれのページに書いてある内容も、コンテンツです。
情報アーキテクチャは言ってみれば、コンテンツ全般を見つけやすくするための設計と言っても良いでしょう。
手段としては、コンテンツの裏にmetaタグと呼ばれる、表には見えない検索用のデータを仕込んだり、見出しや内容を見つけやすく設定したり、ハイパーリンクを適切に貼ったり、パンくずリストを追加したりします。
見つかる側であるコンテンツに、見つけやすい「しるし」をつけることで、ユーザーがいつでも情報にアクセスできるようにします。
よい情報アーキテクチャは中身を変えても機能する
情報アーキテクチャは構造ですから、それこそ考え抜かれたアーキテクチャなら、コンテンツの内容に依存していません。
一種のフレームワークと言っても良いでしょう。
例えばアプリ「インスタグラム」の構造を思い出してください。
インスタグラムは基本的に写真共有アプリですが、最近、ショッピング機能もついたことで、一種のショッピングサイトのようにもなっています。
インスタグラムの画像情報にたどり着く構造がすぐれていることから、そのままショッピングサイトとして使っても機能したのです。
そもそも、ショッピング機能が追加される以前から、ユーザーはアイテムや旅行先の口コミなどを調べていました。
インスタグラムは、目的の画像や情報にたどり着く機能が優れているが故に、アイテムや旅行といった視覚的情報の価値が高い、情報散策に活用されているのです。
みなさんがよく使っているアプリを思い出してみてください。
ゲームなどは少し違うかもしれませんが、特にSNSなどは、中身を別のものに変えてもうまく機能すると思いませんか？
例えば、エンジニア向けのSNS、料理向けSNS、といった派生は、あからさまです。
情報を見つけやすい、答えにたどり着きやすい設計がなされたサービスは、中身を変えられ、模倣されるものなのです。
他にもプログラミング学習をする時に使うProgateも「デザイン版Progate」のようなサービスが別ジャンルとして生まれることが、たくさんあります。
こうした別ジャンルに模倣されるようなサービスは、情報アーキテクチャが優れているからこそ、模倣されると言えます。
では、次回から、情報アーキテクチャの構成要素について、1つずつ詳しくご説明させて頂きます。
それぞれ、構成要素を理解し、組み立てられるようになることで、情報アーキテクチャを使いこなせるようになるはずです。