12月の授業日記

 12/2  企業サイト制作 

 お金をもらって作るデザイン

価値判断の基準

どこに優先順位を置くか

制約の中で制作

  • 時間
  • 予算 

 WEB制作に関わるスタッフ

  1. クライアント
  2. プロデューサー(予算分配)
  3. ディレクター(実制作の総指揮)
  4. デザイナー(html・CSSレベルは担当することも)
  5. プログラマー・コーダー

WEB制作のワークフロー

プレゼンテーション

  1. オリエン
  2. 企画・構成・デザイン案
  3. プレゼン

実制作

  1. 原稿作成・編集
  2. パーツデザイン
  3. コーディング
  4. テスト・デバッグ

完成・納品

更新

企画・構成

既存サイトの分析

客観性

評価 の指標には客観性が求められる

  1. 市場調査・分析
  2. 競合分析
  3. 既存サイトの分析 

 ユーザーニーズや競合との比較からどうあるべきかを導く

競合分析

きょうのひとこと

競合分析や既存サイトの分析などの事前調査、今までと違った感じで楽しかったです！ 

12/9 情報設計

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

情報設計

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

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

変更の可能性のあるローカルナビなど

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

プルタウンメニュー

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

今日のひとこと

　今日も順調に進めることができました！

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

マルチデバイス対応

セパレートURL
 デバイスごとのページを用意し切り替える
レスポンシブwebデザイン 同一ページをデバイス毎のCSSで切り替え
動的配信 DBで切り替える

レスポンシブwebデザイン

メディアクリエでデバイス幅に応じCSSを切り替え

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

コンテンツの分析

  • 学科ごとのカリキュラムや特徴を詳しく書いている
  •  キャンパスラフを知ることができる
  • コンテンツが多すぎて見ずらい
  • ごちゃごちゃしている 
  • 作品紹介がない
  • スマートフォンレイアウトがない

課題と解決策

  • コンテンツが多すぎて見ずらい

    →コンテンツの見直し 

  • ごちゃごちゃしている

　　→情報設計の見直し

  • 作品紹介がない

　　→スペシャルコンテンツの導入

  • スマートフォンレイアウト

→スマートフォンレイアウトの導入

企画コンテンツ案

やりたいもの

  • ゼミ活動紹介
  • 食堂メニュー紹介
  • 学生作品紹介
  • 先生紹介
  • 専門学生の一日
  • 学生インタビュー
  • 学生による授業紹介

実現性の高いもの

  • 学生作品紹介
  • 専門学生の１日
  • 学生による授業紹介

web制作物の流れ

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

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

きょうのひとこと

提出遅れてすみませんでした！

     

12/22　ワイヤーフレーム

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

きょうのひとこと

今日も順調に進めることができました！