10832
ウェブデザインⅠ
林 英恵
大学名 清泉女学院大学
学部・学科 人間学部 共通教育科目
開講キャンバス 上野 授業形態 演習
履修区分 選択 単位数 2単位
配当年次 1年 開講期
授業の概要

Webデザインは情報を魅力的に見せるだけではなくユーザーの使いやすさも重視される。授業ではWebデザインの基礎とHTMLとCSSの体系的な知識、PhotoshopやIllustratorを使った魅力的な素材の作り方を学ぶ。最終課題としてテーマに沿ったWebサイトを制作することで、企画・デザイン・コーディング・プレゼンテーションというWeb制作における一連の流れを体験する。

学習到着目標

Webの構造的な特徴を理解し、効果的なWebデザインについて実習を通し学ぶ。

成績評価方法

課題1は20%、課題2は20%、最終課題は50%、講評のまとめやその他演習の提出10%の割合で評価する。

課題に対する
フィードバック方法

授業毎にGoogleクラスルーム上で感想や質問を受け付け、内容に応じて個別対応や授業中に解説する。課題は講評会を行い、クラス全員で作品を通して学び合う。

アクティブ
ラーニング要素
□外部連携の課題解決型学習(協定あり) ■ディスカッション・ディベート ■グループワーク ■プレゼンテーション(発表) ■実習・実技・実験 □フィールドワーク ■リアクションペーパー
授業計画
授業項目・内容 / 各回の準備学修(予習・復習)について / 担当
1 内容

オリエンテーション:授業の概要や目的を把握する。

導入として「よいWebデザインとは」デザインの目的について学ぶ。WebブラウザCromeの有効な使い方、ギャラリーサイトの利用方法を確認する。グループワーク「他己紹介」

予復習

初回の予習は不要。

第1回の復習(60分)

担当
2 内容

Webサイトの基本:Webの仕組み、制作の流れ、Webサイトを構成する技術と必要な制作ツール、Webサイトの基本構造を学ぶ。

HTMLの基本(1):HTMLについて、HTML5の特徴、HTMLの記述方法(タグと属性)

予復習

第2回の復習(1時間以上) 共有資料の該当箇所を参照しながら復習する。

担当
3 内容

HTMLの基本(2)

HTMLの基本構造に関係するタグ、見出し、本文、画像、リンク、箇条書きのタグの記述方法を学ぶ。

予復習

第3回の復習(1時間以上) 共有資料の該当箇所を参照しながら復習する。

担当
4 内容

HTMLの基本(3)

演習:簡単なページをマークアップする。

予復習

演習課題を次週までにドライブへ提出。(2時間以上)

担当
5 内容

デザイン課題 ① Webデザインに必要な素材〈メインイメージ〉制作

Photoshopを使い画像の色調調整や切り抜き、文字の加工方法を学ぶ。

予復習

Photoshopの操作方法を復習し課題を進めておく。(2時間以上)

担当
6 内容

デザイン課題 ① 制作仕上げ+講評会:互いに評価し優れた点を全員で学び合う。

予復習

課題①復習、プレゼンテーションの要点をまとめリアクションペーパーで提出(60分)

担当
7 内容

CSSの基本(1)装飾

CSSの役割、CSSの記述方法(セレクタ・プロパティ・値)、CSSのルールについて理解する。色の指定方法、文字や本文の装飾、背景の装飾の記述方法を学ぶ。

予復習

第7回の復習(1時間以上) 共有資料の該当箇所を参照しながら復習する。

担当
8 内容

CSSの基本(2)レイアウト

ボックスモデル(幅と高さ、余白、線)、flexboxなどレイアウトの手法を学ぶ。

予復習

第8回の復習(1時間以上) 共有資料の該当箇所を参照しながら復習する。

担当
9 内容

CSSの基本(3)

演習:簡単なページをマークアップする。

予復習

演習課題を次週までにドライブへ提出。(2時間以上)

担当
10 内容

デザイン課題 ② Webデザインに必要な素材〈ロゴ〉制作

ロゴデザイン:Illustratorを使ってパスを使ってロゴのデザイン方法を学ぶ。

予復習

Illustratorの操作方法を復習し課題を進めておく。(2時間以上)

担当
11 内容

デザイン課題 ② 制作仕上げ+講評会:互いに評価し優れた点を全員で学び合う。

予復習

課題②復習、プレゼンテーションの要点をまとめリアクションペーパーで提出(60分)

担当
12 内容

[最終課題]Webサイト制作(1)企画と情報設計

Webサイトの目的、インタビュー、Webサイトに掲載する情報の整理とそれをもとに画

面設計(ワイヤーフレーム)を考える。

予復習

[最終課題]の制作、次週までにワイヤーフレームを作成(2時間以上)

担当
13 内容

[最終課題]Webサイト制作(2)デザイン制作

必要な素材を制作する。配色のポイントと使いやすいデザインについて学ぶ。

予復習

[最終課題]の制作、素材のデザイン制作(2時間以上)

担当
14 内容

[最終課題]Webサイト制作(3)コーディング

HTMLとCSSをカスタマイズしながら制作する。

予復習

[最終課題]の制作、共有資料でHTMLとCSSの復習(3時間以上)

担当
15 内容

[最終課題]Webサイト制作(4)コーディング 仕上げ

表示にミスがないか、操作して使いにくいところはないか確認。

予復習

[最終課題]を次週までにドライブへ提出。プレゼンテーションの準備(3時間以上)

担当
16 内容

プレゼンテーション、講評会:制作したWebサイトのプレゼンテーションでは互いに評価し優れた点を全員で学び合う。まとめと講評

予復習

最終課題の復習、プレゼンテーションの要点をまとめリアクションペーパーで提出(60分)

担当
準備学修
(予習・復習)時間

「各回の準備学修」項目を確認し、講義・演習は4時間(実技・実習は2時間)程度の予習・復習を奨励します。

教科書

教科書は使用しない。授業資料はクラウドで共有し、適宜プリントを配布する。

参考書・文献

『Webデザイン基礎入門』(栗谷幸助 おのれいこ 藤本勝己 村上圭 吉本孝一 共著∕MdN)本体2,500円+税、『インクルーシブHTML +CSS &Java Script』(ヘイドン・ピカリング 著 太田良典、伊東力也 監訳∕(株)ボーンデジタル)本体2,800円+税

履修条件

基本的なコンピュータの操作ができること。日頃から疑問をすぐ調べる習慣があることや、課題に対しアイデアをもって主体的に参加できる姿勢が望ましい。 履修者数が多い場合は、履修制限(22名)をすることがあります。

ICT活用 ■双方向型授業【実技を伴う授業のため、具体的なPCの操作方法について綿密にやり取りをしながら理解を深める】
■自主学習支援【Eメールやクラウドサービスを使用し、資料配布や疑問点についてオンラインでも対応する】
実務経験 ■実務経験の内容【専門学校や大学でデジタルデザインやWebデザインの講師、企業のWeb制作 Webデザインで2019⻑野ADC賞受賞】
備考