15/08/08 に行われた第8回G-Studyのライトニングトークで使用したスライドです。

1. 5分で
マテリアルデザインを読む
2015/08/08 第8回G-Study

2. 自己紹介
名前
吉田 剛 (ヨシダ ツヨシ)
職業
フロント寄りのデベロッパー (元Flash使い)
スマホUI講師
イカしてると思うブキ
わかばシューター
2

3. 3
マテリアルデザイン

4. 4
https://www.google.com/design/spec/material-design/introduction.html

5. 5
よし！読むか！

6. 6

7. 7
英語だ、、
専門用語多い、、

8. 8
訳したよ！

9. 章立て
9
６. コンポーネント
７. パターン
８. ユーザビリティ
９. リソース
１. マテリアルデザイン
２. マテリアル
３. アニメーション
４. スタイル
５. レイアウト

10. 10
5分じゃ無理！

11. 11
各章まとめました。
ニュアンス掴んで！
あとは各自で読んで、、、

12. 5分後に
マテリアルデザインを読む
2015/08/08 第8回G-Study

13. 13
さっそく、、
と行く前に、、

14. 14
※更新されます

15. 15
１.
マテリアルデザイン
Material design

16. １. マテリアルデザイン
16
• 新しいデザインルール
• 統一性・法則
• 様々な環境に適応可能
• 紙とインク

17. 17
２.
マテリアル
What is material?

18. ２. マテリアル
18
• 新しい概念の基本物質
• 厚さ一定で層状
• 縦横のみ伸び縮みする
• 色や画像は表面の模様

19. ２. マテリアル
19
• 新しい概念の基本物質
• 厚さ一定で層状
• 縦横のみ伸び縮みする
• 色や画像は表面の模様
紙
イ
ン
ク

20. ２. マテリアル
20

21. 21
３.
アニメーション
Animation

22. ３. アニメーション
22
• 簡潔で意味があること
• 自然であること
• 操作への適切な反応
• ワクワクは細部に宿る

23. ３. アニメーション
23
• 簡潔で意味があること
• 自然であること
• 操作への適切な反応
• ワクワクは細部に宿る
← 第7回G-Study
“動き”を作るポイント

24. 24
http://cda244.com/2015/01/11-505/

25. 25
8まで飛びます
4∼7は後ほど

26. 26
８.
ユーザビリティ
Usability

27. ８. ユーザビリティ
27
• アクセシビリティ
• ローカライズ

28. 28
4∼7は
決まり事・ルール
が続きます

29. 29
４.
スタイル
Style

30. ４. スタイル
30
マテリアルデザインを
構成する以下要素のルール
色使い・アイコン・画像・文字・文章

31. ４. スタイル
31

32. 32
５.
レイアウト
Layout

33. ５. レイアウト
33
色々な環境でマテリアル
デザインを実現する基本
ルール
単位・構造・可変 etc…

34. ５. レイアウト
34

35. 35
６.
コンポーネント
Components

36. ６. コンポーネント
36
各パーツ説明と決まり事
ボタン・テーブル・ダイアログ・
タブ・テキスト入力 etc…

37. ６. コンポーネント
37

38. 38
７.
パターン
Patterns

39. ７. パターン
39
よく使われる要素や画面、
シーンのパターン
エラー表示・起動画面・検索・
スクロール・データ形式 etc…

40. ７. パターン
40

41. 41
９.
素材
Resources

42. ９. 素材
42
制作に役立つ素材を用意
しています
カラーパレット・フォント・
テンプレート・アイコン etc…

43. 43
以上。

44. 44
ニュアンス掴んだ？

45. 45
さぁ！読もう！
ありがとうございました

46. 46
おまけ

47. 47
Material Design Lite

48. 48
http://www.getmdl.io/