36310003

Webデザイン演習 I

2025年度2Q(前期)

演習

Web

栗谷 幸助

実務家教員

2〜3

2.00単位

金曜5限、金曜6限

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

Webデザインの制作工程を体験しながら、企画から完成までを行います。
Figmaの基本操作およびWebページのデザイン方法については、映像教材を活用して学習します。
主に Figma を使用し、素材制作の際には Photoshop、Illustrator も使用します。

※ 映像教材の範囲については、別途お知らせします。
※ 課題制作に関して、御茶ノ水周辺での資料収集や取材を各自で行う必要があります。

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

【展示対象科目】
本科目は展示対象科目のため授業課題や制作物を１２月実施予定の『初展』にて展示します。
『初展』の概要ついては、別途デジキャンで配信されているお知らせを確認してください。

この科目では、Webデザインの工程を理解し、レスポンシブ対応を想定したデザイン制作を学びます。  
なお、「初展」の対象科目となるため、制作作品は「初展」へ出展します。  

・Webデザイン制作に必要な知識、調査、分析ができるようになる。  
・テーマに沿った企画、提案ができるようになる。  
・企画に沿ったWebページのデザインができるようになる。  
・発表と展示を通して、作品に対するデザインの意図やコンセプトを説明できるようになる。  
・他者の作品に対して、自分の感想を述べることができるようになる。  
・展示会用のデータ作成ができるようになる。

基礎ツール演習Ⅰの単位修得

課題点70%、授業点30%の総合点数で評価を行います。
・課題点は、ワークや提出作品で授業の理解度やデザイン性・作品の完成度などを評価します。
・授業点は、授業態度や学習への意欲、積極性、FSの回答状況などを評価します。

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

・試験方法　　課題の提出（提出締切厳守）
・制作テーマ　　都度指示します。
・諸注意　　著作権違反に該当する場合は単位を認めません。
・提出方法　　授業内で指示します。

※追再試はありませんが、提出課題の状態によっては、再提出を指示する場合があります。

テーマに沿ったWebページのデザイン
- 企画書の作成
- Webデザイン（desktop版データ作成）
- Webデザイン（mobile版データ作成）
- Figmaファイル
- 「初展」用のデータシート

■ 課題内容の説明

■ Webページのレイアウト分析
・Webページのレイアウト、情報、デザイン要素の調査  
・デベロッパーツールや拡張機能を使用し、コンテンツの幅や配色、フォントなどを調べる方法を理解

■ Figmaの基本操作

■ 課題制作
・企画案のアイデア出しと情報整理  

■ 授業内課題
・企画書の作成

■ 課題制作
・企画案の発表

■ ワイヤーフレームの作成
・ペーパーワイヤーフレームの作成
・実在するWebページをペーパーワイヤーに起こし、ページ構成を確認
・ペーパーワイヤーを基にFigmaでワイヤーフレームを作成
・UI KITを活用したワイヤーフレーム制作の理解
・実在するWebページをトレースし、レイアウトの感覚を掴む

■ 授業内課題
・ワイヤーフレーム制作１（desktop）

■ Webデザイン制作
・シンプルなTOPページの作成を通じ、制作の流れとデータ整理を学習
・プラグインを活用し、実在するレイアウトを分析

■ 課題制作
・企画案の再チェック  
・ワイヤーフレーム制作チェック１（desktop）

■ 授業内課題
・情報・素材の収集

■ Webデザイン制作  
・各デザインパーツの役割とレイアウトの理解

■ 課題制作  
・ワイヤーフレーム制作２（mobile）

■ 授業内課題
・ワイヤーフレーム制作２（desktop＋mobile 完成）

■ 課題制作  
・ワイヤーフレームを基にデザイン制作１（desktop）  
・デザイン制作１（desktop版の制作）  

■ 授業内課題
・デザイン制作１（desktop版）

■ mobile版デザインの注意点  

■ 課題制作  
・デザイン制作２（desktop版）
・デザイン制作３（mobile版）

■ 課題制作  
・desktop版＋mobile版のデザインチェック  
・デザインのフィードバック  
・提出物の確認および「初展」用提出データの作成手順の案内

■ 作品講評会  
・課題作品の発表  
・評価員による作品の評価とアドバイス  
・アドバイスを基に作品のブラッシュアップ

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

映像教材や配布資料を使用します。