12/05 情報設計
情報設計（インフォメーション・アーキテクチャー）
webは物理的にページ遷移を行えず情報に辿り着きづらいため、以下の設計＝情報設計が必要
- 情報自体の管理＝カテゴライズ
- 到達手段の設備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクとわかるデザイン
- スクロールせずに操作可能礁＞ファーストビューエリア
- 各ページで同じ法則性を持つ
ナビゲーションの種類
グローバルナビゲーション
- 最重要なトップ下第一階層のカテゴリーのナビ
- 全てのページで常時表示される
- スクロール不要な同じ位置に配置される
ローカルナビゲーション
- カテゴリー内を遷移するためのナビ
コンテンツ内ナビゲーション
- ページ内要素が多い場合、見出しとリンク（ページ内リンク）が必要
ユーティリティーナビ
- 重要度は低いが常時表示が必要な項目のナビ
パンくずリスト
- 階層が追えるナビゲーションリスト
ナビゲーションのレイアウト
水平型ナビ
- ページ上部に着ければスクロール不要で使い勝手がいい
- ページ幅の制約を受けるので項目数・文字数に制限
ファーストビューエリアの同じ位置に配置すればスムーズに遷移できるためグローバルナビゲーションに用いられる
垂直型ナビ
- 項目数の増減に柔軟に対応できる
- 下部になるとスクロールの必要など操作性に差が出る
変更の可能性のあるローカルナビなどに用いられる
プルダウンメニュー
- 水平・垂直のメリットを組み合わせられる
- 狭い領域で多くの項目にアクセスができる
- 操作しづらくないよう注意が必要
既存サイト分析と提案
コンテンツの分析
- 作品紹介がない
- 学科・コース構成がわかりづらい
- スクロールが大変
- 就職・資格が弱い
- どんな職業になれるかを知りたい
- どんな資格を取れるか
- 学生生活はイメージできそう
- でも写真が古い
- 特徴がわかりづらい
- アドビを使いまくれる
- MAC支給
- 全体的に古めかしい雰囲気
- デジタルを謳うならTECH.Cくらいハイテク感が欲しい
- 学科ごとに個性がなくてわかりづらい
- 色など何か見飽きない工夫が必要
レスポンシブwebデザイン
デバイスの幅に応じてメディアクエリで分岐させCSS指定を行う
メディアクエリ
- デバイスの特性によりCSSで指定を分岐させる手法
- 画面の幅に応じてレイアウトを切り替えるブレークポイントを置き、異なるCSS指定を行う
きょうのひとこと
難しいです。専門用語的と言いますか、教科書的と言いますか、脳みそがパンクしそうな感覚があります。
素敵だと思えるサイトを作る技術力はまだまだ身についていない気がします。悔しい。
