12/2 企業サイト制作
商業デザイン
お金をもらって作るデザイン
価値判断の基準
どこに優先順位をおくか
制約の中で制作
- 時間
- 予算
web制作に関わるスタッフ
- 1.クライアント
- 2.プロデューサー（予算配分）
- 3.ディレクター
- 4.デザイナー（html・CSSレベルは担当することも）
- 5.プログラマー・コーダー
web制作のワークフロー
プレゼンテーション
- 1.オリエン
- 2.企画・構成・デザイン案
- 3.プレゼン
実制作
- 1.原稿作成・編集
- 2.パーツデザイン
- 3.コーディング
- 4.テスト・デバック
完成・納品
更新
企画・構成
既存サイトの分析
客観性
評価の指標には客観性が求められる
- 1.市場調査・分析
- 2.競合分析
- 3.既存サイト分析
ユーザーニーズや競合との比較からどうあるべきかを導く
競合分析
きょうのひとこと
ユーザーが使いやすいサイトにするには客観的に分析することが大切だとわかりました。優先順位を意識することの大切さも理解できました。
12/9 情報設計
webは物理的にページ遷移が行えない
情報設計
- 1.情報自体の整理＝カテゴライズ
- 2.到達手段の整備＝ナビゲーション
ナビゲーション
ナビゲーションに求められる要件
- リンクの存在・リンクと判るデザイン
- スクロールせずに操作可能＞ファーストビューエリア
- 各ページ同じ法則性を保つ
ナビゲーションの種類
グローバルナビゲーション
- トップ第一階層のナビ
- 全てのページのスクロール不要な同じ場所に配置
ローカルナビゲーション
- カテゴリー内を移動するためのナビ
コンテンツ内ナビゲーション
- ページ内要素が多い場合の見出しとリンクを兼ねたもの
ナビゲーションのレイアウト
水平型
主にグローバルナビゲーション
- スクロール不要で使い勝手に優れる
- 項目数・文字数の制約を受ける
垂直型
変更の可能性のあるローカルナビなど
- 項目数の増減に柔軟に対応可能
- 下部は操作性が劣る
プルダウンメニュー
- 垂直・水平のメリットを組み合わせられる
- 使いづらい側面も
既存サイト分析と提案
コンテンツの分析
- 他のサイトよりもトップページに載っている情報が多いと感じた。
- デザインの専門学校なのにあまりいいと思えないデザインやレイアウトだと思った。
- ナビゲーションが細かくあるのはわかりやすいと思う。
きょうのひとこと
ナビゲーションはページごとに細かくわかれているということがわかり、サイトを制作するときに活かせそうだと思いました。
12/16 コンテンツ提案とマルチデバイス対応
マルチデバイス対応
| セパレートURL | デバイスごとのページを用意し切り替える |
|---|---|
| レスポンシブwebデザイン | 同一ページをデバイス毎のCSSで切り替え |
| 動的配信 | DBで切り替える |
レスポンシブwebデザイン
メディアクエリでデバイス幅に応じCSSを切り替え
既存コンテンツの分析と提案
コンテンツの分析
- 他のサイトよりもトップページに載っている情報が多いと感じた。
- デザインの専門学校なのにあまりいいと思えないデザインやレイアウトだと思った。
- ナビゲーションが細かくあるのはわかりやすいと思う。
課題と解決策
- 他のサイトよりもトップページに載っている情報が多いと感じた。
▶︎情報の整理、優先順位をつける
- デザインの専門学校なのにあまりいいと思えないデザインやレイアウトだと思った。
▶︎見やすいレイアウトに変更、テーマカラーを決 める。
企画コンテンツ案
やりたいもの
- 作品紹介
- 先輩の声
- 食堂メニューランキング
実現性の高いもの
- 一日のスケジュール
- 作品紹介
- ぴったりの学科チャート
web制作の流れ
1.サイトマップ（サイト全体の構成）
2.ワイヤーフレーム（ページの構成）
3.デザインカンプ（ページのデザイン）
4.コーディング（実ページの作成）
XDでは1〜3をリンクをつけて作成できる
きょうのひとこと
やりたいことと実際にできることは違うなと思いました。コンテンツを考えるときに意識したいです。
12/22 ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的なレイアウトをここで決めておく
- 好き嫌いの影響が出ないようデザインと切り離して設計
きょうのひとこと
ワイヤーフレームは、デザインを意識しないで作ることが大切だとわかりました。