1月の授業日記

ワイヤーフレーム

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

きょうのひとこと

白黒なだけで立派に見える病にかかってしまいました

コンテンツの構成

1. 要素の抽出
   • 項目名を全てあげる
2. カテゴライズ
   • グループごとにまとめる
3. インデックス付け
   • グループにふさわしい見出しをつける
     • 一般的なキーワード＝スキーマ

デザインと実装の分離

webではデザインとコーディングが分離されていてデザイン完成後実装に入る

• デザイン修正はコーディングのやり直しになる
• コーディングのしやすさにとらわれずデザインのバランスを保てる
• 実装できるかを考えながらデザインする

デザイン

デザインテイスト

無意味な作り直しを避けるためにクライアントとどのようなテイストにするかを事前に決定しておく

カルーセル

最も目につくポジションなだけにより多くの情報を見せるため、
現在は画像がスライドして切り替わるカルーセル（回転木馬）
が多く使われている

クライアントを納得させるために

⚪︎今までに打ち合わせした内容と調査した内容は言質として取っておく
⚪︎複数案作成してどの要素を使うか選んでもらう（捨て案でも一定のクオリティは保つ）

複数案

A案

• 水色と黄色の装飾と楽しそうに授業を受ける生徒の写真で楽しい雰囲気を演出

他学科展開

B案

• カメラとパソコンの写真で広告や編集などのメディア系を扱うことをアピール

きょうのひとこと

片方に感情こもりすぎてしまう癖をなんとかしたいです

カラースキーム

カテゴリ毎の違いがわかりやすいようにカラーを設計し、それをキーカラーにページを展開する

メニューとタイトルの関係性を整理

メニューをクリックしたところがリンク先だとわかる必要がある

• メニューとタイトルの位置関係
  • 極力メニュー近くへ配置し関係性を明確に
• カラースキーム
  • 統一を図り関係性を明快に
• 表記の統一
  • 統一を図り関係性を明快に

デザインカンプ

デザインの完成状態のダミー

• クライアントへのデザインの承認
• 画像パーツはここから切り出しコーディングで再現

きょうのひとこと

なんだかデザインする時間に集中しすぎてしまってしっかり授業についていけてるか自信がないです…。