12月の授業日記

12/3 情報設計 

 ウェブは物理的にページ遷移が行えない

情報設計 

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

ナビゲーション 

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

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

ナビゲーションの種類 

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

• トップ第一層のナビ
•  全てのページのスクロール不要な同じ場所に配置

ローカルナビゲーション 

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

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

• ページ内要素が多い場合の見出しとリンクを兼ねたもの

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

水平型 

 主にグローバルナビゲーションに用いられる

• スクロール不要で使い勝手に優れる
•  項目数・文字数の制約を受ける

垂直型 

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

• 項目数の増減に柔軟に対応可能
•  下部は操作性に劣る

 プルダウンメニュー

• 垂直・水平のメリットを組み合わせられる
•  使いづらい側面も

既存サイト分析と 提案

コンテンツの分析 

• バナーや写真の賑やかさが楽しい印象を与える
•  空間のゆとりのなさが前時代のサイトを彷彿とさせる」
•  さらにビジョンを浮かべさせやすくするために作品数を増やす

12/10  コンテンツ提案とマルチデバイス対応

マルチデバイス対応 

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

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

レスポンシブwebデザイン 

 メディアクエリでデバイスの幅などに応じ条件分離させる

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

コンテンツの分析 

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

課題と 解決策

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

企画コンテンツの導入 

やりたいもの

• 学生の声コーナー 
• 学生作品紹介 
• 卒業生インタビュー 

 実現性の高いもの

• 学生作品紹介 
• 卒業生インタビュー 
• 施設紹介 

web 制作物の流れ

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

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

きょうのひとこと 

 競合調査がとても興味深かったです。できることの中でやりたいことをすることや提案は難しいことなんだなと実感しました。

12/14  ワイヤーフレーム

• ページをデザインする元となる設計図
• ナビゲーションや本文の基本的なレイアウトをここで決めておく
•  好き嫌いが影響を与えないようデザインと切り離して設計

きょうのひとこと 

 今日はXDのコンパーネント化について初めて知ったのでよりXDでの作業が快適になりました。よりXDでの作業が捗りそうです。