12/3  情報設計

ウェブは物理的にページ移が行えない

情報設計

1. 情報自体の整理＝カテゴライズ
2. 到達手段の整備＝ナビゲーション 

 ナビゲーション

ナビゲーションに求められる要件

• リンクの存在・リンクと判るデザイン
• スクロールせずに操作可能＞ファーストビューエリア
• 各ページで同じ法則性を保つ 

 ナビゲーションの種類

グローバルナビゲーション

• トップ第一階層のナビ
• 全てのページのスクロール不要な同じ場所に配置

ローカルナビゲーション

• カテゴリー内を移動するためのナビ

 コンテンツ内ナビゲーション

• ページ内要素が多い場合の見出しとリンクを兼ねたもの

ナビゲーションのレイアウト

水平型 

主にグローバルナビゲーションに用いられる

• スクロール不要で使い勝手に優れる。
• 項目数・文字数の制約をうける

垂直型 

変更の可能性のあるローカルナビなどに用いられる

• 項目数の増減に柔軟に対応可能
• 下部は操作性が劣る

プルダウンメニュー

• 垂直・水平のメリットを組み合わせられる
• 使いづらい側面も 

12/10　コンテンツ提案とマルチデバイス対応 

マルチデバイス対応 

デバイスによってレイアウトを切り替える主砲には以下のようなものがある

• セパレートURL＞デバイスごとのページを用意し切り替える
• レスポンシブWEBデザイン＞同一htmlをデバイスごとのcssで切り替え
•  動的配信＞DBでデバイスに応じて異なるファイルを出力

 レスポンシブWEBデザイン

メディアクエリでデバイスの幅などに応じ条件分岐させる

既存コンテンツ分析と提案 

コンテンツの分析 

• 写真が多く学生生活が伝わる
• ごちゃごちゃしていて見づらい
• スクロールが大変
• 学科・コースがわかりづらい
• スマートフォンレイアウトがない
• 作品紹介がない
• 具体的な授業内容がわかりづらい

 課題と解決策

• ごちゃごちゃして見づらい
  •  情報設計の見直し
• スクロールが大変
  •  コンテンツ内ナビ
• 学科・コースがわかりづらい
  • プルダウンメニュー
• スマートフォンレイアウトがない
  • スマホレイアウトの導入
• 作品紹介がない・具体的な授業内容がわかりづらい
  • スペシャルコンテンツの導入

企画コンテンツ  

やりたいもの

•  学校内の設備紹介
• 作品展示
• ちょっとした授業公開

  実現生の高いもの

• 学校内の設備紹介
• 作品展示

web制作物の流れ

1. サイトマップ（サイト全体の構成）
2. ワイヤーフレーむ（ページの構成）
3. デザインカンプ（ページのデザイン）
4. コーディング（実ページの作成）

 XDでは１〜３をリンクをつけて作成できる

今日の一言

 難しくてできてるか不安です。

12/24　ワイヤーフレーム 

• ページをデザインする元となる設計図
• ナビゲーションや本文の基本的なレイアウトをここで決めておく
• 好き嫌いが影響を与えないよう デザインと切り離して設計

今日の一言 

冬休みで追いつきたいです。