Ｗｅｂデザイン基礎演習 -Web Design Basics Practical-

担当教員・研究室 配当年次 学期 種別 単位数 授業形態 開講年度 ナンバリングコード
斎藤 一 122研究室
齋藤 健司 314研究室
1年 前期(前半) 選択 2 単位
演習（対面）
演習（対面）
2021 IMD101
アクティブラーニング
はい
授業概要
Webデザインとは，主にパソコンやスマートフォン向けのWebページをデザインすること指します。見た目を中心とするグラフィックデザインの要素を多く含む一方で，WebアプリケーションのUI（ユーザインタフェース）等，ユーザの操作に応じて表示が変化するような，インタラクティブなWebページへの対応も必要です。また，見栄えが良く，分かりやすいWebページをデザインするためには，Webデザインの基本的なルールや知識を学ぶ必要があります。本講義では，画像加工ソフトウェアやプロトタイピングツールを用いた，Webデザインの実習を通して，Webデザインの基本的なルールやレイアウトについて学びます。また，Webやスマートフォン用のアプリケーションのUIを意識した，デザインについても学びます。
授業における学修の到達目標
・Webデザインの基本的な工程やルールを理解する。
・画像加工ソフトウェア等を利用した基本的なWebデザインができるようになる。
授業計画
回数 授業、事前・事後学習 時間
1 事前学習 シラバスを読み，授業内容を把握する 2.0
授業 ガイダンス:
本講義の学習目的や実習の方法を説明する
事後学習 授業の内容を復習し，Webデザインのプロセスについて理解を深める 2.0
2 事前学習 Web教材「授業の準備と課題提出の方法」を事前に読んでおく 2.0
授業 実習の準備:
実習のプロセス（共有フォルダ，課題のアップロードの方法等）を説明する
事後学習 授業の内容を復習し，実習のプロセスを確認する 2.0
3 事前学習 Web教材「Webとは何か？」を予め読んでくる 2.0
授業 Webデザインのセオリー:
Webデザインの理論を外観する
事後学習 小テストを解答し，Webデザインの理論について理解を深める 2.0
4 事前学習 Web教材「画像加工ソフトウェアの基本」を予め読んでくる 2.0
授業 画像加工ソフトウェアの基本操作
事後学習 Web教材を読み返して，画像加工ソフトウェアの基本操作について復習をしておく 2.0
5 事前学習 Web教材「画像の補正」を予め読んでおく 2.0
授業 画像の補正:
画像加工ソフトウェアを使用した画像の補正方法について実習を行う
事後学習 制作したコピースタンプやレタッチ機能を使用した課題について，課題の題意に対して，適切に機能が使われていたのかを検討する。 2.0
6 事前学習 Web教材「図形を描く」を予め読んでおく。 2.0
授業 図形を描く実習を行う
事後学習 Web教材を読み直して，これまでに習ったソフトウェアの機能を確認する。 2.0
7 事前学習 Web教材「グラフィックデザインの原則」を予め読んでくる 2.0
授業 グラフィックデザインの原則：
グラフィックデザインの原則である，近接，整列，反復，コントラストについて説明する。
事後学習 小テストを解答し，グラフィックデザインの原則についての理解を深める 2.0
8 事前学習 Web教材「文字の入力」を予め読んでおく 2.0
授業 文字の入力：
文字を使った課題制作の実習を通して，フォントの選択や使用方法を理解する
事後学習 Web教材に示したURL等を参考に，デザインで使用するフォントの種類や用途について，理解を深める 2.0
9 事前学習 Web教材「シンプルなWebサイトのデザイン」を予め読んでおく 2.0
授業 シンプルなWebサイトをデザインする実習を行う
事後学習 自分の制作した課題と，作例を比較し，改善できる箇所等を検討する 2.0
10 事前学習 作成用の素材を確認し，デザインするWebページのイメージを考えておく 2.0
授業 園芸店のWebサイトのデザイン：
園芸店のWebサイトをデザインする実習を行う。
また、デザインした作品について、他の学生やＳＡと改善点がないか等のディスカッションを行う。
事後学習 実際の園芸店のサイトを調べ，自分の作成した作品との違いについて考察する 2.0
11 事前学習 Web教材「コーポレートサイトのデザイン」を予め読んでおく 2.0
授業 コーポレートサイトのデザイン：
コーポレートサイトをデザインする実習を行う。
また、デザインした作品について、他の学生やＳＡと改善点がないか等のディスカッションを行う。
事後学習 自分の制作した課題と，作例を比較し，改善できる箇所等を検討する 2.0
12 事前学習 プロの作例（Web教材に示したURL等）を参考に，オリジナルのデザイン案を考えておく 2.0
授業 オリジナルのコープレレートサイトのデザイン：
オリジナルのコープレレートサイトをデザインする実習を行う。
また、デザインした作品について、他の学生やＳＡと改善点がないか等のディスカッションを行う。
事後学習 プロの作例（Web教材に示したURL等）を参考に，自分の制作した課題の改善点がないかを検討する 2.0
13 事前学習 Web教材「スマートフォンサイトのデザイン」を予め読んでおく 2.0
授業 スマートフォンサイトのデザイン：
スマートフォンサイトをデザインする実習を行う。
また、デザインした作品について、他の学生やＳＡと改善点がないか等のディスカッションを行う。
事後学習 自分の制作した課題と，作例を比較し，改善できる箇所等を検討する 2.0
14 事前学習 プロの作例（Web教材に示したURL等）を参考に，オリジナルのスマートフォンサイトのデザイン案を考えておく 2.0
授業 オリジナルのスマートフォンサイトのデザイン：
オリジナルのスマートフォンサイトをデザインする実習を行う。
また、デザインした作品について、他の学生やＳＡと改善点がないか等のディスカッションを行う。
事後学習 プロの作例（Web教材に示したURL等）を参考に，自分の制作した課題の改善点がないかを検討する 2.0
15 事前学習 Web教材を復習しておく。また，オリジナルのサイトデザインを考えておく 2.0
授業 オリジナルサイトのデザイン：
これまでの実習の集大成として，オリジナルのサイトをデザインする実習を行う
事後学習 プロの作例（Web教材に示したURL等）を参考に，自分の制作した課題の改善点がないかを検討する 2.0
成績評価の方法およびその基準
次項の項目及び割合で標準評価基準に基づき総合評価する。
□試験：　　%　■小テスト：20%　□レポート：　%　■演習課題：80%　
□その他[ 　　　　　 ]
課題(試験やレポート等)に対するフィードバック方法
POLITE3を通じてコメント等をフィードバックします。
教科書
なし
参考書・Webサイト
北村　崇　著「世界一わかりやすい　Adobe XD｜UIデザインとプロトタイプ制作の教科書」技術評論社
グラフィックデザイン Illustrator & Photoshop，デジタルハリウッド，技術評論社，2015
デザイン入門教室 [特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)，坂本 伸二，SBクリエイティブ ，2015
単位習得が望ましい科目
なし
備考
課題（Webページのデザイン）を重視して評価をします。制作の過程も評価の対象としますので，途中まででしか出来上がっていない場合でも，課題は必ず提出（アップロード）するようにしましょう。
担当教員の実務経験
実務経験なし
close閉じる