12月の授業日記

 12/3 情報設計

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

情報設計 

１.情報自体の整理＝カテゴライズ 

２.到達手段の整備＝ナビゲーション 

ナビゲーション 

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

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

 ナビゲーションの種類

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

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

 ローカルナビゲーション

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

コンテンツ内ナビゲーター 

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

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

水平型 

 主にグローバルナビゲーターに用いられる

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

垂直型 

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

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

プルダウンメニュー 

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

既存サイト分析と提案 

コンテンツの分析 

•  卒業生の作品とが少ない  
•  シンプルって感じだった
•  就職についての詳しい話が少ない

 きょうのひとこと

ふう、、、、、（疲労） 

１２/１０ コンテンツ提案とマルチデバイス対応 

マルチデバイス対応 

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

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

レスポンシブwebデザイン 

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

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

コンテンツの分析 

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

課題と解決策 

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

企画コンテンツ案 

やりたいもの 

• 学園祭の販売物展示 
• 作品紹介 
• 授業紹介 

実用性の高いもの 

• 授業紹介 
• 作品紹介 
• 展示 

web制作の流れ 

1. サイトマップ（サイト全体の構成） 
2. ワイヤーフレーム（ページの構成） 
3. デザインカンプ （ページのデザイン） 
4. コーディング（実ページの作成） 
5. XDでは1〜３をリンクをつけて作成できる 

今日のひとこと

途中どこ打ってるかわからなくなった 

１２／２４ ワイヤーフレーム 

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

今日のひとこと 

なにこれ楽しい。