12/05 情報設計
情報設計(インフォメーション・アーキテクチャー)
webは物理的にページ遷移を行えず情報にたどり着きづらいため、以下の設計=情報設計が必要
1,情報自体の整理=カテゴライズ
2,到達手段の整備=ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
ナビゲーションの種類
グローバルナビゲーション
ローカルナビゲーション
コンテンツナビゲーション
ユーティリティーナビ
パンくずリスト
ナビゲーションのレイアウト
水平型ナビ
垂直型ナビ
変更の可能性のあるローカルナビなどに用いられる
ブルダウンメニュー
既存サイトの分析と提案
コンテンツの分析
課題と解決
- ごちゃごちゃして見づらい • 情報設計の見直し
- スクロールが大変 •コンテンツ内ナビ
- 学科・コースがわかりにくい •ブルンダウンメニュー
- スマートフォンレイアウトがない •スマホレイアウト導入
- 作品紹介がない・具体的な授業内容がわかりづらい •スペシャルコンテンツ
スペシャルコンテンツの提案
ターゲットユーザー
提案すべきコンテンツ
企画コンテンツ案
やりたいもの
実現
- 年1 学食ポスターコンテスト
- 2
- 3
web制作物の流れ
- サイトマップ(サイト全体の構成)
- ワイヤーフレーム(ページの構成)
- デザインカンプ(ページのデザイン)
- コーディング(実ページの作成)
XDでは1〜3をリンクをつけて作成できる
きょうのひとこと
逆になってます。
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがあるセパレートURL | デバイス毎のページを用意し切り替える |
---|---|
レスポンシブwebデザイン | 同一htmlをCSSによりデバイスごとのレイアウトに切り替える |
動的配信 | デバイスに応じて異なるファイルを出力 |
レスポンシブwebデザイン
デバイスの幅に応じてメディアクエリで分岐させCSSで指定を行う