1/9 サイトの構成
ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや、本文の基本的レイアウトをここで決めておく
- 好き嫌いが影響を与えないようデザインと切り離して設計
きょうのひとこと
XDは久々に使ったが画像や文字の配置を可視化できて分かりやすい。
1/16 サイトのデザイン
コンテンツの構成
- 要素の抽出
- 項目名を全てあげる
- カテゴライズ
- グループごとにまとめる
- インデックス付け
- グループにふさわしい見出しをつける
- 一般的なキーワード＝スキーマ
- グループにふさわしい見出しをつける
デザインと実装の分離
webではデザインとコーディングが分離されていてデザイン完成後実装に入る
- デザイン修正はコーディングのやり直しにつながる
- コーディングのしやすさにとらわれずデザインのバランスを保てる
- 実装できるかおを考えながらデザインする
デザイン
デザインテイスト
無意味な作り直しを避けるためにクライアントとどのようなテイストにするのかを事前に決定しておく
A 案
・落ち着いた雰囲気とポップな雰囲気を混ぜて見やすく統一した
B案
・横浜は港のイメージなのでジオラマ風の海の写真を貼ることで雑貨おもちゃらしいポップな雰囲気を出した。
1/23 デザイン
カラースキーム
カテゴリーごとの違いがわかりやすいようにカラーを設計し、それをキーカラーにぺージを展開する。
メニューをクリックしたところがリンクだとわかる必要がある
- メニューとタイトルの位置関係
- 極力メニューの近くへ配置し関係性を明確に
- カラースキーム
- 統一を図り関係性を明快に
- 表記の統一
- 統一を図り関連性を明快に
デザインカンプ
デザインの完成状態のダミー
- クライアントへのデザインの承認
- 画像パーツはここから切り出しコーディングで再現
きょうのひとこと
モバイル版サイトに当てはめてみるとわかりやすかった。
色分けもできて見やすいサイトになったと思う。