12月の授業日記

12/05 情報設計

情報設計(インフォメーション・アーキテクチャー)

webは物理的にページ遷移を行えず情報にたどりつきずらいため、以下の設計=情報設計が必要

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

ナビゲーション

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

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

ナビゲーションの種類

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

  • 最重要なトップ第一階層のカテゴリーのナビ
  • 全てのページで常時表示される
  • スクロール不要な同じ位置に配置される

ローカルナビゲーション

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

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

  • ページの内容が多い婆愛、見出しとリンク(ページ内リンク)が必要

ユーティリティーナビ

  • 重要度は低いが常時表示が必要な項目のナビ

パンくずリスト

  • 階層が追えるナビゲーションリスト

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

水平ナビ

  • ページ内上部につければスクロール不要で使い勝手が良い
  • ページな幅の制約をうけるので項目数・文字数に制限

ファーストビューエリアの同じ位置に配置すればスムーズに遷移できるためグローバルナビゲーションに用いられる。

垂直型ナビ

  • 項目数の増減に柔軟に対応可能
  • 下部になるとスクロールが必要など操作性に差が出る

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

プルダウンメニュー

  • 水平・垂直のメリットを組み合わせてられる
  • 狭い猟奇で多くの項目にアクセスできる
  • 操作しづらくないよう注意が必要

既存サイト分析と提案

コンテンツ分析

  • 学科コースがよくわからない
  • 学校生活がブログでよく判るけどブログださい。。。。(学生の雰囲気が見えるのは良い)
  • 就活の情報が少なくてわかりにくい
  • 普通に使いにくい!!情報の整理がされていない。
  • 言いたくない情報は隠してくスタイルがよくわかる(在校生視点)
  • スマホでのサイトがとても見にくい!!!!
  • モバイルファースト感0!

レスポンシブwebデザイン

デバイスの幅に応じてメディアクリエで分させCSS指定を行う

メディアクエリ

  • デバイスの特性によりCSSで分枝させる手法
  • 画面の幅に応じてレイアウトを切り替えるブレークポイントを起き、異なるCSS設定を行う。

きょうのひとこと

YDAのサイトが結構よくなくて学生の時にもっと見ておくべきだったと思いました!!

ウェブ科が一部分だけでも作成に参加するとかたのしそうだと思いました。(MDも!!)

12/12 情報設計

マルチデバイス対応

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

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

レスポンシブwebデザイン

デバイスの幅に応じてメディアクエリで分岐させCSS指定を行う

メディアクエリ

  • デバイスの特性によりCSSで指定を分岐させる手法
  • 画面の幅に応じてレイアウトを切り替えるブレークポイントを置き、異なるCSS指定を行う

既存コンテンツ分析と提案

コンテンツの分析

  • 写真多く学生生活が伝わる
  • ごちゃごちゃして見辛い
  • スクロールが大変
  • 学科・コースがわかりにくい
  • スマートフォンレイアウトがない
  • 作品紹介がない
  • 歌具体的な授業内容がわからない

課題と解決策

  • ごちゃごちゃしていて見にくい
    • 情報設計の見直し
  • スクロールが大変
    • コンテンツ内ナビ作成
  • 学科。コースがわかり辛い
    • プルダウンメニューをつくる
  • スマートフォンレイアウトがない
    • スマホレイアウトの導入
  • 作品紹介がない・具体的な授業内容がわかりにくい
    • スペシャルコンテンツ

スペシャルコンテンツの提案

ターゲットユーザー

  • 高校生
  • 男女比
  • 趣味・嗜好
  • 神奈川県在住

 

提案すべきコンテンツ

  • 作品紹介となるもの
  • 学校生活の雰囲気や授業内容がイメージできるもの
  • ターゲットユーザーの興味を惹くもの
  • ローカル性を持ったもの

 

企画コンテンツ案

やりたいもの

  • 動画の掲載
  • モバイルファースト化
  • グローバルナビを下部に設定

 

実現可能性の高いもの

  • モバイルファースト化
  • グローバルナビを下部に設定

web制作物の流れ

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

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

サイトマップ

きょうのひとこと

XDは他の授業でも触ったことがあるので比較的使いやすいアプリケーションなので今後が楽しみです。