「IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 」を元に、要約メモしておきたいと思います。

91_ページデザイン

ページデザインの検討要素

• ユーザエクスペリエンスから考えたページデザイン
  ページ単体ではなく、その訪問経路、その後の経路の想定を行った上でのページデザインが必要
• ページタイプから考えたページデザイン
  ポータル型、リスト型、コンテンツ型、機能型
• 各ページでの文章構造
  大見出し、小見出し、本文など、サイト内を通して定める
• ナビゲーションエリア定義
  
• ドキュメンテーション
  ワイヤーフレームを作成する
• ユーザーインターフェイス
  リンクやボタンの形状、フォームやメニューなどの操作要素など
• グラフィックデザイン
  色彩計画、タイポグラフィ、平面構成など
• テクノロジー
  JavaScript など

92_Webエコシステムから考えたページデザイン

訪問経路から考えるページデザイン

グローバルエリア

• サイトロゴ、ヘッダのデザインなどでサイトのアイデンティティを示す
• メインナビゲーションでサイトの全体像を示す
• ユーザは自分の位置を把握するためにグローバルエリアの内容を用いる

コンテンツエリア

• ユーザが利用したコンテンツそのもの
• 広告やナビゲーションなどと切り分けて、どこからどこまでがコンテンツなのかを明確にしておく

ローカルエリア

• サブナビゲーション、関連ナビゲーションが置かれる
• ページコンテンツと同列のコンテンツ、関連するコンテンツを示す
• そのページ内容に関心を持ってもらったユーザに対し、次にとりうる道筋を示す働きを持つ
• ユーザの利便性の観点と、事業主体の意図とを整理してナビゲーションを用意する

93_ユーザーエクスペリエンスフローとページデザイン

コンテンツモデルから考えるページデザイン

「そのページを見た後にユーザは何を見たいのか、何をしたいのか」を意識する。

94_ページタイプ

画面の役割を確認する

• ポータル型
  そのカテゴリには何があるのかを提示する役割が最も重要
• リスト型
  ユーザが何を持って情報を選別するかという観点でリストの項目を選定する
• コンテンツ型
  ページごとに執筆・デザインが行われる
• 機能型
  機能ごとに画面フローや要件定義がなされる

95_ポータル型ページ

トップページやカテゴリトップページ

96_リスト型ページ

情報の一覧を示すページ

97_コンテンツ型ページ

情報あるいは機能そのものが格納されるページ

98_各ページの情報構造

情報の論理構造を定義する

99_ユーザーインターフェイスデザイン

UI設計のポイント

100_ワイヤーフレーム

各画面の機能と要素の定義