1/9 サイトの構成
ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的レイアウトをここで決めておく
- 好き嫌いが影響を与えないようデザインと切り離して設計
1/16 サイトのデザイン
コンテンツの構成
- 要素の抽出
- 項目名をすべてあげる
- カテゴライズ
- グループごとにまとめる
- インデックス付け
- グループにふさわしい見出しをつける
- 一般的なキーワード＝スキーマ
- グループにふさわしい見出しをつける
デザインと実装の分離
webではデザインとコーディングが分離されていてデザイン完成後実装に入る
- デザイン修正はコーディングもやり直しになる
- コーディングのしやすさにとらわれずデザインのバランスを保てる
- 実装できるかを考えながらデザインする
デザイン
デザインテスト
無意味な作り直しを避けるためにクライアントとどのようなテイストにするかを事前に決定しておく
複数案
クライアントが介在する場合、複数案与えて選ばせることで制作への責任感を共有してもらえる
A案
- デザインを制作している過程をモチーフにしてどういう風にデザインを制作しているかわかるようになっているもの
B案
雑貨おもちゃでは親近感のあるような人形を使用してぱっと見の印象を可愛らしいものにしたもの。お幼稚すぎないようにフォントは少し大人びたフォントを使用しバランスを調整した
きょうのひとこと
今日は久しぶりに授業を受けましたが無事に追いつくことができました。よかったです。
1/23 デザイン
カラースキーム
カテゴリ毎の違いがわかりやすいようにカラーを設計し、それをキーカラーにページを展開する
メニューとタイトルの関係性
メニューをクリックしたところがリンク先だとわかる必要がある
- メニューとタイトルの位置関係
- 極力メニュー近くへ配置し関係性を明確に
- カラースキーム
- 統一を図り関連性を明快に
- 表記の統一
- 統一を図り関連性を明快に
デザインカンプ
デザインの完成状態のダミー
- クライアントへのデザインの承認
- 画像パーツはここから切り出しコーディングで再現
スペシャルコンテンツ
タイトル：先輩たちの今
このコンテンツはYDAの卒業生がどんな企業でどんな働きをしているのかインタビュー形式で紹介しているコンテンツです。このようなコンテンツがあれば入学を考えている高校生やその保護者も進路がどうなっているのか,しっかり働けるようなレベルまで育てられるのかわかるのでとても需要が高いとおもいました。実際そのようなコンテンツがあれば高校生も保護者も安心して入学を決めることができると思います。専門学校を選ぶということは専門職につきたいと思っている高校生ばかりのはずです。その高校生に夢や希望を持たせることができるのではないでしょうか。