12/3 情報設計
ウェブは物理的にページ遷移が行えない
情報設計
- 情報自体の整理＝カテゴライズ
- 到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在と分かるデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページで同じ法則を保つ
ナビゲーションの種類
グローバルナビゲーション
- トップ第一階層のナビ
- 全てのページのスクロール不要な同じ場所に配置
ローカルナビゲーション
- カテゴリーを移動するためのナビ
コンテンツ内ナビゲーション
- ページ内要素が多い場合の見出しとリンクを兼ねたもの
ナビゲーションの レイアウト
水平型
- 生にグローバルナビゲーションに用いられる
- スクロール不要で使い勝手に優れる
- 項目数・文字数の制約を受ける
垂直型
変更の可能性のあるローカルナビゲなどに用いられる
- 項目数の増減に柔軟に対応可能
- 下部は操作性が劣る
プルダウンメニュー
- 垂直・水平のメリットを組み合わせられる
- 使いづらい側面も
既存サイト分析と提案
コンテンツの分析
- 他校には教員紹介があったが、YDAにはなかった
- YDAブログでは学校生活がよく分かり、良いコンテンツだと思う
- 作品紹介を別リンクの動画で紹介するのではなく、静止した状態のほうが見やすい
今日のひとこと
同じデザイン系学校でも、レイアウトや項目が全く違って面白いなと思った。
12/10 コンテンツ提案とマルチデバイス対応
マルチデバイス対応
デバイスによってレイアウトを切り替える手法には以下のようなものがある
- セパレートURL＞デバイスごとのページを用意し切り替える
- レスポンシブwebデザイン＞同一htmlをデバイスごとのCSSで切り替え
- 動画配信＞DBでデバイスに応じて異なるファイルを出力
レスポンシブwebデザイン
メディアクエリでデバイスの幅などに応じ条件分岐させる
既存コンテンツ分析と提案
コンテンツの分析
- 写真が多く学生生活が伝わる
- ごちゃごちゃしていて見づらい
- イメージカラーがない
- 学科分かりづらい
- 作品数が少ない
課題と提案
- ごちゃごちゃしていて見づらい
- 情報整理が必要
- イメージカラーがない
- イメージカラーの設定
- 学科が分かりづらい
- プルダウンメニュー
- 作品数が少ない
- 作品紹介のコンテンツを新たに設置
企画コンテンツ案
やりたいもの
- 学科別にイメージカラーの設定
- 作品紹介のコンテンツを作る
- メインビジュアル(背景)は学校の紹介動画に→動きのあるサイト
- ハンバーガーメニューを取り入れ、メインの情報量を減らす
実現性の高いもの
- 学科別のイメージカラー設定
- 作品紹介のコンテンツ
- プルダウンメニューで情報量を減らす
web制作の流れ
- サイトマップ(サイト全体の構成)
- ワイヤーフレーム(ページの構成)
- デザインカンプ(ページの構成)
- コーディング(実ページの作成)
XDでは1~3をリンクをつけて作成できる
今日のひとこと
YDAのサイトを見て多くの人が「ごちゃごちゃしている」と回答していたので、そこを一番に解決しないとなと思った。
12/24 ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的なレイアウトをここで決めておく
- 好き嫌いが影響を与えないようデザインと切り離して設計
今日のひとこと
これから頑張ってYDAのサイトを良くしていこうと思う。