12月の授業日記

12/2　企業サイト制作

商業デザイン 

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

価値判断の基準

どこに優先順位を置くか

制約の中で制作

• 時間
• 予算 

WEB制作に関わるスタッフ

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

WEB制作のワークフロー

プレゼンテーション

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

実制作

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

完成・納品

更新

企画・構成 

既存のサイト分析 

客観性 

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

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

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

競合分析 

今日の一言

変だったけど勉強になりました！

12/9 情報設計

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

情報設計

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

ナビゲーションの種類

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

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

ローカルナビゲーション

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

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

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

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

水平線

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

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

垂直型

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

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

プルダウンメニュー

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

既存のサイトp分析と提案

コンテンツの分析

• 学校ごとに見せたいところが違くて面白かった
• でも『伝わる』『見やすい』が重要と改めてわかった
•  たくさんのしまい方があることがわかった

今日の一言

今日も難しかったけどおしえていただいたのでなんとかなりました！よかった。 

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

マルチデバイス対応

レスポンシブwebデザイン

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

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

コンテンツの分析

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

企画コンテンツ案

やりたいもの

• 楽しさは伝わりつつわかりやすいもの
• 今の情報を整理する
• 使用色も抑える

実現性が高いもの

• ユーザにストレスがないようにコンテンツをスッキリわかりやすくまとめる
•  ナビを５個以下にする
• 色を抑える 

WEB制作物の流れ 

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

 今日の一言

次回がとても大変そうですが、頑張ります！ 

12/22　ワイヤーフレーム

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

今日の一言

お休みしていてすみません。