2025年度前期Ｗｅｂデザイン・演習１

曜日・時限	金曜日１時限,集中不定期その他	期別	前期	週時間数	4
ナンバリング	HB330106,HW330106
開講学科等	総合情報学部-デジタルゲーム学科
教員名	倉地　宏幸倉地　宏幸職務履歴 https://research.osakac.ac.jp/index.php?%e5%80%89%e5%9c%b0%e3%80%80%e5%ae%8f%e5%b9%b8 教員情報データベースに遷移します

目的

この科目は、Webデザインに興味を持つ、３年生を対象とした演習科目である。主に、今までにWebページ制作の経験がなく、これから学びたいという学生を対象とする。
従来のWebデザインの授業では、主にHTML文書の作成やコードの記述が中心になっていたが、そのようなスキルの修得だけでは現代のWebコンテンツ制作には不十分である。Web制作は最もPDCAのサイクルが早い分野であり、より多くの人に何をどのように伝えるかが重要になっている。
この科目では、CMSを利用したWebサイト制作を通して、文字、画像、色、図形を総合的にデザインの素材として取り扱い、Webコンテンツ制作の専門知識を得て、それらを適切に応用する能力を身に付けることを目的とする。

授業計画

授業回	形式	学修内容	学修課題
1	A, C	ガイダンスと基礎講義・授業概要、評価方法、使用ツールの説明。・Webデザインを学ぶ上で、これからの時代に必要なことは何かについて考える。・ウェブサイトの仕組みと、ページを記述している中身を知る。	事前学修	この授業を受けるにあたり、シラバスをよく読み、自分がどんな事を学ぼうとしているか考え、必要なノートPCの機能やソフトウェアの使用について予習しましょう。（２時間）
1	A, C		事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
2	A, C	HTML基本（１）HTMLを書いてみましょう・HTML文書の構造と要素・要素・属性・値・ファイル名と拡張子	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
2	A, C	HTML基本（１）HTMLを書いてみましょう・HTML文書の構造と要素・要素・属性・値・ファイル名と拡張子	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
3	A, C	HTML基本（２）ファイルパス・アンカー要素とハイパーリンク・絶対パスと相対パス	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
3	A, C	HTML基本（２）ファイルパス・アンカー要素とハイパーリンク・絶対パスと相対パス	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
4	A, C	HTML基本（３）HTMLの構造と要素の役割・レイアウト要素・ワイヤーフレームの作成	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
4	A, C	HTML基本（３）HTMLの構造と要素の役割・レイアウト要素・ワイヤーフレームの作成	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
5	A, C	HTML基本（４）画像の取り扱い・Webに適した画像形式・Webページのための写真撮影技法・画像のデータ量の求め方	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
5	A, C		事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
6	A, C	HTML基本（５）ページレイアウトとCSS ・CSS（カスケーディング・スタイルシート）とは何か・属性の継承とその書き方・CSSの添付と参照	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
6	A, C		事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
7	A, C	CMSを使ったコンテンツの管理・CMS（コンテンツマネジメントシステム）とは何か	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
7	A, C	CMSを使ったコンテンツの管理・CMS（コンテンツマネジメントシステム）とは何か	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
8	A, C	CMSを使ったデザインの管理・ページテンプレートの利用	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
8	A, C	CMSを使ったデザインの管理・ページテンプレートの利用	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
9	A, C	デジタルコンテンツと著作権・Web制作における著作物と著作権について・Webにおける引用の方法	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
9	A, C	デジタルコンテンツと著作権・Web制作における著作物と著作権について・Webにおける引用の方法	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
10	A, C	HTML+CSS（１）見やすさとデザイン（１）・アクセシビリティ対応「文字の表現」・ウェブフォントの利用方法	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
10	A, C	HTML+CSS（１）見やすさとデザイン（１）・アクセシビリティ対応「文字の表現」・ウェブフォントの利用方法	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
11	A, C	HTML+CSS（２）見やすさとデザイン（２）・アクセシビリティ対応「ウェブページの配色」	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（２時間）
11	A, C	HTML+CSS（２）見やすさとデザイン（２）・アクセシビリティ対応「ウェブページの配色」	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（２時間）
12	A, C	HTML+CSS（３）見やすさとデザイン（３）・グローバルナビゲーション	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（４時間）
12	A, C	HTML+CSS（３）見やすさとデザイン（３）・グローバルナビゲーション	事後学修	解りにくかったところがあれば、次週までに担当教員に質問して理解を深め、自分でも教科書・参考書を用いて演習を十分に行いましょう。（４時間）
13	A, C	最終課題ガイダンスとレクチャー・これまでの学習内容を統合した総合課題を提示し、評価基準と取り組み方についてレクチャーする。	事前学修	授業の資料に示された課題に取り組み、分からなかったところ、できなかったところを授業時間に質問できるように準備しておきましょう。（４時間）
13	A, C		事後学修	課題提出に備え、課題の制作条件や提出のルール、期限などを確認しましょう。（４時間）

授業形式記号

A:一斉授業（通常の講義）
B:問題発見・解決学習、プロジェクト学習
C:体験、実験、実習、演習など

D:調査分析、解析など
E:ものづくり、作品制作
F:グループワーク（ディスカッション・ディベートを含む）

G:プレゼンテーション
H:地域・企業　連携型学習
I:その他

到達目標

（１）知識・理解・応用力【DP-B-1-1】【DP-W-1-1】
（デジタルゲームとエンタテインメントコンテンツ分野における基礎的な専門知識を包括的に有し、それらを適切に応用する能力を備えている。）
・HTML+CSSの基本的な文法を理解し、コンテンツを制作できる。
・Webデザインにおける色彩設計、レイアウト、UXについて理解し、コンテンツを制作できる。

（２）汎用的技能【DP-B-2-1】【DP-W-2-1】
（技術の伝達やグループ作業に必要な文章力とコミュニケーション力を有している。）
・インターネットでの情報発信における著作権などの情報リテラシーについて理解できる。
・経験や学修したことを文章や写真を構成してWebメディアを通じて発信できる。

（３）態度・志向性【DP-B-3-1】【DP-W-3-1】
（知識や技術を用いて、社会の発展のために貢献できる。）
・コンピュータ上で色や図形、文字を扱い、Webに適したファイル形式で出力・表示することができる。

（４）総合的な学習経験と創造的思考力【DP-B-4-1】【DP-W-4-1】
（新たな課題に対して、カリキュラムポリシーに基づき獲得した知識・技能・態度等を総合的に活用し、解決できる。）
・「伝わること」について理解し、デザインのコンセプトやプロセスを理論的に組み立てられる。

評価方法と評価観点

評価方法	配点合計	知識・理解力	応用力	コミュニケーション力	態度・志向性	創造力	合計
定期試験またはレポート試験							0%
小テスト、小論文							0%
グループワーク							0%
プレゼンテーション							0%
レポート、宿題	50%	15%	15%	20%	25%	25%	100%
授業での姿勢（ノート、質疑など）	10%	25%		25%	50%		100%
作品、パフォーマンス（実技、実演）	40%	15%	15%	20%	25%	25%	100%
その他1(具体的に：							0%
その他2(具体的に：							0%
	100%	16%	14%	20%	28%	22%	100%

教科書・参考書

・必要な資料、参考書は全てMoodleのコース内で告知します。

オフィスアワー

・オフィスアワーは前期授業期間中の月曜の５限目（17:45～19:30）に行っています。面談希望者は事前にkurachi@oecu.jpに連絡してください。

その他

・定期試験・レポート試験ではなく、試験期間中に最終課題を（レポート試験に相当）を課します。
・全国大学実務教育協会が定める「Webデザイン実務士」の資格取得には、この科目が必修科目になっています。
・Moodleに授業毎の資料が公開されていますので、事前学修をして授業に臨んでください。
・授業毎に課題提出による出席確認および採点・評価を行います。
・提出締切の翌週に授業内で講評を行い、解答例を提示します。
・MacOSの基本的な操作を事前に学修しておいてください。
・AdobePhotoshop、Illustrator、Dreamweaverを使用しますので、AdobeCCライセンスを更新しておいてください。
・Adobe Photoshop、Illustrator、Dreamweaverの基本的な操作（ツールの位置、メニューバーのコマンドの位置など）を事前に学修しておいてください。
・マウス、またはペンタブレットなどの入力デバイスを各自用意してください。

実務経験のある教員による授業科目

教員の実務経験：グラフィックデザイナー
内容：画像処理、図形処理、配色の学修を通して、ウェブ制作における情報デザインに関する実習を行う。

戻る