12月の授業日記

12/3   情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー

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

既存サイト分析と提案

コンテンツの分析

• 情報量が多い
• 学生の情報をもっとあった方がいい
•  もっと爽やかなデザインがいいと思う

感想

打つことが多くて大変だった

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

マルチデバイス対応

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

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

レスポンシブwebデザイン

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

既存コンテンツと提案

コンテンツの分析

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

課題と解決策

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

企画コンテンツ案

やりたいもの

• 学生作品紹介
• イラストコンテスト
•  おすすめ学科診断

実用性の高いもの

• 学生作品紹介
•  イラストコンテスト
• おすすめ学科診断
• 学科別に色分け

web制作物の流れ

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

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

今日の一言

始めの方が難しかった 

12/24 　  ワイヤーフレーム

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

今日の一言

マスターコンポーネント に書いたやつが反映されるのは便利でいいと思いました。