12月の授業日記

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

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

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

ユーティりティーナビ

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

パンくず リスト

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

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

水平型ナビ

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

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

垂直型ナビ

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

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

既存サイト分析と提案

コンテンツの分析

• 各コンテンツごとに色分けしてあるとわかりやすい
• 動画があると学校の特徴イメージしやすい
• コンテンツがたくさんあると調べるのが楽しくなりそう
• 画像がたくさんあると学校の雰囲気が伝わりやすい
• ローカルナビゲーションはあるとわかりやすい
• 題名は大きくするとわかりやすい

今日の一言

眠かった....。でも機能は把握し始めてきた

マルチデバイス対応

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

レスポンシブwebデザイン

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

メディアクエリ

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

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

コンテンツ分析

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

課題と解決方法

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

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

ターゲットユーザー

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

提案すべきコンテンツ

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

企画コンテンツ案

やりたいもの

• 参加ごとにポイントがたまる？！びっくりポイントサイト
• 卒業生の作品集アルバム
• 授業を動画で再現？！模擬授業
• 食堂のご飯を実際に試食できる会(メニュー付き)
• あの有名人に会えるかも？！ドリームチャレンジ⭐︎

実現 できそうなもの

• 卒業生の作品集アルバム
• 授業を動画で再現？！模擬授業

web 制作物の流れ

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

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

今日の一言

今日も眠かったけど最後までできたお。サイトマップ楽しみ♫