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