12月の授業日記

12/3 情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー

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

 既存サイト分析と提案

コンテンツの分析

• 情報が多い
• 学習内容がわかりやすい
•  デジタル的と言うか最新的ではある

今日の一言

調べるのがめちゃ大変だった 

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

マルチデバイス対応

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

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

レスポンシブwebデザイン 

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

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

コンテンツの分析

• 工夫が足りない
•  質素にも見える
• 堅苦しく
• 情報が少ない
• どこが重要な情報かがわかりにくい

課題と解決策

• 工夫が足りない 
  •  要素を増やす
• 質素にも見える 
  •  情報を増やす
• 堅苦しく 
  •  柔らかさ、親やすさを入れる
• 情報が少ない
  •  何が必要な情報かを見極める
• どこが重要な情報かがわかりにくい
  • 何が必要な情報かを見極める

企画コンテンツ案

やりたいもの

 二次創作、コスプレ、イラスト展示会（販売も含む）

作品紹介

漫画掲載 

実現性の高いもの

 ラジオ

イラストランキング（定期開催）

ファッション紹介（コスプレも含む）

web制作物の流れ

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

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

今日の一言

上手にできました 

12/24ワイヤーフレーム

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

今日の一言

上手にできました。