12/3 情報設計
ウェブは物理的にページ遷移が行えない
情報設計
- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクと判るデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページで同じ法則性を保つ
ナビゲーションの種類
グローバルナビゲーション
- トップ第一階層のナビ
- 全てのページのスクロール不要な同じ場所に配置
ローカルナビゲーション
- カテゴリー内を移動するためのナビ
コンテンツナビゲーション
- ページ内要素が多い場合の見出しとリンクを兼ねたもの
ナビゲーションのレイアウト
水平型
主にグローバルナビゲーションに用いられる
- スクロール不要で使い勝手に優れる
- 項目数・文字数の制約を受ける
垂直型
変更の可能性のあるローカルナビなどに用いられる
- 項目数の増減に柔軟に対応可能
- 下部は操作性が劣る
プルダウンメニュー
- 垂直・水平のメリットを組み合わせられる
- 使いづらい側面も
即存サイト分析と提案
コンテンツの分析
- YDAより全然見やすい
- デザイン制があってYDAより全然よかった
- 学校によってコンテンツがバラバラだから調べてて楽しかった。色々な方法があるのがわかった
今日の一言
難しかった。コンテンツの場所とか詳しく知れた。
12/10 コンテンツ提案とマルチデバイス対応
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがある
- セパレートURL＞デバイスごとのページを用意し切り替える
- レスポンシブwebデザイン＞同一htmlをデバイスごとのCSSで切り替える
- 動画配信＞DBでデバイスに応じて異なるファイルを出力
レスポンシブwebデザイン
メディアクエリでデバイスの幅などに応じ条件分岐させる
即存コンテンツ分析と提案
コンテンツの分析
- 写真が多く学生生活がわかる
- ごちゃごちゃして見辛い
- デザイン学校の要素が少ない
- スクロールが大変
- 学科・コースが分かりづらい
- 作品紹介がない
課題と解決策
- ごちゃごちゃして見辛い
- 情報設計が見辛い
- スクロールが大変
- コンテンツ内ナビ
- 学科・コースが分かりづらい
- プルダウンメニュー
- スマートフォンレイアウトがない
- スマホレイアウトの導入
- 作品紹介がない・具体的な授業内容が分かりづらい
- スペシャルコンテンツの導入
企画コンテンツ案
やりたいもの
- 作品紹介
- 来客者も集めた作品の展示会
- 学科紹介
実現性が高いもの
- 作品紹介
- 先生紹介
- 学科紹介
web制作物の流れ
- サイトアップ（サイト全体の構成）
- ワイヤーフレーム（ページ構成）
- デザインカンプ（ページのデザイン）
- コーディング（実ページの作成）
XDでは１〜３をリンクをつけて制作できる
今日のひとこと
追いつくので精一杯でした。。。