| 1 |
内容 |
オリエンテーション：授業の概要の説明、Webにおけるユーザビリティーとアクセシビリティについて理解する。HTML 基本の復習：HTMLの記述方法(タグと属性)、HTMLの基本構造に関係するタグ、よく使うタグについて学ぶ。
|
| 予復習 |
初回の予習は不要だが、共有資料で第1回の復習をする。（1時間以上）
|
| 担当 |
|
| 2 |
内容 |
課題 ①グループワーク：同じ目的をもった実際のWebサイト2つをとりあげ、比較研究しhtmlで発表用の表を作成する
|
| 予復習 |
課題①を次週までにドライブへ提出する。授業で使用したVScodeエディタの使い方、htmlのタグを復習しておく。
|
| 担当 |
|
| 3 |
内容 |
課題 ①のプレゼンテーション：互いに評価し優れた点を全員で学び合う。
課題 ②ロゴデザイン ：Webデザインに必要な素材〈ロゴ・イラスト〉制作
手描きの線を活かしたロゴやイラストの実例を学び、アイデアスケッチを行う。
|
| 予復習 |
課題①のプレゼンテーションの振り返り、まとめを共有フォルダへ提出する。
課題②ロゴのアイデア出し（2時間以上）
|
| 担当 |
|
| 4 |
内容 |
課題 ②ロゴデザイン ：Webデザインに必要な素材〈ロゴ・イラスト〉制作続き
Illustratorやスマホのスキャンアプリを使い手描きの線や活かしたロゴやイラストを制作方法を学ぶ。
|
| 予復習 |
課題②を次週までにドライブへ提出する。Illustratorでの操作方法、ロゴとイラストの作り方を復習する（2時間以上）
|
| 担当 |
|
| 5 |
内容 |
課題 ② のプレゼンテーション：互いに評価し優れた点を全員で学び合う。
CSS 基本の復習：CSSの記述方法(セレクタ・プロパティ・値)、CSSのルール、色の指定方法、文字や本文の装飾、背景のボックスの装飾方法を学ぶ。
|
| 予復習 |
課題③のプレゼンテーションの振り返り、まとめを共有フォルダへ提出。
CSSの基本知識を復習する（2時間以上）
|
| 担当 |
|
| 6 |
内容 |
HTML＋CSS：Google MapやWebフォントの使用方法を学び、演習でサンプルページ制作。
|
| 予復習 |
演習を次週までにドライブへ提出する。Google MapやWebフォントの使用方法を復習する（2時間以上）
|
| 担当 |
|
| 7 |
内容 |
CSS レイアウト：flexbox、CSSグリッドを使ったレイアウト、リセットCSSについて学ぶ。
|
| 予復習 |
CSSのレイアウト方法について演習問題で復習する（1時間以上）
|
| 担当 |
|
| 8 |
内容 |
レスポンシブWEBデザイン：特性、デバイスに応じたデザインの設計、作り方を学ぶ。演習でサンプルページ制作。
|
| 予復習 |
レスポンシブWEBデザインについて復習する（2時間以上）
|
| 担当 |
|
| 9 |
内容 |
課題 ③ ループするアニメーション：Webデザインに必要な素材〈メインイメージ〉制作
Photoshopを使って動きのあるメインイメージ（アニメーション）の作り方を学ぶ。
|
| 予復習 |
課題③の制作、Photoshopでのアニメーションの作り方を復習（2時間）
|
| 担当 |
|
| 10 |
内容 |
課題 ③制作の続きとプレゼンテーション：互いに評価し優れた点を全員で学び合う。
|
| 予復習 |
課題③のプレゼンテーションの振り返り、まとめを共有フォルダへ提出
|
| 担当 |
|
| 11 |
内容 |
［最終課題］場所がテーマのレスポンシブWebサイト制作（1）企画、情報設計
Webサイトの目的、Webサイトに掲載する情報の整理とそれをもとに画面設計（ワイヤーフレーム）を考える。
|
| 予復習 |
最終課題の完成に向けての制作準備（2時間以上）
|
| 担当 |
|
| 12 |
内容 |
［最終課題］場所がテーマのレスポンシブWebサイト制作（2）文章制作
分かりやすい文章を書くためのガイドラインを理解する。
|
| 予復習 |
文章制作におけるガイドラインの復習、最終課題の完成に向けての制作準備（2時間以上）
|
| 担当 |
|
| 13 |
内容 |
［最終課題］場所がテーマのレスポンシブWebサイト制作（3）デザイン制作
必要な素材を制作する。配色のポイントと使いやすいデザインについて学ぶ。
|
| 予復習 |
配色や使いやすいデザインについて復習し、最終課題の完成に向けての制作準備（2時間以上）
|
| 担当 |
|
| 14 |
内容 |
［最終課題］場所がテーマのレスポンシブWebサイト制作（4）コーディング
HTMLとCSSをカスタマイズしながら制作する。
|
| 予復習 |
最終課題の完成に向けての課題制作準備（2時間以上）
|
| 担当 |
|
| 15 |
内容 |
［最終課題］場所がテーマのレスポンシブWebサイト制作（5）コーディングの調整・検証
表示にミスがないか、操作して使いにくいところはないか検証ツールを利用しペアで客観的に確認し合う。
|
| 予復習 |
最終課題の完成に向けての調整、プレゼンテーションの準備（2時間以上）
|
| 担当 |
|
| 16 |
内容 |
［最終課題］Webサイトのプレゼンテーション：プレゼンテーションでは互いに評価し優れた点を全員で学び合う。まとめと講評：これまで学習してきたことを総復習する
|
| 予復習 |
最終課題のプレゼンテーションの振り返り、まとめを共有フォルダへ提出（1時間以上）
|
| 担当 |
|