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

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

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

• カテゴリー内を遷移するためのレシピ

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

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

ユーティリティーナビ

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

パンくずリスト

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

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

水平線ナビ

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

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

垂直型ナビ

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

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

ブルダウンメニュー

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

既存サイトの分析

マルチデバイス対応

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

今日のひとこと

まとめを書き込むのに優先してしまい、競合のレポートがまだやっていません。すみません・・・。

全然手をつけていないので家でやってきます

コンテンツの分析

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

課題と解決案

• レイアウトにまとまりがない
  • 情報設計のやり直し
• スクロールが大変
  • コンテンツナビ
• 学科・コースがわかりづらい
  • プルダウンメニュー
• 写真が古い
  • 写真の更新
• 作品紹介がない
  • スペシャルコンテンツ

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

ターゲットユーザー

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

提案すべきコンテンツ

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

企画コンテンツ案

やりたいもの

• 書体を統一させたい
• 卒業生で活躍している人を紹介したい。
• レイアウトをスッキリさせたい
• この学校の強みである液タブ導入をもう少し強調させたい

実現しそうなもの

• レイアウトの修正
• 作品紹介
• 保護者専用のサイトと高校生向けのサイトを作る。

web制作の流れ

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

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

今日のひとこと

web応用でXDを使うとは思いませんでした！これからwebデザインしていく上で必要なのであればあらかじめやり方を復習しようと思います。来年もよろしくお願いします！