12月の授業日記

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

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

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

ユーリティリティナビ

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

パンくずリスト

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

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

水平型ナビ

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

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

垂直型ナビ

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

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

プルダウンメニュー

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

きょうのひとこと

実際のwebサイトを作るときの作業ができて非常に楽しかったです。

PCサイトとモバイルサイトの作り分けは、大変な作業だと思っていたので、想像していたよりも簡単にできて驚いています！

今までの授業の内容も面白かったですが、実際の作る工程に沿ってページを作ったり作業する工程がとても楽しかったです！ 

マルチデバイス対応

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

レスポンシブwebデザイン

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

メディアクエリ

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

既存サイト分析と提案

コンテンツの分析

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

課題と解決策

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

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

ターゲットユーザー

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

提案すべきコンテンツ

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

企画コンテンツ案

やりたいもの

• 情報量が多いので整理し直す
• 授業風景の写真などの追加
• 学生紹介の追加、一日のスケジュールのモデル
• 取得できる資格の掲載
• 学生作品の掲載
• もっと先生紹介をのせる

実現できそうなもの

• 学生紹介の追加、一日のスケジュールのモデル
• 情報量が多いので整理し直す
• 取得できる資格の掲載

Web制作物の流れ

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

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

サイトマップ

きょうのひとこと

YDAのサイトがごちゃごちゃしてるとか言ったけど情報整理するのがめっちゃ大変でした。すいませんでした！

web関係の仕事をしたいと思っているので、実際の作業工程に則っての授業が楽しい！！！！です！！！！！！！

でもXDは使い慣れる必要がありそう…。