| シラバス参照 |
| 年度 | 2025 |
|---|---|
| 科目名 | Webデザイン応用 |
| 担当者名 | 甲斐 隆浩 |
| 単位 | 2.0 |
|
科目目的 Course Objectives |
基礎科目「Webデザイン基礎」の応用科目である。 基本的なホームページの制作経験を土台にして、CSSを利用した実践的なWebサイトの制作技術を学ぶ。Webサイト制作の実習に取り組み、コンセプトに応じたWebページをデザインする手法を習得する。これにより今日のWebサイトの仕組みを理解し、仕様に応じたWebサイトを構築する技法を習得する。 |
|---|---|
|
到達目標 Class Goal |
・Webサイトを効率よく制作できる。 ・ユーザビリティ―と保守性を考慮した、CSSを活用したWebサイトを制作できる。 ・JavaScriptを用いたインタラクティブな機能を、Webサイトに組み入れる事ができる。 ・最終目標として、オリジナルのWebサイトが制作できる。 |
|
授業内容 The Content of the Course |
前半はWebサイト制作例題にそって、Webサイトの制作手法と、CSSによる効率的なデザイン手法を中心に学ぶ。後半はWebサイト掲載用の写真編集、JavaScriptなどインタラクティブ要素の導入、CSSレイアウト機能とレスポンシブデザインについて実習する。 |
|
授業計画 Class Plan |
対面15回 【対面】第1回 Webサイトの基礎知識の見なおし インターネットとWebサイト、Webサイト制作のながれ、等 基本的なWebページの制作 【対面】第2回 HTMLの基本とCSSの役割 文字の大きさ、フォント、文字色、等 【対面】第3回 CSSの基本 レイアウトとデザイン 基本的な書式の設定手法 【対面】第4回 画像素材の制作 PhotoShopなど画像編集ソフトを用いた基礎的な写真の編集 画像の表示とレイアウト、等 【対面】第5回 オリジナルのWebページ制作 ［小課題１］ 【対面】第6回 画像素材の活用 画像のレイアウト ロゴマーク、背景画像、等 【対面】第7回 リンクとナビゲーション サブページの効率的な制作とナビゲーション 詳細情報へのリンク 【対面】第8回 インデックスページの制作 トップページの役割 ページ専用スタイルの定義 Webフォントの活用 【対面】第9回 オリジナルの基本構成Webサイト制作 ［小課題２］ 【対面】第10回 テーブル テーブルの基本デザイン 【対面】第11回 フォーム 投稿フォームの基本デザイン フォームでコードサービスの利用 【対面】第12回 Java Scriptの基本 JavaScriptのWebページへの組込み 【対面】第13回 Java Scriptの基本 JavaScriptのWebページへの組込み 【対面】第14回 オリジナルWebサイトの制作（１回目）［総合課題］ 掲載コンテンツの制作と組み入れ 【対面】第15回 オリジナルWebサイトの制作（２回目） WebサーバとFTP |
|
授業方法 Class Method |
対面授業。パソコン教室でのWebサイト制作実習が主体である。 制作技術の講義内容をもとに、パソコン上でWebサイトの制作実習を行う。実習内容はmwu.jpのClassroomにて資料を配信する。この資料に沿って、各自のペースで演習課題に取り組む。操作トラブルや技術的な疑問に対し、実習時に個別で支援を行う。 主にWebサイト制作ソフトを用いて制作を行う。（※ライブ配信での遠隔授業に切り替わった場合には、自宅のパソコンにWebサイト制作ソフトをインストールして実習する。） |
|
Google Classroom クラスコード Google Classroom - Class Code |
共通教育科目のクラスコードは、「共通教育サイト」に一覧掲示する。 抽選終了後、受講が決まった科目のクラスコードを確認しClassroomへ入室すること。 科目担当者からの招待は行わない。 「共通教育サイト」 https://kyotsu.mukogawa-u.ac.jp/index.html ◆Classroomへの参加登録の遅れや入室間違いは、教員からの指示が得られず課題等が未提出となる。それらが単位修得に係る評価に影響するので、十分に注意すること。 |
|
アクティブ・ラーニングの形態 Form of Active Learning |
パソコンでの制作実習 |
|
準備学習（予習・復習等） Review and Preview |
mwu.jpのClassroomにて、講義資料を配信する。 【予習】 Classroomに次回授業の予定を掲載する。関連範囲について参考書籍や参考サイトを閲覧し概要を把握すること。 【復習】 講義内容について模範作品を参考に、授業内で実習した作品を完成させること。 実習内で学んだキーワードについてネットなどを活用して見直しをすること。 実習内容をもとにオリジナル作品を制作して復習すること。 欠席した場合は次回までに、Classroomで配信している欠席回の資料をもとに自習しておくこと。 |
|
評価方法 Evaluation Method |
・平常点(100点) 平常点等配点内訳:実習作品の提出 30点（3点×10実習） 小課題 40点（20点×2作品） 総合課題 30点 課題の提出締切は厳守すること。 何らかの事情がある場合は、速やかに担当者まで連絡すること。 |
|
課題(試験やレポート等)に対するフィードバックの方法 Task Feedback |
課題について評価後、授業中に解説を行う。（ただし最終授業での課題については授業内でフィードバック出来ない。）また必要に応じ個別の評価ポイントをmwu.jpのClassroomで配信する。 |
|
教科書 Textbook |
mwu.jpのClassroomで講義資料を配信する。 |
|
参考書 Reference Books |
よくわかる HTML5&CSS3ウェブサイト構築の基本と実践/FOM出版/富士通オフィス機器 世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書/赤間 公太郎/技術評論社 できるポケット Web制作必携 HTML&CSS全事典/加藤善規/インプレス |
|
地域との連携 Cooperation with the Community |
|
|
受講上の注意 Notices |
・パソコンでのファイルやフォルダーの基本的な操作ができること。 ・HTML言語でWebページを作成した経験がある事が望ましい。 （予め基礎科目の「Webデザイン基礎」を履修しておくことが望ましい。） |
|
卒業(修了)認定・学位授与の方針との関連 Relation to the Diploma and Degree Policy |
|
|
実務経験と授業との関連 How the Instructors' Experiences will shape Course Contents |
概ね20年デザイン制作会社にて、広告やWebサイトの制作にあたる。Web制作の現状を踏まえたWeb技術の授業を行う。 |
|
教科書コメント |
| シラバス参照 |