12月の授業日記

12/3　情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー

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

既存サイト分析と提案

コンテンツの分析

  • 作品を多くのせてどのようなものを作っているかがわかるといい
  •  ページがごちゃごちゃしているのでまとめるべき

今日の一言

トップページがいまだに直らない。。。 

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

マルチデバイス対応

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

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

レスポンシブwebデザイン

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

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

コンテンツの分析

  • 写真が多く学生生活が伝わる
  • ごちゃごちゃしていて見づらい
  • スマートフォンレイアウトがない
  • 作品紹介がない

課題と解決策

  • ごちゃごちゃしていて見づらい
    • 情報設計見直し、デザインの見直し
  • スマートフォンレイアウトがない
    • スマートフォン用レイアウトの追加
  • 作品紹介がない
    • スペシャルコンテンツを作り各学科に作成

企画コンテンツ案

やりたいもの

  • 作品紹介ページ
  • 授業内容がわかるページ
  • 在学生用の意見箱 

実現性の高いもの

  •  作品紹介ページ→学科ごとのページに作成
  • 授業内容がわかるページ
  • コロナなので学校資料をwebに追加（資料請求ではなく） 

web制作物の流れ 

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

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

今日の一言

コンテンツが増えてきたので、整理していきたい。

12/24 ワイヤーフレーム

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

今日の一言

XDで使ったことのない機能を初めて使った。

aaa