12月の授業日記

12/3 情報設計

ウェブサイトは物理的に行えない

情報設計

  1. 情報の自体の整理=カテゴライズ
  2. 達成手段定理=ナビゲーション

ナビゲーション

ナビゲーションに求められる要件

  • リンクの存在・リンクとわかるデザイン
  • スクロールせずに操作可能>ファーストビューエリア
  • 各ページで同じ法則を保つ

ナビゲーションの種類

グローバルナビゲーション
  • トップ第一層のナビ
  • 全てのページにスクロース不要な位置に配置
ローカルナビゲーション
  • カテゴリー内を移動するときのナビ
コンテンツ内ナビゲーション
  • ページ内容が多い場合見出しとリンクを兼ねたもの

ナビゲーションのレイアウト

水平型

主にグローバルナビゲーションに用いられる

  • スクロール 不用意で勝手に優れる。
  • 項目数・文字数に制約を受ける。
垂直型

変更の可能性があるローカルナビなどに用いたられる。

  • 項目数の増減に柔軟に対応可能
  • 下部の操作性は劣る。
プルダウンメニュー
  • 垂直・水平のメリットを組み合わせられる。
  • 使うずらい面もある。

既存のサイト分析と提案

コンテンツの分析

何だろう遊び心とか?きっちりしてるから見て驚くものとかあってもいいと思う。

今日の一言

疲れた

12/10 コンテンツ案とマルチデバイス対応

マルチデバイス対応

デバイスによってレイアウトを切り替える手順は以下の通りである。

  • セパートURL>デバイス毎ページを用意し切り替える
  • レスポンシブwebデザイン>同一HTMLをデバイスごとcss切り替える。
  • 動的配信>DBでデバイスの幅に応じてファイル出力

レスポンシブWEBデザイン

メディアリエでデバイスの幅などの条件分岐させる

企画コンテンツ案

やりたいこと

  • 画面が動く
  • ちょっとしたゲームができる
  • 楽しい

実現可能

  • 動かすのはできそう
  • でもゲームは作れないと思う

WEB制作物の流れ

  1. サイトマップ(サイト全体のレイアウト)
  2. ワイヤーフレーム(ページ構成)
  3. デザインカンプ(ページデザイン)
  4. コーディング(ページの作成) 1〜3はXD

今日の一言

XDのアプデした

12/24 ワイヤーフレーム

  • ページをデザインする元となる設計図
  • ナビゲーションや本文の基本的なデザインを決める
  • 好き嫌いが反映しないようデザインと切り離す

今日の一言

XD難しい