実践して学ぶデザインの要素 by Life is Tech ! 2015/4/20 @ TECH LAB PAAK http://techlabpaak.com/events/480

2. 金澤直毅 Naoki Kanazawa
1982
WEB & GRAPHIC
Rikkyo Univ. > Design Company > Instructor > Freelance > Life is Tech !
life-is-tech.com
DESIGNER
designless.net

7. SUMMER CAMP 2015 中高生向け IT & プログラミングキャンプ

8. TECH LAUNCH AUDITION 中学生・高校生・学生のための起業・開発支援オーディション

9. HATSUNE MIKU ONEDAY クリプトン・フューチャーメディア × Life is Tech !
illustration by iXima
© Crypton Future Media, INC. www.piapro.net

10. Be Startup
Be Startup 中学生・高校生のための起業体験プログラム

11. Code Girls 女子中学生・高校生のための IT ワークショップ

12. TECH for TEACHERS 先生に、最先端の「情報」の授業を。

13. Life is Tech ! Singapore シンガポール支社

14. どんなデザインも
要 素 の 組 み合 わ せ

15. 組 み合 わ せ 方 デザインの 原 則
http://lit.sh/design20150318

16. １. デザインの要素
２. フォントと色
３. アイコン実践
Menu

17. １．デザインの要素

18. 要 素を知る
Step1

19. 成り立たせているもの
「全体」の中の「部分」
要 素

20. 代 表 的 な デ ザ イン の 要 素
形
文字
空 間
色線
質感

21. 形
S H A P E

22. 形 の 役 割
物体
領域

23. 線
L I N E

24. 線 の 役 割
分割
方向
輪郭

25. 空 間
S P A C E

26. 空 間 の 役 割
２次元
３次元
図と地

27. 文 字
A あ 亜
T Y P O G R A P H Y

28. 文 字 の 役 割
言語
情報

29. 質 感
T E X T U R E

30. 質 感 の 役 割
素材
模様

31. 色
C O L O R

32. 色 の 役 割
光
印象
文化

33. Step2
要 素に分 解 する

34. lit.sh/design0420
Materials

35. 要 素 に分 解 せよ
WORKSHOP

36. 形
空 間
色

37. Step3
必 要な要 素を見 極める

38. 大きさ・配置はそのままでデザインせよ
WORKSHOP
世界で一番、ココロ躍る夏を。
さあ、一緒に始めよう。
冒険的で、刺激的で、ちょっぴり切ない夏を。
全力で、疾走する数日間を。
Life is Tech ! SUMMER CAMP が
もうまもなく始まります。
PRE ENTRY
SUMMER CAMP 2015
500pt プレゼント！

39. 世界で一番、ココロ躍る夏を。
さあ、一緒に始めよう。
冒険的で、刺激的で、ちょっぴり切ない夏を。
全力で、疾走する数日間を。
Life is Tech ! SUMMER CAMP が
もうまもなく始まります。
PRE ENTRY
SUMMER CAMP 2015
500pt プレゼント！

40. 世界で一番、ココロ躍る夏を。
さあ、一緒に始めよう。
冒険的で、刺激的で、ちょっぴり切ない夏を。
全力で、疾走する数日間を。
Life is Tech ! SUMMER CAMP が
もうまもなく始まります。
PRE ENTRY
SUMMER CAMP 2015
500pt プレゼント！

41. 世界で一番、ココロ躍る夏を。
さあ、一緒に始めよう。
冒険的で、刺激的で、ちょっぴり切ない夏を。
全力で、疾走する数日間を。
Life is Tech ! SUMMER CAMP が
もうまもなく始まります。
PRE ENTRY
SUMMER CAMP 2015
500pt プレゼント！

42. 全 体は
部 分の 総 和より
大きい
Point

46. Google
ゲシュタルト心理学

47. ２．フォントと色

48. フォント
書 体＋ファミリー＋背 景
= に お い

49. フォントファミリー
Avenir Next Ultra Light
Avenir Next Regular
Avenir Next Medium
Avenir Next Demi Bold
Avenir Next Bold
Avenir Next Heavy

50. 小塚ゴシック Pro EL
小塚ゴシック Pro L
小塚ゴシック Pro R
小塚ゴシック Pro M
小塚ゴシック Pro B
小塚ゴシック Pro H
フォントファミリー

51. フォント の 背 景
歴史
コーポレート・ロゴ
ユニバーサル・デザイン

52. うす いフォント
Helvetica Neue Ultra Light
Avenir Next Regular
ヒラギノ角ゴ Pro W3 Times

53. か お るフォント
Futura
Gill Sans
Didot
DIN Condensed Bold
游ゴシック Bold

54. つ よ いフォント
TrajanIMPACT
Copperplate
���fino勘亭流

55. 色 相＋ 彩 度＋明 度
= トーン
色

56. ライトト ーン

57. ダ ルト ーン

58. ビ ビッドト ーン

59. ビ ビッドト ーン
rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255)

60. ３．アイコン実践

61. 正 円の みを使って
「チャットアプリ」の
アイコンをデザインせよ
WORKSHOP

62. Example

63. 線・円・C（文字 ) を使って
「時計アプリ」の
アイコンをデザインせよ
WORKSHOP

64. Example
C

65. 円・矩形・O（文字 ) を使って
「食」をテーマとするアプリの
アイコンをデザインせよ
WORKSHOP

66. Example
O

68. Design?

69. Books

70. Books
ポール・ランド、デザインの授業
ポール・ランドのデザイン思想
教育スケッチブックby パウル・クレー

71. RELATIONSHIPBETWEEN FORM & CONTENT
by Paul Rand
Design?

72. 洞 察 力
要 素を知り、 分 解し、 見 極める

73. Thankyou!

74. 19:00 - 21:3019:00 - 21:30
SHIBUYASHIBUYA
presented bypresented by
T E C H L A B PA A K
デザインの 要 素
実 践して 学 ぶ
0420