36210001

Webサイトプロトタイプ演習

2025年度4Q(後期)

演習

Web

栗谷 幸助

実務家教員

1〜2

2単位

金曜3限、金曜4限

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

企画からWebサイトが出来るまでの工程と、ディレクター、デザイナー、エンジニアの必要な役割を理解する。そして、Webサイト構築を行なう上で重要となる「プロトタイプ」の理解を深め、精度の高いプロトタイプが作れるようになる。

※ プロトタイピングツールとして「Figma」を使用しますので、受講期間中は Figmaのアカウントを作成し、使用できる環境で授業に参加してください。

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

履修生のPCを使用し、Web制作フローにおいて重要な「プロトタイプ」の作成方法を学ぶことで、実践的なWebサイト構築スキルを修得する。Web業界でのディレクター、デザイナー、エンジニアのそれぞれの立ち位置や仕事内容を理解し、将来のキャリアに役立てる。

【学習目標】
（１）Webサイト制作の流れを理解する。
（２）プロトタイプの手法や制作方法を会得する。
（３）プロトタイピングツールを使えるようになる。

・ 平常点　２０％（授業態度や学習への意欲、授業アンケートの提出状況など）
・ 授業内の演習・課題への点数　３０％
・ 最終課題評価点　５０％
※　大学の定める出席率を満たさない場合は、単位を付与することができません。

以上をもって、トータルで成績評価を行ないます。「毎回出席をした」「最終課題を提出した」ということだけで単位認定をすることはありませんので、充分に理解をしておくこと。

・試験方法　課題の提出（提出締切厳守）
・実施日　第８週までに実施
・提出〆切　授業内で発表される最終課題資料を参照
・追試験の実施　無
・再試験の実施　無

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

授業内で発表される最終課題資料の内容に基づき、指定されたテーマでWebサイトプロトタイプを制作する。

・Web制作の流れ（企画、設計、構築、運用）について
・ワイヤーフレームについて
・既存サイトのワイヤーフレーム作成

・授業内演習フィードバック
・Webレイアウト事例調査および研究（１）

・授業内演習フィードバック
・Webレイアウト事例調査および研究（２）
・プロトタイピングについて
・ペーパープロトタイピング
・既存サイトのプロトタイプ作成

・授業内演習フィードバック
・プロトタイピングツール基礎（Figma）

・授業内演習フィードバック
・Figmaのさまざまな機能について（１）
・テーマを元にオリジナルのワイヤーフレーム、プロトタイプの作成

・Figmaのさまざまな機能について（２）
・プロトタイピングツールを使用したプロトタイプ制作（１）

・最終課題一次チェック（フィードバック）
・プロトタイピングツールを使用したプロトタイプ制作（２）

・本演習中に課された課題の発表 および 講評など

授業回によって、下記が必要です。
・筆記用具、ノート（紙）、ハサミなど
・PC（Figmaのアカウントを作成し、Figma が使用できるもの）

教材などについては、授業各回で配布します。教科書はありませんが、プロトタイピングツールの理解が難しい場合には、下記の参考書籍などを参照するとよいでしょう。

「作って学ぶFigma入門［完全版］　ステップ・バイ・ステップで身につくWeb/UIデザインの基本」
古尾谷 眞人 (著)　出版社：技術評論社
ISBN-10‎：4297146789
ISBN-13：978-4297146788