12/05 情報設計
情報設計（インフォメーション・アーキテクチャー）
webは物理的にページ遷移を行えず情報にたどり着きづらいため、以下の設計＝情報設計が必要- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクとわかるデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページで同じ法則性を持つ
ナビゲーションの種類
グローバルナビゲーション
- 最重要なトップ下一階層のカテゴリーナビ
- 全てのページで常時表示される
- スクロール不要な同じ位置に配置される
ローカルナビゲーション
- カテゴリー内を遷移するためのナビ
コンテンツ内ナビゲーション
- ページ内要素が多い場合、見出しとリンク（ページ内リンク）が必要
ユーティリティーナビ
- 重要度は低いが常時表示が必要なナビ
パンくずリスト
- 階層が追えるナビゲーションリスト
ナビゲーションのレイアウト
水平型ナビ
- ページ上部につければスクロール不要で使い勝手が良い
- ページ幅の制約を受けるので項目数・文字数に表現
垂直型ナビ
- 項目数の増減に柔軟位対応できる
- 下部になるとスクロールが必要など操作性に差が出る
プルダウンメニュー
- 水平・垂直のメリットを組み合わせられる
- 狭い領域で多くの項目にアクセスできる
- 操作しづらくないよう注意が必要
既存サイト分析と提案
コンテンツの分析
- 全体的に見づらい
- 学科の中にコースで分かれていることがわかりづらい
- 写真が多すぎて情報が混乱している
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがある
| セパレートURL | デバイス毎のページを用意し切り替える |
|---|---|
| レスポンスwebデザイン | 同一htmlをCSSによりデバイスごとのレイアウトに切り替える |
| 動的配信 | デバイスに応じて異なるファイルを出力 |
レスポンスwebデザイン
デバイスの幅に応じてメディアクエリで分岐させCSS指定を行うメディアクリ
- デバイスのと癖によりCSSで指定を分岐させる手法
- 画面の幅に応じてレイアウトを切り替えるブレークポイントを置き、異るCSS指定を行う
