12月の授業日記

12/3 情報設計

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

情報設計

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

ナビゲーション

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

ナビゲーションの種類

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

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

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

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

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

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

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

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

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

既存サイト分析と提案

• 他のサイトに比べて少し古い印象がある。ちょっとだけ使いにくい
• スマートフォンに対応していないのでスマホからの接続が億劫になってしまう
•  カラフルで楽しそうな雰囲気が出ている

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

マルチデバイス対応

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

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

レスポンシブwebデザイン

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

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

コンテンツの分析

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

企画コンテンツ案

やりたいもの

• 常設の生徒による物販
• 全学科合同作成のコンテンツ
• 学校に登校し、生活を送るブラウザゲーム

実現性の高いもの

• 学校に作品を飾って置いたり、学校のパソコンに作品を表示させて動画を撮って投稿
• コース診断
• インタビュー(毎年全学園に行って記載)

web制作物の流れ

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

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

今日のひとこと

12/24 ワイヤーフレーム

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

きょうのひとこと