12月の授業日記

 12/2 企業サイト制作

 商業デザイン

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

価値判断の基準

どこに優先順位を置くか

制約の中で制作

• 時間 
• 予算

web制作のワークフロー

プレゼンテーション 

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

実制作

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

完成・納品 

更新 

 企画・構成

 既存サイトの分析

客観性

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

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

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

競合分析 

12/9　情報設計

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

情報設計

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

ナビゲーション

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

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

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

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

ローカルナビゲーション

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

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

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

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

水平型

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

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

垂直型

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

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

プルダウンメニュー

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

既存サイト分析と提案

コンテンツの分析

• あ
• あ 
• 
  

きょうのひとこと

 重すぎてスタログにログインできなかった 新規 article タグの内容がここに入ります

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

マルチデバイス対応

 レスポンシブwebデザイン

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

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

コンテンツの分析 

• 写真が多く学生生活が伝わる
• 情報が多いのでごちゃごちゃして見える 
•  

課題と解決案 

• 情報が多いのでごちゃごちゃして見える
  • 　各情報を見直し、重複がないか確認する

企画コンテンツ案

やりたいもの

• 学生バザー
• 一日学生体験

実用性の高いもの

• 生徒の作品販売
• 体験型オープンキャンパス

web制作物の流れ

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

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

きょうのひとこと

なんとかできました。

シンデレラボーイ/Saucy Dog

 12/22 ワイヤーフレーム

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

 きょうのひとこと

よくできました○

初心LOVE（うぶらぶ）/なにわ男子