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