Google I/O 報告会 2018 in 信州：マテリアルデザイン最新情報（2018年5月19日、GEEKLAB.NAGANO）

1. Material Design Update
Google I/O 報告会 2018 in 信州
2018/05/19
@nobsato
#io18jp #gdg信州 #glnagano

2. Today’s session agenda
今回のI/Oで発表されたマテリアルデザイン関連の最新情報です。詳細
は https://material.io を見ましょう！

3. For Design related I/O sessions...
今年のデザイン/マテリアルデザイン関連の
セッションは全部で16セッション。
詳しくは https://note.mu/nobsato

4. Nobuya Sato (@nobsato)
● Founder & CEO / Experience Designer
at Secret Lab, Inc.
● Google Product Design Expert (GDE)
● Google certified Sprint Master
● HCD-Net certified HCD Professional
● LEGO® SERIOUS PLAY® LSP Trained
Certified Facilitator

5. Google Developer Experts
UX/UI Experts and Product
Strategy Experts are now
Product Design Experts.

7. Introducing Material Theming, major update!
今回、Material Designの考え方が新しくなりました！

8. What is Material Design

9. Introduced at Google I/O 2014 as the universal design
language for the digital age.
© TechCrunch
“Google I/O：デザインでもAppleに対抗へ―ユニバーサル・
デザイン言語、Material Design発表”

10. Material Design is...
Material is the metaphor Bold, graphic, intentional Motion provides meaning

11. Material Design is for all.

12. Material Design
Material Design Material
Material Designというデザイン言語（思想）から
順応性の高いMaterialというデザインシステムへ！

13. Material Design

14. Material Design
Material is the metaphor Bold, graphic, intentional Motion provides meaning

15. Material Design
Flexible foundation Cross-platform
Details at the new Material.io (https://material.io/)

16. New/update on Maetrial Dseign at I/O 今回のI/Oで発表/更新された内容
● Material System
● Material Theming
● Material Tools
● Material Design Components (MDC)
● Material Codelabs
● Material Studies

17. Material System
Material is an adaptable design system -
backed by open-source code - that helps you
design and build beautiful digital experiences.
Constantly updated tools, resources, and
components are made specifically with
designers and developers in mind.

18. Material Theming

19. Material Theming

20. Material Theming

21. Material Theming
Round components
Cut components

22. Material Theming
Outlined icons
Two-tone icons
Sharp icons
Rounded iconsFilled icons

23. Material Tools
Material Theme Editor Gallery

24. Material Tools > Material Theme Editor
Material Theme Editor – Create
and customize your Material
theme

25. Material Tools > Material Theme Editor
Choose colors
色指定
アクセシビリティを
考慮可能
Set shape
形状設定、
オブジェクトやコー
ナー設定
Add types
書体設定、3書体ま
で追加可能
Explore icons
アイコン選択
5つの種類から

26. Material Tools > Gallery
Gallery – Easily share, organize,
and collaborate on product designs

27. Material Tools > Gallery
Share work
シェア機能
Organize projects
リビジョン管理
Get feedback
コメント機能
Implement
pixel-perfect UI
実装への橋渡し
Inspect Mode追加
iOS, Android, Flutter, wehへの
数値吐き出し、MDCへリンク

28. Material Tools > Gallery
Implement pixel-perfect UI
実装への橋渡し
Inspect Mode追加
iOS, Android, Flutter, wehへの数値吐き出
し、MDCへリンク

29. Material Tools > Icons

30. Material Tools > Icons
Filled Rounded Sharped
Outlined Two-tone

31. Material Tools > Color tool

32. Material Design Components (MDC)
Develop across
platforms

33. Material Design Components (MDC)

34. Material Design Components (MDC)
GitHub repos

35. Material Codelabs

36. Material Codelabs
Android - Java, Kotlin
iOS - Object-C, Swift
Web - CSS, HTML5
Flutter - Dart

37. Material Studies
Basil Shrine Rally
Crane Forthingtly Owl
Reply

38. Material Studies
Lyft
Extended FAB
Genius
Responsive layout grid
NPR
Cards
Pocket Casts
Motion
Zappos
Backdrop

39. MATERIAL DESIGN
material.io