12月の授業日記

12/3　情報設計 

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

情報設計 

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

 ナビゲーション

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

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

ナビゲーションの種類

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

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

 ローカルナビゲーション

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

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

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

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

水平型 

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

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

垂直型 

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

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

 プルダウンメニュー

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

既存サイト分析と提案 

コンテンツの分析 

 今日のひとこと

 作業が遅くて最後までたどり着けなかった。つらい。

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

マルチデバイス対応 

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

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

レスポンシブwebデザイン 

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

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

コンテンツの分析 

• 写真が多く学生生活がわかる 
• ごちゃごちゃして見辛い 
• デザイン学校の要素が少ない 
• スクロールが大変 
• 学科・コースが分かりづらい　
•  作品紹介がない

 課題と解決策

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

企画コンテンツ案 

やりたいもの 

• 学生の一日の紹介ページを作る　
•  学生の作品紹介ページを作る
• 学科ごとに生徒 のインタビューページを作る

実用性の高いもの 

• 学生の1日の紹介ページ 
•  学生の作品紹介ページ
•  

 web制作物の流れ

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

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

今日のひとこと 

毎回追いつくのに必死です。