-本日のアジェンダ-
1限目
学科 レイアウトデザイン基礎②
RWDの歴史・基本設定Viewportについて
2限目
学科 レイアウトデザイン基礎②
Media Queries・UI/UXについて
3限目
学科 レイアウトデザイン基礎②
課題制作
4限目
学科 レイアウトデザイン基礎②
課題制作
5限目
学科 レイアウトデザイン基礎②
課題制作
本日のテーマ
スマホ対応はCSSの延長線です。
レスポンシブWEBデザイン（RWD）とは？
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書②.pdf」
【動画】「マルチデバイス対応の教科書②」
- レスポンシブWEBデザインの歴史・基本設定「Viewport」
https://youtu.be/nC_uQqegU1U（6:48） - 「Media Queries」ブレイクポイントの設定について
https://youtu.be/-5CErQOS4zU （10:12） - UI/UXについて・迷子にさせない導線づくり
https://youtu.be/t0jDgeL3LtU（8:27） - ページの表示スピード対策・使いやすさの追求とまとめ
https://youtu.be/4VjAorauRLM（7:47）
ワンポイントアドバイス
昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。
参考サイト
- 【入門】レスポンシブWebデザインとは？概要と作り方を丁寧 …
- Responsive Web Design JP | 日本国内の秀逸なレスポンシブ …
- レスポンシブWebデザインとは？メリットとデメリット …
本日の課題
ワイヤーフレームからデザインラフの作成に向け、世の中のサイトを参考に情報収集しながらレイアウトやキャッチコピー、文書を考えておきましょう。
手書きでメモしておくと良いです。