12/3 情報設計
ウェブは物理的にページ遷移が行えない
情報設計
- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクとわかるデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページで同じ法則性を保つ
ナビゲーションの種類
グローバルナビゲーション
- トップ第一階層のナビ
- 全てのページのスクロール不要な同じ場所に配置
ローカルナビゲーション
- カテゴリー内を移動するためのナビ
コンテンツ内ナビゲーション
- ページ内要素が多い場合の見出しとリンクを兼ねたもの
ナビゲーションのレイアウト
水平型
主にグローバルナビゲーションに用いられる
- スクロール不要で使い勝手に優れる
- 項目数・文字数の制約を受ける
垂直型
変更の可能性のあるローカルナビなどに用いられる
- 項目数の増減に柔軟に対応可能
- 下部は操作性が劣る
プルダウンメニュー
- 垂直・水平のメリットを組み合わせられる
- 使いづらい側面も
既存サイト分析と提案
コンテンツの分析
12/10 コンテンツ提案とマルチデバイス対応
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがある
- セパレートURL＞デバイスごとのページを用意し切り替える
- レスポンシブwebデザイン＞同一htmlをデバイスごとのCSSで切り替え
- 動的配信＞DBでデバイスに応じて異なるファイルを出力
レスポンシブwebデザイン
メディアクエリでデバイスの幅などに応じ条件分岐させる
既存コンテンツ分析と提案
コンテンツの分析
- ブログや多くの写真で学校生活が伝わる
- 情報にまとまりがない
- フォントや文字色に統一感がない
- 学科やコースがわかりづらい
- スマートフォンレイアウトがない
- スクロールしないと内容がわからない
- 作品紹介がない
- 具体的な授業内容がわかりづらい
課題と解決策
- 情報にまとまりがない
- 情報設計の見直し
- フォントや文字色に統一感がない
- １つまたは同系統に定める
- 学科やコースがわかりづらい
- プルダウンメニュー
- スマートフォンレイアウトがない
- スマホ版レイアウトの導入
- スクロールしないと内容がわからない
- コンテンツ内ナビ
- 作品紹介がない/具体的な授業内容がわかりづらい
- スペシャルコンテンツ
企画コンテンツ案
やりたいもの
- 学生作品集 / 授業紹介
- 同一系統の色やフォントを使う
- プルダウンメニューで見やすくする
- スマホ版ではハンバーガーメニューに切り替える
実現性の高いもの
- 学生作品集 / 授業紹介
- 同一系統の色やフォントを使う
- プルダウンメニューで見やすくする
web制作物の流れ
- サイトマップ（サイト全体の構成）
- ワイヤーフレーム（ページの構成）
- デザインカンプ（ページのデザイン）
- コーディング（実ページの作成）
XDでは1〜3をリンクをつけて作成できる
きょうのひとこと
webは考えることも技術もたくさん必要で大変だなと思った。
12/24 ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的なレイアウトをここで決めておく
- 好き嫌いが影響を与えないようデザインと切り離して設計
今日のひとこと
XDは度々他の授業でも使ってきましたが“コンポーネント化”や“１つ前のアートボード”の存在は知りませんでした。もっと早く知りたかった。