12/3 情報設計
ウェブは物理的にページ遷移が行えない
情報設計
- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる存在
- リンクの存在・リンクと判るデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページで同じ法則性を保つ
ナビゲーションの種類
グローバルナビゲーション
- トップ第一階層のナビ
- 全てのページのスクロール不要な同じ場所に配置
ローカルナビゲーション
コンテンツ内ナビゲーション
- ページ内要素が多い場合の見出しとリンクを兼ねたもの
ナビゲーションのレイアウト
水平型
主にグローバルナビゲーションに用いられる
- スクロール不要で使い勝手に優れる
- 項目数・文字数の制約を受ける
垂直型
変更の可能性のあるローカルナビなどに用いられる
プルダウンメニュー
- 垂直・水平のメリットを組み合わせられる
- 使いづらい側面も
12/10 コンテンツ提案とマルチデバイス対応
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがある
- セパレートURL＞デバイスごとのページを用意し切り替える手法には以下のようなものがある
- レスポンシブwebデザイン＞同一htmlをデバイスごとのCSSで切り替え
- 動的配信＞DBでデバイスに応じて異なるファイルを出力
レスポンスwebデザイン
メディアクエリでデバイスの幅に応じ条件分岐させる
既存コンテンツ分析と提案
コンテンツ分析
- 写真が多く学科の様子が伝わる
- 全体的に余白がなく分かりづらい
- スマホサイトじゃないので字が小さく見づらい
課題と解決策
- 全体的に余白がなく分かりづらい
- スマホサイトじゃないので字が小さく見づらい
企画コンテンツ案
やりたいもの
- 学科別の作品紹介ページ
- オススメ学科チャート
- イラストコースの生徒から聞いた！簡単イラスト講座
実現性の高いもの
web制作物の流れ
- サイトマップ(サイト全体の構成)
- ワイヤーフレーム(ページの構成)
- デザインカンプ (ページのデザイン)
- コーディング(実ページの作成)
XDでは１〜３をリンクをつけて作成できる
きょうのひとこと
やりたいこと、実現可能なことが思いつきません。
12/24 ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的なレイアウトをここで決めておく
- 好き嫌いが悪影響を与えないようデザインと切り離して設計
きょうのひとこと
XDでの作業が楽しかったです。