12月の授業日記

12/3 情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲージョンの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー 

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

 既存サイト分析と提案

コンテンツの分析

• 写真によって校内環境が伝わる
• わかりにくい
• スマートフォンレイアウトがない
• 作品紹介がない

きょうのひとこと

タイピング疲れした。。。

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

マルチデバイス対応

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

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

レスポンシブwebデザイン

メディアクエリでデバイスの幅などに応じ状況分岐させる

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

コンテンツの分析

• 写真によって校内環境が伝わる
• わかりにくい
• スマートフォンレイアウトがない
• 作品紹介がない

課題と解決策

• わかりにくい/見にくい
  • 強弱をつける
• スマートフォンレイアウトがない
  • レイアウトの導入
• 作品紹介がない
  • 作品を載せる

   

企画コンテンツ案

やりたいもの

• 視線誘導
• 色彩統一
• ハンバーガーメニュー

実現性の高いもの

• 視線誘導
• 色彩統一
• ハンバーガーメニュー

web制作物の流れ

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

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

きょうのひとこと

res.cssがローカルディスクにないとエラーが出たので作業が滞った

12/24 ワイヤーフレーム

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

きょうのひとこと

コンポーネントの編集に手間取ってしまった