12月の授業日記

12/3　情報設計 

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

情報設計 

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

ナビゲーション 

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

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

ナビゲーションの種類 

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

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

 ローカルナビゲーション

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

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

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

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

水平型 

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

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

垂直型 

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

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

プルダウンメニュー 

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

 既存サイト分析と提案

  • デザイン性があまり感じられない
  • 真面目さが伝わる
  •  見たい内容を探すのが少し大変

今日の一言 

他のサイトと見比べると意外と違いがあるもんなんだなと感じた 

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

マルチデバイス対応 

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

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

レスポンシブwebデザイン 

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

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

 コンテンツの分析

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

課題と解決策 

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

 

 企画コンテンツ案

やりたいもの 

  • コンテンツ内ナビの作成
  • スマホレイアウトの導入
  •  サイトに色彩を加える
  •  作品紹介のコーナーを作成
  • プルダウンメニューの作成 

実現性の高いもの 

  • コンテンツ内ナビの作成
  • スマホレイアウトの導入
  • プルダウンメニューの作成 

 web制作物の流れ

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

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

今日の一言 

最初らへんが難しかったです。 

12/24　ワイヤーフレーム 

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

今日の一言 

xDはやはりむずいなとなる