12月の授業日記

12/5 情報設計

 

情報設計(インフォメーション・秋テクチャー)

Webは物理的にページ遷移を行えず、情報にたどり着きづらいため、以下の設計=情報設計が必要

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

ナビゲーション

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

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

ナビゲーションの種類

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

  • 最重要なトップ下第一階層のカテゴリーのナビ
  • 全てのページで常時表示される
  • スクロール不要な同じ位置に配置される

ローカルナビゲーション

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

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

  • ページ要素が多い場合、見出しとリンク(ページ内リンク)が必要

ユーティリティーナビ

  • 重要度は低いが常時表示が必要な項目のナビ

パンくずリスト

  • 階層が追えるナビゲーションリスト

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

水平型ナビ

  • ページ上部につければスクロール不要で使い勝手が良い
  • ページ幅の制約を受けるので項目数・文字数に制限

ファーストビューエリアの同じ位置に配置すればスムーズに遷移できるためグローバルナビゲーションに用いられる

垂直型ナビ

  • 項目数の増減に柔軟に対応できる
  • 下部になるとスクロールが必要など操作性に差が出る

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

プルダウンメニュー

  • 水平・垂直のメリットを組み合わせられる
  • 狭い領域で多くの項目にアクセスできる
  • 操作しづらくならないよう注意が必要

既存サイトの分析と提案

コンテンツの分析

  •  シンプルなかんじのみやすさ 色がたくさんあって見辛い
  •  ローカルナビゲーション
  •  在校生のコメントが少ない

きょうのひとこと

こんだけ情報があるとせいりするのがたいへん

12/12 情報設計

マルチデバイス対応

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

セパレートURL

デバイス毎のページを用意し切り替える
レスポンシブwebデザイン 同一htmlをCSSによりデバイス毎のレイアウトに切り替える
動的配信 デバイスに応じて異なるファイルを出力

レスポンシブウェブデザイン

デバイスの幅に応じてメディアクエリで分岐させCSS指定を行う

メディアクエリ

  • デバイスの特性によりCSSで指定を分岐させる方法
  • 画面の幅に応じてレイアウトを切り替えるブレークポイントを置き、異なるCSS指定を行う

既存コンテンツの分析知提案

コンテンツの分析

  • ごにゃごにゃすてみづらい
  • スクロールが大変
  • 学科コースがわかりづらい
  • スマートフォンレイアウトがない
  • 作品紹介がない
  • 具体的な内容がわかりづらい

課題と解決策

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

ターゲットユーザー

  • 高校生
  • 男女比
  • 神奈川県在住
  • 趣味

提案すげきコンテンツ

  • 作品紹介となるもの
  • 学校生活の雰囲気や授業内容がイメージできるもの
  • ターゲットユーザーーの興味をひくもの
  • ローカル性をもったもの

企画コンテンツ案

やりたいもの

  • 動画をいれる
  • 授業毎のしょうかい 感想 教師 作品
  • 学費中身紹介

実現できそうなもの

  • 授業のSTEPみたいな図
  • 安田先生が全体的に作りなおす

ウェブ制作の流れ

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

XDでは1~3をリンクをつけて作成できる

サイトマップ

 

きょうのひとこと

XDすきなのでがんばります

(C)2019 自分の名前を入れる