実技 スマートフォンサイト作成実習

-本日のアジェンダ-

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サイトを制作できます。

サンプルページ(レスポンシブWebデザイン基礎)

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

[保存場所]
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP3】/Webページの理解/「マルチデバイス対応の教科書①.pdf」・・・資料①【STEP4】/Webページの制作/「マルチデバイス対応の教科書②.pdf」・・・資料②

動画】「マルチデバイス対応の教科書①」

動画】「マルチデバイス対応の教科書②」

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

参考サイト

Viewport とは?

viewport(ビューポート)とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境(PCなど)のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。

ワンポイントアドバイス

viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。

参考サイト

Media Queries とは?

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

ワンポイントアドバイス

メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。

参考サイト

本日の課題

ワイヤーフレームから「デザインラフ」の作成に進み、
今日できたところまでの成果をDropboxに上げてください。
※ファイル名は、work_xxxx_20230717.jpg

学科 レイアウトデザイン基礎②

-本日のアジェンダ-

2限目
学科 レイアウトデザイン基礎②
成績考査

2限目
学科 レイアウトデザイン基礎②
成績考査

3限目
学科 レイアウトデザイン基礎②
成績考査

4限目
学科 レイアウトデザイン基礎②
成績考査

5限目
学科 レイアウトデザイン基礎②
成績考査

本日のテーマ

成績考査です

本日の課題

作成したワイヤーフレームを、4限目終了までにご自身のWordpressに新規固定ページでUPしてください。
作成方法は過去の成績考査と同様の手順です。(不明の場合は2023年4月13日のアジェンダをご確認下さい)
投稿設定のパーマリンクのURLスラッグには
grade-check_20230712
と設定して下さい。
ポートフォリオサイトの1ページとして人に見せられるよう、制作過程や説明などもまとめましょう。