.12月の授業日記

 12/2 企業サイト制作

 商業デザイン

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

価値判断の基準

どこに優先順位を置くか

制約の中での制作

• 時間
• 予算

web制作に関わるスタッフ

1.クライアント

2.プロデューサー（予算配分）

3.ディレクター（実制作の総指揮）

4.デザイナー（html・CSSレベルは担当することも）

5.プログラマー・コーダー

web制作のワークフロー

プレゼンテーション

1.オリエン

2.企画・構成・デザイン案

プレゼン

実制作

1.原稿作成・編集

2.パーツデザイン

3.テスト・デバック

完成・納品

更新

企画・構成

既存サイトの分析

客観性

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

1.市場調査

2.競合分析

3.既存サイト分析

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

競合分析

きょうのひとこと

色々自分でできた方が良いのだなあと説明を聞いていて思いました。

12/9　情報設計

webは物理的にページ遷移が行えない

情報設計

１.情報自体の整理＝カテゴライズ

２.到達手段の整備＝ナビゲーション

ナビゲーション

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

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー

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

既存サイト分析と提案

コンテンツ分析

• 人の顔ややる事が見えると安心感がある
• 具体的でも整頓されていても目を引くものは入れたほうが良い
• 水平垂直をうまく利用するべき

きょうのひとこと

それぞれのサイトに特性があって見るだけでも楽しい時間でした。

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

マルチデバイス対応

レスポンシブwebデザイン

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

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

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

課題と解決策

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

企画・コンテンツ案

やりたいもの

• 作品紹介
• 先生方の写真やアンケート
• ゆとりを持ったサイト

実現性の高いもの

web制作物の流れ

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

XDでは１〜３をリンクをつけて作成できる

きょうのひとこと

ややこしくなってきました。

12/23 ワイヤーフレーム

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

きょうのひとこと

デザインの仕事で好き嫌いの差が出ない方法が面白いなと思いました。