12/05 情報設計
情報設計（インフォメーション・アーキテクチャー）
webは物理的にページ移を行えず情報に辿り着きづらいため、以下の設計＝情報設計が必要
- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクと判るデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページで同じ法則性を保つ
ナビゲーションのレイアウト
水平型ナビ
- ページ上部につければスクロール不要で使い勝手が良い
- ページ幅の制約を受けるので項目数・文字数に制限
ファーストビューエリアの同じいちに配置すればスムーズに移できるためグローバルナビゲーションに用いられる
垂直型ナビ
- 項目数の増減に柔軟に対応できる
- 下部になるとスクロールが必要など操作性に差が出る
変更の可能性のあるローカルナビなどに用いられる
プルダウンメニュー
- 水平・垂直のメリットを組み合わせられる
- 狭い領域で多くの項目にアクセスできる
- 操作しづらくないよう注意が必要
既存サイト分析と提案
コンテンツの分析
- 写真が多く学生生活が伝わる
- ごちゃごちゃして見辛い ・情報設計の見直し
- スクロールが大変
- 学科・コースが分かりづらい ・プルダウンメニュー
- スマートフォンレイアウトがない ・スマホレイアウトの導入
- 作品紹介がない ・スペシャルコンテンツ
- 具体的な授業内容が分かりづらい
スペシャルコンテンツの紹介
ターゲットユーザー
- 高校生
- 男女比
- 趣味・嗜好
- 神奈川県在住
提案すべきコンテンツ
- 作品紹介となるもの
- 学校生活の雰囲気や授業内容がイメージできるもの
- ターゲットユーザーの興味を惹くもの
- ローカル性を持ったもの
企画コンテンツ案
やりたいもの
- 横アリくんにインタビュー
実現できそうなもの
- 先生たちにインタビュー
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがある
| セパレートURL | デバイス毎のページを用意し切り替える |
|---|---|
| レスポンシブwebデザイン | 同一htmlをCSSによりデバイスごとのレイアウトに切り替える |
| 動的配信 | デバイスに応じて異なるファイルを出力 |
レスポンシブwebデザイン
デバイスの幅に応じてメディアクエリで分岐させCSS指定を行う
メディアクエリ
- デバイスの特性によりCSSで指定を分岐させる手法
- 画面の幅に応じてレイスとを切り替えるブレークポイントを置き、異なるCSS指定を行う