|| 英語(English)
学習支援計画書(シラバス) 検索システム
専門教育課程 メディア情報学科
授業科目区分 科目名 単位数 科目コード 開講時期 履修方法
専門教育課程
専門科目
専門
Webデザイン
Web Design
2 F002-01 2022年度
1期(前学期)
修学規程第4条を参照
担当教員名
*印は、実務経験のある教員を示しています。
授業科目の学習・教育目標
キーワード 学習・教育目標
1.情報設計 2.Webデザイン 3.HTML/CSS 4.知的財産権 5.UI/UX Web制作の基本を身につける。Webサイトのコンセプトメイキング、情報の構造化、Webペー ジのデザイン、マルチメディア素材の活用、マークアップ言語とスタイルシート言語の記述 について、自身のPCにてWebページの作成を実際に作成しながら理解する。制作の他、個人 情報保護法、知的財産に関する法的規制についても理解する。
授業の概要および学習上の助言
情報設計の基本概念を基にして、Webページ制作の知識及び技能を身に付ける。 World Wide Web (WWW)の概要を知り、企画立案、設計・制作、運用・管理といったWebサイト制作手順を実習を通して習得す る。この際、Webページを表現するための記述法として、マークアップ言語HTMLの基本的な文法、スタイルシートCSSの基本的 な使い方を習得する。 また、多様化する閲覧環境への対応方法やアクセシビリティに配慮し、Webページを通じた情報発信を行うための基本的な知 識を身につける。
教科書および参考書・リザーブドブック
教科書:入門Webデザイン 第四版[公益財団法人 画像情報教育振興協会(CG-ARTS)] 参考書:初心者からちゃんとしたプロになる HTML+CSS標準入門[エムディエヌコーポレーション] リザーブドブック:指定なし
履修に必要な予備知識や技能
・コンピュータの基本操作に慣れておくこと。 ・タイピングに慣れておくこと。 ・画面の移動や保存等のショートカットを積極的に覚え、使用すること。
学生が達成すべき行動目標
No. 学科教育目標
(記号表記)
A,B,C,H,I World Wide Webの閲覧、及びこれを通じた情報の検索を行うことができる。
I,K,M,N HTMLの記述により、Webページ上にて文字とマルチメディアを用いた情報の整理と提示ができる。
F,J WebページのコンセプトメイキングからWebサーバへのアップロードまで、Web制作の流れを理解する。
E,I,L,M CSSを使ったWebページのレイアウトができる。
B,E,I,K,L,M,N 制作するWebページの目的を捉え、それに即した表現、配置を工夫したWebページを作成できる。
B,L ネットワーク上の個人情報、セキュリティ、著作権に関する規制、ネチケットがわかる。
達成度評価
評価方法
試験 クイズ
小テスト
レポート 成果発表
(口頭・実技)
作品 ポートフォリオ その他 合計
総合評価割合 20 20 0 0 40 0 20 100
指標と評価割合 総合評価割合 20 20 0 0 40 0 20 100
総合力指標 知識を取り込む力 10 10 0 0 0 0 0 20
思考・推論・創造する力 10 10 0 0 20 0 0 40
コラボレーションと
リーダーシップ
0 0 0 0 0 0 0 0
発表・表現・伝達する力 0 0 0 0 20 0 0 20
学習に取組む姿勢・意欲 0 0 0 0 0 0 20 20
※総合力指標で示す数値内訳、授業運営上のおおよその目安を示したものです。
評価の要点
評価方法 行動目標 評価の実施方法と注意点
試験 授業スライド及び講義用教科書より出題(Webに関する基本的な用語、制作手法に関する出題)。
クイズ
小テスト
授業スライド及び講義用教科書より出題。 それぞれUIデザインの基礎用語、HTML・CSSの記述に関する範囲から出題。
レポート
成果発表
(口頭・実技)
作品 この授業で学んだ知識、スキルを使って、成果物が出来上がっているかを評価する。 ポートフォリオサイトと、制作意図のレポートを合わせて提出。
ポートフォリオ
その他 学習に取組む姿勢・意欲(受講態度、出席状況など)を評価する。
具体的な達成の目安
理想的な達成レベルの目安 標準的な達成レベルの目安
学生が達成すべき行動目標が総合的に90%以上達成できている こと。 学生が達成すべき行動目標が総合的に70%程度達成できている こと。
CLIP学習プロセスについて
一般に、授業あるいは課外での学習では:「知識などを取り込む」→「知識などをいろいろな角度から、場合によってはチーム活動として、考え、推論し、創造する」→「修得した内容を表現、発表、伝達する」→「総合的に評価を受ける、GoodWork!」:のようなプロセス(一部あるいは全体)を繰り返し行いながら、応用力のある知識やスキルを身につけていくことが重要です。このような学習プロセスを大事に行動してください。
※学習課題の時間欄には、指定された学習課題に要する標準的な時間を記載してあります。日々の自学自習時間全体としては、各授業に応じた時間(例えば2単位科目の場合、予習2時間・復習2時間/週)を取るよう努めてください。詳しくは教員の指導に従って下さい。
授業明細
回数 学習内容 授業の運営方法 学習課題 予習・復習 時間:分
1 イントロダクション ■講義 ・Webサイトとは ・Web制作の流れ ■実習 ・Webサイト制作に必要なソフトウェアの準備 講義 実習 振り返り <予習> 講義用教科書の1章を一読のこと 。 <復習> ソフトウェアのインストールを完 了し、それらを実際に触ってみる こと。 120
2 HTMLの基本 ■講義 ・Webサイトの基本構成 ■実習 ・HTMLを記述する 講義 実習 振り返り <予習> 講義用教科書の4-1章を一読のこ と。 <復習> 自身のプロフィールページをHTML で記述してみること 120
3 CSSの基本 ■講義 ・CSSによる装飾法 ■実習 ・CSSを用いたHTMLの装飾 講義 実習 振り返り <予習> 講義用教科書の4-2章を一読のこ と。 <復習> 自身のプロフィールページをCSS で装飾してみること 120
4 CSSによるレイアウト ■講義 ・CSSによるレイアウト組み ■実習 ・クラスとIDを用いたCSSの指定 講義 実習 振り返り <予習> 講義用教科書の3-7章を一読のこ と。 <復習> 自身のプロフィールページについ てCSSでレイアウトを組んでみる こと 120
5 HTML/CSSの演習とWebフォント ■小テスト ・Webに関する基礎知識 ・HTML、CSS ■講義 ・Webフォントについて ■実習 ・Webフォントの利用 小テスト 講義 実習 振り返り <予習> 講義用教科書の3-1章を一読のこ と。 <復習> 次週から作成するポートフォリオ サイトに記載したい内容について まとめること。 120
6 HTML/CSSに関する習熟度の確認 Webコンテンツの構成 ■講義 ・目的に応じた導線づくり ■実習 ・デザインツールの基本的な使用法 自己点検 講義 実習 振り返り <予習> 講義用教科書の2章を一読のこと 。 <復習> 自分のポートフォリオサイトを作 成するにあたり、参考としたいサ イトを探すこと 120
7 Webデザインの基本 ■講義 ・Webデザインにおいて押さえるべきポイント ■実習 ・デザインツールを用いたワイヤーフレームの作成 講義 実習 振り返り <予習> 講義用教科書の3-6,3-7章を一読 のこと。 <復習> ワイヤーフレームを完成させるこ と 120
8 Webデザイン演習 ■講義 ・UIデザインについて ■実習 ・Webデザインの作成 講義 実習 振り返り <予習> 講義用教科書3-2,3-3,3-4,3-5章 を一読のこと。 <復習> デザインを完成させること 120
9 プロトタイピング ■講義 ・プロトタイピング機能を用いたデザインの確認 ■実習 ・デザインプロトタイプの作成 講義 実習 振り返り <予習> 講義用教科書5-1章を一読のこと 。 <復習> プロトタイピングを踏まえての、 デザインの修正 120
10 Webデザインの反映 ■講義 ・実装手順について ■実習 ・デザインを反映したHTMLの作成 講義 実習 振り返り <復習> デザインを反映したHTMLを完成さ せること。 120
11 CSSによるレイアウト(応用) ■小テスト ・UIデザインの基礎用語 ・Webに関する基礎知識 ■実習 ・デザインを反映したCSSの作成 小テスト 実習 振り返り <予習> 講義用教科書4章を一読のこと 。 <復習> デザインを反映したCSSを完成さ せること。 120
12 Webデザインの基礎知識に関する習熟度の確認 Webサイトに関連する法的規制とアナリティクス ■講義 ・Webサイトに関連する法的規制 ・アナリティクスの活用 ・利用規約とプライバシーポリシー ■実習 ・ポートフォリオサイトの拡充 自己点検 講義 実習 振り返り <予習> 講義用教科書appendixを一読のこ と。 <復習> ポートフォリオサイトを完成させ ること。 120
13 Webサイトのアップロード ■講義 ・Webサイトのアップロード手順 ■実習 ・Webサイトのアップロード(※学内サーバー) ・アップロードしたサイトをグループ内で確認 講義 実習 振り返り <予習> 講義用教科書5章を一読のこと。 <復習> ポートフォリオサイトの不具合箇 所を修正し、アップロードするこ と。 120
14 達成度確認試験/講評 ■試験 ・Webサイトに関連する法的規制 ・Webに関する基礎知識 ・HTML/CSSの記述 試験 振り返り <予習> これまでの授業スライド及び教科 書の内容について一読のこと。 <復習> 試験内で分からなかった点につい て改めて確認すること。 120
15 ■講義 ・試験内容の解説 ・ポートフォリオサイトの講評 講義 振り返り 自己点検 <復習> 制作した作品や他の作品を見て授 業を振り返り、次回制作時に気を つけたい点について考える。 90