シラバス参照

授業情報／Course information

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

授業基本情報
科目名（和文）
／Course		 ＷＥＢデザイン演習
科目名（英文）
／Course		 Web Design
時間割コード
／Registration Code		 35004601
学部（研究科）
／Faculty		 デザイン学部
学科（専攻）
／Department		 ビジュアルデザイン学科
担当教員（○：代表教員）
／Principle Instructor （○） and Instructors		 ○ムラカミ　ヨシコ
オフィスアワー
／Office Hour		 ムラカミ　ヨシコ(前期：月曜日2時限，水曜日5時限，在籍時いつでも)
開講年度
／Year of the Course		 2026年度
開講期間
／Term		 後期
対象学生
／Eligible Students		 2年,3年,4年
単位数
／Credits		 2
授業概要情報
更新日
／Date of renewal		 2026/03/10
科目ナンバリング
／Course Numbering		 履修案内を参照
使用言語
／Language of Instruction		 日本語
オムニバス
／Omnibus		 該当なし
授業概略と目的
／Cource Description and Objectives		 Webデザインの考え方と実務に近いワークフローを学び、デザイナーとして必要な知識とスキルを身につける。情報設計・UI/UXデザイン・Webサイトの構造を理解し、デザインとディレクションができるようになることを目指す。また、Web制作に関わるデザイナーとして、エンジニアとの円滑なコミュニケーションができるよう、コーディング技術の基礎を学び、HTML/CSSの基本的な知識を身につける。最終的に、オリジナルのWebサイトを企画・設計・デザインし、実際に構築した上で発表することをゴールとする。
◆到達目標（C-2 に関連）
1.Webデザインの基本原則（レイアウト、タイポグラフィ、配色、UI/UX）を理解する。
2.Webサイトの構造を情報設計の観点から考え、適切にデザインできる。
3.ワイヤーフレームやプロトタイプを作成し、デザインの意図を説明できる。
4.HTML/CSSの基本を理解し、エンジニアとの連携に必要な知識を持つ。
5.デザインコンセプトに基づいたWebサイトを制作し、プレゼンテーションできる。
履修に必要な知識・能力・キーワード
／Prerequisites and Keywords		 •基本的なPC操作スキル
•デザインに関する基礎知識（色・レイアウト・タイポグラフィの基本）
•HTML/CSSに興味があり、Webデザインを学びたい意欲
•新しいツール（Figma / Adobe XD など）を試してみる柔軟性
•論理的に考え、情報を整理する力（サイト構成やワイヤーフレーム作成に必要）
履修上の注意
／Notes		 •課題の提出が成績評価に大きく関わるため、締切を厳守してください。
•デザインやコーディングの演習があるため、自主的に手を動かしながら学ぶ姿勢が求められます。
•プログラミング未経験でも履修可能ですが、HTML/CSS に関する基本的な学習を並行して行うことを推奨します。
教科書
／Textbook(s)		 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］」（著：Mana、出版社：ソシム）
参考文献等
／References		 Robin Williams著、吉川典秀訳、小原司、米谷テツヤ日本語版解説、「ノンデザイナーズ・デザインブック」、マイナビ出版、2016
本学附属図書館に書籍が所蔵されています。
https://opac.lib.oka-pu.ac.jp/opac/search?isbn=9784839955557

松下絵梨著、「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」、翔泳社、2020
本学附属図書館に書籍が所蔵されています。
https://opac.lib.oka-pu.ac.jp/opac/search?isbn=9784798158716
自主学習ガイド
／Expected Study Guide outside Coursework/Self-Directed Learning Other Than Coursework		 •授業の理解を深めるため、Webデザインの事例を日常的に観察し、デザインの意図を考える習慣をつけましょう。
•授業で扱うHTML/CSSの基本については、教科書やオンライン学習サイトを活用し、実際にコードを書いて試すことが重要です。
•Adobe XDなどのデザインツールの基本操作も、事前に触れて慣れておくとスムーズです。
•最新のWebデザインのトレンドを知るために、デザイン系のブログやギャラリーサイトを定期的にチェックすることも推奨します。
資格等に関する事項
／Attention Relating to Professional License		 本授業では、特定の資格取得を目的とはしていませんが、Webデザインや関連分野の資格を取得する際に役立つ知識を学ぶことができます。特に、以下のような資格に関心がある場合、本授業の内容が基礎知識として活かせます。

•Webデザイン技能検定（国家資格）
•アドビ認定プロフェッショナル（Adobe Certified Professional）
•色彩検定（配色やデザイン理論の理解に役立つ）
アクティブラーニングに関する事項
／Attention Relating to Active Learning		 •課題ベース学習（PBL）：実際のWebデザインの課題を設定し、各自で考えながら解決策を導き出す。
•グループワーク・ペアワーク：情報設計やワイヤーフレーム作成の段階で、意見交換をしながらデザインをブラッシュアップ。
•発表・プレゼンテーション：最終プロジェクトでは、デザインの意図やWebサイトの構成を説明するプレゼンを行う。
•フィードバックの活用：講師やクラスメートからの意見をもとに、自分のデザインを改善するプロセスを体験する。
授業では単なる講義だけでなく、自分で考え、試し、フィードバックを受けながら学ぶスタイル を採用し、実践的なスキルを身につけられるよう工夫しています。
実務経験に関する事項
／Attention Relating to Operational Experiences		 担当教員はWebデザインの実務経験を持ち、デザインの現場で求められるスキルや考え方を指導に活かします。
•Webデザイナー・ディレクターとしての経験（実務でのプロジェクト対応）
•企業のWebサイトやECサイトのデザイン・構築経験
•UI/UXデザインの実践的な知識（ユーザビリティを考慮した設計）
•クライアントワークやチーム開発の実践経験
授業改善アンケートへのレスポンス
（2025年度以前は「備考」）
／Response to Course Evaluations
授業計画詳細情報
No. 単元（授業回数）
／Unit (Lesson Number)		 単元タイトルと概要
／Unit Title and Unit Description		 時間外学習
／Preparation and Review		 配付資料
／Handouts
1 第1回 [イントロダクション＆WEBデザイン概論]
Webデザインの役割、ワークフロー、Webの基本構造、		 実例調査
2 第2回 [HTMLの基礎①]
Adobe Dreamweaverを使ったコーディング		 実例調査
3 第3回 [HTMLの基礎②]
HTMLとは、ファイルの作り方、階層		 実例調査
4 第4回 [HTMLの基礎③]
HTMLのタグ、見出し・段落・リストの使い方		 実例調査
5 第5回 [CSSの基礎①]
CSSとは、ファイルの作り方、階層		 実例調査
6 第6回 [CSSの基礎②]
WEBデザインのレイアウトの基礎		 実例調査
7 第7回 [CSSの基礎③]
WEBデザインの原則、色の使い方、フォント選び		 実例調査
8 第8回 [CSSの基礎④]
メディアクエリ、スマホ対応デザイン（レスポンシブデザイン）		 実例調査
9 第9回 [実践①：Webページのデザイン]
各自のWebサイトコンセプト設計		 実例調査
10 第10回 [実践②：Webページのデザイン]
Adobe XDを使ったデザイン設計		 実例調査
11 第11回 [実践③：Webページの構築]
自分のWebサイトをコーディング		 実例調査
12 第12回 [実践④：Webページの構築]
自分のWebサイトをコーディング		 実例調査
13 第13回 [実践⑤：Webページの構築]
WebアクセシビリティとUI/UX		 実例調査
14 第14回 [最終発準備]
Webサイトの最終調整、原稿作成		 実例調査
15 第15回 [最終発表＆講評]
各自のWEBサイトのプレゼン、総評		 プレゼンテーション
成績評価詳細情報
到達目標及び観点／Learning Goal and Specific Behavioral Viewpoints
No. 到達目標
／Learning Goal		 知識・理解
／Knowledge & Undestanding		 技能・表現
／Skills & Expressions		 思考・判断
／Thoughts & Decisions		 伝達・コミュニケーション
／Communication		 協働
／Cooperative Attitude
1 Webデザインの基本原則（レイアウト・配色・UI/UX）を理解し、適切なデザインができる。（C-2） ○ ○ ○
2 HTML/CSSの基礎を学び、Webページの構造を理解する。（C-2） ○ ○
3 ワイヤーフレームやプロトタイプを作成し、情報設計の考え方を身につける。（C-2） ○ ○ ○ ○ ○
4 自分のデザインの意図を論理的に説明し、発表できる。（C-2） ○ ○ ○ ○
5 最終プロジェクトとして、自分で設計・デザインしたWebサイトを制作し、プレゼンできる。（C-2） ○ ○ ○ ○
成績評価方法と基準／Evaluation of Achievement
※出席は2/3以上で評価対象となります。
No. 到達目標
／Learning Goal		 定期試験
／Exam.		 課題 プレゼンテーション グループワーク 出席・授業対応
1 Webデザインの基本原則（レイアウト・配色・UI/UX）を理解し、適切なデザインができる。（C-2） ○ ○
2 HTML/CSSの基礎を学び、Webページの構造を理解する。（C-2） ○ ○
3 ワイヤーフレームやプロトタイプを作成し、情報設計の考え方を身につける。（C-2） ○ ○ ○ ○
4 自分のデザインの意図を論理的に説明し、発表できる。（C-2） ○ ○
5 最終プロジェクトとして、自分で設計・デザインしたWebサイトを制作し、プレゼンできる。（C-2） ○ ○ ○
評価割合（％）
／Allocation of Marks		 40 10 10 40
評価ルーブリックはこちら

科目一覧へ戻る