12月の授業日記

12/3 情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー

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

既存サイト分析と提案

コンテンツの分析

今日の一言

〜〜ナビなどカタカナ用語が多く混乱してきました。

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

マルチデバイス対応

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

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

レシポンシブwebデザイン

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

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

コンテンツの分析

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

課題と解決策

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

企画コンテンツ案

やりたいもの

  • 学科ごとの作品紹介(卒業生の作品も含む)
  • 具体的な授業内容と授業風景

実現性の高いのもの

  • 学科ごとの作品紹介(卒業生の作品も含む)

web制作物の流れ

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

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

今日の一言

webデザインに関しての知識が皆無なので難しい...。

12.24 ワイヤーフレーム

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

今日の一言

今回はXDでの作業がメインだったため割とスムーズに作業することができた。