12月の授業日記

12/3　情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

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

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

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

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

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

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

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

既存サイト分析と提案

• 幅が狭く感じる
• YDAのブログは学校生活がわかりやすい
• 情報が多いと思う

きょうのひとこと

ydaのサイト新しくなればいいなぁ

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

マルチデバイス対応

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

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

レスポンシブwebデザイン

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

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

コンテンツ分析

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

課題と解決策

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

企画コンテンツ案

やりたいもの

• topがゴチャゴチャする→ハンバーガーメニューを入れて整理する
• サイトの左右の空白を埋めて全体的に表示する
• YDAのイメージカラーは青色なのでベースが青のサイトにする
• スマホ対応にする

実現性の高いのも

• スマホ対応にする
• リンクのカラーを青色にするなど赤色を青色に変更すればYDAのイメージカラーが少し想像しやすい
• ハンバーガーメニューを入れればtopの情報がみやすくなる

web制作の流れ

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

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

きょうのひとこと

スマホ版作れてわーい

12/24　ワイヤーフレーム

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

きょうのひとこと

時間どうり終わった