Webデザイン演習

講義概要

下記サイトにリンクされた動画YouTube（ナレーション付き）や教材を視聴し自ら決めたWebサイトのテーマに沿った作品を、前半と後半で計2回の課題提出を実施します。

評価方法は2つの課題提出によって決める。下記スケジュールは随時更新をおこなっていきます。注意してください

（科目の概要）

Webデザインとは、単なる見かけのデザインだけを指すのではなく優れたHPの内容全般を設計（デザイン）する事を意味する。
本講義では魅力あるHPを目指し,WEBサイトを「自ら作るもの」としてとらえられるように既存サイトの背景・文法を紹介し、そこからWEBサイトにおける表現技法や制作技法を学ぶ。
また,この科目の習得によってインターネット上での自己表現やプレゼンテーション能力の向上を図る。

評価方法

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サンプル）
1. クリック Webデザイン演習向け　YouTube再生リスト　　
2. クリックフリーソフトのGIMP（画像処理ソフト）再生リスト
3. （Photoshopの代替えGIMP基本操作）（DreamweaverCS4とGIMP連携）
4. 001（Photshop基本の基本操作）
5. 001-1（ソフトの操作に役に立つショートカットキーの基本）
6. 00（DreamweaverとPhotoshopの基本的流れ①①）
7. 01（DreamweaverとPhotoshopの基本的流れ①）
8. 02（Dreamweaver画像挿入とデータ管理）
9. 03（HTMLの基礎とCSSについて基礎の基礎）
10. 04（シンプルWebテンプレによる制作,Photosho画像処理スタンプ機能と明るさ調整）
11. 05（新しいWebテンプレの続き。。背景画像のくりかえし貼り付け ）
12. 06（⑤の続き。Webページの下の画像（緑の印）を繰り返し貼り付ける ）
    1. * Photoshop操作マニュアル紹介サイト（外部）

 

第3講【Web全体の基礎知識／HTML(XHTML)の基本、Webページ作成の手順　Web設計と配色・バランス】

• HTMLの基礎　画像の編集　Web全体の構成と編集
• HTMLを学ぶ基礎の基礎データ
• 07　（Photoshopで画像処理,解像度,画像の部分選択「コラージュ（画像合成）方法」）
• 08　（01の関連テンプレ！このメニュー色などを変えたいができない！解決策操作 ）
• 09　（Webサイトで使用するファイル名とダメなファイル名について！画像ファイルJPG,PNG,GIFの違い ）
• 10　（超シンプルテンプレート操作。文字タイトルを加工する方法など ）
  • グループテーマ決定
  • 2023年第1回Webテーマ2限３限
  • 参考サイト　CSSの基礎（スタイルシート）
  • 外部サイト
  • とほほのスタイルシート入門、　WEB for Beginner作成支援　（banban）
  • CSSの基礎
  • カラム/ヘッダー/フッターを学ぶ基礎の基礎データ
  • ゼミ生によるオリジナルＷＥＢサイトサンプルデータ
  • Ｗｅｂサンプルデータ（トップ画像が大きなサイト・ブラウンベージュ）（全てのページあり）
  • Ｗｅｂサンプルデータ（シンプルなグリーンサイト）（全てのページあり）
  • Ｗｅｂサンプルデータ（青を基調にしたシンプルサイト）（全てのページあり）
  • Ｗｅｂサンプルデータ（シンプルサイト）（全てのページあり）

    第4講【Webサイトの装飾・レイアウトの管理に有用なCSSの基礎知識 】

    • WEB制作　初級編
    • Photshop操作（画像処理、アルファーチャンネル、背景透明化）
    • Dreamwever基礎参考サイト
    • CSS基礎用語　「幅、高さ　背景　罫線」「余白　レイアウト」「フォント　リスト　テーブル」
    • 配布プリント

    第5講【CSS 情報の意味構造と表現のデザイン（Dreamweaver基礎1）】

    • Ｗｅｂ画像編集（Photoshopを使用した、クイックマスクと透明画像を扱う方法）サンプルデータ 　
    • このサンプルをダウンロードしてください。実際の画像張替え、文字入れ替え演習を行います
    • フォトレタッチ　Photoshopを使用した中級編　サンプルデータ
    • 　12　（文字の色変えたい。うまく変えられない時）

    第6講【第一回課題制作の評価について】採点と総評

     

  • 第7講　2023年5月26日(金～6月2日【第1回Webサイト発表と採点】

    • ●2限クラス1回目の課題評価
    • 授業内で各自のPCにてWeb作品を表示させて採点をおこなう
    • 作品内容,担当役割,工夫した点、見てもらいたいところなどを述べる！）
    • ●3限クラス1回目の課題評価
    • 授業内で各自のPCにてWeb作品を表示させて採点をおこなう
    • 作品内容,担当役割,工夫した点、見てもらいたいところなどを述べる！）

    第8講　後半【課題制作２に入ります。CSSとHTMLの連携】

    • 最終課題、単独制作、グループでの制作
    • テーマのっ選定！（課題1のブラッシュアップ作品でもOK当然、新規制作OK）　
    • ４ページ以上作成すること！表現は自由（JavaScriptやスマホ向けサイトでもOK)
    • CSSの基礎
    • カラム/ヘッダー/フッターを学ぶ基礎の基礎データ (ダウンロード)
    • 後半　課題サイトのテーマ決定
    • 10種類のテンプレート！（前半と同じもの)
    • 過去の 第2回Webテーマ2限 過去の 第2回Webテーマ3限

    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講【最終課題発表会】採点と総評

  • 2023年　第2回課題　7/21～7/28　評価と発表！
  • ●第2回最終の課題について　
  • 授業内でWeb作品を表示して評価をおこなう
  • （作品内容,担当役割,工夫した点、見てもらいたいところなどを述べる！）

  • 第15講【最終課題の続き　考察　まとめ】

    • 【課題作品についての評価と考察】