12月の授業日記

12/3　情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型 

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

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

垂直型 

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

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

プルダウンメニュー 

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

既存サイト分析と提案 

コンテンツの分析 

•  ページの移動が困難（一々戻らないといけなかったりする）
•  選択範囲が小さく、クリックしづらい

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

情報設計

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

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

ナレスポンシブwebデザイン

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

企画コンテンツ案

やりたいもの

• 下にスクロルする際に文字と背景にズレを出す
• 項目を選択している間にアイコンを動かす
• スクロールによって表示されている項目がうつると背景色（画像）が変化する 

実現性の高いもの

• 画像でわかりやすいバナー、項目欄
•  グローバルナビの配置
• 項目状にマウスがある際に項目を拡大 

web制作物の流れ 

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

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

きょうのひとこと

...

12/24　ワイヤーフレーム

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

きょうのひとこと 

良いお年を〜