Webクリエイター必読！
「プロジェクトデザインから見るIA」 坂本貴史（ネットイヤーグループ株式会社）

Webクリエイターのみなさんであれば、一度ならずと聞いたことがあると思われるのが、「IA」。
ワイヤーフレームやサイトツリーと同じことなの？ Webクリエイター、ディレクターにとって、IAのスキルはどんな場面で必要とされるのか？ 今回は、国内で著名なIAのひとりである、ネットイヤーグループの坂本 貴史氏(bookslope)がIAの仕事について解説します。

IAはWeb構築に関る人がもっていなければいけないスキルです。IAという場合、以下の2種類の意味をもちます。
　・Information Architecture：情報アーキテクチャ
　：Information Architect：インフォメーションアーキテクト

Jasse James Garrett氏が、Web構築における必要最低限の9種類のスキルを「The Nine Pillers」という図に描いています。図では、技術戦略、サイト戦略、プロジェクトマネジメントなどのスキルを関連の近い要素を配置していますが、IAに密接に関るのが図の中心の縦に並ぶ「ユーザ調査、サイト戦略、設計、デザイン、プロジェクトマネジメント」です。

また、Jasse James Garrett氏は「The Elements of User Experience」の中で、Webサイトを構築するプロセスのステップを5段階で図解しています。IAは3段階目の中間に位置しています。Webの構築にかかわる基本的要素として、必ず通過しないといけない要素であることがわかります。

印刷物を中心とした従来メディアを閲覧してきた慣習から、左から右に文字を書く文化圏では、視点が左上から右下に移動する傾向があります。

また、右利き、左利きにかかわらず右でマウスを使う人が大多数です。このため情報設計する際には、画面上の重要なコンテンツは左に配置したり、押してほしいボタンは右に配置するとよいと考えられます。また、アイトラッキング調査でユーザの目の動きを追跡したところ、F字の形で視点が集中するという報告もあります。

Web画面の設計図となるワイヤーフレームの解釈は、人によって異なるので注意が必要です。

制作側の人がワイヤーフレームというと、モノクロのシンプルな情報の設計図を想定します。しかし、ある人にとっては「レイアウト」を決めるための資料をイメージするかもしれないし、別の人にとっては「デザイン」、「原稿」、「仕様書」をイメージするかもしれません。認識が異なることによるトラブルをおこさないよう、最初の段階でワイヤーフレームの目的や確認事項を提示し、共有化を図ることをお勧めします。

最近では検索エンジンの影響で、Webサイトはトップページだけでなく、末端のページの重要性も高まっています。このため、末端ページのワイヤーフレームにはrerated (関連)、context (文脈※位置情報など)、content (本文)の3要素が含まれていることがポイントです。

IAを設計する際においても、ナレッジの共有化は重要です。パターンやパーツを流用し、培った資源を活用していきます。ゼロから生み出すよりも効率的に作業を進めることができるためです。

例えば、UI Pattern（http://ui-patterns.com/）や、Yahoo!のデザインパターンライブラリー（http://developer.yahoo.com/ypatterns/wireframes/）などのパターン集は、デザインのパターンはもちろん、用語も参考になります。例えば、世界的に共通した名称 (「ぱんくず (リスト)」は「Bread Crumbs (List)」) を使用していることがわかる、などです。
さらに、用語を解説する一覧表をつくっておくと、共通言語で話すことができ、認識もぶれないので効率的です。

情報構造とフローは異なります。

一般ユーザ向けにサイトマップをつくる場合はフローを優先する場合が多いのですが、情報構造を見直さないことが多く、それによる弊害がおこります。これをさけるひとつのポイントは、ページ属性をパターン化して、サイト構造上に大きな欠陥がないか確認します。こうすることでサイトの中に必要な要素や機能が満たされているか共通認識が生まれ、サイトの再構築 (リストラクチャリング) につながりやすくなります。

メニューの設計時には、情報を再分類してそれ以上分解できない要素 (共通項) にしぼりこみます。例えば、映画のプロモーションサイトは「ニュース、イントロダクション、予告編、ダウンロード、劇場情報」が共通項となり、これをベースに独自要素を加えながらメインメニューをつくると標準的なナビゲーションを設計することができます。
共通項をもとに独自要素を加え、企業サイトの独自性を生み出していきます。ただし、基本メニューは業界やサイトの目的ごとに異なります。

フローは情報構造とは別の角度からきめていくプロセスです。ユーザエクスペリエンスといわれたり、体験設計、経験フローといわれています。
実際に、誰がどのように行動するかを想定します。逆にユーザの行動を想定できないと、サイトは設計できません。フローについては、ユーザにとってどのようなニーズがあるかという仮説をたて、仮説をバックアップする資料として総務省の調査データや民間の調査団体の調査データを活用します。

メンタルモデルとは、人が道具を使おうとした時、「その道具はこう使う」などと頭の中で形成するモデルのことです。良いメンタルモデルをもたせることで、使いやすいサイトになります。

下図は、引越しをしたい場合に自治体のサイトへアクセスした際のあるプロセスを分解したものです。ユーザの行動とニーズを分解し、最終的には要件におとしています。そしてどれをどのように見せていくのか、どの機能を必ずつけるのか、優先度の高いものから決めていきます。基本構造だけを考えたサイトは使いにくいので、付加価値をつけ、ユーザー行動を分析し、それに合ったフローをユーザーシナリオとして整理することが重要です。

サイトの単位には、一番小さい1ページからはじまり、複数のページを持つサイト、そして複数のサイトを持つEIA、 関連する情報やメディアを含めたエコシステムというレイヤーがあります。エコシステムというのは、サポートサイトやコミュニティ、ブログなどをもち、生態系を意識しているサイト・メディアのことで、もっとも大規模になります。

最近は自社メディアの見直しが進み、プロモーションに積極的にKPI（Ket Performance Indicator）の指標を設定し、実施状況を計測していくというのが標準的になっています。例えば、コカコーラでは自動販売機を活用し、どこで誰が何を買っているかを把握し、自販機を1つのメディアとしてとらえて、PDCAサイクルに活用しているといわれます。

リチャード・ワーマン氏のインフォメーション・アーキテクトの定義は、以下の3つ。

“複雑なデータの固有のパターンをまとめ、内容を
明確にする人”“第三者が情報を得るための道筋を自分で見つけられるように、情報の構造を示す地図を作成する人”
“誰でも理解しやすように情報を提供し、それらをまとめる人”

そして、Web検定の書籍ではインフォメーション・アーキテクツのコアスキルは以下の4つだと記載しています。

•デザイン実行力とデザインマネジメント力
•リーダーシップとプロジェクトマネジメント力
•ユーザー調査と分析力
•顧客とのコミュニケーション能力と調整力

すでにWebのディレクションやWebプロジェクトマネジメントのリーダーとしてサイト構築に関っている人は、このコアスキルを持っているとともに、さまざまな分野においてもさらに掘り下げることができるスキルを持っているともいえるでしょう。