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の基礎知識 http://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

  • Adobe Muse CCの説明
  • Adobe Muse CCで出来ること
  • テーマの説明「自分のルーツ
  • 自分のルーツの素材制作

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サイトのデザイン研究

 

後期授業

1回目商品・ブランドのWebサイト制作1
Lesson 18 Muse CC の使い方 スクロール効果を利用したサイト
2回目商品・ブランドのWebサイト制作2
3回目商品・ブランドのWebサイト制作3
4回目商品・ブランドのWebサイト制作4
5回目商品・ブランドのWebサイト制作5
6回目商品・ブランドのWebサイト制作6
7回目商品・ブランドのWebサイト制作7
8回目商品・ブランドのWebサイト制作8
9回目商品・ブランドのWebサイト制作9
10回目商品・ブランドのWebサイト制作10
11回目商品・ブランドのWebサイト制作11
12回目商品・ブランドのWebサイト制作12
13回目商品・ブランドのWebサイト制作13
14回目商品・ブランドのWebサイト制作14

Pocket
LINEで送る

Return Top