12月の授業日記

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

ウェブは物理的にページ遷移を行えず情報に辿りつきずらいため、以下の設計=情報設計が必要

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

ユーティリティナビ

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

パンくずリスト

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

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

水平型ナビ

• ページ上部につければスクロール不要で良い

• ページ幅の制約を受けるので項目数・文字数に制限

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

垂直型ナビ

• 項目数の増減に柔軟に対応できる

• 下部になるとスクロールが必要などの操作性に差が出る

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

プルダウンメニュー

• 水平・垂直のメリットを組み合わせられる

• 狭い領域で多くの項目にアクセスできる

• 操作しずらくないよう注意が必要

既存サイト分析と提案

コンテンツの分析

• 大々的な作品が無い
• ゼミで一体どんな内容をやっているかが判ると良いかも？
• 情報の整理整頓も必要かと思われ

きょうのひとこと

眠気に次は負けない！

マルチデバイス対応

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

レスポンシブwebデザイン

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

メディアクエリ

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

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

コンテンツの分析

• 学生の写真の写真が多く学校生活は伝わる
• まとまっていなくて見辛い
• スクロール回数が多くて大変
• 学科・コースがわかりづらい
• スマートフォンレイアウトが存在しない
• 作品紹介が少ない（あるのかも不明）
• 具体的な授業内容がわかりづらい

課題と解決策

• まとまっていなくて見辛い
  • 情報設計の見直し
• スクロール回数が多くて大変
  • コンテンツ内ナビ
• 学科・コースがわかりづらい
  • プルダウンメニュー
• スマートフォンレイアウトが存在しない
  • スマートフォンレイアウトの導入
• 作品紹介が少ない（あるのかも不明）・具体的な授業内容がわかりづらい
  • スペシャルコンテンツ

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

ターゲットユーザー

• 高校生
• 男女の比率
• 趣味・嗜好
• 神奈川県民または外県

提案すべきコンテンツ

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

企画コンテンツ案

やりたいもの

• 新横浜周辺のグルメ
• 横浜アリーナイベントサポート
• 職員の日記(職員の意思によります)
• 生徒に突撃インタビュー

やれそうなもの

• 作品集
• 授業紹介or授業スケジュール
• 職員の日記(職員の意思によります)
• 生徒に突撃インタビュー(意思による)

web制作物の流れ

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

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

サイトマップ

きょうのひとこと

XDのプレビューで動く感覚がたまらなく好きです