基本情報/Basic Information

開講科目名 ／Course	ウェブデザイン論a／WEB DESIGN THEORY(A)
開講所属 ／Course Offered by	経済学部経営学科／ECONOMICS MANAGEMENT
ターム・学期 ／Term・Semester	2021年度／2021 Academic Year　　春学期／SPRING SEMESTER
曜限 ／Day, Period	木1／Thu 1
開講区分 ／semester offered	春学期／Spring
単位数 ／Credits	2.0
学年 ／Year	3,4
主担当教員 ／Main Instructor	李　凱／LI Kai

担当教員情報/Instructor Information

教員名 ／Instructor	教員所属名 ／Affiliation
李　凱／LI Kai	経営学科／MANAGEMENT

授業の目的・内容 ／Course Objectives	新しいデバイスの登場でインターネットの世界が変わり始めている。従来は「見ること」を中心としたWebサイトは、今は「使うもの」として進化している。 この授業では、Webデザインに必要な知識を講義するとともに、デバイスの多様化に対応するWebサイトの制作手法について講義と演習を行う。主に今後の標準となるHTML5やCSS3を紹介しながら、Webデザインを深く理解した上で、Webページの制作手法を学ぶ。また動的Webページを作成できる代表的なプログラミング言語JavaScriptを用いて、動的Webページ、モーショングラフィックスを含む様々な技術を学ぶ。 この講義は、経済学部の学科専門科目として、「HTML、CSS、JavaScript」などウェブデザインに関する専門知識を習得し、コンピュータを利用した実践的な技能、問題解決につなげる能力を身につけます。履修後、発展的に履修系統図が示す３年次以降の学科専門科目、教職関連科目、演習科目の履修を円滑に進めることができます。
授業の形式・方法と履修上の注意 ／Teaching method and Attention the course	１）遠隔授業の形態：Manabaを利用したオンデマンド型遠隔授業を実施する。 ２）授業参加に必要なソフト（無料）：     Visual Studio Code：https://azure.microsoft.com/ja-jp/products/visual-studio-code/ ３）質疑応答や意見交換の方法：Manabaの質問コーナーに直接に質問を共有するか、或いは先生にメールで個別に質問してください。 ４）学期末試験に替わるテストの実施方法：試験やテストを実施しません。提出したレポートで評価します。出席の代わりに毎回に簡単なレポート（やアンケート）が設けられています。必ずレポート（やアンケート）を提出して下さい。 履修者は、必ずパソコンに無料のVisual Studio Codeをインストールして下さい。事前にオンライン授業に提供される参考ウェブサイト、マニュアルを参考し、基本概念、利用方法を理解することが要求される。また積極的にGoogleやマニュアルなどインターネット資源を活用し、関連知識、活用事例を検索することが要求される。授業中に提供される参考講義資料を使い、実践的にウェブページの作成を実習する。完成したウェブページをレポートとしてオンラインにアップロードする。
事前・事後学修の内容 ／Before After Study	履修者は講義の理解を深めるために、事前にオンライン授業にアップする参考サイト、マニュアルを読んでおく。授業後は、インターネット資源を活用し、関連ウェブサイトの解析、ウェブページの作成を通し、技能を進化させる。質問などは教員にeメールやManabaにある質疑コーナーに質疑して下さい。 講義1回の事前予習に100分、レポート作成を含む事後学習に100分程度をかけて予習・復習を行うことが望ましい。
テキスト1 ／Textbooks1	書籍名 ／Title 著者 ／Author name 出版社 ／Publisher ISBN ／ISBN その他（任意） ／other 各回に資料を配ります
テキスト2 ／Textbooks2	書籍名 ／Title 著者 ／Author name 出版社 ／Publisher ISBN ／ISBN その他（任意） ／other
テキスト3 ／Textbooks3	書籍名 ／Title 著者 ／Author name 出版社 ／Publisher ISBN ／ISBN その他（任意） ／other
参考文献等1 ／References1	書籍名/ｻｲﾄ名 ／Title 30時間でマスター Webデザイン 改訂版 著者 ／Author name 実教出版企画開発部 出版社/URL ／Publisher 実教出版 ISBN ／ISBN 4407347813 その他（任意） ／other
参考文献等2 ／References2	書籍名/ｻｲﾄ名 ／Title 30時間アカデミック JavaScript入門 著者 ／Author name 大川 晃一 , 小澤 慎太郎 出版社/URL ／Publisher 実教出版 ISBN ／ISBN 4407347783 その他（任意） ／other
参考文献等3 ／References3	書籍名/ｻｲﾄ名 ／Title 著者 ／Author name 出版社/URL ／Publisher ISBN ／ISBN その他（任意） ／other
評価方法 ／Evaluation	理解度テスト（60%）：各回のレポート（アンケート、ミニテスト）や試験による授業内容に関する知識の理解度を評価する。 演習課題（40%）：授業中に提出した個々のウェブページにより、ウェブデザインに関する技能の達成度を評価する。
関連科目 ／Related Subjects	コンピュータ・アーキテクチャ、情報通信ネットワーク、アルゴリズム論、プログラミング論、情報システム論、データベース論、マルチメディ論、データマイニング論、ウェブデザイン論など
備考 ／Notes	積極的にGoogleやマニュアルなどインターネット資源を活用し、関連知識・事例を検索・真似する テキストは特になし。各回に関連資料を配布します。
到達目標 ／Learning Goal	ウェブデザインに関する専門知識を習得し、ウェブサイトやウェブページを管理者、利用者それぞれに適した形で設計できるようにする。

回 ／Time	授業計画（主題の設定） ／Class schedule	授業の内容 ／Contents of class	事前・事後学修の内容 ／Before After Study
1	Webデザイン概論	Webデザインの歴史、変化、トレンドを紹介する。	授業前に、Webデザインのトレンドについて調べる。 授業後、Webデザインの変化を正しく理解しているか復習する。
2	インターネットとサーバーの概要	IP、URL、クライアント、サーバー、TCP/IPなど概念を説明し、インターネットに関する基本概念を紹介する。	授業前に、IPアドレスの構成について調べる。 授業後、パケット通信を正しく理解しているかを復習する。
3	Webデザインスタイルガイド	ウェブサイトを鑑賞しながら、制作手順の説明、各プロセスに使われるソフトウェア、ナビゲーション、グレード、コンポーネントなどのデザインルールを紹介する。	授業前にウェブサイトの基本構成について調べる。 授業後、各コンポーネントの役割を復習する。
4	HTML入門（１）テキスト	HTML5の特徴、開発環境を紹介し、h, em, strong, listなどテキストの表示に関連するタグを利用できるようにする。	授業前に、必要なソフトウェアを正しくインストールできているかを確認する。 授業後、各タグの意味を正しく理解しているかを復習する。
5	HTML入門（２）ハイパーリンク、画像、テーブル	aタグ、imgタグ、Tableタグの使い方を理解できるようにする。	授業前に、Tableタグの構造について調べる。 授業後、Tableの行と列を正しく表示できたかを復習する。
6	Webデザインと色彩選択	色空間、RGB、HSVなど色彩に関する基礎知識を説明し、数値で決める色彩設計方法を理解できるようにする。	授業前に、色空間について調べる。 授業後、各色空間の各数字の意味を正しく理解したかを復習する。
7	CSS入門（１）ボックスモデル	CSS3の記入方法・箇所を説明し、margin, padding, borderを利用したボックスモデルを理解できるようにする。	授業前に、ボックスモデルの基本構造について調べる。 授業後、各数字の意味を正しく理解したかを復習する。
8	CSS入門（２）Floatを利用したレイアウト	left, right float, overflowを利用したレイアウト方法を理解できるようにする。	授業前にFloatレイアウトについて調べる。 授業後、図やテキストが正しくFloatしたかを復習する。
9	CSS入門（３）レスポンシブデザイン	マルチデバイスに対応するレスポンスデザインのCSS作成方法を理解できるようにする。	授業前に、レスポンシブデザインについて調べる。 授業後、PCとスマートフォンの表示の違いを復習する。
10	HTMLとCSSを利用したウェブデザイン実践	総合的にHTMLとCSSを用いて、モダンウェブサイトのデザインを実践する。	授業前に、必要な写真、デザインを考えておく。 授業後、各CSSがHTMLにどのように影響しているかを復習する。
11	JavaScript（１）変数と演算	JavaScriptの記入方法・箇所を説明し、変数、演算、文字列の連結を利用し、簡単なプログラミングを作成できるようにする。	授業前に、JavaScriptの記入場所について調べる。 授業後、各プログラムが正しく実行できたかを復習する。
12	JavaScript（２）条件とループ	IF, Switch, While, Do While, Forを利用した条件分岐、繰り返し処理を理解し、制御プログラミングの作成ができるようにする。	授業前に、条件分岐とループの種類について調べる。 授業後、各プログラムを正しく理解しているかを復習する。
13	JavaScript（３）関数	引数、戻り値、グローバル変数、ローカル変数などを説明し、再帰、ソートなど古典的なアルゴリズムを理解できるようにする。	授業前に、関数の定義、引用方法などについて調べる。 授業後、定義した関数が正しく計算したかを復習する。
14	動的ウェブデザインの実践	総合的にHTML、CSSとJavaScriptを用いて、動的ウェブサイトのデザインを実践する。	授業前に、動的ウェブサイトの事例を調べる。 授業後、JavaScriptが正しく実行できたかを復習する。