36310002

Webデザイン演習 I

2025年度2Q(前期)

演習

Web

塩谷 正樹

実務家教員

2〜3

2.00単位

金曜3限、金曜4限

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

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

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

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

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

◆ 課題点 70% + 授業点 30% の総合評価

- 課題点（70%）：制作における提出物、宿題、作品の完成度を評価  
- 授業点（30%）：評価員による作品の評価点、および「初展」用の納品データを評価

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

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

◆ 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版のデザインチェック  
- デザインのフィードバック  
- 提出物の確認および「初展」用提出データの作成手順の案内

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

・筆記用具（消せるボールペンがあると良い）
・Adobe ID（学生ライセンス）
・Figmaアカウント（学生ライセンス）

◆ 映像教材およびプリントを使用

大学のslack、またはQ&Aから担当教員に連絡をしてください。