IAとグローバルWeb坂本貴史 @bookslope

2011,6,4 @Fatwire UST Seminar Twitter #fwjp110607

IAとはサイトストラクチャ設計階層分類型とファセット分類型情報構造の例目的別アプローチの考え方必要な領域とスキル

IAとグローバルWeb本日のアジェンダ

グラフィックデザイナー出身2002年ネットイヤーグループ参画

Webクリエイティブディレクション多数

IA Institute会員

HCD-Net会員

書籍への寄稿・講演多数

UXデザイナーインフォメーションアーキテクト

坂本貴史@bookslope

情報アーキテクチャとは、知識やデータの組織化を意味し、情報をわかりやすく伝え受け手が情報を探しやすくするための表現技術である。

IAとは?

“Wikipedia

“

ユーザーニーズ

サイトの目的

機能仕様

ビジュアルデザイン

情報デザイン

インターフェースデザイン

インタラクションデザイン

コンテンツ要求

ナビゲーションデザイン

情報アーキテクチャ

JJG「The Elements of User Experience」より

抽象

具体

ユーザー コンテキストコンテンツ

ビジュアルデザイン

コンセプト

「 What is information architecture?」より

可視化されやすい領域

可視化されにくい領域

ワイヤーフレーム

ナビゲーションサイトストラクチャ ラベル

サイトストラクチャ設計

Webサイトに必要な情報（コンテンツ）を構造化していく工程。

同じツリー状でも論理構造※と物理構造はイコールではない場合がある。

また、情報体系とユーザー動線とは分けて考えることがポイント。

※「論理構造」とは「パンくずナビゲーション」を指している。

階層分類型

ファセット分類型

1

「デザイニング・ウェブナビゲーション」より

2

階層分類型大カテゴリー・小カテゴリー・詳細情報へと階層構造で情報を分けたもの。※一般的な企業情報サイト（製品カテゴリやIR情報カテゴリなど）でよくみられる。

1

ファセット分類型一つの情報にさまざまな属性をつけたもの。属性をタグとして分類したもの。※ ECサイトなどで、さまざまな検索の切り口などに対応する。

2

Task-based application

タスクに基づくアプリケーション

Marketing campaign

マーケティングキャンペーン

Content source

コンテンツソース

Brand presence

ブランドプレゼンス

会社のウェブサイトなど。ブランド価値やメッセージを伝えることがデザインゴール。

特定の割引を宣伝するランディングページなど。興味を持たせ刺激を与えることがデザインゴール。

ニュースや記事サイトなど。何度もそのサイトに訪れたくなるようなコンテンツを提供することがデザインゴール。

ソフトウェアアプリケーションなど。他ではできないことをユーザができるようにすることがデザインゴール。

Multilingual

多言語対応

Multidevice

マルチデバイス対応

注意事項

❖ ラベル（表記）の違いを理解する❖ 文字数を考慮した設計が必要❖ グローバルで共通のCMSとローカルのCMSの扱い

解説

グローバル共通のCMSおよびガイドラインと、ローカルのCMSおよびガイドラインとが別に存在するケースが多いため、それぞれに求められている要件を満たす対応が必要となる。

テキスト

テキスト

サイズで選ぶシリーズで選ぶ

サポート・お問い合わせ3D〈ブラビア〉商品ラインアップ

ホーム

関連商品 選び方のヒント

情報構造選び方法の分岐（ページ）は、「商品ラインアップ」にぶら下がる。画面上の大きさや色使いにより判断するものではない

テキスト

サポート・お問い合わせ3D〈ブラビア〉商品ラインアップ

ホーム

関連商品 選び方のヒント

HX920シリーズ 55型以上

サイズで選ぶシリーズで選ぶ

シリーズで選ぶ

サイズで選ぶ

HX920シリーズ

55型以上

サポート・お問い合わせ3D〈ブラビア〉

ホーム

関連商品 選び方のヒント

KDL-55HX920 同じ製品情報経路が違うだけで同じ製品情報にたどり着く構造

HX920シリーズ 55型以上

サイズで選ぶシリーズで選ぶ

商品ラインアップ

注意事項

❖ 階層構造におけるラベル❖ さまざまな検索方法による分類方法❖ 論理構造と物理構造の違い

解説

ナビゲーションのラベルにおいて、名詞と動詞が混在する場合は、階層分類とファセット分類とが混在したパターン。管理視点で考えると階層分類が主なマスタになるため、ファセット分類やそれにともなうパンくずなどの文字情報は定義しておく必要がある。

検索経路をパンくずに持たない例

ユーザーの行動の邪魔になりたくないんです。“Google Chrome Comics

“

ソフトバンク同士で通話し放題

ソフトバンク同士で通話し放題ニーズ・手段

ホワイトプラン行き先

料金を見直したい目的

目的からニーズ、最終的な着地点までの流れ

製品情報

製品情報の分類

流入キーワード

目的別

階層構造は分類、ユーザーは目的別で行動する

階層構造

料金・割引

料金を見直したい

割引料金プラン

割引プランA 割引プランB料金プランB 料金プランC料金プランA

注意事項

❖ SEO対策との関連性を考慮する❖ 増殖するランディングページ群❖ テンプレートの定義とルール（統制）

解説

目的はさまざまなため製品プロモーションなどで告知した場合には、ランディングページが増殖する。その際、どのテンプレートを用意するかが重要となり、定義とルールが必須。また、動的に用意するページの場合にはSEO対策との関連性も考慮する必要がある。

最終デザイン

サイト戦略

プロジェクト管理

ユーザー調査

コンテンツ編集

コンテンツ戦略

テクノロジー導入

テクノロジー戦略

JJG「 The Nine Pillars of Successful Web Teams」より

概要デザイン

戦術具体的なタスク

戦略抽象的なタスク

2011,3,29 WORKS CORPORATION

IAというスキル

情報分類とメニューの最適化サイトストラクチャの理解ナビゲーションパターンと用法ユーザー行動と画面設計ワイヤーフレームの設計ケーススタディAppendix

Thank you Q and A

坂本貴史 @bookslope

2011,6,4 @Fatwire UST Seminar Twitter #fwjp110607