12月の授業日記

12/05 情報設計

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

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

1,情報自体の整理=カテゴライズ

2,到達手段の整備=ナビゲーション

ナビゲーション

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

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

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

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

  • カテゴリー内を遷移するためのナビ
  • コンテンツナビゲーション

  • ページない要素が多い場合、見出しとリンク(ページ内リンク)が必要
  • ユーティリティーナビ

  • 重要度は低いが常時必要な項目のナビ
  • パンくずリスト

  • 階層が追えるナビゲーションリスト
  • ナビゲーションのレイアウト

    水平型ナビ

  • ページ上部につければスクロール不要で使い勝手がいい
  • ページ幅の制約を受けるので項目数・文字数に制限
  • ファーストビューエリアの同じ位置に配置すればスムーズに遷移できるためグローバルナビゲーションが用いられる

    垂直型ナビ

  • 項目数の増減に柔軟に対応できる
  • 下部になるとスクロールが必要など操作性に差が出る
  • 変更の可能性のあるローカルナビなどに用いられる

    ブルダウンメニュー

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

    コンテンツの分析

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

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

    スペシャルコンテンツの提案

    ターゲットユーザー

  • 高校生
  • 男女比
  • 趣味・趣向
  • 神奈川県在住
  • 提案すべきコンテンツ

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

    企画コンテンツ案

    やりたいもの

  • 年1 スイーツポスターコンテスト
  • 実現

    • 年1 学食ポスターコンテスト
  • web制作物の流れ

    1. サイトマップ(サイト全体の構成)
    2. ワイヤーフレーム(ページの構成)
    3. デザインカンプ(ページのデザイン)
    4. コーディング(実ページの作成)
  • XDでは1〜3をリンクをつけて作成できる

  • きょうのひとこと

    逆になってます。

    マルチデバイス対応

    デバイスによってレイアウトを切り替える手法には以下のようなものがある
    セパレートURL デバイス毎のページを用意し切り替える
    レスポンシブwebデザイン 同一htmlをCSSによりデバイスごとのレイアウトに切り替える
    動的配信 デバイスに応じて異なるファイルを出力

    レスポンシブwebデザイン

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

    メディアクリ

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

    多分できてます、体調悪い