31240001

基礎ツール演習 II -d(Web)

2025年度2Q(前期)

演習

基礎

栗谷 幸助

実務家教員

1

2.00単位

金曜3限、金曜4限

このクラスの授業は【オンライン：ZOOMなど】にて実施をします。

テーマに沿ったページ制作をするためにどんなコンテンツが必要か、どんなレイアウトにすれば良いかなどを、各自 または グループで考えます。
必要に応じて、映像教材やネット検索を利用し、表現するための方法を模索しながら、Webブラウザで表示できるようになっていきます。
自主学習を中心に技術的なサポートをしていきます。

※ ソフトの使用には、Adobe ID（有料版）が必要です。
※ Photoshop、Illustrator、Figma、Visual Studio Codeなどを使用します。
※ その他、プラグインやソフトのインストール、Webツールへの登録などもあります。

※ オンライン授業のため、ZOOMにて 授業参加ができる環境が必須です。それは単にZOOMにて授業を視聴できるということではなく、「途切れのない快適な接続環境である」「グループディスカッションや作品発表があるため、音声でのやり取りができる環境である」「制作進捗や作品発表のためのスムーズな画面共有ができる環境である」ことを指しますので、ご承知おきください。

簡単な内容のWebページ制作を通して、HTMLの構造、CSSの役割、JavaScriptの導入方法などを体験し、Webの世界に興味を持ってもらう。
不明点・疑問点などは、映像教材を利用したり、ネットで調べたりし、関連情報や応用方法などを発見する楽しみを感じてもらう。
また、グループワークを通して、個人で解決出来ない問題をメンバーで共有、クリアする体験をしてもらう。

●課題点70%＋授業点30%の総合点で理解度を評価します。
・課題点は、提出作品の内容を評価します。
・授業点は、授業態度や学習への意欲、積極性、FSの回答状況などを評価します。

※ 大学の定める出席率70%を満たさない場合は、単位を付与することが出来ません。
※「毎回出席をした」「最終課題を提出した」ということだけで単位認定をすることはありません。

・試験方法　　課題提出（提出締切厳守）
・試験内容　　授業内で発表される最終課題資料の内容に基づき、指定されたテーマで作品を作成する
・提出方法　　Google Classroomに提出
・実施日　　　第8週までに実施
・提出〆切　　授業内で発表される最終課題資料を参照
・追試験、再試験の実施　　無　　※作品の再提出を指示する場合があります。

授業時に課題（簡単な内容のWebページ制作）についての説明を行ないます。

■ この授業の受け方について
・Web制作について
・自己紹介をしよう！（脳内マップ使用）

■ Web概論に関するグループワーク
・Webの舞台となるインターネットについての４つの項目についての知識探求。
・調べた内容の共有。

■ テーマの発表と企画案作成
・アイデアシートを描いてみよう。
・コンテンツ案を考えてみよう。

■ Webサイトの制作フローについて
・Webサイト制作の流れを理解しよう。
・Web制作における役割分担（職種）を理解しよう。

■ サイト制作におけるデザインやレイアウトに関するグループワーク
・Webデザインやレイアウトについての知識探求。
・調べた内容の共有。

■ HTMLに関するグループワーク
・HTMLについての知識探求。
・調べた内容の共有。

■ HTMLのマークアップ
・ページ制作に必要なファイル構成をみてみよう。
・素材原稿をHTMLにしてみよう。
　※資料をもとに使用するHTMLタグを調べてマークアップしてみよう。

■ 素材の収集
・必要な原稿や写真素材などをまとめてみよう。

■ 素材の収集②
・原稿をテキストデータにしよう。
・画像データを作成してみよう。

■ HTMLページを作成してみよう①
・原稿を入れてマークアップしてみる。
・画像を表示してみる。

■ HTMLページを作成してみよう②
・大まかな内容をブロック別けしてみよう。

■ CSSに関するグループワーク
・CSSについての知識探求。
・調べた内容の共有。

■ CSSでスタイル設定の基本を知ろう①
・CSSの役割を調べてみよう。
・ブロックに名前を付けてみよう。
・CSSで原稿を装飾してみよう。

■ CSSでスタイル設定の基本を知ろう②
・CSSでレイアウトにチャレンジ。
・横並びのレイアウトについて調べてみよう。

■ CSSでスタイルを設定してみよう①
・大まかなレイアウトを設定してみよう。

■ CSSでスタイルを設定してみよう②
・各パーツの装飾をしてみよう。

■ Webサイトでの動的表現について
・JavaScriptの概要を知ろう。
・CSSアニメーションの基本を知ろう。
・Webフォントを実装してみる。

■ 課題の制作指導
・Webブラウザで確認しながら、思い通りのレイアウトになるよう頑張ってみよう。

■ 作品発表会
・各作品をみてみよう！

・各種ソフト利用準備
・筆記用具

・各種ソフト利用準備
・筆記用具