「IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 」を元に、要約メモしておきたいと思います。
情報アーキテクチャとは何か
01｜情報アーキテクチャとは何か
情報をわかりやすく伝えるための技術、そして思いやり
Information Architect
- データの持っているパターンを整理し、複雑なものを明快にする人
- 人が知識への経路を見つけるための情報の構造や地図を作る人
- 時代の要請により21世紀に新しく生まれつつある、明快さ、理解そして組織化の科学を専門とした職業
02｜なぜ情報アーキテクチャが必要なのか
Webサイトにおける情報アーキテクチャの3つの役割
利用者が情報を探し、活用できるようにする
- 使い勝手が向上し、ユーザが欲しい情報にアクセスできる
- サイトを学習できる
- お問い合わせが減少する
情報提供者が自分の意図通りに情報を指示できる
- 意図しているメッセージ・コンテンツを適切に伝えられる
- ユーザに正しく見つけてもらえる
- どうして失敗したか/うまくいったかが分かる
サイト内での情報の変化、増減によるクオリティ低下を防ぐ
- 情報の追加・更新があっても設計が破綻しない
03｜Web情報アーキテクチャの誕生
インターネットの発展とともに歩む情報アーキテクチャ
04｜Webサイトの構成要素
テクノロジー・ビジュアルコミュニケーション・情報アーキテクチャ
- テクノロジー（プラットフォーム、サーバサイド、フロントエンド）
- ビジュアルコミュニケーション（アートディレクション、グラフィックデザイン）
- 情報アーキテクチャ（情報の組織化/構造化、ナビゲーション）
これら3つが組み合わさってユーザエクスペリエンスが作り出される。
05｜Web情報アーキテクチャの階層
インターネットにおける情報アーキテクチャの4つの階層
- インターネット全体としての情報アーキテクチャ
Webサイトはそれ単体で存在しているのではなくインターネットの一要素であるという考え方に基づき、インターネット全体をWeb生態系としてとらえ、動線やコンテンツ企画を行う。 - エンタープライズ情報アーキテクチャ
企業が複数のWebサイトを持つ場合、それら全体を指してエンタープライズ情報アーキテクチャと呼ぶ。 - Webサイトごとの情報アーキテクチャ
ナビゲーションやラベルといった要素によって構成される。 - 画面内での情報アーキテクチャ
各画面単位でも情報アーキテクチャを行う必要がある。
06｜エンタープライズ情報アーキテクチャ（EIA）
企業のサイト戦略を策定するための考え方
サイト利用者への適切なブランディングや企業マーケティングの実現
- 企業のブランディング戦略やマーケティング戦略に合わせた、ユーザエクスペリエンスを実現するためのサイト全体構造
- 企業の顧客や株主、就職希望者などへの最適な情報の伝達
- 企業サイト全体での顧客の誘導
企業サイト全体の効果的・効率的な運用の実現
- ガイドライン、システム、運用方針などの共通化・独自化の組み合わせによる、費用対効果の最適化
- 効果測定、ログ解析、ロードマップ策定のための全体像の把握
07｜EIAと企業ブランディング
企業のブランド戦略と強く関わるEIA
個別ブランド型、保証付きブランド型、ハイブリッドブランド型、マスターブランド型
08｜パターンランゲージ
アレクサンダーによる「パターンランゲージ」という考え方
09｜ペースレイヤリング
時間変化による層＝ペスレイヤリングという考え方
↑変化しやすい
- Stuff 各ページデザイン
- Space Plan コンテンツ
- Services デザインルール
- Skin ナビゲーションルール
- Structure サイトストラクチャ
- Site ドメイン
↓変化しにくい
10｜人間中心設計
ユーザに合わせてデザインを行うアプローチ
- 人間中心設計の必要性の特定
- 利用の状況の把握と明示
- ユーザと組織の要求事項の明示
- 設計による解決案の作成
- 要求事項に対する設計の評価
11｜情報端末の中のアーキテクチャ
高度に多機能化した情報端末における情報アーキテクチャの必要性
機能をデザインするのではなく、起こることをデザインするという考えを持つこと。これがユーザエクスペリエンスデザインそのもの。
12｜IAからUXDへ
ユーザへ優れた体験を与えるために
インフォメーションアーキテクトから、ユーザエクスペリエンスデザイナーへ
情報アーキテクチャ設計のプロセス
13｜情報アーキテクチャ設計のプロセス
IA設計プロセスを構成する2つの軸と5つのステージ
- まずは観察してさまざまなデータを集める
- そこからフレームワークを作ってモデル化・パターン化を行う
- こなすべきことの原則である要求事項を導出する
- 最終的には具体的な解決案を構築する
- さらにその結果をもとに観察という反復を繰り返す
14｜情報アーキテクチャ設計に必要な知識と能力
関連領域と、メタ化能力およびワークショップファシリテーション
メタ化能力とは、物事を俯瞰で見てそれらがどういった枠組みなのかを捉える能力。ワークショップファシリテーションとは、ワークショップを企画・進行する能力のこと。
15｜分析フェーズ
IA設計のための3つの前提条件「ユーザ」「コンテンツ」「コンテキスト」を検討する
- ユーザ分析
利用者のモデル化を行う。 - コンテンツ分析
既存コンテンツなどをリスト化し、特徴の抽出を行う。 - コンテキスト分析
目的の明示化を行う。
16｜統合フェーズ
分析フェーズで得られた前提要素を統合し、解決案を検討する
一般的なWebサイト構築では、大きく「設計・デザイン」と「開発・制作」の2つに分けられる。設計・デザインフェーズでは、全体のコンセプトとなるユーザエクスペリエンス方針を定義し、その内容に伴って情報アーキテクチャ、ビジュアルコミュニケーション、テクノロジー設計を行う。開発・制作フェーズでは、各ページデザイン、システム開発などが行われる。
17｜誰が情報アーキテクチャを設計するか
プロジェクトの中でIA設計担当者を明示化する
18｜ワークショップ型で行う設計
情報アーキテクチャ設計手法としてのワークショップ
コンテンツ分析やユーザ分析を行う時は、可能な限りワークショップ型の形式で関係者を巻き込んで行う。カードソーティングやブレインストーミングなど。
19｜ドキュメンテーション
情報アーキテクチャに関する納品物
- 用件定義書（サイトの方針、プロジェクトの概要、ロードマップ等）
- ユーザ分析レポート（調査内容、ペルソナ・メンタルモデル）
- サイト評価レポート（現状分析、競合分析、ログ分析）
- コンテンツインベントリ（既存コンテンツ、新規コンテンツ）
- サイトコンセプト（ストーリーボード/シナリオなど）
- サイトストラクチャ（サイトストラクチャ・画面フロー、ナビゲーション）
- 画面設計書（ワイヤーフレーム、ラベル定義）
- 他の仕様書（ナビゲーションルール、ラベリングルール）
ユーザ分析
20｜ユーザ分析の意義と全体像
情報アーキテクチャ設計は正しいユーザ理解から始まる
誰がいつどんな状況で情報に接するのかを正しく知ること。
21｜さまざまなユーザ調査
ユーザを調査するためのさまざまな手法
ユーザ調査は、定性調査と定量調査とに分けられる。また、より発見的な調査と検証を行うための調査とに分けられる。
22｜コンテクスチュアル・デザイン
ユーザ調査、モデル分析を効果的に行う手法
インタビューを行った結果は、フロー（役割）、シーケンス（作業の流れ）、人工物（メモなど）、文化（人間関係など）、物理環境（利用者の物理的な環境）という5つのワークフローモデルの軸に沿ってまとめられる。
23｜オンラインリサーチ
仮説を定量的に裏付ける際に効果的な手法
24｜ユーザビリティテスト
ユーザビリティテストで利用者の実体を観察する
- パフォーマンス評価
時間やエラー回数を測定する - インタラクション評価
観察や発話によって評価する
25｜ユーザモデリング
ユーザ調査の結果をデザインに用いるための手法
観察・調査によって得られたユーザの振るまいや、特性・心理状況を適切なモデルにすることで、情報や競合する要素に優先順位をつけることができるようになる。これがデザインを行う際の判断材料となり、観察だけでは得られないようなデザインのインスピレーションを得ることができる。
26｜ペルソナ法
調査に基づき、具体的なユーザ像を定義する手法
- 活動：行っている行動、そのタイミング、頻度
- 態度：製品や製品ドメイン自体にどのように考えているか
- 適性：ユーザの背景知識や学習能力
- モチベーション：その製品ドメインに関わっている理由、目的
- 技能：製品ドメインに関する知識、ITリテラシー
27｜メンタルモデル分析
どのようにユーザが対象を認識しているかという「頭の中のモデル」
メンタルモデルとは、ユーザがサイトやタスクをどのようにとらえているかという「頭の中のモデル」を指す。一般的なものでは「製品やサービスがそのターゲットユーザにどのように認識されているか」というメンタルモデルがある。
28｜シチュエーション・ニーズ分析
ユーザごとの状況ニーズから必要なコンテンツを導出する
- どんなユーザの状況がありうるか
- それぞれの状況におけるユーザニーズ
- そのプライオリティ
29｜情報探索行動モデル
「情報を探す」行為のさまざまなパターン
- 既知項目検索モード
分かっている情報を探している - 調査探索モード
特定の内容に対して知識を広げながら情報を探している - 認識不足モード
自分が何を求めているか把握できていないまま情報を探している - 再探索
一度みつけた情報を探している
コンテンツ分析
30｜コンテンツ分析の意義と全体像
情報を分類し整理するコンテンツ分析フェーズ
「コンテンツ内で扱われるコンテンツの性質を正しく知る」ことや「情報を分解し、コンテンツ間の関係性や情報の持つグループを明らかにする」といったことを行う。
31｜コンテンツ分類と情報の発展
「分類」ということを理解する
「情報を探す」行為のさまざまなパターン
- どういった規模でひとつのサイトとして切り出すか
- グローバルナビゲーションに用意する項目をどのようなものにするか
- 製品情報やコンテンツなどが将来的にどんな規模になるか
32｜5つの帽子掛け
情報を組織化するための5つの視点
- カテゴリ：類似性や関連性
- アルファベット：名前の順
- 時間：年代別
- 位置：地理的や空間的関連性
- 階層：量の大小、長さの長短
33｜コンテンツの追加と更新
コンテンツは変化する前提でとらえる
- ニュースリリースなどの情報
後々どのような使われ方をするのかを想定する - 製品情報
製品ジャンルか製品自体が増えていくかによって修正される階層が変わる - 会社情報、地図などの情報
更新頻度が低い情報にCMSを想定してしまうと、表現の自由度が低くて更新頻度も下がるという結果になる - イベントなどの情報
開催前には告知で、開催後には報告となり、その性質が変化する。
34｜既存コンテンツの再利用
サイトリニューアル時におけるコンテンツ移行の観点
- コンテンツ構造の見直し
章立てやページ構成の再検討。検索エンジン対策や再利用性の観点からも、1ページに1トピックとなっていることが望ましい。 - ページ情報構造の見直し
各ページの内容を、エリア、コンテンツ要素の観点から類型化する作業。 - 表現の見直し
全体のデザインルールに基づくスキン、レイアウトの統一化。
35｜カードソーティング
情報をグルーピングするための効果的な手法
- モジュール化
情報をどのような単位で切り出すかを検討し、元情報を切り出す - カード化
切り出した情報をカードにする - グループ化
カードをホワイトボード上に並べ、似たような内容をグループ化する - ラベル付け
グループごとに、それが何を表しているかを検討してラベルを付ける
36｜コンテンツモデリング
コンテンツ同士の関係性を整理する
あくまでもコンテンツ側の観点で情報の関連を整理しておくことがポイント。別に検討するユーザ観点と合わせることで、ユーザニーズの反映とコンテンツ情報のつながりの両方を反映させたナビゲーションを設計できる。
37｜コンテンツインベントリ（目録）
ページではなくコンテンツ単位で全体像を把握する
全体の開発工数やスケジュールが明確になる。
コンテキスト分析
38｜コンテキスト分析の意義と全体像
サイト設計のゴールと制約条件を明確にする
- プロジェクト目的の明確化
達成したい目標、ユーザへ与えたい価値を明確にする - 費用
ゴールまでにかけて良い費用 - 正しい現状の理解
現状のサイト評価、競合の分析
39｜Webプロジェクトの全体像
タスク全体を考慮しながら情報アーキテクチャ設計をとらえる
- 呼び込み
どうやってそのサイトに訪れてもらうか - もてなし
情報アーキテクチャ設計が最も関わる部分 - 運用
どういった規模でどの部分に対応するか
40｜ビジネス用件定義
ビジネス目標に基づいて手段を選択する
前提としてどういったビジネス目標を達成したいのか、何をもって成功と見なすのかという観点。
41｜ユーザへの提供価値定義
ユーザにどういった価値を提供しようとしているのかを明確化する
Webサイトやサービスが、ユーザのどのニーズに応えるのか、競合とは何が違うのかを明示する。
42｜ロードマップ
長期的な観点でプロジェクトを計画する
その階層ごとに実施フェーズを考え、長期プランを設計する。
43｜現状分析
サイトの課題点と効果を上げている点を理解する
- ヒューリスティック評価
構成、UI、デザイン、文言などの一貫性、整合性などのレビューを行う - ユーザビリティテスト
ユーザにサイトを使ってもらって問題を発見していく - ログ解析
コンテンツの利用頻度やプロモーションの効果について分析する
44｜ヒューリスティック評価
さまざまな側面からサイトを評価し、課題を抽出する
- サイトストラクチャ
サイト構造、情報分類方針、ページフロー - ナビゲーション
ページ間やサイト全体でのナビゲーションルール
- ラベル
メニューや見出し、本文などの文言 - ページデザイン
エリア定義、グリッドシステム、カラースキーム、タイポグラフィ - ユーザインターフェイス
リンクやフォームなどのインタラクティブな操作 - アートディレクション/ブランディング
ブランドイメージを適切に伝えられているか - コンテンツ内容
コンテンツの文章や図表など
45｜ログ解析
アクセスログからユーザの行動を読み取る
46｜ベンチマーキング
競合企業のサイトを調査し、自社の位置付けを理解する
サイトストラクチャ比較、相対的なポジショニング、サービス有無と内容の比較
47｜他サイトのサイトストラクチャ分析
ストラクチャから、そのサイトの意図や特徴を把握する
- どのようなユーザを想定しているか
ナビゲーションのカテゴリやラベル名などから、対象としているユーザを推定する - 主動線と副動線
階層型構造での主動線と、関連ナビゲーションやダイレクトナビゲーションなどで対応している副動線が用意されていることが多い - ナビゲーションルールとその画面デザインへの反映
ナビゲーションが、どのようなルールで画面デザインに反映されているか - どのような検索軸が用意されているか
検索軸と優先順位、使い勝手など - トレードオフとしている箇所
競合する要因のどちらを採用しているか
48｜クリエイティブ・ブリーフ
設計の前提をドキュメント化する
49｜実施施策の優先順位付け
さまざまな観点から優先順位を検討する
ユーザエクスペリエンスデザイン
50｜サイトコンセプト定義
情報アーキテクチャ設計の方針を定義する
- コンセプトダイアグラム
サイト内の道筋を、図を使って表現したもの - ユーザエクスペリエンスフロー
サイトで与えたい体験をフロー図で表したもの - シナリオ（ストーリーボード）
サイトで与えたい体験をイラストなどで表現したもの - メタファー
サイトの方針を比喩やキーワードで表現したもの
51｜ユーザエクスペリエンス定義
マクロレベルとミクロレベルの視点から、ユーザへ与えたい体験を定義する
- マクロレベルのユーザエクスペリエンス
サイト全体でユーザに与えたい体験を定義する - ミクロレベルのユーザエクスペリエンス
与えたい体験をフロー図で表したり、具体的なインタラクションやナビゲーションを定義する
52｜コンセプトダイアグラム
サイトの要素やアクションを視覚化する
視覚的に表現した概念図
53｜ユーザエクスペリエンスフロー
ユーザに提供したい体験の流れを定義する
サイト内の体験の流れで、どのようにサイトを使っていくか（欲しいか）を表現したもの。
54｜シナリオ（ストーリーボード）
提供したい体験を物語の形で記述する手法
CMなどで使われるようなストーリーボード
55｜サイト訪問のきっかけ
ユーザがサイトを訪れる状況を知る
- RSS/メルマガから
自分で登録したRSSやメルマガからの訪問 - サイトを指定（ブックマークなど）
Wikipedia や Amazon など、そのサイトの利用を前提としたもの - メール/ソーシャルネットワークから
他人からの推薦によって訪問 - 検索結果から
何か情報を探している場合 - 出稿記事/広告から
バナーやタイアップ記事からの訪問。ランディングページが重要となる - 間違って訪問
検索結果によって、間違って訪れるユーザが一定数いる
サイトストラクチャ設計
56｜サイトストラクチャ定義
Webサイトの骨格
- サイト内でのユーザの動線定義
サイト内でユーザをどのように誘導させるかを示す。ユーザが自由に移動するための経路設計。 - サイト内でのカテゴリ整理
サイト内での情報のまとめ方（階層型、ファセット型、ハブ型、ハイパーリンク型など） - カテゴリトップ、リストページ、詳細ページ等のページタイプ定義
ページデザインを行うにあたっての、各ページの役割を示す - コンテンツ量の定義
何ページ程度で情報を展開するかを視覚的に把握する - システム仕様定義
システム設計を行うための画面遷移図 - データベース、CMS導入の計画
データベースを効率的に導入するための構成
57｜サイトストラクチャのパターン
サイトストラクチャの一般的な形態
- 階層型分類構造
大カテゴリー、小カテゴリー、詳細情報といった階層構造に情報を分ける分類方法 - ファセット分類型構造
ページや情報にタグを付けて、それを元に分類を行う方法 - Web型（ハイパーリンク型）構造
情報同士が相互に参照しあっている形態。 - ハブ＆スポーク型構造
基本となるページを元に機能を呼び出し、また基本ページに戻る形式。 - 一覧＆詳細型構造
ECサイトのような、情報検索と個別の詳細情報を持つ形式 - 直線型（フロー型）構造
ユーザ登録や決済など一連の流れを示す画面遷移でみられる形式
58｜階層型分類構造
最もよく見られるWebサイトの形態
59｜ファセット分類型構造
情報の属性を利用して分類した形態
60｜web型（ハイパーリンク型）構造
情報が等価につながっている形態
61｜ハブ＆スポーク型構造
特定のページをハブとして、機能やコンテンツへ遷移させる形態
62｜一覧＆詳細型構造
検索結果の一覧ページと、個別の情報ページで構成される形態
63｜直線（フロー）型構造
一連の流れをたどる形態
64｜企業サイトの構造
企業サイトおよび製品情報サイトの特徴
- 企業サイト
役割ごとに階層型に分けられ、第二階層以降はそれぞれのカテゴリの情報が並列に並べられる。 - 製品情報サイト
その製品のプロモーション的な位置づけやブランド戦略に応じて、企業サイト内に統合されることもあれば、独立したサイトとなることもある。
65｜サービスサイトの構造
サービスサイトの特徴
- ニュースサイト
データベースを用いたファセット分類型コンテンツサイトとなる。 - ECサイトや情報サービスサイト
ファセット分類を用いた、一覧＆詳細型の形態をとる。 - Webアプリケーションサイト
メイン画面のトップページからそれぞれの機能が呼び出される、ハブ＆スポーク型の構造となる。
66｜ハイレベル（抽象）サイトストラクチャ
Webサイトの全体方針
- マイクロサイト化の検討
目的別にいくつかのサイトに分けた方が、効果やメンテナンス性から有効となる。 - メインカテゴリの検討
マイクロサイト化の検討後、、それぞれのサイトの大分類項目を決める。
67｜詳細サイトストラクチャ
ページ単位のサイトストラクチャ
- 1ページに切り出すページ内容
- 何と何を並列にするか
- ページの順序
- 必要なナビゲーション
- 各カテゴリのコンテンツ量のバランス
68｜サイトストラクチャとナビゲーション
サイトストラクチャ定義に合わせてナビゲーションも検討する
- 階層型ナビゲーション
下ったり同一階層を移動したりする - 関連ナビゲーション
カテゴリをまたがった遷移や、主動線ではない副次的な動線 - ダイレクトナビゲーション
トップページなどに、ユーザの目的に合わせたショートカット - ダイナミックナビゲーション
- 機能ナビゲーション
どの項目を機能ナビゲーションとするか
69｜Site-it!の活用
サイトストラクチャを効果的に検討するためのツール
70｜ビジュアルボキャブラリー
サイトストラクチャ記述のためのツールセット
71｜サイトストラクチャのドキュメンテーション
利用者に合わせたサイトストラクチャの記述
ナビゲーション設計
72｜ナビゲーション定義
サイト内でのユーザーの道筋
- 階層型ナビゲーション
- 機能ナビゲーション
- 関連ナビゲーション
- ダイレクトナビゲーション
- パンくずナビゲーション
- ステップナビゲーション
- ダイナミックナビゲーション
73｜3つのナビゲーションエリア
効果的なナビゲーションのためのエリア定義
- グローバルエリア
通常はヘッダとフッタ - コンテンツエリア
各ページ内容 - ロカールエリア
カテゴリ内で共通に使用されるエリア
74｜グローバルエリア
サイト内で常に表示されるエリア
75｜コンテンツエリア
ページのコンテンツが配置されるエリア
76｜ローカルエリア
カテゴリ内でのナビゲーションが配置されるエリア
77｜7つのナビゲーション
サイト内における基本的なナビゲーション
- 階層型ナビゲーション
サイトストラクチャに従ってページを遷移するためのナビゲーション - 機能ナビゲーション
会員機能、検索機能など - 関連ナビゲーション
そのページのコンテンツに関連したナビゲーション - ダイレクトナビゲーション
特定のページへ直接リンクを用意するナビゲーション - パンくずナビゲーション
サイト内での位置を表示し、それらの経路へ遷移できるようにするナビゲーション - ステップナビゲーション
登録手続きなど、一連のページ遷移を示すナビゲーション - ダイナミックナビゲーション
検索など、動的に生成するナビゲーション
78｜階層型ナビゲーション
ユーザーの行き来をつかさどるサイト内の廊下
79｜機能ナビゲーション
サイト内共通の機能やコンテンツに対するナビゲーション
80｜関連ナビゲーション
主動線とは別に用意されるナビゲーション
81｜ダイレクトナビゲーション
サイト内の任意の位置に直接誘導するナビゲーション
82｜パンくずナビゲーション
現在地を表示するためのナビゲーション
83｜ステップナビゲーション
一続きのページ群を移動するためのナビゲーション
84｜ダイナミックナビゲーション
動的生成されるナビゲーション
85｜先進的なナビゲーション
ナビゲーションの新しい試み
ラベル設計
86｜ラベル定義
サイト内の見出し文言を定義する
- メニューなどのカテゴリ名称
- リンクやボタンなどの名称
87｜メニューラベル
メインナビゲーション・ローカルナビゲーションで用いられるラベル
- そのラベル名で下位階層にある項目を予測できるか
- 他のラベルとの違いを理解できるか
88｜ナビゲーションラベル
ボタンやリンクなどのラベル
- 次に行いたい行動を示せているか
- 全体を通じて一貫しているか
89｜見出しや文章の統一
用語や同義語の表記を整理する
- 社内用の用語を避ける
- 技術/専門用語/安易なカタカナ用語は避ける
- 文脈に依存した表現は避ける
90｜ラベル定義プロセス
複数案の比較検討からラベルを定義する
画面設計
91｜ページデザイン
ページデザインの検討要素
- ユーザエクスペリエンスから考えたページデザイン
ページ単体ではなく、その訪問経路、その後の経路の想定を行った上でのページデザインが必要 - ページタイプから考えたページデザイン
ポータル型、リスト型、コンテンツ型、機能型 - 各ページでの文章構造
大見出し、小見出し、本文など、サイト内を通して定める - ナビゲーションエリア定義
- ドキュメンテーション
ワイヤーフレームを作成する - ユーザーインターフェイス
リンクやボタンの形状、フォームやメニューなどの操作要素など - グラフィックデザイン
色彩計画、タイポグラフィ、平面構成など - テクノロジー
JavaScript など
92｜Webエコシステムから考えたページデザイン
訪問経路から考えるページデザイン
グローバルエリア
- サイトロゴ、ヘッダのデザインなどでサイトのアイデンティティを示す
- メインナビゲーションでサイトの全体像を示す
- ユーザは自分の位置を把握するためにグローバルエリアの内容を用いる
コンテンツエリア
- ユーザが利用したコンテンツそのもの
- 広告やナビゲーションなどと切り分けて、どこからどこまでがコンテンツなのかを明確にしておく
ローカルエリア
- サブナビゲーション、関連ナビゲーションが置かれる
- ページコンテンツと同列のコンテンツ、関連するコンテンツを示す
- そのページ内容に関心を持ってもらったユーザに対し、次にとりうる道筋を示す働きを持つ
- ユーザの利便性の観点と、事業主体の意図とを整理してナビゲーションを用意する
93｜ユーザーエクスペリエンスフローとページデザイン
コンテンツモデルから考えるページデザイン
「そのページを見た後にユーザは何を見たいのか、何をしたいのか」を意識する。
94｜ページタイプ
画面の役割を確認する
- ポータル型
そのカテゴリには何があるのかを提示する役割が最も重要 - リスト型
ユーザが何を持って情報を選別するかという観点でリストの項目を選定する - コンテンツ型
ページごとに執筆・デザインが行われる - 機能型
機能ごとに画面フローや要件定義がなされる
95｜ポータル型ページ
トップページやカテゴリトップページ
96｜リスト型ページ
情報の一覧を示すページ
97｜コンテンツ型ページ
情報あるいは機能そのものが格納されるページ
98｜各ページの情報構造
情報の論理構造を定義する
99｜ユーザーインターフェイスデザイン
UI設計のポイント
100｜ワイヤーフレーム
各画面の機能と要素の定義