Webデザイン演習
講義概要
（科目の概要）
Webデザインとは単なる見かけのデザインだけを指すのではなく優れたHPの内容全般を設計（デザイン）する事を意味する。
本講義では魅力あるHPを目指し,WEBサイトを「自ら作るもの」としてとらえられるように既存サイトの背景・文法を紹介し、そこからWEBサイトにおける表現技法や制作技法を学ぶ。
また,この科目の習得によってインターネット上での自己表現やプレゼンテーション能力の向上を図る。
評価方法
2回の課題作成の提出により講義の理解度を判断する
●自ら決めたWebサイトのテーマに沿ったWeb作品を、前半と後半で計2回の課題提出を実施します。
●評価方法は2つの課題提出によって決める。
●下記スケジュールは随時更新をおこなっていきます。注意してください。
課題提示
第1回課題制作テーマ決定、オリジナル写真収取,Ｗｅｂサイト用テンプレート活用
講義計画
第1講[授業の全体概要説明とDreamweaverについて]
- スマホでの写真素材が重要（テーマを決め,それに従った素材写真）
- パソコンへ取り込むにはいくつか方法があります
①USBケーブルで繋ぐ②クラウドからダウンロードする ③アプリから連携（Googleフォトなど） 必読！Dreamweverの 教材サイト
第2講[画面構成とレイアウト （基礎レイアウト練習）]
- 名刺作成(Adobe illustratorを操作）
- イラストレーターサンプル 画像１
- 補足 Brackets（Win版）Google Web Designer フリーWeb制作ソフト
- Figama UIデザインをWebブラウザー操作できるソフト
- サンプルを使ったDreamwever操作
- Webサイト作業の流れ図 資料
- 0-サンプル 03_03（クリックして解凍）
- 1-サンプル Webテンプレート（2つのWebサンプル）
- 2-サンプル オリジナル画像（自由使用可写真）
- 3-サンプル Webテンプレート（背景黒の店Web）
- 4-サンプル Webテンプレート（9つのWebサンプル）
クリック Webデザイン演習向け YouTube再生リスト クリックフリーソフトのGIMP（画像処理ソフト）再生リスト001（Photshop基本の基本操作）001-1（ソフトの操作に役に立つショートカットキーの基本）00（DreamweaverとPhotoshopの基本的流れ①①）01（DreamweaverとPhotoshopの基本的流れ①）02（Dreamweaver画像挿入とデータ管理）03（HTMLの基礎とCSSについて基礎の基礎）04（シンプルWebテンプレによる制作,Photosho画像処理スタンプ機能と明るさ調整）05（新しいWebテンプレの続き。。背景画像のくりかえし貼り付け ）06（⑤の続き。Webページの下の画像（緑の印）を繰り返し貼り付ける ）
第3講[Web全体の基礎知識/HTML(XHTML)の基本.Webページ作成の手順.Web設計と配色・バランス]
- HTMLの基礎 画像の編集 Web全体の構成と編集
- HTMLを学ぶ基礎の基礎データ
- 07 （Photoshopで画像処理,解像度,画像の部分選択「コラージュ（画像合成）方法」）
- 08 （01の関連テンプレ！このメニュー色などを変えたいができない！解決策操作 ）
- 09 （Webサイトで使用するファイル名とダメなファイル名について！画像ファイルJPG,PNG,GIFの違い ）
- 10 （超シンプルテンプレート操作。文字タイトルを加工する方法など ）
第4講[Webサイトの装飾・レイアウトの管理に有用なCSSの基礎知識]
- WEB制作 初級編
- Photshop操作（画像処理、アルファーチャンネル、背景透明化）
- Dreamwever基礎参考サイト
- CSS基礎用語 「幅、高さ 背景 罫線」「余白 レイアウト」「フォント リスト テーブル」
- 配布プリント
- 【課題作品についての評価と考察】
- グループテーマ決定
- 2023年第1回Webテーマ2限３限
- 参考サイト CSSの基礎（スタイルシート）
- 外部サイト
- とほほのスタイルシート入門、 WEB for Beginner作成支援 （banban）
- CSSの基礎
- カラム/ヘッダー/フッターを学ぶ基礎の基礎データ
- ゼミ生によるオリジナルＷＥＢサイトサンプルデータ
- Ｗｅｂサンプルデータ（トップ画像が大きなサイト・ブラウンベージュ）（全てのページあり）
- Ｗｅｂサンプルデータ（シンプルなグリーンサイト）（全てのページあり）
- Ｗｅｂサンプルデータ（青を基調にしたシンプルサイト）（全てのページあり）
- Ｗｅｂサンプルデータ（シンプルサイト）（全てのページあり）
第5講[CSS 情報の意味構造と表現のデザイン（Dreamweaver基礎1)]
- Ｗｅｂ画像編集（Photoshopを使用した、クイックマスクと透明画像を扱う方法）サンプルデータ
- このサンプルをダウンロードしてください。実際の画像張替え、文字入れ替え演習を行います
- フォトレタッチ Photoshopを使用した中級編 サンプルデータ
- 12 （文字の色変えたい。うまく変えられない時）
第6講[第1回課題制作の評価について]採点と総評
机上にて第1回作品を個々のPC画面作品を表示し採点
第7講 2024年5月31日(金)[第1回Webサイト発表と採点]
- ●2限クラス1回目の課題評価
- 授業内で各自のPCにてWeb作品を表示させて採点をおこなう
- 作品内容,担当役割,工夫した点、見てもらいたいところなどを述べる！）
- ●3限クラス1回目の課題評価
- 授業内で各自のPCにてWeb作品を表示させて採点をおこなう
- 作品内容,担当役割,工夫した点、見てもらいたいところなどを述べる！）
第8講 後半[課題制作２に入ります。CSSとHTMLの連携]
- 最終課題、単独制作、グループでの制作
- テーマのっ選定！（課題1のブラッシュアップ作品でもOK当然、新規制作OK）
- ４ページ以上作成すること！表現は自由（JavaScriptやスマホ向けサイトでもOK)
- CSSの基礎
- カラム/ヘッダー/フッターを学ぶ基礎の基礎データ (ダウンロード)
- 後半 課題サイトのテーマ決定
- 10種類のテンプレート！（前半と同じもの)
13 （何も無いところからWebページが作成HTML,CSSファイルできる）第9講[HTML.CSSサイト構築）1]
- ●第2回Webテーマ 2限 3限
- はじめてのCSS2 教材2
- Ｗｅｂ画像編集（Photoshopで、クイックマスクと透明画像を扱う方法）サンプルデータ
14（1ページ追加できる。Googleマップ貼り付け！アクセスページ完成！）第10講[HTML.CSSサイト構築 ）2]
- Adobe Dreamweaver：CSSコーディング CSSリファレンス：
- （1）CSSの用語集 リファレンス（別ウィンドウ）
- （2）CSS,HTMLレファレンス（別ウィンドウ）
第11講[動的なWebサイト構築]レスポンシブWebサイト
- フォトレタッチ 中級編 サンプルデータ
第12講[HTML/CSS3/JQuery/JabaScript]
- jQueryの サンプルデータ
- 画像がくるくる回る サンプルデータ
- Photoshop 文字の加工 （外部LINK）
- （おさらいのテンプレート)
- CSSを書く前の基本理念(外部サイト）
- 画像を回り込ませる方法（サンプルデータ）
- 動くWebデザインデザインアイデア帳（参照元 久保田,杉山,ソシム株）サンプル
- 15（おさらい！分割されたCSSの説明、画像の入れ替え、背景画像の入れ替えなど）
第13講【最終課題作成日】
- 16（ テキスト加工の方法。立体文字や文字に影をつけたり、カッコ良い文字に加工)
- Web作成のおさらい。注意点
第14講【最終課題発表会】採点と総評
- 2024年 第2回課題 7/21～7/28 評価と発表！
- ●第2回最終の課題について
- 授業内でWeb作品を表示して評価をおこなう
- （作品内容,担当役割,工夫した点、見てもらいたいところなどを述べる！）
第15講【最終課題発表会】採点と総評
- 【課題作品についての評価と考察】
- グループテーマ決定
- 2023年第1回Webテーマ2限３限
- 参考サイト CSSの基礎（スタイルシート）
- 外部サイト
- とほほのスタイルシート入門、 WEB for Beginner作成支援 （banban）
- CSSの基礎
- カラム/ヘッダー/フッターを学ぶ基礎の基礎データ
- ゼミ生によるオリジナルＷＥＢサイトサンプルデータ
- Ｗｅｂサンプルデータ（トップ画像が大きなサイト・ブラウンベージュ）（全てのページあり）
- Ｗｅｂサンプルデータ（シンプルなグリーンサイト）（全てのページあり）
- Ｗｅｂサンプルデータ（青を基調にしたシンプルサイト）（全てのページあり）
- Ｗｅｂサンプルデータ（シンプルサイト）（全てのページあり）