Lecture Notes

2017年度 NDG Webデザイン授業

前期授業

デジタルグラフィックデザイン・テキストのダウンロード

1回目オリエンテーション/自己紹介

  • 授業の進め方や全体の学ぶこと、業界や就職に関する話
  • 自己紹介(10分で考えて、2分の自己紹介を行う)

Point自分の事を知らない相手にプレゼンテーションを行うので、相手を想定してどう伝わるのかを考える事。デザインと同じ。

情報発信の習慣を付けるための宿題

2回目プレゼンテーション1

  • 「好きな本やアーティストをプレゼンテーションする」をテーマにプレゼンテーションを考える
  • 紹介する候補を書き出す
  • 紹介するものを決定する
  • 紹介するものに関する情報を集める
  • 情報をまとめる

Point思い付きをすぐに形にするのではなく、情報を整理した上で戦略を練って構成を考える事。

3回目プレゼンテーション2

  • プレゼンテーションのストーリーを考える 制限時間3分
  • ストーリーに則ったデリバリー文を考える
  • プレゼンテーションに必要なスライドのラフスケッチを描く

4回目プレゼンテーション3

5回目プレゼンテーション4

  • スライドに使用する素材の準備(アイコン、画像、図版など)
  • スライドの制作

6回目プレゼンテーション5

  • プレゼンテーション

7回目Web HTML/CSSの基礎知識1
Memo
HTMLとCSSの基礎知識 https://jittodesign.org/page-11307/page-11312/

  • Brackets、Chromeのインストール
  • HTMLの基礎知識

Lesson 1 HTMLの基礎 1
Lesson 2 HTMLの基礎 2

8回目Web HTML/CSSの基礎知識2

    • CSSの基礎知識

Lesson 3 HTML/CSSの基礎知識 3

9回目MuseによるWebサイトの制作1

Museのテキストのダウンロード https://www.dropbox.com/s/jjbhb4s8nj2o83a/Muse_CC2017_text.pdf?dl=0

  • Adobe Muse CCの説明
  • Adobe Muse CCで出来ること
  • テーマの説明「自分のルーツ」「プロフィールサイト」「ポートレートサイト
  • 素材の準備

課題 アニメーションGIFの課題

10回目MuseによるWebサイトの制作2

  • MuseによるWebサイトの制作
  • 固定幅のWebサイト
  • サイトマップの作成
  • マスター設定
  • ヘッダーメニューの作成
  • ファビコンの設定
  • 仮サイトへのアップロード

Lesson 4 Museの使い方 基本編 Museの起動
Lesson 5 Museの使い方 基本編 サイトマップの作成
Lesson 6 Muse CC の使い方 基本編 マスターの設定 背景色の設定
Lesson 7 Muse CC の使い方 基本編 マスターの設定 ヘッダーの設定
Lesson 8 Muse CC の使い方 基本編 マスターの設定 メニューの作成
Lesson 9 Muse CC の使い方 基本編 マスターの設定 ファビコンの作成
Lesson 10 Muse CC の使い方 基本編 マスターの設定 仮サイトへのアップロード
Lesson 11 Muse CC の使い方 他のページへのハイパーリンクの設定
Lesson 12 Muse CC の使い方 リンクアンカーの挿入
Lesson 13 Muse CC の使い方 外部サイトへのハイパーリンクの設定
Lesson 14 Muse CC の使い方 ソーシャルウィジェットの利用

11回目MuseによるWebサイトの制作3

  • MuseによるWebサイトの制作

Lesson 15 Muse CC の使い方 サイズ調整の設定
Lesson 16 Muse CC の使い方 基本編 フッターメニューの設定

12回目MuseによるWebサイトの制作4

  • MuseによるWebサイトの制作

Lesson 17 Muse CC の使い方 ブレークポイントを追加してレシポンシブにする

13回目MuseによるWebサイトの制作5

  • Webサイトの発表

14回目MuseによるWebサイトの制作6

  • Webサイトのデザイン研究

Memo
Animate CCの使い方解説動画 https://jittodesign.org/library/page-11307/page-12250/

Lesson 18 Muse CC の使い方 スクロール効果を利用したサイト

 

後期授業

  1. Premiere Pro ムービー編集
  2. AfterEffects ムービー編集
  3. Character Animator キャラクター制作
  4. Muse ブランドのWebサイト制作

 

ブランドサイトに関して
  • 自分で所有している商品などのブランドのWebサイト
  • 写真やムービーの制作ができる商品

1回目ムービー編集(1)

  • ムービー撮影の基礎知識
  • Premiere Proの基本操作(1)

2回目ムービー編集(2)

  • Premiere Proの基本操作(2)

3回目ムービー編集(3)

  • 課題製作 デザイナーとしてのPV製作

4回目AfterEffects(1)

参考サイト

 

  • AfterEffectsのインタフェース
  • 新規コンポジション
  • ファイルの読み込み
  • レイヤーの作成
  • 簡単なモーションの制作

5回目AfterEffects(2)

  • 複数のモーション
  • グラフエディタ
  • モーションブラー
  • ウィグラー
  • モーションスケッチ

6回目AfterEffects(3)

  • ヌルオブジェクト
  • マスク
  • エフェクト
  • テキストアニメーション
  • プラグイン(Animation Composer 2)

課題の手引き https://www.dropbox.com/s/yuztc3gjmqp2b97/2017%E8%AA%B2%E9%A1%8C%E5%88%B6%E4%BD%9C%E3%81%AE%E6%89%8B%E9%A0%86.pdf?dl=0

7回目AfterEffects(4)

  • 3Dレイヤー
  • カメラレイヤー
  • ライトレイヤー

8回目商品・ブランドのWebサイト制作1
9回目商品・ブランドのWebサイト制作2
10回目商品・ブランドのWebサイト制作3
11回目商品・ブランドのWebサイト制作4
12回目商品・ブランドのWebサイト制作5
13回目商品・ブランドのWebサイト制作6
14回目商品・ブランドのWebサイト制作7

Pocket
LINEで送る

Return Top