シラバス参照
|
シラバス参照
|
| 科目名／Course: ウェブコンテンツ演習／Web Design | |
| 科目一覧へ戻る | 2025/09/12 現在 |
| 科目名（和文） ／Course |
ウェブコンテンツ演習 |
|---|---|
| 科目名（英文） ／Course |
Web Design |
| 時間割コード ／Registration Code |
33009702 |
| 学部（研究科） ／Faculty |
デザイン学部 |
| 学科（専攻） ／Department |
造形デザイン学科 |
| 担当教員（○：代表教員）
／Principle Instructor （○） and Instructors |
○ムラカミ ヨシコ |
| オフィスアワー ／Office Hour |
ムラカミ ヨシコ(前期：月曜日2時限，水曜日5時限，在籍時いつでも) |
| 開講年度 ／Year of the Course |
2025年度 |
| 開講期間 ／Term |
前期 |
| 対象学生 ／Eligible Students |
3年,4年 |
| 単位数 ／Credits |
1 |
| 更新日 ／Date of renewal |
2025/03/07 |
|---|---|
| 使用言語 ／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 綿貫佳祐著、「Figmaデザイン入門 : UIデザイン、プロトタイピングからチームメンバーとの連携まで」、技術評論社 、2023 乐游棋牌_天天棋牌￥游戏下载官网附属図書館に書籍が所蔵されています。 https://opac.lib.oka-pu.ac.jp/opac/search?isbn=9784297133788 |
| 自主学習ガイド ／Expected Study Guide outside Coursework/Self-Directed Learning Other Than Coursework |
•授業の理解を深めるため、Webデザインの事例を日常的に観察し、デザインの意図を考える習慣をつけましょう。 •授業で扱うHTML/CSSの基本については、教科書やオンライン学習サイトを活用し、実際にコードを書いて試すことが重要です。 •FigmaやAdobe XDなどのデザインツールの基本操作も、事前に触れて慣れておくとスムーズです。 •最新のWebデザインのトレンドを知るために、デザイン系のブログやギャラリーサイトを定期的にチェックすることも推奨します。 |
| 資格等に関する事項 ／Attention Relating to Professional License |
本授業では、特定の資格取得を目的とはしていませんが、Webデザインや関連分野の資格を取得する際に役立つ知識を学ぶことができます。特に、以下のような資格に関心がある場合、本授業の内容が基礎知識として活かせます。 •Webデザイン技能検定（国家資格） •HTML5プロフェッショナル認定試験 •アドビ認定プロフェッショナル（Adobe Certified Professional）（旧Adobe Certified Associate） •色彩検定（配色やデザイン理論の理解に役立つ） |
| アクティブラーニングに関する事項 ／Attention Relating to Active Learning |
•課題ベース学習（PBL）：実際のWebデザインの課題を設定し、各自で考えながら解決策を導き出す。 •グループワーク?ペアワーク：情報設計やワイヤーフレーム作成の段階で、意見交換をしながらデザインをブラッシュアップ。 •発表?プレゼンテーション：最終プロジェクトでは、デザインの意図やWebサイトの構成を説明するプレゼンを行う。 •フィードバックの活用：講師やクラスメートからの意見をもとに、自分のデザインを改善するプロセスを体験する。 授業では単なる講義だけでなく、自分で考え、試し、フィードバックを受けながら学ぶスタイル を採用し、実践的なスキルを身につけられるよう工夫しています。 |
| 実務経験に関する事項 ／Attention Relating to Operational Experiences |
担当教員はWebデザインの実務経験を持ち、デザインの現場で求められるスキルや考え方を指導に活かします。 •Webデザイナー?ディレクターとしての経験（企業?フリーランスでのプロジェクト対応） •企業のWebサイトやECサイトのデザイン?構築経験 •UI/UXデザインの実践的な知識（ユーザビリティを考慮した設計） •クライアントワークやチーム開発の実践経験 |
| 備考 ／Notes |
ビジュアルデザイン学科開講の「WEBデザイン演習Ⅰ」と同時開講であるが、単位数が異なるため、課題の難易度を調整することで対応する。 |
| No. | 単元（授業回数） ／Unit (Lesson Number) |
単元タイトルと概要 ／Unit Title and Unit Description |
時間外学習 ／Preparation and Review |
配付資料 ／Handouts |
|---|---|---|---|---|
| 1 | 1 | [イントロダクション＆WEBデザイン概論] Webデザインの役割、ワークフロー、Webの基本構造 |
実例調査 | |
| 2 | 2 | [WEBデザインのワークフローと情報設計] サイトマップ、ワイヤーフレーム作成 |
実例調査 | |
| 3 | 3 | [HTMLの基本構造を理解する] HTMLのタグ、見出し?段落?リストの使い方 |
実例調査 | |
| 4 | 4 | [CSSの基礎①（スタイリングの基本）] セレクタ、ボックスモデル、背景?フォント設定 |
実例調査 | |
| 5 | 5 | [CSSの基礎②（レイアウト編）] Flexbox?Gridレイアウトの基礎 |
実例調査 | |
| 6 | 6 | [Webデザインの配色とタイポグラフィ] デザインの原則、色の使い方、フォント選び |
実例調査 | |
| 7 | 7 | [レスポンシブデザインの考え方] メディアクエリ、スマホ対応デザイン |
実例調査 | |
| 8 | 8 | [実践①：Webページのデザイン設計] Figma/Adobe XDを使ったデザイン設計 |
実例調査 | |
| 9 | 9 | [実践②：トップページのコーディング] Webサイトの基本レイアウトをコーディング |
実例調査 | |
| 10 | 10 | [実践③：フォーム?ボタンのデザイン] UIデザインの基本 |
実例調査 | |
| 11 | 11 | [WebアクセシビリティとUI/UX] 誰でも使いやすいWebデザインとは？ |
実例調査 | |
| 12 | 12 | [最終プロジェクト企画発表] 各自のWebサイトコンセプトを発表 |
実例調査 | |
| 13 | 13 | [最終プロジェクト制作① - デザインとコーディング] 自分のWebサイトをコーディング |
実例調査 | |
| 14 | 14 | [最終プロジェクト制作② - 仕上げとフィードバック] Webサイトの最終調整 |
実例調査 | |
| 15 | 15 | [最終発表＆講評] 各自のWEBサイトのプレゼン、総評 |
プレゼンテーション |
| 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） | ○ | ○ | ○ | ○ |
| 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 |
50 | 10 | 10 | 30 | |||