12月の授業日記

12/3　情報設計

ウェブは物理的にページが行えない

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

グローバルナビゲーション

• トップ第一階層のナビ
• 全てのトップページのスクロール不要な同じ場所に配置

ローカルナビゲーション

• カテゴリー内を移動するためのナビ

コンテンツ内ナビゲーション

• ページ内要素が多い場合の見出しとリンクを兼ねたもの

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

水平型

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

• スクロール不要で使い勝手に優れる
• 項目数・文字数の制約を受ける

垂直型

変更の可能性のあるローカルナビに用いられる

• 項目数の増減に柔軟に対応可能
• 下部は操作性が劣る

プルダウンメニュー

• 垂直・水平のメリットを組み合わせられる
• 使いづらい側面も

既存サイト分析と提案

コンテンツの分析

• 写真が多いのがいい

課題と解決策

• 情報がごちゃごちゃしてる
  • 見やすくまとめる 

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

マルチデバイス対応

デバイスによってレイアウトを切り替える手法には以下のようなものがある

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

レスポンシブwebデザイン

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

企画コンテンツ案

やりたいもの

•  サイト作成
•  学食全紹介
•  学校の隅から隅まで探検する

実現性の高いもの

• 細かい授業紹介 
•  YDAでの2年間を振り返る
•  施設紹介

スペシャルコンテンツ

細かい授業紹介 

 めちゃくちゃ細かくどんなことをしているのかを紹介する。

web制作物の流れ

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

XDでは1~3をリンクをつけて作成できる

きょうのひとこと

一度お休みしたら遅れてついていけなくなった、年明けちゃったけど今必死に追いかけてる 

12/24　ワイヤーフレーム

• ページをデザインする元となる設計図
• ナビゲーションや本文の基本的なレイアウトをここで決めておく
• 好き嫌いが影響を与えないようデザインと切り離して設計

きょうのひとこと

やっと周りと出遅れたところが取り戻せたのかなと思います。