シラバス参照

授業情報／Course information

科目名／Course: ＷＥＢデザイン／Web Design
科目一覧へ戻る 2026/03/23 現在

授業基本情報
科目名（和文）
／Course		 ＷＥＢデザイン
科目名（英文）
／Course		 Web Design
時間割コード
／Registration Code		 36005101
学部（研究科）
／Faculty		 デザイン学部
学科（専攻）
／Department		 工芸工業デザイン学科
担当教員（○：代表教員）
／Principle Instructor （○） and Instructors		 ○石　王美
オフィスアワー
／Office Hour		 石　王美(月曜日１２：４０〜１４：２０(３２０５室))
開講年度
／Year of the Course		 2026年度
開講期間
／Term		 前期
対象学生
／Eligible Students		 2年,3年,4年
単位数
／Credits		 2
授業概要情報
更新日
／Date of renewal		 2026/02/17
科目ナンバリング
／Course Numbering		 履修案内を参照
使用言語
／Language of Instruction		 日本語
オムニバス
／Omnibus		 該当なし
授業概略と目的
／Cource Description and Objectives		 本授業は実習を中心としたWeb制作の基礎演習である。近年、AI技術の発展によりコーディングの自動生成が可能になっているが、Web制作を理解するためには基本的なコーディングの知識が重要である。本授業では高度なプログラミングではなく、HTML・CSSを用いた基礎的なWebコーディングを実際に手を動かしながら学び、単一のコードでスマートフォンとPCの双方に対応できるレスポンシブWebページの制作を目指す。(C-1)

HTML・CSSの基礎を理解し、実習を通して基本的なWebページを制作することができる。(C-1)

レスポンシブWebデザインの考え方を理解し、PCとスマートフォンに対応したレイアウトを実装することができる。(C-1)

Web制作の基本的な流れを理解し、デザイン学部の視点からページ構成を考えることができる。(C-1)
履修に必要な知識・能力・キーワード
／Prerequisites and Keywords		 Webデザイン、HTML、CSS、レスポンシブデザイン、レイアウト、ユーザーインタフェース
履修上の注意
／Notes		 履修者は、学科内コンピュータ演習室の設備に関する利用規定を厳守すること。
プログラミング作業が授業の中心となるので、難易度が高いことを理解して履修すること。
教科書
／Textbook(s)		 スラスラわかるHTML&CSSのきほん、 第3版、 狩野祐東著（SBクリエイティブ）
参考文献等
／References
自主学習ガイド
／Expected Study Guide outside Coursework/Self-Directed Learning Other Than Coursework		 授業内で学ぶの制作技術に関するスキルに問題がある場合は、時間外にて必ずその習熟に努めること。
資格等に関する事項
／Attention Relating to Professional License		 ウェブデザイン技能検定（国家検定）
Webクリエイター能力認定試験
アクティブラーニングに関する事項
／Attention Relating to Active Learning		 プレゼンテーション（A)
課題のプロセスや感じだこと、またその結果をクラス全体に対した発表する。
実務経験に関する事項
／Attention Relating to Operational Experiences		 ウェブデザイナーとしての実務経験を基に、実践的なWeb制作の視点を取り入れた指導を行う。
授業改善アンケートへのレスポンス
（2025年度以前は「備考」）
／Response to Course Evaluations
授業計画詳細情報
No. 単元（授業回数）
／Unit (Lesson Number)		 単元タイトルと概要
／Unit Title and Unit Description		 時間外学習
／Preparation and Review		 配付資料
／Handouts
1 1 [ガイダンス]
授業の進め方、評価方法、Web制作の基礎について説明
 シラバスを確認すること。
2 2 [Webサイトの概要]
Webサイトの構成要素と基本的な考え方		 授業内容を整理し復習すること。
3 3 [HTMLの基礎1]
HTMLの基本的な書式		 授業内容の復習を行うこと。
4 4 [HTMLの基礎2]
制作準備と基本的なHTMLタグ		 基本タグを用いた練習を行う。
5 5 [HTMLの構造1]
見出し・段落・リストの作成		 リンクと画像の配置
6 6 [HTMLの構造2]
リンクと画像の配置		 リンクと画像の配置
7 7 [HTMLの構造3]
複数ページ構成とナビゲーション
 次回までにページ構成を確認すること。
8 8 [CSSの基礎]
テキスト装飾と背景設定		 スタイルの適用練習を行う。
9 9 [CSSの構造1]
ブテキスト装飾と背景設定		 スタイルの適用練習を行う。
10 10 [CSSの構造2]
ブロック要素とレイアウト基礎（flexbox）		 レイアウト調整の練習を行う。
11 11 [Webサイト企画]
レスポンシブWebデザイン（メディアクエリ）		 授業内容を整理し復習すること。
12 12 [課題制作1]
サイト構成図とデザイン検討		 デザイン案を作成する。
13 13 [課題制作2]
素材制作とページ設計		 制作を進める。
14 14 [課題制作3]
コーディング作業		 制作を進める。
15 15 [講評]
制作課題の講評
成績評価詳細情報
到達目標及び観点／Learning Goal and Specific Behavioral Viewpoints
No. 到達目標
／Learning Goal		 知識・理解
／Knowledge & Undestanding		 技能・表現
／Skills & Expressions		 思考・判断
／Thoughts & Decisions		 伝達・コミュニケーション
／Communication		 協働
／Cooperative Attitude
1 HTML・CSSの基礎を理解し、実習を通して基本的なWebページを制作することができる。(C-1) ○ ○ ○
2 レスポンシブWebデザインの考え方を理解し、PCとスマートフォンに対応したレイアウトを実装することができる。(C-1) ○ ○ ○
3 Web制作の基本的な流れを理解し、デザイン学部の視点からページ構成を考えることができる。(C-1) ○ ○ ○ ○
成績評価方法と基準／Evaluation of Achievement
※出席は2/3以上で評価対象となります。
No. 到達目標
／Learning Goal		 定期試験
／Exam.		 課題 出席・授業対応 プレゼンテーション
1 HTML・CSSの基礎を理解し、実習を通して基本的なWebページを制作することができる。(C-1) ○ ○
2 レスポンシブWebデザインの考え方を理解し、PCとスマートフォンに対応したレイアウトを実装することができる。(C-1) ○ ○ ○
3 Web制作の基本的な流れを理解し、デザイン学部の視点からページ構成を考えることができる。(C-1) ○ ○ ○
評価割合（％）
／Allocation of Marks		 50 40 10
評価ルーブリックはこちら

科目一覧へ戻る