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.ワイヤーフレーム(ページの構成)

    デザインカンプ(ページのデザイン)

    コーディング(実ページの作成)

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

    きょうのひとこと

    頑張ります。

    12/22 ワイヤーフレーム

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

    頑張ります。