12/9 情報統計
ウェブは物理的にページ遷移が行えない
情報統計
- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクとわかるデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページ同じ法則性を保つ
ナビゲーションの種類
グローバルナビゲーション
- トップ第一階層のナビ
- 全てのページのスクロール不要な同じ場所に配置
ローカルナビゲーション
コンテンツ内ナビゲーション
- ページ内要素が多い場合の見出しとリンクを兼ねたもの
ナビゲーションのレイアウト
水平型
主にグローバルナビゲーション
- スクロール不要で使い勝手に優れる
- 項目数・文字数の制約を受ける
垂直型
変更の可能性がるローカルナビなど
プルダウンメニュー
- 垂直・水平のメリットを組み合わせられる
- 使いづらい側面も
既存サイト分析と提案
コンテンツの分析
きょうのひとこと
少し難しかった。
12/16 コンテンツ提案とマルチデバイス対応
マルチデバイス対応
| セパレートURL |
デバイスごとのページを用意し切り替える |
| レスポンシブWebデザイン |
同一ページをデバイス毎のCSSで切り替え |
| 動的配信 |
DBで切り替える |
レスポンシブwebデザイン
メディアクエリでデバイス幅に応じCSSを切り替え
既存コンテンツの分析と提案
コンテンツの分析
- 写真が多く学生生活が伝わる
- ごちゃごちゃして見辛い
- スクロールが大変
- 学科・コースが判りづらい
- スマートフォンレイアウトがない
- 作品紹介がない
- 具体的な授業内容が判りづらい
課題と解決策
- ごちゃごちゃして見辛い→情報統計の見直し
- スクロールが大変→コンテンツ内ナビ
- 学科・コースが判りづらい→プルダウンメニュー
- スマートフォンレイアウトがない→スマートフォンレイアウトの導入
- 作品紹介がない・具体的な授業内容が判りづらい→スペシャルコンテンツの導入
企画コンテンツ案
やりたいもの
実現性の高いもの
web制作物の流れ
- サイトマップ（サイト全体の構成）
- ワイヤーフレーム（ページの構成）
- デザインカンプ（ページデザイン）
- コーディング（実ページの制作）
XDでは１〜３をリンクをつけて作成できる
きょうのひとこと
まとめに苦労した。
12/22 ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的なレイアウトをここで決めておく
- 好き嫌いの影響がないようデザインと切り離して設計
きょうのひとこと
作業量が多く難しかった。