授業内容・計画（詳細）の情報

ページを読み終えましたら、ブラウザを終了させてください。

【基本情報】

2018年度	春学期

授業科目名	マルチメディアコンピューティング

曜日　時限	火-4

テーマ	インタフェースデザインの知識と実務

キーワード	デジタルメディア	UIデザイン	デザインパーツ

【授業要旨または授業概要】

現代は紙媒体や映像、ホームページなど様々なメディアに囲まれながら生活する時代である。
本授業では、メディアの作成、理論の学習を通じインタフェースデザイン実務をトータルにマルチメディアコンテンツ作成を通じて実践的な手法を学ぶことを中心とする。
あわせて、情報システムのセキュリティについても理解する。
Webページのインタフェースデザインを実践を学習しながら制作の流れである企画→設計→組み立てを体感し、マルチメディアコンテンツ応用的技法の習得を目指す。
なお、授業を進めるにあたっては、授業前の内容確認と授業後の作成内容のチェックと練習を基本に、習得度を上げていく。

本科目は、『マルチメディアコンピューティング入門』の上位科目であるため、受講前にあるいは並行して『マルチメディアコンピューティング入門』を履修することが望ましい。

・ガイダンスにおいて、受講者を決定する。この日に遅刻・欠席した場合は、抽選に参加できない。

【学修の到達目標】

1. マルチメディアコンテンツ作成の仕組みと特徴を理解し、実践できる。【情報リテラシー力】
2. グラフィックデザインの基本を理解する。【情報リテラシー力、自ら考える力、創造と表現力】
3. レイアウトデザイン・インターフェイスデザインの基本を理解し、実践する。【情報リテラシー力、自ら考える力】
4. オーサリング(編集)の手法を学び、Webページの作成が行え、情報発信ができる。【情報リテラシー力、自ら考える力、創造と表現力】
上記の到達目標の評価基準については添付資料参照

添付ファイル：マルチメディア確認表.pdf

【授業計画】

◆スケジュール

第1 回：ガイダンス
　　　　　内容および履修上の注意についての説明を行う。
　　　　　＊希望者が多い場合は抽選を行いますので、履修希望者は必ず出席してください。

第2 回：グラフィックツールの操作復習
　　　　　Webデザインに特化したPhotoshopとIllustratorの使用法を再確認する。

第3 回：インタフェースデザイン１
　　　　　Webページの色々／Webページの情報やデザイン要素を観てみる。
　　　　　WebサイトUIデザインを制作してみる（ワイヤーフレーム）
　　　　　Photoshop、Illustratorでワイヤーフレームを制作する。

第4 回：インタフェースデザイン２
　　　　　WebサイトUIデザインを制作してみる（大まかなデザイン／カラー構成）
　　　　　シンプルなTOPページの作成を通して、制作の流れとデータの整理を学習する。

第5 回：インタフェースデザイン３
　　　　　WebサイトUIデザインを制作してみる（フォント／メインヴィジュアル／ロゴ・アイコンの制作）
　　　　　テーマに合わせたデザインパーツの制作を行う。

第6 回：インタフェースデザイン４
　　　　　WebサイトUIデザインを制作してみる（バナーの制作[中間課題]／詳細なデザイン）
　　　　　テーマに合わせたデザインパーツの制作を行う。

第7 回：動的要素を試す　LINEアニメーションスタンプの作成１（Animate）
　　　　　アニメーションスタンプの作成ガイドライン

第8 回：動的要素を試す　LINEアニメーションスタンプの作成２（Animate）
　　　　　Animateで動きをつける。

第9 回：インタフェースデザイン５
　　　　　WebサイトUIデザインを制作してみる（詳細なデザイン）
　　　　　テーマに合わせたデザインパーツとページの制作を行う。

第10 回：インタフェースデザイン６（Dreamweaver）
　　　　　WebサイトUIデザインを制作してみる（詳細なデザイン／画像アセット／コーディング事例）
　　　　　画像の書き出し方法やコーディングに便利な使い方を学習する。
　　　　　コーディングに落とし込みと調整。

第11 回：WebページのUIデザインの課題制作１
　　　　　ワイヤーフレーム（レイアウト）

第12 回：WebページのUIデザインの課題制作２
　　　　　パソコン閲覧時のデザイン（組み立て）

第13 回：WebページのUIデザインの課題制作３（Dreamweaver）
　　　　　コーディングに落とし込み（完成）

第14 回：課題制作とまとめ

◆予習・復習

第1 回：ガイダンス
　　　　　授業前：　シラバスを読んで確認しておく。
　　　　　授業後：　ガイダンスの内容から、次回以降の授業の準備と予習。

第2 回：グラフィックツールの操作復習
　　　　　授業用のサイトからPhotoshopとIllustratorの内容について確認する。
　　　　　授業後：　授業で試したPhotoshopとIllustratorの基本の使い方の復習。

第3 回：インタフェースデザイン１
　　　　　授業前：　普段閲覧しているWebページのレイアウトを確認してみる。
　　　　　授業後：　長方形で構成するワイヤーフレームの作成の復習。

第4 回：インタフェースデザイン２
　　　　　授業前：　授業用のＷｅｂページの設計について確認する。
　　　　　授業後：　授業で試したＷｅｂページの設計の内容を整理する。

第5 回：インタフェースデザイン３
　　　　　授業前：　授業用のＷｅｂページの制作について確認する。
　　　　　授業後：　授業で試したＷｅｂページの制作の内容の練習。

第6 回：インタフェースデザイン４
　　　　　授業前：　授業用のデザインパーツの制作について確認する。
　　　　　授業後：　授業で試したデザインパーツの制作の内容の練習。

第7 回：動的要素を試す　LINEアニメーションスタンプの作成１（Animate）
　　　　　授業前：　下絵をもとにイラストを描く。
　　　　　授業後：　スタンプ用のイラストを描く。

第8 回：動的要素を試す　LINEアニメーションスタンプの作成２（Animate）
　　　　　授業前：　イラストの動きを考える。
　　　　　授業後：　アニメーションの書き出しを試す。

第9 回：インタフェースデザイン５
　　　　　授業前：　授業用のサイトからデザインパーツの組み立ての内容について確認する。
　　　　　授業後：　授業で試したWebページの書き出しの練習。

第10 回：インタフェースデザイン６（Dreamweaver）
　　　　　授業前：　授業用のサイトからDreamweaverの内容について確認する。
　　　　　授業後：　授業で試したDreamweaverでの編集の練習。

第11 回：WebページのUIデザインの課題制作１
　　　　　授業前後：　課題Webページを設計する。

第12 回：WebページのUIデザインの課題制作２
　　　　　授業前後：　課題Webページのパーツを作成する。

第13 回：WebページのUIデザインの課題制作３（Dreamweaver）
　　　　　授業前後：　課題Webページの完成に向けての作業。

第14 回：課題制作とまとめ
　　　　　授業前後：　完成した課題Webページの最終調整をする。

◆集中授業の期間

【履修上の注意点】

・受講前にあるいは並行して『マルチメディアコンピューティング入門』を履修することが望ましい。
・授業内容に即した課題やレポートの作成を課す。

【成績評価の基準および方法】

出席,授業態度：20％、中間課題：20％、課題作品の企画内容：10％、完成課題作品：50％の内容評価で行う。規定により、成績発表前に、担当教員に対して点数や成績を問い合わせても回答できない。

【教科書・参考書】

区分	書名	著者名	発行元	定価
参考文献	WebデザインのためのPhotoshop+Illustratorテクニック	瀧上園枝	エクスナレッジ	2592 円
参考文献	モノヅクリノカタチ		東海大学出版会	1620 円

【その他の教材】

資料等は、適宜プリント（もしくは電子ファイル）を配布する。

【担当教員への連絡方法】

質問は、授業時および下記の電子メールアドレスで受け付ける。
　kei2@tokai-u.jp　木田
メール本文先頭に，学生証番号・氏名・授業名を明記すること。

PAGE TOP