-本日のアジェンダ-
1限目
学科 レイアウトデザイン基礎③
ボックスモデルの確認
2限目
学科 レイアウトデザイン基礎③
レスポンシブWEBデザインについて
3限目
学科 レイアウトデザイン基礎③
課題制作
4限目
学科 レイアウトデザイン基礎③
課題制作
5限目
学科 レイアウトデザイン基礎③
課題制作
本日のテーマ
コーディングの準備をしましょう②
ボックスモデルのおさらいが大事です！
Box model のおさらい
Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)
ワンポイントアドバイス
ボックスモデルで大切なことは、見た目では無くCSSのコードで記述した数値を頭でしっかり描く事が重要になります。
見た目だけ良ければという考えにならないように気を付けましょう。
参考サイト
レスポンシブWEBデザイン（RWD）とは？
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
資料・・・
Dropbox / 資料 /【4】コーディング /「マルチデバイス対応の教科書」
ワンポイントアドバイス
昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。
〜 デザインラフのおさらい 〜
デザインラフとは？
ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。
ワンポイントアドバイス
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成をしましょう。
デザインラフの例
制作のポイント
実務では・・・
デザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。
参考サイト
第4回成績考査
1月28日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。