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　コンテンツ提案とマルチデバイス対応 

マルチデバイス対応 

レスポンシブwebデザイン

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

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

コンテンツに分析

• ｜写真が多く学生生活が伝わる
• ｜ホームからいろんなページに飛べる
• ｜画像サイズが見やすい大きさ
• ごちゃごちゃして見づらい
• スクロールが大変
• 学科・コースが分かりづらい
• スマートフォンのレイアウトがない
• 作品紹介がない
• 具体的な授業内容が分かりづらい
• 取得できる資格を書く
• 情報をぎゅっと詰め過ぎてる感じがする

課題と解決策

• ごちゃごちゃして見づらい
  • 情報設計の見直し
• スクロールが大変
  • コンテンツ内ナビ
• 学科・コースが分かりづらい
  • プルダウンメニュー
• スマートフォンレイアウトがない
  • スマートフォンレイアウトの導入
• 作品紹介がない・具体的な授業内容が分かりづらい
  • スペシャルコンテンツの導入
• 取得できる資格を書く
  • 資格情報を入れる
• 情報をぎゅっと詰め過ぎてる感じがする
  • 余白を入れる

企画コンテンツ案

やりたいもの

• 学生たちの作品サイト
• ミュージック科のプレイリスト
• 学食バイキング

実現性の高いもの

• 在校生インタビュー
• ゼミ活動
• 学食人気ランキング

web制作物の流れ

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

XDでは１〜3をリンクをつけて作成する

今日のひとこと

対面じゃなくなった瞬間分からないことが増えて大変でした。

.btnがイマイチ理解できませんでした、、

12/22　ワイヤーフレーム

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

 きょうのひとこと

XDの作業が多かったのでスムーズに行えました。