12月の授業日記

12/05 情報設計

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

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

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビ

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

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

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

ユーティリティーナビ

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

パンくず

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

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

水平型ナビ

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

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

垂直型ナビ

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

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

 

既存サイトの分析と提案

コンテンツの分析

<改善案>

  • テーマカラーを決め、バナーやナビゲーションのデザインをそれに統一する、もしくは学科ごとのカラーを決め、その学科ごとでサイトを作ると見やすいのではないか。(現在もカラーで分けられているが、全体的に色味がなく楽しそうなイメージではない)
  • オープンキャンパスの日程が一番下にあるのは不便なので、もう少し上に持ってきたらどうか。
  • 授業内容やカリキュラムを週にどれくらいの頻度で行うのか、表などであるとわかりやすいのではないか。
  • 学生の作品や学科ごとの先生の紹介などが少ないので入学を考えている方にわかりやすいように、そのようなコンテンツをもっと増やすべきなのでは。

<良いと思ったところ>

  • ファーストビューに学生の写真が多く、学校のイメージがしやすいのは良いことだと思った。

今日の一言

様々なサイトを見比べることで改善案や良かったところなどに気づけて良かったと思います。また、どうすればもっと見やすくなるのかを考えることも大切だと思いました。

12/12 情報設計

マルチデバイス対応

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

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

レスポンシブwebデザイン

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

メディアクエリ

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

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

コンテンツの分析

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

課題と解決策

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

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

ターゲットユーザー

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

提案すべきコンテンツ

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

企画コンテンツ案

やりたいもの

  •  新横浜駅グルメガイド
  •  新横浜SNS映え撮影スポットの紹介
  •  駅ナカ人気コスメ紹介

実現できそうなもの

  •  OB・OG、在学生の作品集・合同作品紹介
  •  授業を表にし授業の内容を担当の先生が紹介するコーナー
  •  作品紹介の説明にどの授業で作ったものかを表示する

web制作の流れ

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

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

サイトマップ

今日の一言

XDからサイトを制作するのは初めてなので、少し不安がありますが、サイトマップを考えることで画面遷移がわかりやすくなるので、活用していきたいと思います。